@extends('mail.notifications.layout')

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

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

@section('content')
    <div class="highlight-box highlight-box-warning">
        <p class="highlight-box-text">Plan expiring soon</p>
        <p class="highlight-box-subtext">Woo Manager {{ $planLabel }}</p>
    </div>

    <h1 class="email-title">Your Woo Manager {{ $planLabel }} plan is expiring</h1>

    <p class="email-text">
        Your subscription ends soon. Renew to keep multiple stores, unlimited products, and Pro features.
    </p>

    <div class="email-details">
        <p class="email-details-title">Subscription</p>
        <div class="email-details-row">
            <p class="email-details-label">Plan</p>
            <p class="email-details-value">Woo Manager {{ $planLabel }}</p>
        </div>
        <div class="email-details-row">
            <p class="email-details-label">Expires</p>
            <p class="email-details-value">{{ $subscription->current_period_end?->format('F j, Y') ?? 'N/A' }}</p>
        </div>
        <div class="email-details-row">
            <p class="email-details-label">Days remaining</p>
            <p class="email-details-value"><span class="status-badge status-warning">{{ $daysRemaining }} days</span></p>
        </div>
    </div>

    <p style="text-align: center; margin-top: 24px;">
        <a href="{{ $renewUrl }}" class="email-button">Renew plan</a>
    </p>

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

    <p class="email-text-sm">
        If auto-renew is enabled and your wallet has enough balance, your plan may renew automatically on the expiry date.
    </p>
@endsection