@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 hosting is now active! 🖥️</h1>
    
    <p class="email-text">
        Your hosting plan has been activated and is ready to use. You can now start uploading files, 
        creating databases, and hosting your websites.
    </p>

    <div class="highlight-box">
        <p class="highlight-box-text">{{ $planName }}</p>
        <p class="highlight-box-subtext">Your hosting is live and ready</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;">Plan</span><br>
                    <strong style="color: #0f172a;">{{ $planName }}</strong>
                </td>
            </tr>
            @if (!empty($domainName))
            <tr>
                <td style="padding: 10px 0; border-bottom: 1px solid #e2e8f0;">
                    <span style="color: #64748b; font-size: 14px;">Domain</span><br>
                    <strong style="color: #0f172a;">{{ $domainName }}</strong>
                </td>
            </tr>
            @endif
            <tr>
                <td style="padding: 10px 0; border-bottom: 1px solid #e2e8f0;">
                    <span style="color: #64748b; font-size: 14px;">Activation Date</span><br>
                    <strong style="color: #0f172a;">{{ $activationDate }}</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">Active</span>
                </td>
            </tr>
        </table>
    </div>

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

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

    <p class="email-text" style="font-size: 14px;">
        <strong>Getting started:</strong> Access your control panel to manage files, databases, email accounts, and more.
    </p>
@endsection