@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:#EEF2FF;border-radius:14px;text-align:center;vertical-align:middle;">
            <x-heroicon-o-hand-raised style="width:24px;height:24px;stroke:#4F46E5;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;">
    Willkommen bei Aziros, {{ $user->name }}!
</h1>
<p style="margin:0 0 28px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
    Dein Konto ist bestätigt. Hier ist, was du als Nächstes tun kannst.
</p>

{{-- Feature list --}}
<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:8px 0;">
                <table cellpadding="0" cellspacing="0" role="presentation">
                    <tr>
                        <td style="width:28px;vertical-align:top;padding-top:1px;">
                            <div style="width:20px;height:20px;background:#EEF2FF;border-radius:6px;text-align:center;line-height:20px;">
                                <x-heroicon-o-calendar-days style="width:11px;height:11px;stroke:#4F46E5;stroke-width:2;display:inline-block;vertical-align:middle;" />
                            </div>
                        </td>
                        <td style="padding-left:10px;">
                            <p style="margin:0 0 2px;font-size:13px;font-weight:600;color:#111827;">Kalender</p>
                            <p style="margin:0;font-size:12px;color:#6B7280;">Termine planen, organisieren und im Blick behalten.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr><td style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
        <tr>
            <td style="padding:8px 0;">
                <table cellpadding="0" cellspacing="0" role="presentation">
                    <tr>
                        <td style="width:28px;vertical-align:top;padding-top:1px;">
                            <div style="width:20px;height:20px;background:#EEF2FF;border-radius:6px;text-align:center;line-height:20px;">
                                <x-heroicon-o-sparkles style="width:11px;height:11px;stroke:#4F46E5;stroke-width:2;display:inline-block;vertical-align:middle;" />
                            </div>
                        </td>
                        <td style="padding-left:10px;">
                            <p style="margin:0 0 2px;font-size:13px;font-weight:600;color:#111827;">Aria – Dein KI-Assistent</p>
                            <p style="margin:0;font-size:12px;color:#6B7280;">Frag Aria alles – sie hilft dir, deinen Tag zu organisieren.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr><td style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
        <tr>
            <td style="padding:8px 0;">
                <table cellpadding="0" cellspacing="0" role="presentation">
                    <tr>
                        <td style="width:28px;vertical-align:top;padding-top:1px;">
                            <div style="width:20px;height:20px;background:#EEF2FF;border-radius:6px;text-align:center;line-height:20px;">
                                <x-heroicon-o-arrows-right-left style="width:11px;height:11px;stroke:#4F46E5;stroke-width:2;display:inline-block;vertical-align:middle;" />
                            </div>
                        </td>
                        <td style="padding-left:10px;">
                            <p style="margin:0 0 2px;font-size:13px;font-weight:600;color:#111827;">Integrationen</p>
                            <p style="margin:0;font-size:12px;color:#6B7280;">Google Kalender & Outlook verbinden und synchronisieren.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

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

@endsection
