@component('yas_member::emails.layout')
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #1e293b; line-height: 1.6; max-width: 600px; margin: 0 auto;">
    
    <!-- Header Title -->
    <div style="margin-bottom: 24px;">
        <h2 style="font-size: 20px; font-weight: 600; color: #0f172a; margin: 0;">
            New Contact Inquiry
        </h2>
    </div>

    <!-- Contact Message Card -->
    <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 24px;">
        <p style="font-size: 15px; color: #334155; margin: 0; line-height: 1.6; white-space: pre-line;">
            {{ $contactUs['message'] }}
        </p>
    </div>

    <!-- Contact Details / Action Card -->
    <div style="border-top: 1px solid #e2e8f0; padding-top: 20px; margin-bottom: 32px;">
        <p style="font-size: 14px; color: #475569; margin: 0; line-height: 1.6;">
            @lang('yas_theme::app.emails.contact-us.to')
            
            <a href="mailto:{{ $contactUs['email'] }}" style="color: #2563EB; font-weight: 600; text-decoration: none;">{{ $contactUs['email'] }}</a>,

            @lang('yas_theme::app.emails.contact-us.reply-to-mail')

            @if($contactUs['contact'])
                @lang('yas_theme::app.emails.contact-us.reach-via-phone')

                <a href="tel:{{ $contactUs['contact'] }}" style="color: #2563EB; font-weight: 600; text-decoration: none;">{{ $contactUs['contact'] }}</a>.
            @endif
        </p>
    </div>

</div>
@endcomponent