@extends('emails.layouts.main')

@section('title', 'Your Subscription Expires Soon')

@section('content')
    {{-- Salutation --}}
    <p style="font-size: 2.8rem; color: #000000; margin-top: 5px; margin-bottom: 18px; font-family: 'Readmore', Georgia, serif;">
        Hello, <b style="font-family: 'Readingful', Georgia, serif; font-weight: 600">{{ explode(' ', $user->name)[0] ?? $user->name }}</b>
    </p>

    {{-- Warning message --}}
    <div style="background-color: #fef3c7; border-left: 4px solid: #f59e0b; padding: 15px 20px; margin: 25px 0; border-radius: 4px;">
        <p style="font-family: 'Readmore', Georgia, serif; font-size: 1.8rem; color: #92400e; margin: 0;">
            <strong>  Your subscription expires in {{ $daysRemaining }} {{ $daysRemaining == 1 ? 'day' : 'days' }}</strong>
        </p>
    </div>

    {{-- Main message --}}
    <p style="font-family: 'Readmore', Georgia, serif; font-size: 1.8rem; color: #000000; margin-bottom: 20px;">
        Your Readingful subscription will expire on <strong>{{ $expirationDate }}</strong>. 
        @if($daysRemaining <= 3)
            After this date, your students will no longer be able to access their reading accounts.
        @else
            To ensure uninterrupted access for your students, please renew your subscription before this date.
        @endif
    </p>

    {{-- Renewal benefits --}}
    <p style="font-family: 'Readmore', Georgia, serif; font-size: 1.8rem; color: #000000; margin-bottom: 20px;">
        <strong>Continue enjoying:</strong>
    </p>
    <ul style="font-family: 'Readmore', Georgia, serif; font-size: 1.6rem; color: #333333; margin-left: 20px; margin-bottom: 25px;">
        <li style="margin-bottom: 8px;">Unlimited access to our entire library of stories</li>
        <li style="margin-bottom: 8px;">Student progress tracking and analytics</li>
        <li style="margin-bottom: 8px;">New stories added regularly</li>
        <li style="margin-bottom: 8px;">Dedicated teacher support</li>
    </ul>

    {{-- CTA button --}}
    <div style="text-align: center; margin-top: 35px; margin-bottom: 35px;">
        <a href="{{ $autoLoginUrl }}"
           style="background-color: #f59e0b; color: #ffffff !important; display: inline-block; font-size: 1.8rem; font-weight: 600; text-decoration: none; border-radius: 16px; padding-left: 28px; padding-right: 28px; align-content: center; height: 48px; font-family: 'Readingful', Georgia, serif;"
           onmouseover="this.style.backgroundColor='#d97706'"
           onmouseout="this.style.backgroundColor='#f59e0b'">
            Renew Now
        </a>
    </div>

    {{-- Special offer (if applicable) --}}
    @if($daysRemaining <= 3)
    <div style="background-color: #d1fae5; border-left: 4px solid #10b981; padding: 15px 20px; margin: 25px 0;">
        <p style="font-family: 'Readmore', Georgia, serif; font-size: 1.6rem; color: #065f46; margin: 0;">
            <strong>=¡ Tip:</strong> Renew for multiple months and save! Choose 6 months for 10% off or 12 months for 20% off.
        </p>
    </div>
    @endif

    {{-- Support info --}}
    <p style="font-family: 'Readmore', Georgia, serif; font-size: 1.6rem; color: #666666; margin-top: 30px;">
        If you have any questions about your subscription or need assistance with renewal, please contact us at 
        <a href="mailto:support@readingful.org" style="color: #2c78ff;">support@readingful.org</a>.
    </p>

    <p style="font-family: 'Readmore', Georgia, serif; font-size: 1.6rem; color: #666666;">
        We're here to help ensure your students can continue their reading journey without interruption.
    </p>
@endsection