@props([
    'showOtp'   => false,
    'incentive' => null,
    'source'    => null,
    'headline'  => 'Kostenlos anmelden',
    'subline'   => 'Kein Spam. Jederzeit abmelbar.',
    'variant'   => 'box',
])
<div data-lead-form style="
    @if($variant === 'box') background:#fff;border:1.5px solid #e2e8f0;border-radius:20px;padding:28px 26px;box-shadow:0 2px 24px rgba(37,99,235,.07); @endif
    max-width:520px;position:relative;
">
@if(!$showOtp)
    <form method="POST" action="{{ route('leads.subscribe') }}">
        @csrf
        <input type="hidden" name="incentive" value="{{ $incentive }}">
        <input type="hidden" name="source"    value="{{ $source }}">
        {{-- Honeypot --}}
        <div aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;">
            <input type="text" name="website" tabindex="-1" autocomplete="off">
        </div>

        <h3 style="margin:0 0 6px;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;">{{ $headline }}</h3>
        <p style="margin:0 0 18px;color:#64748b;font-size:.92rem;line-height:1.5;">{{ $subline }}</p>

        @if($errors->has('email'))
            <p style="color:#dc2626;font-size:.84rem;font-weight:600;margin:0 0 12px;">{{ $errors->first('email') }}</p>
        @endif

        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;">
            <input type="email" name="email" placeholder="deine@email.de" required autocomplete="email"
                style="flex:1;min-width:180px;padding:13px 16px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:1rem;font-family:inherit;outline:none;transition:border-color .15s;"
                onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'">
            <button type="submit"
                style="padding:13px 22px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;white-space:nowrap;font-family:inherit;transition:filter .15s;"
                onmouseenter="this.style.filter='brightness(1.05)'" onmouseleave="this.style.filter=''">
                Kostenlos erhalten
            </button>
        </div>

        <label style="display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:#64748b;line-height:1.5;cursor:pointer;">
            <input type="checkbox" name="consent" value="1" required style="margin-top:3px;flex-shrink:0;accent-color:#2563eb;">
            <span>Ich stimme zu, dass kotsch.tech meine E-Mail gemäß der <a href="/datenschutz" target="_blank" style="color:#2563eb;">Datenschutzerklärung</a> nutzt. Abmeldung jederzeit möglich.</span>
        </label>
    </form>
@else
    <p style="margin:0 0 16px;font-size:1rem;color:#334155;line-height:1.6;">
        Wir haben dir einen 6-stelligen Code per E-Mail geschickt. Bitte gib ihn hier ein:
    </p>
    <form method="POST" action="{{ route('leads.verify') }}">
        @csrf
        <input type="hidden" name="email" value="{{ old('email', session('lead_result.email', '')) }}">
        @if($errors->has('email'))
            <p style="color:#dc2626;font-size:.84rem;font-weight:600;margin:0 0 12px;">{{ $errors->first('email') }}</p>
        @endif
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;">
            <input type="text" name="code" maxlength="6" placeholder="123456" required inputmode="numeric" autocomplete="one-time-code"
                style="flex:1;min-width:120px;padding:13px 16px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:1.4rem;letter-spacing:.2em;text-align:center;font-family:monospace;outline:none;transition:border-color .15s;"
                onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'">
            <button type="submit"
                style="padding:13px 22px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;">
                Bestätigen
            </button>
        </div>
    </form>
    <form method="POST" action="{{ route('leads.resend') }}" style="margin-top:4px;">
        @csrf
        <input type="hidden" name="email" value="{{ old('email', session('lead_result.email', '')) }}">
        <button type="submit" style="background:none;border:none;color:#64748b;font-size:.84rem;cursor:pointer;padding:0;font-family:inherit;text-decoration:underline;">
            Code erneut senden
        </button>
    </form>
@endif
</div>