@extends('mail.notifications.layout')

@section('email-header')
    @include('mail.partials.brand-header', ['brand' => 'hosting'])
@endsection

@section('email-footer')
    @include('mail.partials.brand-footer', ['brand' => 'hosting'])
@endsection

@section('content')
    <div class="highlight-box highlight-box-success">
        <p class="highlight-box-text">🔒 SSL Certificate Active</p>
        <p class="highlight-box-subtext">{{ $domain->host }} is now secure</p>
    </div>

    <h1 class="email-title">Your Site is Secure</h1>
    
    <p class="email-text">
        Your SSL certificate for <strong>{{ $domain->host }}</strong> has been successfully provisioned. 
        Your website is now accessible via HTTPS and visitors will see the secure padlock icon.
    </p>

    <div class="email-details">
        <p class="email-details-title">Certificate Details</p>
        <div class="email-details-row">
            <p class="email-details-label">Domain</p>
            <p class="email-details-value">{{ $domain->host }}</p>
        </div>
        <div class="email-details-row">
            <p class="email-details-label">Status</p>
            <p class="email-details-value"><span class="status-badge status-success">Active</span></p>
        </div>
        <div class="email-details-row">
            <p class="email-details-label">Expires</p>
            <p class="email-details-value">{{ $expiresAt ? $expiresAt->format('F j, Y') : 'Auto-renewing' }}</p>
        </div>
        <div class="email-details-row">
            <p class="email-details-label">Secure URL</p>
            <p class="email-details-value"><a href="{{ $websiteUrl }}" style="color: #4f46e5;">{{ $websiteUrl }}</a></p>
        </div>
    </div>

    <p class="email-text">
        <strong>What this means:</strong>
    </p>
    
    <ul style="color: #475569; font-size: 16px; line-height: 1.8; padding-left: 20px;">
        <li>All traffic to your site is encrypted</li>
        <li>Visitors see a secure padlock in their browser</li>
        <li>Better search engine rankings (Google prefers HTTPS)</li>
        <li>Certificate auto-renews before expiry</li>
    </ul>

    <p style="text-align: center; margin-top: 32px;">
        <a href="{{ $websiteUrl }}" class="email-button">Visit Your Secure Site</a>
    </p>

    <div class="email-divider"></div>

    <p class="email-text-sm">
        Your SSL certificate will automatically renew before it expires. No action is required from you.
    </p>
@endsection