@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-calendar-days 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 4px;font-size:22px;font-weight:700;color:#111827;text-align:center;line-height:1.3;letter-spacing:-0.3px;">
    Terminerinnerung
</h1>
<p style="margin:0 0 28px;font-size:13px;color:#9CA3AF;text-align:center;">
    von {{ $sender_name }}
</p>

{{-- Event card --}}
<div style="background:#F9FAFB;border:1px solid #F3F4F6;border-radius:12px;padding:20px 20px 16px;margin-bottom:20px;">
    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
            <td style="padding:5px 0 5px;width:72px;font-size:12px;color:#9CA3AF;vertical-align:top;">Termin</td>
            <td style="padding:5px 0 5px;font-size:14px;color:#111827;font-weight:600;">{{ $event_title }}</td>
        </tr>
        <tr>
            <td style="padding:5px 0;height:1px;" colspan="2">
                <div style="height:1px;background:#F3F4F6;"></div>
            </td>
        </tr>
        <tr>
            <td style="padding:5px 0;font-size:12px;color:#9CA3AF;vertical-align:top;">Datum</td>
            <td style="padding:5px 0;font-size:13px;color:#374151;">{{ $event_date }}</td>
        </tr>
        <tr>
            <td style="padding:5px 0;font-size:12px;color:#9CA3AF;vertical-align:top;">Uhrzeit</td>
            <td style="padding:5px 0;font-size:13px;color:#374151;">
                {{ $event_time }}@if(!empty($event_end)) &ndash; {{ $event_end }}@endif Uhr
            </td>
        </tr>
        @if(!empty($event_notes))
            <tr>
                <td style="padding:5px 0;height:1px;" colspan="2">
                    <div style="height:1px;background:#F3F4F6;"></div>
                </td>
            </tr>
            <tr>
                <td style="padding:5px 0;font-size:12px;color:#9CA3AF;vertical-align:top;">Info</td>
                <td style="padding:5px 0;font-size:13px;color:#374151;line-height:1.5;">{{ $event_notes }}</td>
            </tr>
        @endif
    </table>
</div>

{{-- Personal message --}}
@if(!empty($message))
    <div style="border-left:3px solid #4F46E5;padding:12px 16px;background:#F9FAFB;border-radius:0 10px 10px 0;margin-bottom:24px;">
        <p style="margin:0 0 3px;font-size:10px;color:#9CA3AF;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;">Nachricht</p>
        <p style="margin:0;font-size:13px;color:#374151;line-height:1.6;">{{ $message }}</p>
    </div>
@endif

{{-- Recipient note --}}
<p style="margin:0;text-align:center;font-size:11px;color:#D1D5DB;line-height:1.6;">
    Hallo {{ $recipient_name }} &mdash; dies ist eine automatische Terminerinnerung.
</p>

@endsection