@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 Greeting -->
    <div style="margin-bottom: 24px;">
        <h2 style="font-size: 20px; font-weight: 600; color: #0f172a; margin: 0 0 12px 0;">
            @lang('yas_theme::app.emails.dear', ['customer_name' => $userName]), 👋
        </h2>

        <p style="font-size: 15px; color: #475569; margin: 0; line-height: 1.6;">
            @lang('yas_theme::app.emails.customers.forgot-password.greeting')
        </p>
    </div>

    <!-- Description Card -->
    <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 32px;">
        <p style="font-size: 15px; color: #334155; margin: 0; line-height: 1.6;">
            @lang('yas_theme::app.emails.customers.forgot-password.description')
        </p>
    </div>

    <!-- Call to Action Button (Table-based for email client compatibility) -->
    <div style="margin-bottom: 40px; text-align: left;">
        <table border="0" cellspacing="0" cellpadding="0" style="margin: 0;">
            <tr>
                <td align="center" style="border-radius: 6px; background-color: #060C3B;">
                    <a href="{{ route('yas_member.member.reset_password.create', $token) }}" target="_blank" style="font-size: 14px; font-weight: 700; color: #ffffff; text-decoration: none; border-radius: 6px; padding: 14px 32px; border: 1px solid #060C3B; display: inline-block; text-transform: uppercase; letter-spacing: 0.05em;">
                        @lang('yas_theme::app.emails.customers.forgot-password.reset-password')
                    </a>
                </td>
            </tr>
        </table>
    </div>

</div>
@endcomponent