@extends('emails.layouts.master')

@section('title', 'Afschrift van jouw vraag aan Jouwdriedee.nl')

@section('content')
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="padding-bottom: 20px;">
            <span style="display: inline-block; background-color: #ECFDF5; color: #059669; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.5px;">
                Afschrift Klantvraag Ontvangen
            </span>
            <h1 style="margin: 12px 0 6px 0; font-size: 22px; font-weight: 800; color: #0F172A; line-height: 1.3;">
                Bedankt voor je vraag, {{ $communication->name }}!
            </h1>
            <p style="margin: 0; font-size: 14px; color: #64748B; line-height: 1.5;">
                We hebben jouw bericht in goede orde ontvangen. Onze 3D-printspecialisten bekijken jouw vraag zorgvuldig en nemen doorgaans <strong>binnen 24 uur</strong> (op werkdagen) contact met je op.
            </p>
        </td>
    </tr>

    <!-- Samenvatting Afschrift Card -->
    <tr>
        <td style="padding: 16px; background-color: #F8FAFC; border-radius: 12px; border: 1px solid #E2E8F0;">
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td style="padding: 4px 0; font-size: 13px; color: #64748B; width: 130px;"><strong>Onderwerp:</strong></td>
                    <td style="padding: 4px 0; font-size: 13px; color: #0F172A; font-weight: 600;">{{ $communication->subject }}</td>
                </tr>
                <tr>
                    <td style="padding: 4px 0; font-size: 13px; color: #64748B;"><strong>Referentienummer:</strong></td>
                    <td style="padding: 4px 0; font-size: 13px; color: #0F172A; font-family: monospace; font-weight: 700;">#{{ $communication->id }}</td>
                </tr>
                <tr>
                    <td style="padding: 4px 0; font-size: 13px; color: #64748B;"><strong>Datum &amp; tijd:</strong></td>
                    <td style="padding: 4px 0; font-size: 13px; color: #0F172A;">{{ $communication->created_at->format('d-m-Y om H:i') }}</td>
                </tr>
                @if($communication->order)
                <tr>
                    <td style="padding: 4px 0; font-size: 13px; color: #64748B;"><strong>Betreft bestelling:</strong></td>
                    <td style="padding: 4px 0; font-size: 13px; color: #0F172A; font-family: monospace;">#{{ $communication->order->order_number }}</td>
                </tr>
                @endif
            </table>
        </td>
    </tr>

    <!-- Jouw verstuurde bericht -->
    <tr>
        <td style="padding-top: 20px;">
            <h3 style="margin: 0 0 10px 0; font-size: 13px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px;">
                Kopie van jouw bericht:
            </h3>
            <div style="background-color: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 16px; font-size: 13px; line-height: 1.6; color: #334155; white-space: pre-wrap;">{{ $communication->message }}</div>
        </td>
    </tr>

    <!-- Info note -->
    <tr>
        <td style="padding-top: 24px;">
            <p style="margin: 0; font-size: 12px; color: #94A3B8; line-height: 1.5; text-align: center;">
                Dit is een automatisch verzonden afschrift vanuit <strong>noreply@jouwdriedee.nl</strong> ter bevestiging van je aanvraag.<br>
                Heb je aanvullende informatie? Reageer dan gerust zodra je ons persoonlijke antwoord ontvangt.
            </p>
        </td>
    </tr>
</table>
@endsection