@extends('emails.layout')

@section('content')

{{-- Icon --}}
<table cellpadding="0" cellspacing="0" role="presentation" style="margin:0 auto 28px;">
    <tr>
        <td style="width:52px;height:52px;background:#F0FDF4;border-radius:14px;text-align:center;vertical-align:middle;">
            <x-heroicon-o-check-badge style="width:24px;height:24px;stroke:#10B981;stroke-width:1.5;display:block;margin:14px auto;" />
        </td>
    </tr>
</table>

{{-- Title --}}
<h1 style="margin:0 0 8px;font-size:22px;font-weight:700;color:#111827;text-align:center;line-height:1.3;letter-spacing:-0.3px;">
    Abo erfolgreich aktiviert!
</h1>
<p style="margin:0 0 24px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
    Hallo {{ $user->name }}, dein <strong style="color:#111827;">{{ $plan }}</strong>-Plan ist jetzt aktiv.
</p>

{{-- Details card --}}
<div style="background:#F9FAFB;border:1px solid #F3F4F6;border-radius:12px;padding:20px 20px 16px;margin-bottom:28px;">
    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
            <td style="padding:6px 0;font-size:12px;color:#9CA3AF;width:130px;">Plan</td>
            <td style="padding:6px 0;font-size:13px;font-weight:600;color:#111827;">{{ $plan }}</td>
        </tr>
        <tr><td colspan="2" style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
        <tr>
            <td style="padding:6px 0;font-size:12px;color:#9CA3AF;">Abrechnungszeitraum</td>
            <td style="padding:6px 0;font-size:13px;color:#374151;">{{ $billing === 'yearly' ? 'Jährlich' : 'Monatlich' }}</td>
        </tr>
        <tr><td colspan="2" style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
        <tr>
            <td style="padding:6px 0;font-size:12px;color:#9CA3AF;">Betrag</td>
            <td style="padding:6px 0;font-size:13px;color:#374151;">{{ number_format($amount / 100, 2, ',', '.') }} € / {{ $billing === 'yearly' ? 'Jahr' : 'Monat' }}</td>
        </tr>
        @if(!empty($renewsAt))
            <tr><td colspan="2" style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
            <tr>
                <td style="padding:6px 0;font-size:12px;color:#9CA3AF;">Nächste Verlängerung</td>
                <td style="padding:6px 0;font-size:13px;color:#374151;">{{ $renewsAt->format('d.m.Y') }}</td>
            </tr>
        @endif
    </table>
</div>

{{-- CTA --}}
<x-mail.button :url="config('app.url')">
    Zur App
</x-mail.button>

{{-- Footer note --}}
<p style="margin:20px 0 0;text-align:center;font-size:12px;color:#9CA3AF;line-height:1.6;">
    Du kannst dein Abo jederzeit unter Einstellungen &rarr; Abonnement kündigen.
</p>

@endsection
