@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">
        <p class="highlight-box-text">🎨 Website Created</p>
        <p class="highlight-box-subtext">{{ $website->name }}</p>
    </div>

    <h1 class="email-title">Your Website is Ready to Build</h1>
    
    <p class="email-text">
        Exciting! Your new website <strong>{{ $website->name }}</strong> has been created. 
        It's time to bring your vision to life with our easy-to-use website builder.
    </p>

    <div class="email-details">
        <p class="email-details-title">Website Details</p>
        <div class="email-details-row">
            <p class="email-details-label">Name</p>
            <p class="email-details-value">{{ $website->name }}</p>
        </div>
        @if($website->slug)
        <div class="email-details-row">
            <p class="email-details-label">Preview URL</p>
            <p class="email-details-value">{{ $website->slug }}.ladill.com</p>
        </div>
        @endif
        <div class="email-details-row">
            <p class="email-details-label">Status</p>
            <p class="email-details-value"><span class="status-badge status-info">Draft</span></p>
        </div>
    </div>

    <p class="email-text">
        <strong>Get started in 3 easy steps:</strong>
    </p>
    
    <div class="email-details">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td style="padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #4f46e5;">1.</strong> <strong style="color: #0f172a;">Choose a template</strong><br>
                    <span style="color: #64748b; font-size: 14px;">Start with a professionally designed template</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #4f46e5;">2.</strong> <strong style="color: #0f172a;">Customize your content</strong><br>
                    <span style="color: #64748b; font-size: 14px;">Add your text, images, and branding</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 12px 0;">
                    <strong style="color: #4f46e5;">3.</strong> <strong style="color: #0f172a;">Publish and go live</strong><br>
                    <span style="color: #64748b; font-size: 14px;">Share your website with the world</span>
                </td>
            </tr>
        </table>
    </div>

    <p style="text-align: center; margin-top: 32px;">
        <a href="{{ $editUrl }}" class="email-button">Start Building</a>
    </p>

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

    <p class="email-text-sm">
        Need inspiration? Browse our <a href="{{ config('app.url') }}/templates" style="color: #4f46e5;">template gallery</a> 
        for ideas and starting points.
    </p>
@endsection