@extends('emails.layouts.master')

@section('title', 'Wachtwoord Opnieuw Instellen | Jouwdriedee.nl')

@section('content')
<div style="text-align: left;">
    
    <div style="display: inline-block; background-color: #E0E7FF; color: #3730A3; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;">
        🔒 Beveiliging
    </div>

    <h1 style="color: #0F172A; font-size: 22px; font-weight: 900; margin: 0 0 14px 0; line-height: 1.3;">
        Wachtwoord opnieuw instellen
    </h1>

    <p style="color: #475569; font-size: 14px; line-height: 1.6; margin: 0 0 16px 0;">
        Hallo {{ $user->name }},<br>
        We hebben een verzoek ontvangen om het wachtwoord van jouw account bij <strong>Jouwdriedee.nl</strong> te resetten. Klik op onderstaande knop om een nieuw wachtwoord te kiezen:
    </p>

    <div style="text-align: center; margin: 30px 0;">
        <a href="{{ $resetUrl }}" class="btn-primary" style="display: inline-block; background-color: #FBBF24; color: #0F172A !important; font-weight: 800; font-size: 14px; padding: 14px 32px; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);">
            Wachtwoord Opnieuw Instellen &rarr;
        </a>
    </div>

    <div style="background-color: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: 14px; margin-top: 24px; font-size: 12px; color: #92400E; line-height: 1.5;">
        <strong>Let op:</strong> Deze link is om veiligheidsredenen slechts <strong>60 minuten</strong> geldig. Heb je zelf geen wachtwoordreset aangevraagd? Dan kun je deze e-mail veilig negeren. Jouw huidige wachtwoord blijft ongewijzigd.
    </div>

    <p style="color: #94A3B8; font-size: 11px; line-height: 1.4; margin-top: 24px; word-break: break-all;">
        Werkt de knop niet? Kopieer en plak de volgende URL direct in je browser:<br>
        <a href="{{ $resetUrl }}" style="color: #6366F1;">{{ $resetUrl }}</a>
    </p>

</div>
@endsection