@extends('layout.emails._message-base')

@section('email-content')

<div style="width: 100%; font-family: Arial, sans-serif;">

    <!-- Hero Banner -->
    <div style="
        border-radius: 14px;
        background-color: #dc2626;
        margin-bottom: 16px;
        padding: 14px 24px;
    ">

        <h1 style="
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            margin: 0 0 4px 0;
            line-height: 22px;
        ">
            Today is Your Blood Drive Day
        </h1>

        <p style="
            font-size: 13px;
            color: #ffffff;
            margin: 0;
        ">
            Thank you for hosting SANBS
        </p>

    </div>

    <!-- Content -->
    <div style="padding: 0 10px;">

        <!-- Greeting -->
        <h2 style="
            font-size: 14px;
            font-weight: bold;
            color: #dc2626;
            margin: 0 0 12px 0;
        ">
            Dear {{ $ticket->siteContact->first_name }} {{ $ticket->siteContact->last_name }},
        </h2>

        <!-- Intro -->
        <p style="
            font-size: 13px;
            color: #374151;
            line-height: 20px;
            margin: 0 0 16px 0;
        ">
            Today is your Blood Drive Day for Ticket
            <strong style="color:#111827;">{{ $ticket->ticket_id }}</strong>
            at
            <strong style="color:#111827;">
                {{ $ticket->events()->latest()->first()->event_location }}
            </strong>.
            The SANBS team will arrive to conduct the blood drive and ensure smooth operations.
        </p>

        <div style="border-top: 1px solid #e5e7eb; margin: 16px 0;"></div>

        <!-- Checklist (icons removed → bullet style replacement) -->
        <div style="margin-bottom: 16px;">

            <p style="font-size: 13px; font-weight: bold; color: #dc2626; margin: 0 0 10px 0;">
                Please ensure:
            </p>

            <ul style="
                margin: 0;
                padding-left: 18px;
                color: #374151;
                font-size: 13px;
                line-height: 20px;
            ">
                <li>Site setup is ready and accessible</li>
                <li>SANBS team is received on arrival for coordination</li>
                <li>Key contacts and facilities staff are available</li>
                <li>Donors are informed and encouraged to participate</li>
                <li>Queries are directed to the SANBS representative</li>
            </ul>

        </div>

        <div style="border-top: 1px solid #e5e7eb; margin: 16px 0;"></div>

        <!-- Notice -->
        <p style="
            font-size: 13px;
            color: #374151;
            margin: 0;
        ">
            Please note that a customer survey will follow after the blood drive.
        </p>

        <!-- Signature -->
        <div style="margin-top: 24px;">

            <p style="margin: 0 0 6px 0; font-size: 13px; color: #374151;">
                Kind regards,
            </p>

            <p style="
                margin: 0;
                font-size: 14px;
                font-weight: bold;
                color: #dc2626;
            ">
                South African National Blood Service (SANBS)
            </p>

        </div>

    </div>

</div>

@endsection