@extends('mail.notifications.layout')

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

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

@section('content')
    <div class="highlight-box highlight-box-success">
        <p class="highlight-box-text">Domain Verified!</p>
        <p class="highlight-box-subtext">{{ $domain->host }} is now active</p>
    </div>

    <h1 class="email-title">Your Domain is Ready</h1>
    
    <p class="email-text">
        Great news! Your domain <strong>{{ $domain->host }}</strong> has been successfully verified 
        and is now fully active on Ladill.
    </p>

    <div class="email-details">
        <p class="email-details-title">What's Been Set Up</p>
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td style="padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <td width="32" valign="top">
                                <span style="display: inline-block; width: 24px; height: 24px; background-color: #dcfce7; border-radius: 50%; text-align: center; line-height: 24px; color: #166534;">✓</span>
                            </td>
                            <td>
                                <strong style="color: #0f172a;">DNS Management</strong><br>
                                <span style="color: #64748b; font-size: 14px;">Your DNS records are now managed by Ladill</span>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <td width="32" valign="top">
                                <span style="display: inline-block; width: 24px; height: 24px; background-color: #dcfce7; border-radius: 50%; text-align: center; line-height: 24px; color: #166534;">✓</span>
                            </td>
                            <td>
                                <strong style="color: #0f172a;">Email Ready</strong><br>
                                <span style="color: #64748b; font-size: 14px;">You can now create professional email addresses</span>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="padding: 12px 0;">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <td width="32" valign="top">
                                <span style="display: inline-block; width: 24px; height: 24px; background-color: #dbeafe; border-radius: 50%; text-align: center; line-height: 24px; color: #1e40af;">⏳</span>
                            </td>
                            <td>
                                <strong style="color: #0f172a;">SSL Certificate</strong><br>
                                <span style="color: #64748b; font-size: 14px;">Being provisioned automatically (usually within minutes)</span>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

    <p class="email-text">
        <strong>What's next?</strong> You can now:
    </p>
    
    <ul style="color: #475569; font-size: 16px; line-height: 1.8; padding-left: 20px;">
        <li>Create email addresses like <strong>hello@{{ $domain->host }}</strong></li>
        <li>Connect this domain to your website</li>
        <li>Manage DNS records from your dashboard</li>
    </ul>

    <p style="text-align: center; margin-top: 32px;">
        <a href="{{ $manageUrl }}" class="email-button">Manage Domain</a>
        <br>
        <a href="{{ $emailUrl }}" class="email-button-secondary" style="margin-top: 12px;">Create Email Address</a>
    </p>
@endsection