{{-- / — la home (docs/paginas/pagina-home.md). No explica el mentor: lo enuncia
     y lo deja probar. Quien quiera la tesis va a /mentor; quien quiera el precio,
     a /pro. Convencer en quince segundos y dar algo que tocar.
     Muere aquí (§0): beta/TestFlight, testimonios inventados, taxonomía vieja,
     «modo sin conexión», sorteo (sin bases publicadas — G4) y «Premium». --}}
@extends('layouts.web')

@section('seo')
<x-seo title="Fermenty — la app que calcula tu ventana de fermentación"
       description="Ninguna receta sabe a qué temperatura está tu cocina. Fermenty calcula cuándo tu kombucha, kéfir o chucrut entra en su punto, y aprende de cada tanda. Gratis."
       :canonical="url('/')" :organization="true" />
@endsection

@php
    $app = \App\Support\Superficie::base();
    // El copy vive en lang/{idioma}/pagina_home.php.
    $t = fn (string $k) => __("pagina_home.$k");

    // {{ $t('faq.title') }}: fuente única para lo visible y para el FAQPage —
    // solo se marca lo que la persona ve en la página (bloque E3).
    $faqs = collect(range(1, 5))->map(fn ($i) => [$t("faq.q$i"), $t("faq.a$i"), $i === 1 ? 'pro' : ($i === 5 ? 'privacidad' : null)])->all();
@endphp

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/home.css') }}">
<link rel="stylesheet" href="{{ asset_v('landing/pages/fermentos.css') }}">
<link rel="stylesheet" href="{{ asset_v('landing/pages/pro.css') }}">
@php
    // Datos estructurados de la home (bloque E3). El FAQPage sale del MISMO
    // array que pinta el acordeón. SoftwareApplication describe la entidad una
    // sola vez y aquí, que es su página principal — SIN aggregateRating: no hay
    // reseñas reales y marcar una valoración inventada es sancionable.
    $ldFaqHome = ['@context' => 'https://schema.org', '@type' => 'FAQPage', 'mainEntity' => array_map(fn ($f) => [
        '@type' => 'Question', 'name' => $f[0],
        'acceptedAnswer' => ['@type' => 'Answer', 'text' => $f[1]],
    ], $faqs)];

    $periodos = config('billing.periods');
    $ldApp = ['@context' => 'https://schema.org', '@type' => 'SoftwareApplication',
        'name' => 'Fermenty',
        'applicationCategory' => 'LifestyleApplication',
        'operatingSystem' => 'Web',
        'url' => url('/'),
        'description' => 'Calcula la ventana de fermentación de tu kombucha, kéfir o chucrut con la temperatura de tu cocina, y aprende de cada tanda.',
        'offers' => [
            ['@type' => 'Offer', 'name' => 'Gratis', 'price' => '0', 'priceCurrency' => 'EUR'],
            ['@type' => 'Offer', 'name' => 'Pro mensual', 'price' => number_format($periodos['month']['amount'], 2, '.', ''), 'priceCurrency' => 'EUR'],
            ['@type' => 'Offer', 'name' => 'Pro anual', 'price' => number_format($periodos['year']['amount'], 2, '.', ''), 'priceCurrency' => 'EUR'],
        ],
    ];
@endphp
<script type="application/ld+json">{!! json_encode($ldFaqHome, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
<script type="application/ld+json">{!! json_encode($ldApp, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush


@section('content')
<!-- ============ HERO ============ -->
<section class="hero">
  <svg class="hero__bubbles" viewBox="0 0 1400 700" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <circle cx="1180" cy="120" r="60" fill="#E0EDD7"/>
    <circle cx="1290" cy="240" r="26" fill="#F0F3CF"/>
    <circle cx="150" cy="520" r="80" fill="#EFEADD"/>
    <circle cx="60" cy="380" r="30" fill="#FDF4DE"/>
    <circle cx="1240" cy="560" r="40" fill="#E0EDD7"/>
  </svg>
  <div class="wrap hero__grid">
    <div class="hero__copy">
      <p class="eyebrow">{{ $t('hero.eyebrow') }}</p>
      <h1>{{ $t('hero.h1_1') }} <span class="spark">{{ $t('hero.h1_spark') }}</span>.</h1>
      <p class="lede">{{ $t('hero.lede') }}</p>
      <div class="hero__cta">
        <a class="btn btn--primary btn--lg" href="{{ ruta('afinador') }}">{{ $t('hero.cta') }}</a>
        <a class="btn btn--ghost btn--lg" href="{{ $app }}/register" data-app-link>{{ $t('hero.cta2') }}</a>
      </div>
      <p class="hero__note">{{ $t('hero.pie') }}</p>
    </div>
    <div class="hero__media">
      <div class="phone-frame phone-tilt">
        <div class="phone-frame__screen">
          {{-- El elemento LCP de la home: prioridad alta explícita para que no
               pierda contra el CSS y las fuentes en la cola de descargas (F4). --}}
          <img src="/landing/img/app-lote.webp" alt="{{ $t('hero.alt') }}" width="388" height="540" fetchpriority="high">
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ PRUÉBALO ANTES DE CREERTE NADA ============ -->
<section class="section">
  <div class="wrap">
    <div class="newsletter reveal" style="border-color:var(--gold-400);text-align:center;">
      <p class="eyebrow">{{ $t('prueba.eyebrow') }}</p>
      <h2 style="margin-top:.4rem">{{ $t('prueba.title') }}</h2>
      <p class="lede" style="margin-top:.75rem">{{ $t('prueba.texto') }}</p>
      <div style="margin-top:20px;">
        <a class="btn btn--gold btn--lg" href="{{ ruta('afinador') }}">{{ $t('prueba.cta') }}</a>
      </div>
    </div>
  </div>
</section>

<!-- ============ CÓMO FUNCIONA ============ -->
<section class="section" id="como">
  <div class="wrap">
    <div class="section-head center reveal">
      <p class="eyebrow">{{ $t('como.eyebrow') }}</p>
      <h2>{{ $t('como.title') }}</h2>
    </div>
    <div class="steps reveal">
      <div class="step">
        <span class="step__num"></span>
        <h3>{{ $t('como.t1') }}</h3>
        <p>{{ $t('como.p1') }}</p>
      </div>
      <div class="step">
        <span class="step__num"></span>
        <h3>{{ $t('como.t2') }}</h3>
        <p>{{ $t('como.p2') }}</p>
      </div>
      <div class="step">
        <span class="step__num"></span>
        <h3>{{ $t('como.t3') }}</h3>
        <p>{{ $t('como.p3') }}</p>
      </div>
    </div>
    <p class="center" style="margin-top:18px"><a href="{{ ruta('mentor') }}" style="color:var(--green-700);font-weight:600">{{ $t('como.enlace') }}</a></p>
  </div>
</section>

<!-- ============ APRENDE TU COCINA (banda verde) ============ -->
<section class="section home-banda">
  <div class="wrap">
    <div class="section-head center">
      <h2 style="color:var(--text-on-dark)">{{ $t('banda.title') }}</h2>
    </div>
    <div class="pro-compara" style="max-width:820px;margin-inline:auto">
      <div>
        <p class="pro-compara__etiqueta" style="color:var(--green-200)">{{ $t('banda.primera') }}</p>
        <x-mentor.note>{{ $t('banda.nota1') }}</x-mentor.note>
      </div>
      <div>
        <p class="pro-compara__etiqueta" style="color:var(--gold-400)">{{ $t('banda.quinta') }}</p>
        <x-mentor.note>{{ $t('banda.nota2') }}</x-mentor.note>
      </div>
    </div>
    <p class="center" style="color:var(--text-on-dark);margin-top:22px;line-height:1.65">{{ $t('banda.cierre') }}<br>
      <a href="{{ ruta('mentor') }}" style="color:var(--gold-400)">{{ $t('banda.aprende') }}</a> · <a href="{{ ruta('pro') }}" style="color:var(--gold-400)">{{ $t('banda.pro') }}</a></p>
  </div>
</section>

<!-- ============ QUÉ HACE LA APP ============ -->
<section class="section" id="funciones" style="background:var(--bg-canvas-deep)">
  <div class="wrap">
    <div class="section-head center reveal">
      <p class="eyebrow">La app</p>
      <h2>{{ $t('app.title') }}</h2>
    </div>

    <div class="feature-row reveal">
      <div class="feature-row__text">
        <h3>{{ $t('app.t1') }}</h3>
        <p>{{ $t('app.p1') }}</p>
      </div>
      <div class="feature-row__media">
        <div class="phone-frame"><div class="phone-frame__screen">
          <img src="/landing/img/app-pasos.webp" alt="Paso de fermentación con ingredientes y escala de sensación" width="388" height="540" loading="lazy" decoding="async">
        </div></div>
      </div>
    </div>

    <div class="feature-row reveal">
      <div class="feature-row__text">
        <h3>{{ $t('app.t2') }}</h3>
        <p>{{ $t('app.p2') }}</p>
      </div>
      <div class="feature-row__media">
        <div class="phone-frame"><div class="phone-frame__screen">
          <img src="/landing/img/app-registro.webp" alt="Barra de registro rápido e historial de eventos" width="388" height="540" loading="lazy" decoding="async">
        </div></div>
      </div>
    </div>

    <div class="feature-row reveal">
      <div class="feature-row__text">
        <h3>{{ $t('app.t3') }}</h3>
        <p>{{ $t('app.p3') }}</p>
      </div>
      <div class="feature-row__media">
        <div class="phone-frame"><div class="phone-frame__screen">
          <img src="/landing/img/app-evaluacion.webp" alt="Evaluación final de la tanda con valoración y perfil de sabor" width="388" height="540" loading="lazy" decoding="async">
        </div></div>
      </div>
    </div>

    <ul class="home-funciones reveal">
      <li><strong>{{ $t('app.f1') }}</strong> {{ $t('app.f1d') }}</li>
      <li><strong>{{ $t('app.f2') }}</strong> {{ $t('app.f2d') }}</li>
      <li><strong>{{ $t('app.f3') }}</strong> {{ $t('app.f3d') }}</li>
      <li><strong>{{ $t('app.f4') }}</strong> {{ $t('app.f4d') }}</li>
      <li><strong>{{ $t('app.f5') }}</strong> {{ $t('app.f5d') }}</li>
      <li><strong>{{ $t('app.f6') }}</strong> {{ $t('app.f6d') }}</li>
    </ul>
  </div>
</section>

<!-- ============ FERMENTOS: LOS CUATRO ESTANTES ============ -->
<section class="section" id="categorias">
  <div class="wrap">
    <div class="section-head center reveal">
      <p class="eyebrow">{{ $t('fermentos.eyebrow') }}</p>
      <h2>{{ $t('fermentos.title') }}</h2>
    </div>
    @foreach($categorias as $cat)
      @continue($cat->guides->isEmpty())
      <div class="shelf reveal">
        <div class="shelf__head">
          <h3 style="margin:0;font-family:var(--font-display)">{{ $cat->name }}</h3>
          <a class="shelf__more" href="{{ ruta('fermentos.show', $cat->slug) }}">{{ $t('fermentos.estante') }}</a>
        </div>
        <div class="fgrid">
          @foreach($cat->guides->take(4) as $g)
            <x-tarjeta-fermento :guide="$g" :show-cat="false" />
          @endforeach
        </div>
      </div>
    @endforeach
    <p class="center"><a class="btn btn--ghost" href="{{ ruta('fermentos.index') }}">{{ $t('fermentos.todos') }}</a></p>
  </div>
</section>

<!-- ============ INSTALABLE ============ -->
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap">
    <div class="newsletter reveal" style="text-align:center;">
      <p class="eyebrow">{{ $t('pwa.eyebrow') }}</p>
      <h2 style="margin-top:.4rem">{{ $t('pwa.title') }}</h2>
      <p class="lede" style="margin-top:.75rem">{{ $t('pwa.texto') }}</p>
      <div style="margin-top:20px;">
        <a class="btn btn--gold btn--lg" href="{{ $app }}/register" data-app-link>{{ $t('pwa.cta') }}</a>
      </div>
      <div class="faq" style="margin-top:26px;">
        <details>
          <summary><span>{{ $t('pwa.como') }}</span><svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></summary>
          <p>{{ $t('pwa.android') }}</p>
          <p>{{ $t('pwa.iphone') }}</p>
        </details>
      </div>
    </div>
  </div>
</section>

<!-- ============ PLANES (resumen; la tabla vive en /pro) ============ -->
<section class="section">
  <div class="wrap">
    <div class="section-head center reveal">
      <p class="eyebrow">Planes</p>
      <h2>{{ $t('planes.title') }}</h2>
    </div>
    <div class="pro-cards" style="max-width:940px;margin-inline:auto">
      <div class="pro-card">
        <h3>Gratis</h3>
        <p class="pro-card__precio">0 €</p>
        <p class="pro-card__nota">{{ $t('planes.free_nota') }}</p>
        <a class="btn btn--ghost" href="{{ $app }}/register" data-app-link>{{ $t('planes.free_cta') }}</a>
      </div>
      <div class="pro-card pro-card--destacada">
        <h3>Pro</h3>
        <p class="pro-card__precio">3,25 €/mes<small> {{ $t('planes.pro_pagando') }}</small></p>
        <p class="pro-card__suelto">{{ $t('planes.pro_suelto') }}</p>
        <p class="pro-card__nota">{{ $t('planes.pro_nota') }}</p>
        <a class="btn btn--primary" href="{{ ruta('pro') }}">Ver Pro</a>
        {{-- El precio publicado ES la tarifa Early Bird (2026-07-31). --}}
        <p class="pro-card__micro">{{ $t('planes.pro_early') }}</p>
      </div>
      {{-- El tercer plan no lleva nombre todavía (G6): la tarjeta habla del
           obrador, no de un plan. La tabla entera vive en /pro. --}}
      <div class="pro-card">
        <h3>{{ $t('planes.obrador_title') }}</h3>
        <p class="pro-card__precio">{{ $t('planes.obrador_precio') }}</p>
        <p class="pro-card__nota">{{ $t('planes.scale_nota') }}</p>
        <a class="btn btn--ghost" href="{{ ruta('contacto') }}?plan=scale">{{ $t('planes.scale_cta') }}</a>
        <p class="pro-card__micro">{!! $t('planes.scale_zymolab') !!}</p>
      </div>
    </div>
    <p class="center" style="font-size:13.5px;color:var(--ink-500);margin-top:14px">{{ $t('planes.micro') }}</p>
  </div>
</section>

<!-- ============ DE DÓNDE SALE ============ -->
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:760px">
    <p class="eyebrow reveal">{{ $t('historia.eyebrow') }}</p>
    <h2 class="reveal" style="margin:.2rem 0 12px">{{ $t('historia.title') }}</h2>
    <p class="reveal" style="color:var(--ink-700);line-height:1.7;margin:0 0 16px">{{ $t('historia.p1') }} <em>nuestra</em> {{ $t('historia.p2') }}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.7;margin:0 0 16px">{!! $t('historia.p3') !!}</p>
    <a class="reveal" href="{{ ruta('blog.show', 'construir-fermenty-decision-dificil') }}" style="color:var(--green-700);font-weight:600">{{ $t('historia.cta') }}</a>
  </div>
</section>

<!-- ============ FUNDADORES ============ -->
<section class="section" id="fundadores">
  <div class="wrap" style="max-width:760px">
    <p class="eyebrow reveal">{{ $t('fund.eyebrow') }}</p>
    <h2 class="reveal" style="margin:.2rem 0 12px">{{ $t('fund.title') }}</h2>
    <p class="reveal" style="color:var(--ink-700);line-height:1.7;margin:0 0 10px">{{ $t('fund.p1') }}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.7;margin:0 0 18px">{{ $t('fund.p2') }}</p>

    <div class="home-fundadores reveal">
      <div>
        <h3>Qué recibes</h3>
        <ul>
          <li>{{ $t('fund.r1') }}</li>
          <li>{{ $t('fund.r2') }}</li>
          <li>{{ $t('fund.r3') }}</li>
        </ul>
      </div>
      <div>
        <h3>Qué pedimos</h3>
        <ul>
          <li>{{ $t('fund.q1') }}</li>
          <li>{{ $t('fund.q2') }}</li>
          <li>{{ $t('fund.q3') }}</li>
        </ul>
      </div>
    </div>

    @if(session('fundadores_ok'))
      <p class="subscribe__ok" style="display:block;margin-top:18px">{{ $t('fund.ok') }}</p>
    @else
      <form class="home-fundadores__form reveal" method="POST" action="{{ ruta('fundadores.store') }}">
        @csrf
        <div style="position:absolute;left:-9999px;" aria-hidden="true"><input type="text" name="website" tabindex="-1" autocomplete="off"></div>
        <div class="home-fundadores__row">
          <label>Correo<input type="email" name="email" required maxlength="255" value="{{ old('email') }}"></label>
          <label>{{ $t('fund.fermentas') }}<input type="text" name="fermenta" required maxlength="200" placeholder="{{ $t('fund.placeholder') }}" value="{{ old('fermenta') }}"></label>
        </div>
        {{-- Primer paso: lo mínimo. El tiempo fermentando, la temperatura de la
             cocina, la videollamada y el consentimiento de publicación se
             preguntan en el correo de respuesta, cuando ya hay conversación
             (bloque G del briefing). El consentimiento NUNCA es implícito ni
             viene premarcado: sigue siendo una acción afirmativa, allí. --}}
        <button type="submit" class="btn btn--primary" style="margin-top:12px">{{ $t('fund.cta') }}</button>
        <p style="font-size:12.5px;color:var(--ink-400);margin-top:10px">{{ $t('fund.priv_1') }} <a href="{{ ruta('privacidad') }}">{{ $t('fund.priv_2') }}</a>.</p>
        @if($errors->hasAny(['email','fermenta','tiempo','temperatura']))
          <p class="subscribe__err" style="color:var(--rust-500);margin-top:8px">{{ $t('fund.error') }} {{ $errors->first() }}</p>
        @endif
      </form>
    @endif
  </div>
</section>

<!-- ============ FAQ ============ -->
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:760px">
    <div class="section-head center reveal"><h2>{{ $t('faq.title') }}</h2></div>
    <div class="ficha-faq reveal">
      @foreach($faqs as [$pregunta, $respuesta, $enlace])
        <details>
          <summary>{{ $pregunta }}</summary>
          <p>{{ $respuesta }}
            @if($enlace === 'pro') <a href="{{ ruta('pro') }}">Ver planes</a>@endif
            @if($enlace === 'privacidad') <a href="{{ ruta('privacidad') }}">Privacidad</a>@endif
          </p>
        </details>
      @endforeach
    </div>
  </div>
</section>

<!-- ============ RECOMIENDA ============ -->
<section class="section">
  <div class="wrap">
    <div class="newsletter reveal" style="text-align:center;">
      <h2>{{ $t('refer.title') }}</h2>
      <p class="lede" style="margin-top:.6rem">{{ $t('refer.p1') }} <strong>{{ $t('refer.mes') }}</strong> {{ $t('refer.p2') }}</p>

      @if(session('referral_sent') === 'sent')
        <p class="subscribe__ok" style="display:block">{{ $t('refer.ok') }}</p>
      @elseif(session('referral_sent') === 'resent')
        <p class="subscribe__ok" style="display:block">{{ $t('refer.reenviada') }}</p>
      @elseif(session('referral_sent') === 'friend_exists')
        <p class="subscribe__err" style="color:var(--rust-500);">{{ $t('refer.existe') }}</p>
      @endif

      <div style="margin-top:18px;">
        <button type="button" class="btn btn--primary btn--lg" data-refer-open>{{ $t('refer.modal') }}</button>
      </div>
      <p style="margin-top:10px;font-size:13px;color:var(--ink-400);">
        Tu amigo solo recibe un correo de invitación — nunca lo apuntamos a ninguna lista.
      </p>
    </div>
  </div>
</section>

<!-- ============ CIERRE + LISTA DE CORREO ============ -->
<section class="section" id="lista" style="background:var(--bg-canvas-deep)">
  <div class="wrap">
    <div class="newsletter reveal">
      <h2>{{ $t('cierre.title') }}</h2>
      <p style="margin-top:.5rem">{{ $t('cierre.lede') }}</p>
      <div class="hero__cta" style="margin:16px 0 22px">
        <a class="btn btn--primary" href="{{ ruta('afinador') }}">{{ $t('cierre.cta') }}</a>
        <a class="btn btn--ghost" href="{{ $app }}/register" data-app-link>{{ $t('cierre.cta2') }}</a>
      </div>

      <p class="eyebrow">{{ $t('lista.title') }}</p>
      @if(session('landing_subscribed') === 'existing' || request('subscribed') === 'existing')
        <p class="subscribe__ok" style="display:block">{{ $t('lista.ok') }}</p>
      @elseif(session('landing_subscribed') || request('subscribed'))
        <p class="subscribe__ok" style="display:block">{{ $t('lista.nueva') }}</p>
      @else
        <form class="subscribe" method="POST" action="{{ ruta('landing.subscribe') }}">
          @csrf
          <input type="text" name="name" value="{{ old('name') }}" placeholder="Tu nombre" aria-label="Tu nombre" autocomplete="given-name">
          <div class="subscribe__row">
            <input type="email" name="email" required value="{{ old('email') }}" placeholder="tu@correo.es" aria-label="Correo electrónico">
            <button class="btn btn--primary" type="submit">Avísame</button>
          </div>
          <div class="cf-turnstile" data-sitekey="{{ config('services.turnstile.site_key') }}" data-appearance="interaction-only"></div>
          {{-- honeypot: bots fill this, humans don't see it --}}
          <input type="text" name="website" value="" style="position:absolute;left:-9999px;opacity:0;height:0;width:0;" tabindex="-1" autocomplete="off" aria-hidden="true">
          <input type="hidden" name="_form_at" value="{{ now()->timestamp }}">
        </form>
        @error('email')<p class="subscribe__err" style="color:var(--rust-500);margin-top:10px;font-size:14px;">{{ $message }}</p>@enderror
      @endif
      <p style="margin-top:12px;font-size:13px;color:var(--ink-400)">{{ $t('lista.micro') }}</p>
    </div>
  </div>
</section>
@endsection

@push('scripts')
<!-- ============ MODAL: RECOMIENDA A UN AMIGO ============ -->
<div class="refer-modal" id="refer-modal" aria-hidden="true">
  <div class="refer-modal__overlay" data-refer-close></div>
  <div class="refer-modal__panel" role="dialog" aria-modal="true" aria-labelledby="refer-modal-title">
    <button type="button" class="refer-modal__x" data-refer-close aria-label="Cerrar">&times;</button>
    <h3 id="refer-modal-title" style="font-family:'Comfortaa',sans-serif;margin:0 0 6px;">{{ $t('refer.modal') }}</h3>
    <p style="font-size:14px;color:var(--ink-500);margin:0 0 18px;">
      {{ $t('refer.modal_texto') }}
    </p>

    <form method="POST" action="{{ ruta('referral.store') }}" class="refer-form">
      @csrf
      <label class="refer-form__label">Tu correo</label>
      <input type="email" name="recommender_email" required value="{{ old('recommender_email') }}" placeholder="tu@correo.es" class="refer-form__input">
      @error('recommender_email')<p class="refer-form__err">{{ $message }}</p>@enderror

      <label class="refer-form__label">{{ $t('refer.su_correo') }}</label>
      <input type="email" name="friend_email" required value="{{ old('friend_email') }}" placeholder="amigo@correo.es" class="refer-form__input">
      @error('friend_email')<p class="refer-form__err">{{ $message }}</p>@enderror

      <label class="refer-form__label">{{ $t('refer.mensaje') }}</label>
      <textarea name="message" rows="3" maxlength="500" placeholder="Creo que Fermenty te va a gustar." class="refer-form__input">{{ old('message') }}</textarea>
      @error('message')<p class="refer-form__err">{{ $message }}</p>@enderror

      <label style="display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-500);margin:6px 0 16px;cursor:pointer;">
        <input type="checkbox" name="opt_in" value="1" style="margin-top:3px;" {{ old('opt_in') ? 'checked' : '' }}>
        <span>{{ $t('refer.opt') }}</span>
      </label>

      <button type="submit" class="btn btn--primary btn--lg" style="width:100%;">{{ $t('refer.enviar') }}</button>
    </form>
  </div>
</div>

<script>
  (function () {
    var modal = document.getElementById('refer-modal');
    if (!modal) return;
    function open() { modal.classList.add('is-open'); modal.setAttribute('aria-hidden', 'false'); }
    function close() { modal.classList.remove('is-open'); modal.setAttribute('aria-hidden', 'true'); }
    document.querySelectorAll('[data-refer-open]').forEach(function (b) { b.addEventListener('click', open); });
    document.querySelectorAll('[data-refer-close]').forEach(function (b) { b.addEventListener('click', close); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
    @if($errors->has('recommender_email') || $errors->has('friend_email') || $errors->has('message'))
      open();
    @endif
  })();
</script>

{{-- Turnstile perezoso (F4): el widget protege UN formulario al fondo de la
     página — cargarlo en cada visita regalaba un tercero a la carga inicial.
     Se dispara con la primera interacción (nadie envía sin haber hecho scroll)
     y, por red de seguridad, a los 8 s pase lo que pase: si alguien llegara al
     form sin interacción registrada, el widget ya está resuelto de sobra. En
     el laboratorio (sin interacción) no carga: exactamente lo que medimos. --}}
<script>
(function () {
  var cargado = false;
  function cargar() {
    if (cargado) return;
    cargado = true;
    var s = document.createElement('script');
    s.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
    s.async = true; s.defer = true;
    document.head.appendChild(s);
    ['scroll', 'pointerdown', 'touchstart', 'keydown'].forEach(function (ev) {
      removeEventListener(ev, cargar);
    });
  }
  if (document.querySelector('.cf-turnstile')) {
    ['scroll', 'pointerdown', 'touchstart', 'keydown'].forEach(function (ev) {
      addEventListener(ev, cargar, { passive: true, once: false });
    });
    setTimeout(cargar, 8000);
  }
})();
</script>
@endpush