@extends('emails.layouts.default-mail')

@section('content')

<table width="100%">
    <tr>
        <td class="email-px email-title-box" style="padding: 0 40px; background-color: rgba(255, 255, 255, 1)">
            @include('emails.components.subject-box', [
                'title' => 'Inquiry Received',
                'description' => 'Thank you for reaching out to us.',
            ])
        </td>
    </tr>

    <tr>
        <td
            class="email-px email-text"
            align="left"
            style="padding: 28px 40px 32px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; color: #64748b;"
        >
            <p style="margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 28px; color: #0f172a;">
                Hello [full-name]!
            </p>

            <p style="margin: 0 0 16px; font-size: 15px; line-height: 24px; color: #475569;">
                We have received your inquiry and our team will work on it.
            </p>

            @component('emails.components.info-box')
                @slot('title')
                    Inquiry details
                @endslot
                <strong style="color: #0f172a;">Subject:</strong> [subject]<br />
                <strong style="color: #0f172a;">Message:</strong> <br />
                <span style="white-space: pre-wrap;">[message]</span><br /><br />
                <strong style="color: #0f172a;">Submitted at:</strong> [submitted-date]
            @endcomponent

            @component('emails.components.notice-box')
                Please keep this email for your reference.
            @endcomponent
        </td>
    </tr>
</table>
@endsection