@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-gift 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;">
    Hallo {{ $user->name }}!
</h1>
<p style="margin:0 0 24px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
    Du hast kostenlosen Zugang zum
    <strong style="color:#4F46E5;">{{ $plan->name }}</strong>-Plan erhalten &mdash; {{ $durationLabel }}.
</p>

{{-- Validity badge --}}
<div style="background:#F0FDF4;border:1px solid #D1FAE5;border-radius:12px;padding:18px 20px;margin-bottom:28px;text-align:center;">
    @if($endsAt)
        <p style="margin:0 0 3px;font-size:11px;color:#6EE7B7;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;">Gültig bis</p>
        <p style="margin:0;font-size:20px;font-weight:700;color:#059669;">{{ $endsAt->format('d.m.Y') }}</p>
    @else
        <p style="margin:0 0 3px;font-size:11px;color:#6EE7B7;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;">Gültigkeit</p>
        <p style="margin:0;font-size:18px;font-weight:700;color:#059669;">Unbegrenzt</p>
    @endif
</div>

{{-- CTA --}}
<x-mail.button :url="config('app.url') . '/agent'">
    Jetzt Aria nutzen
</x-mail.button>

@endsection