<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nouveau message de contact</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #334155; margin: 0; padding: 0; background: #f1f5f9; }
        .container { max-width: 640px; margin: 0 auto; padding: 24px; }
        .card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 25px rgba(15,23,42,0.08); border: 1px solid #e2e8f0; }
        .header { background: linear-gradient(135deg, {{ \App\Models\Setting::get('primary_color', '#b66420') }}, {{ \App\Models\Setting::get('secondary_color', '#d3901d') }}); color: #fff; padding: 18px 20px; }
        .header-row { display: flex; align-items: center; gap: 12px; }
        .logo { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.15); object-fit: contain; padding: 5px; }
        .site-name { margin: 0; font-size: 13px; opacity: 0.95; }
        .title { margin: 2px 0 0 0; font-size: 18px; font-weight: 700; }
        .content { padding: 22px; }
        .meta { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
        .meta p { margin: 0 0 6px 0; }
        .meta p:last-child { margin-bottom: 0; }
        .message-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; white-space: pre-wrap; }
        .footer { margin-top: 18px; font-size: 12px; color: #94a3b8; }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="header">
                <div class="header-row">
                    <img src="{{ $logoUrl }}" alt="Logo {{ $siteName ?? config('app.name') }}" class="logo">
                    <div>
                        <p class="site-name">{{ $siteName ?? config('app.name') }}</p>
                        <p class="title">Nouveau message de contact</p>
                    </div>
                </div>
            </div>

            <div class="content">

                <div class="meta">
                    @if($contactMessage->subject)
                    <p><strong>Sujet :</strong> {{ $contactMessage->subject }}</p>
                    @endif

                    <p><strong>De :</strong> {{ $contactMessage->name }} &lt;{{ $contactMessage->email }}&gt;</p>
                    @if($contactMessage->phone)
                    <p><strong>Téléphone :</strong> {{ $contactMessage->phone }}</p>
                    @endif
                </div>

                <p style="margin: 0 0 8px 0;"><strong>Message :</strong></p>
                <div class="message-box">{{ $contactMessage->message }}</div>

                <p class="footer">Répondez directement à cet e-mail pour contacter {{ $contactMessage->name }}.</p>
            </div>
        </div>
    </div>
</body>
</html>
