@php
    $brand = '#07377f';
    $accent = $tone === 'danger' ? '#e11d48' : '#0f766e';
    $accentSoft = $tone === 'danger' ? '#fff1f2' : '#ecfdf5';
    $muted = '#64748b';
    $ink = '#0f172a';
    $border = '#e2e8f0';
    $when = $booking->scheduled_at?->isoFormat('dddd D [de] MMMM, HH:mm');
    $total = $booking->currency.' '.number_format((float) $booking->total_amount, 0, ',', '.');
@endphp

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title }}</title>
</head>
<body style="margin:0;padding:0;background:#f6f8fb;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:{{ $ink }};">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#f6f8fb;margin:0;padding:32px 14px;">
        <tr>
            <td align="center">
                <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px;background:#ffffff;border:1px solid {{ $border }};border-radius:28px;overflow:hidden;box-shadow:0 20px 60px rgba(15,23,42,.08);">
                    <tr>
                        <td style="padding:28px 30px;background:linear-gradient(135deg,#ffffff 0%,#eef6ff 100%);border-bottom:1px solid {{ $border }};">
                            <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td>
                                        <img src="{{ asset('assets/brand/logo.png') }}" width="190" alt="AsignaPro" style="display:block;max-width:190px;height:auto;">
                                    </td>
                                    <td align="right" style="vertical-align:middle;">
                                        <span style="display:inline-block;background:{{ $accentSoft }};color:{{ $accent }};border:1px solid {{ $tone === 'danger' ? '#fecdd3' : '#bbf7d0' }};border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;">
                                            {{ $badge }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td style="padding:30px 30px 18px;">
                            <p style="margin:0 0 10px;color:{{ $accent }};font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;">{{ $eyebrow }}</p>
                            <h1 style="margin:0;color:{{ $ink }};font-size:30px;line-height:1.12;font-weight:900;letter-spacing:-.03em;">{{ $title }}</h1>
                            <p style="margin:14px 0 0;color:{{ $muted }};font-size:16px;line-height:1.6;">{{ $intro }}</p>
                        </td>
                    </tr>

                    <tr>
                        <td style="padding:0 30px 24px;">
                            <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#f8fafc;border:1px solid {{ $border }};border-radius:22px;">
                                <tr>
                                    <td style="padding:18px 20px;border-bottom:1px solid {{ $border }};">
                                        <p style="margin:0;color:{{ $muted }};font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;">Código</p>
                                        <p style="margin:5px 0 0;color:{{ $brand }};font-size:22px;font-weight:900;letter-spacing:.02em;">{{ $booking->code }}</p>
                                    </td>
                                    <td style="padding:18px 20px;border-bottom:1px solid {{ $border }};" align="right">
                                        <p style="margin:0;color:{{ $muted }};font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;">Total</p>
                                        <p style="margin:5px 0 0;color:{{ $ink }};font-size:20px;font-weight:900;">{{ $total }}</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="padding:18px 20px;">
                                        <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td style="padding:10px 0;width:42%;color:{{ $muted }};font-size:13px;font-weight:800;">Servicio</td>
                                                <td style="padding:10px 0;color:{{ $ink }};font-size:15px;font-weight:800;">{{ $booking->service?->name }}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding:10px 0;color:{{ $muted }};font-size:13px;font-weight:800;">Fecha y hora</td>
                                                <td style="padding:10px 0;color:{{ $ink }};font-size:15px;font-weight:800;">{{ $when }}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding:10px 0;color:{{ $muted }};font-size:13px;font-weight:800;">Profesional</td>
                                                <td style="padding:10px 0;color:{{ $ink }};font-size:15px;font-weight:800;">{{ $booking->employee?->fullName() ?? 'Por asignar' }}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding:10px 0;color:{{ $muted }};font-size:13px;font-weight:800;">Cliente</td>
                                                <td style="padding:10px 0;color:{{ $ink }};font-size:15px;font-weight:800;">{{ $booking->customer?->fullName() }}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding:10px 0;color:{{ $muted }};font-size:13px;font-weight:800;">Contacto</td>
                                                <td style="padding:10px 0;color:{{ $ink }};font-size:15px;font-weight:800;">{{ $booking->customer?->phone }}<br><span style="color:{{ $muted }};font-weight:700;">{{ $booking->customer?->email }}</span></td>
                                            </tr>
                                            @if ($booking->cancellation_reason)
                                                <tr>
                                                    <td style="padding:10px 0;color:{{ $muted }};font-size:13px;font-weight:800;">Motivo</td>
                                                    <td style="padding:10px 0;color:{{ $ink }};font-size:15px;font-weight:800;">{{ $booking->cancellation_reason }}</td>
                                                </tr>
                                            @endif
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td align="center" style="padding:0 30px 30px;">
                            <a href="{{ $actionUrl }}" style="display:inline-block;background:{{ $brand }};color:#ffffff;text-decoration:none;border-radius:999px;padding:15px 24px;font-size:14px;font-weight:900;box-shadow:0 12px 26px rgba(7,55,127,.22);">
                                {{ $actionLabel }}
                            </a>
                            @if (! empty($secondaryUrl))
                                <p style="margin:18px 0 0;color:{{ $muted }};font-size:13px;line-height:1.6;">
                                    ¿No puedes asistir? <a href="{{ $secondaryUrl }}" style="color:{{ $accent }};font-weight:900;text-decoration:none;">Cancelar reserva</a>
                                </p>
                            @endif
                        </td>
                    </tr>
                </table>

                <p style="max-width:600px;margin:18px auto 0;color:#94a3b8;font-size:12px;line-height:1.6;text-align:center;">
                    Este correo fue enviado por AsignaPro para {{ $booking->company?->name }}. Si no reconoces esta actividad, comunícate con el negocio.
                </p>
            </td>
        </tr>
    </table>
</body>
</html>
