@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-star 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;">
    Dein Referral hat sich qualifiziert!
</h1>
<p style="margin:0 0 24px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
    <strong style="color:#374151;">{{ $referredUser->name }}</strong> nutzt Aziros jetzt seit 3 Monaten.
</p>

{{-- Credits badge --}}
<div style="background:#EEF2FF;border:1px solid #C7D2FE;border-radius:12px;padding:22px 20px;margin-bottom:28px;text-align:center;">
    <p style="margin:0 0 4px;font-size:11px;color:#818CF8;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;">Gutschrift</p>
    <p style="margin:0 0 4px;font-size:36px;font-weight:800;color:#4F46E5;line-height:1;letter-spacing:-1px;">+{{ $credits }}</p>
    <p style="margin:0;font-size:13px;color:#6B7280;">Credits wurden deinem Konto gutgeschrieben</p>
</div>

{{-- CTA --}}
<x-mail.button :url="config('app.url') . '/settings?tab=affiliate'">
    Mein Affiliate-Dashboard
</x-mail.button>

@endsection
