@extends('emails.layouts.master')

@section('title', 'Reactie op vraag #' . $communication->id)

@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: #EEF2FF; color: #4F46E5; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.5px;">
                Antwoord van Jouwdriedee.nl
            </span>
            <h1 style="margin: 12px 0 6px 0; font-size: 22px; font-weight: 800; color: #0F172A; line-height: 1.3;">
                Beste {{ $communication->name }},
            </h1>
            <p style="margin: 0; font-size: 14px; color: #64748B;">
                We hebben een reactie voor je klaarstaan op jouw vraag met betrekking tot <strong>{{ $communication->subject }}</strong>.
            </p>
        </td>
    </tr>

    <!-- Reactie box -->
    <tr>
        <td style="padding: 20px; background-color: #F8FAFC; border-radius: 12px; border: 1px solid #E2E8F0; border-left: 4px solid #059669;">
            <h3 style="margin: 0 0 10px 0; font-size: 13px; font-weight: 700; color: #059669; text-transform: uppercase; letter-spacing: 0.5px;">
                Ons antwoord:
            </h3>
            <div style="font-size: 14px; line-height: 1.6; color: #0F172A; white-space: pre-wrap;">{{ $reply->message }}</div>
        </td>
    </tr>

    <!-- Oorspronkelijk bericht -->
    <tr>
        <td style="padding-top: 24px;">
            <h4 style="margin: 0 0 8px 0; font-size: 12px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px;">
                Jouw eerdere vraag (#{{ $communication->id }}):
            </h4>
            <div style="background-color: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 14px; font-size: 12px; line-height: 1.5; color: #64748B; white-space: pre-wrap;">{{ $communication->message }}</div>
        </td>
    </tr>

    <tr>
        <td style="padding-top: 24px; text-align: center;">
            <p style="margin: 0; font-size: 13px; color: #64748B;">
                Heb je nog meer vragen? Je kunt direct antwoorden op deze e-mail of contact opnemen via <a href="mailto:info@jouwdriedee.nl" style="color: #4F46E5; text-decoration: none; font-weight: 600;">info@jouwdriedee.nl</a>.
            </p>
        </td>
    </tr>
</table>
@endsection