@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:#FFF7ED;border-radius:14px;text-align:center;vertical-align:middle;">
            <x-heroicon-o-x-circle style="width:24px;height:24px;stroke:#F97316;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;">
    Dein Abo wurde gekündigt
</h1>
<p style="margin:0 0 24px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
    Hallo {{ $user->name }}, wir haben deine Kündigung des <strong style="color:#111827;">{{ $plan }}</strong>-Plans erhalten.
</p>

{{-- Access info --}}
@if(!empty($endsAt))
    <div style="background:#FFF7ED;border:1px solid #FED7AA;border-radius:12px;padding:18px 20px;margin-bottom:28px;text-align:center;">
        <p style="margin:0 0 4px;font-size:11px;color:#FB923C;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;">Zugang aktiv bis</p>
        <p style="margin:0;font-size:20px;font-weight:700;color:#EA580C;">{{ $endsAt->format('d.m.Y') }}</p>
        <p style="margin:6px 0 0;font-size:12px;color:#9CA3AF;">Danach wechselst du automatisch auf den kostenlosen Plan.</p>
    </div>
@else
    <div style="background:#FFF7ED;border:1px solid #FED7AA;border-radius:12px;padding:16px 20px;margin-bottom:28px;text-align:center;">
        <p style="margin:0;font-size:13px;color:#EA580C;">Du wechselst sofort auf den kostenlosen Plan.</p>
    </div>
@endif

{{-- Reactivate CTA --}}
<x-mail.button :url="config('app.url') . '/plans'">
    Abo reaktivieren
</x-mail.button>

{{-- Footer note --}}
<p style="margin:20px 0 0;text-align:center;font-size:12px;color:#9CA3AF;line-height:1.6;">
    Falls du eine Frage hast, antworte einfach auf diese E-Mail.
</p>

@endsection
