<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nouveau participant sur {{ $hunt->title }}</title>
</head>
<body style="margin: 0; padding: 0; background: #f4f7fb; color: #172033; font-family: Arial, Helvetica, sans-serif;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background: #f4f7fb; padding: 32px 16px;">
        <tr>
            <td align="center">
                <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width: 560px; overflow: hidden; background: #ffffff; border: 1px solid #e6ebf2; border-radius: 12px;">
                    <tr>
                        <td style="padding: 32px 32px 16px;">
                            <h1 style="margin: 0; color: #101828; font-size: 28px; line-height: 1.2;">Quelqu'un vient de rejoindre ta hunt</h1>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0 32px 24px;">
                            <p style="margin: 0 0 16px; color: #344054; font-size: 16px; line-height: 1.6;">
                                Bonjour {{ $notifiable->username }},
                            </p>
                            <p style="margin: 0 0 24px; color: #344054; font-size: 16px; line-height: 1.6;">
                                <strong>{{ $participant->username }}</strong> participe maintenant à ta hunt <strong>{{ $hunt->title }}</strong>.
                            </p>
                            <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="margin: 0 0 24px; background: #f8fafc; border: 1px solid #e6ebf2; border-radius: 10px;">
                                <tr>
                                    <td style="padding: 18px 20px;">
                                        <p style="margin: 0 0 6px; color: #667085; font-size: 13px; font-weight: 700; text-transform: uppercase;">Hunt</p>
                                        <p style="margin: 0 0 16px; color: #101828; font-size: 18px; font-weight: 700; line-height: 1.35;">{{ $hunt->title }}</p>

                                        <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td style="width: 50%; padding: 0 12px 0 0;">
                                                    <p style="margin: 0 0 4px; color: #667085; font-size: 13px;">Ville</p>
                                                    <p style="margin: 0; color: #344054; font-size: 15px; font-weight: 700;">{{ $hunt->city }}</p>
                                                </td>
                                                <td style="width: 50%; padding: 0 0 0 12px;">
                                                    <p style="margin: 0 0 4px; color: #667085; font-size: 13px;">Participants</p>
                                                    <p style="margin: 0; color: #344054; font-size: 15px; font-weight: 700;">{{ $participantsCount }}</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <p style="margin: 0 0 16px; color: #344054; font-size: 16px; line-height: 1.6;">
                                Garde un oeil sur l'activité de cette hunt pour suivre sa progression et préparer la suite de l'expérience.
                            </p>
                            <p style="margin: 0;">
                                <a href="{{ config('app.url') . '/admin' }}" style="display: inline-block; padding: 14px 22px; background: #16a34a; border-radius: 8px; color: #ffffff; font-size: 16px; font-weight: 700; text-decoration: none;">
                                    Ouvrir le tableau de bord
                                </a>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 20px 32px 32px; border-top: 1px solid #edf1f7;">
                            <p style="margin: 0; color: #98a2b3; font-size: 13px; line-height: 1.5;">
                                Cet email est envoyé parce que tu es le créateur de la hunt {{ $hunt->title }}.
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
