@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')
    <h1 class="email-title">Your website is now live! 🚀</h1>
    
    <p class="email-text">
        Congratulations! <strong>{{ $website->name }}</strong> has been published and is now accessible to the world.
    </p>

    <div class="highlight-box">
        <p class="highlight-box-text">{{ $websiteUrl }}</p>
        <p class="highlight-box-subtext">Your website is live and ready for visitors</p>
    </div>

    <div class="email-details">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td style="padding: 10px 0; border-bottom: 1px solid #e2e8f0;">
                    <span style="color: #64748b; font-size: 14px;">Website Name</span><br>
                    <strong style="color: #0f172a;">{{ $website->name }}</strong>
                </td>
            </tr>
            <tr>
                <td style="padding: 10px 0; border-bottom: 1px solid #e2e8f0;">
                    <span style="color: #64748b; font-size: 14px;">URL</span><br>
                    <strong style="color: #0f172a;">{{ $websiteUrl }}</strong>
                </td>
            </tr>
            <tr>
                <td style="padding: 10px 0;">
                    <span style="color: #64748b; font-size: 14px;">Status</span><br>
                    <span class="status-badge status-success">Published</span>
                </td>
            </tr>
        </table>
    </div>

    <p style="text-align: center;">
        <a href="{{ $manageUrl }}" class="email-button">Manage Website</a>
    </p>

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

    <p class="email-text" style="font-size: 14px;">
        <strong>What's next?</strong> Connect a custom domain, set up analytics, or share your website on social media to start getting visitors.
    </p>
@endsection