@extends('emails.layout')

@section('content')

    <div style="text-align:center;margin-bottom:20px;">
        <x-heroicon-o-calendar-days width="55"
                                     style="opacity:0.8;stroke:#4f46e5;stroke-width:1" />
    </div>

    <h2 style="margin:0 0 6px;font-size:22px;color:#111;text-align:center;">
        Terminerinnerung
    </h2>

    <p style="margin:0 0 24px;color:#9ca3af;font-size:13px;text-align:center;">
        von {{ $sender_name }}
    </p>

    {{-- Event Details --}}
    <div style="background:#f8fafc;border-radius:12px;padding:20px;margin-bottom:20px;">
        <table width="100%" style="font-size:14px;color:#374151;">
            <tr>
                <td style="padding:6px 0;color:#9ca3af;width:80px;">Termin</td>
                <td style="padding:6px 0;font-weight:600;">{{ $event_title }}</td>
            </tr>
            <tr>
                <td style="padding:6px 0;color:#9ca3af;">Datum</td>
                <td style="padding:6px 0;">{{ $event_date }}</td>
            </tr>
            <tr>
                <td style="padding:6px 0;color:#9ca3af;">Uhrzeit</td>
                <td style="padding:6px 0;">
                    {{ $event_time }}@if(!empty($event_end)) - {{ $event_end }}@endif Uhr
                </td>
            </tr>
            @if(!empty($event_notes))
                <tr>
                    <td style="padding:6px 0;color:#9ca3af;vertical-align:top;">Info</td>
                    <td style="padding:6px 0;">{{ $event_notes }}</td>
                </tr>
            @endif
        </table>
    </div>

    {{-- Persönliche Nachricht --}}
    @if(!empty($message))
        <div style="border-left:3px solid #4f46e5;padding:12px 16px;margin-bottom:20px;background:#f8fafc;border-radius:0 8px 8px 0;">
            <p style="margin:0 0 4px;font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Nachricht</p>
            <p style="margin:0;font-size:14px;color:#374151;line-height:1.5;">{{ $message }}</p>
        </div>
    @endif

    <p style="text-align:center;font-size:12px;color:#d1d5db;margin-top:24px;">
        Hallo {{ $recipient_name }}, dies ist eine automatische Terminerinnerung.
    </p>

@endsection
