<x-emails.layout subject="Verify your email address">

    {{-- Icon --}}
    <div style="width:64px;height:64px;border-radius:50%;background:rgba(230,30,30,.12);border:1px solid rgba(230,30,30,.25);margin:0 auto 24px;text-align:center;line-height:64px;font-size:28px;">&#x2709;&#xFE0F;</div>

    <h1 class="email-title">Verify your email address</h1>
    <p class="email-subtitle">One quick step before you can start sharing videos.</p>

    <p class="email-text">Hi <strong style="color:#f1f1f1;">{{ $userName }}</strong>,</p>
    <p class="email-text">
        Thanks for signing up for <strong style="color:#f1f1f1;">TAKEONE</strong>!
        To activate your account and start uploading and watching videos, please verify your email address by clicking the button below.
    </p>

    {{-- CTA --}}
    <div class="email-btn-wrap">
        <a href="{{ $url }}" class="email-btn">Verify Email Address</a>
    </div>

    {{-- Expiry notice --}}
    <div class="email-infobox" style="text-align:center;">
        <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:13px;color:#666;line-height:1.6;">
            &#9201;&nbsp; This link expires in <strong style="color:#888;">60 minutes</strong>.
            If it expires, simply sign in and we'll send you a fresh one.
        </p>
    </div>

    <hr class="email-divider">

    <p class="email-note">
        If you didn't create a TAKEONE account, you can safely ignore this email &mdash; no action is needed.
    </p>
    <p class="email-note" style="margin-top:12px;">
        If the button above doesn't work, copy and paste this link into your browser:<br>
        <a href="{{ $url }}" style="color:#e61e1e;word-break:break-all;">{{ $url }}</a>
    </p>

</x-emails.layout>
