{{-- /herramientas/afinador-kombucha — la puerta de entrada del sitio
     (docs/paginas/afinador.md + docs/Afinador_Web.md). Se usa antes de leerse:
     la herramienta arriba, la prosa debajo (SSR, que es donde rankea). El
     resultado completo no se corta nunca; el registro llega después y ofrece
     otra cosa. El cálculo entero ocurre en servidor. --}}
@extends('layouts.web')

@php
    $app = \App\Support\Superficie::base();
    // El copy vive en lang/{idioma}/pagina_afinador.php.
    $t = fn (string $k, array $p = []) => __("pagina_afinador.$k", $p);
    $faqs = collect(range(1, 6))->map(fn ($i) => [$t("faq.q$i"), $t("faq.a$i")])->all();
@endphp

@section('seo')
{{-- Un cálculo compartido lleva SUS números en la vista previa: es lo que hace
     que alguien pinche un enlace pegado en un grupo. Y el canonical apunta
     siempre a la URL limpia, para no llenar el índice de variantes. --}}
@if($compartido)
<x-seo :title="$compartido['titulo']"
       :description="$compartido['descripcion']"
       :image="$compartido['imagen']"
       :canonical="ruta('afinador')" />
@else
<x-seo :title="__('pagina_afinador.seo.title')" :description="__('pagina_afinador.seo.desc')" :canonical="ruta('afinador')" />
@endif
@endsection

@push('head')
{{-- Con ?v= (mtime): sin versión, el navegador sirve el JS/CSS viejo días
     después de un arreglo — y este cliente ha tenido ya arreglos que no
     llegaban por eso. --}}
{{-- El afinador escribe su pliegue en JetBrains Mono (etiquetas, outputs) y esa
     es la única familia sin preload global: si llega tras el pintado, el swap
     recoloca los controles (el CLS intermitente de 0,13 — fase 5 hotfix). --}}
<link rel="preload" href="/landing/fonts/jetbrains-mono-vf.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="{{ asset_v('landing/pages/fermentos.css') }}">
<link rel="stylesheet" href="{{ asset_v('landing/pages/afinador.css') }}">
@php
    $ldFaq = ['@context' => 'https://schema.org', '@type' => 'FAQPage', 'mainEntity' => array_map(fn ($f) => [
        '@type' => 'Question', 'name' => $f[0],
        'acceptedAnswer' => ['@type' => 'Answer', 'text' => $f[1]],
    ], $faqs)];
    $ldCrumbs = ['@context' => 'https://schema.org', '@type' => 'BreadcrumbList', 'itemListElement' => [
        ['@type' => 'ListItem', 'position' => 1, 'name' => 'Inicio', 'item' => url('/')],
        ['@type' => 'ListItem', 'position' => 2, 'name' => 'Herramientas', 'item' => ruta('herramientas')],
        ['@type' => 'ListItem', 'position' => 3, 'name' => 'Afinador de kombucha', 'item' => ruta('afinador')],
    ]];
    // La herramienta como entidad propia, en SU página — la app Fermenty se
    // describe en la home; offers a 0 € es «gratis, sin registro» hecho marcado
    // (Zymolab_Enlace_Fermenty.md §4).
    $ldTool = ['@context' => 'https://schema.org', '@type' => 'SoftwareApplication',
        'name' => __('armazon.pie.afinador'),
        'applicationCategory' => 'UtilitiesApplication',
        'operatingSystem' => 'Web',
        'url' => ruta('afinador'),
        'description' => __('pagina_afinador.seo.desc'),
        'isAccessibleForFree' => true,
        'offers' => ['@type' => 'Offer', 'price' => '0', 'priceCurrency' => 'EUR'],
    ];
@endphp
<script type="application/ld+json">{!! json_encode($ldFaq, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
<script type="application/ld+json">{!! json_encode($ldCrumbs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
<script type="application/ld+json">{!! json_encode($ldTool, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
<section class="section--tight" style="padding-top:42px">
  <div class="wrap af-wrap">
    <p class="eyebrow">{{ $t('hero.eyebrow') }}</p>
    <h1 style="margin:.3rem 0 0">{{ $t('hero.title') }}</h1>
    <p class="lede" style="margin-top:10px">{{ $t('hero.lede') }}</p>
  </div>
</section>

{{-- ══════════ LA HERRAMIENTA ══════════ --}}
<section class="section" style="padding-top:14px">
  <div class="wrap af-wrap" id="afinador"
       data-endpoint="{{ ruta('afinador.calcular') }}"
       data-feedback="{{ ruta('afinador.feedback') }}"
       data-guardar="{{ ruta('afinador.guardar') }}"
       data-puente-base="{{ url('/afinador/p') }}"
       data-register="{{ $app }}/register?from=afinador"
       data-inicial='@json($inicial)'>

    <div class="af-panel">
      <div class="af-sliders">
        <label class="af-field">
          <span class="af-field__head">{{ $t('panel.temp') }} <output id="afTempOut">22 °C</output></span>
          <input type="range" id="afTemp" min="14" max="32" step="1" value="22">
          <span class="af-field__hint" id="afTempHint">{{ $t('panel.temp_hint') }}</span>
        </label>
        <label class="af-field">
          <span class="af-field__head">{{ $t('panel.volumen') }} <output id="afVolOut">3 L</output></span>
          <input type="range" id="afVol" min="1" max="12" step="1" value="3">
          <span class="af-field__hint">{{ $t('panel.volumen_hint') }}</span>
        </label>
      </div>

      <p class="af-label">{{ $t('panel.como') }}</p>
      <div class="af-presets" id="afPresets">
        @foreach($presets->where('primario', true) as $p)
          <button type="button" class="af-chip" data-preset="{{ $p['id'] }}" title="{{ $p['frase'] }}">{{ $p['etiqueta'] }}</button>
        @endforeach
      </div>
      <p class="af-frase" id="afFrase"></p>

      {{-- La capa de override: sobreescritura sobre lo que el preset ya decidió.
           Cambiar de preset la descarta (Afinador_Web.md §2). --}}
      <details class="af-ajustar" id="afAjustar">
        <summary>{{ $t('panel.ajustar') }} <span id="afAjustarResumen"></span></summary>
        {{-- Los otros tres perfiles: aquí, no en la primera pantalla. La web
             anuncia que se elige con una frase y ofrece tres; quien quiera los
             seis los tiene a un clic (bloque D). --}}
        <p class="af-label" style="margin-top:14px">{{ $t('panel.mas_perfiles') }}</p>
        <div class="af-presets" id="afPresetsMas">
          @foreach($presets->where('primario', false) as $p)
            <button type="button" class="af-chip" data-preset="{{ $p['id'] }}" title="{{ $p['frase'] }}">{{ $p['etiqueta'] }}</button>
          @endforeach
        </div>

        <div class="af-ajustar__grid">
          <div>
            <p class="af-label">{{ $t('panel.burbujas') }}</p>
            <div class="af-gas" id="afGas">
              <button type="button" data-gas="0">{{ $t('panel.sin_gas') }}</button>
              <button type="button" data-gas="0.35">{{ $t('panel.poca') }}</button>
              <button type="button" data-gas="0.8">{{ $t('panel.burbujeante') }}</button>
            </div>
          </div>
          <label class="af-field">
            <span class="af-field__head">{{ $t('panel.azucar') }}</span>
            <select id="afAzucar" class="af-select">
              <option value="">{{ $t('panel.azucar_preset') }}</option>
              @foreach($azucares as $slug => $nombre)<option value="{{ $slug }}">{{ $nombre }}</option>@endforeach
            </select>
          </label>
          <label class="af-field">
            <span class="af-field__head">{{ $t('panel.te') }}</span>
            <select id="afTe" class="af-select">
              <option value="">{{ $t('panel.te_preset') }}</option>
              @foreach($tes as $slug => $nombre)<option value="{{ $slug }}">{{ $nombre }}</option>@endforeach
            </select>
          </label>
        </div>
        <button type="button" class="af-volver" id="afVolver">{{ $t('panel.volver') }}</button>

        {{-- Hasta dónde llega el afinador, y dónde siguen los mandos finos.
             El bloque plegado es, de paso, la mejor demostración de qué compra
             Pro (pagina-afinador.md §3). --}}
        <p class="af-ajustar__mas">
          {!! $t('panel.mas_ejes') !!}
          <a href="#ejes">{{ $t('panel.que_ejes') }}</a> · <a href="{{ $app }}/register?from=afinador" data-app-link>{{ $t('panel.formular_ejes') }}</a>
        </p>
      </details>
    </div>

    {{-- ══════════ EL RESULTADO — completo, siempre, sin taparse nunca ══════════ --}}
    <div class="af-result" id="afResult" hidden>
      <p class="af-label">{!! $t('resultado.propuesta', ['volumen' => '<span id="afEcoVol">3 litros</span>']) !!}</p>

      <div class="af-cants" id="afCants"></div>

      <div class="af-ventana">
        <p class="af-ventana__dias" id="afVentanaDias"></p>
        <p class="af-ventana__fechas" id="afVentanaFechas"></p>
        <p class="af-ventana__cierre" id="afCierre"></p>
      </div>

      {{-- La voz del mentor dentro del resultado, con emblema (pagina-afinador.md §3) --}}
      <div id="afTrueques"></div>
      <div id="afAvisos"></div>

      <details class="af-numeros">
        <summary>{{ $t('resultado.ver_numeros') }}</summary>
        <p id="afNumeros"></p>
      </details>

      {{-- Tres niveles, no siete decisiones a la vez (bloque C del briefing):
           una acción primaria sola, dos secundarias discretas, y el feedback
           diferido hasta que la persona haya hecho algo con su resultado. --}}
      <div class="af-cta">
        <p class="af-cta__aviso">{!! $t('resultado.aviso_temp', ['temp' => '<span id="afEcoTemp">22 °C</span>']) !!}</p>
        <div class="af-cta__btns">
          <button type="button" class="btn btn--primary btn--lg" id="afEmpezar">{{ $t('resultado.empezar') }}</button>
        </div>
        <div class="af-cta__secundarias">
          <button type="button" class="af-link" id="afCompartir">{{ $t('resultado.compartir') }}</button>
          <span class="af-cta__sep">·</span>
          {{-- Pide el correo: se dice AQUÍ, no al pulsar — la página promete
               tres veces «sin dejar el correo» y hay que ser coherente (C-bis). --}}
          <button type="button" class="af-link" id="afGuardarBtn">{{ $t('resultado.guardar') }} <small>{{ $t('resultado.guardar_nota') }}</small></button>
        </div>
      </div>

      {{-- Peldaño 1 · ¿Te cuadra? — diferido: aparece cuando ya ha tocado algo --}}
      <div class="af-cuadra" id="afCuadra" hidden>
        <span>{{ $t('cuadra.pregunta') }}</span>
        <button type="button" data-resp="cuadra">{{ $t('cuadra.cuadra') }}</button>
        <button type="button" data-resp="poco">{{ $t('cuadra.poco') }}</button>
        <button type="button" data-resp="mucho">{{ $t('cuadra.mucho') }}</button>
      </div>
      <div class="af-cuadra af-cuadra--esperaba" id="afEsperaba" hidden>
        <input type="text" maxlength="200" placeholder="{{ $t('cuadra.esperaba') }}" id="afEsperabaTxt">
        <button type="button" id="afEsperabaEnviar">{{ $t('cuadra.enviar') }}</button>
      </div>

      {{-- Peldaño 2 · gracias + correo (aparece al pulsar; sin salto de maquetación) --}}
      <div class="af-guardar" id="afGuardar" hidden>
        <h3>{{ $t('correo.title') }}</h3>
        <p>{{ $t('correo.texto') }}</p>
        <div class="af-guardar__campos">
          <input type="text" id="afNombre" maxlength="80" placeholder="{{ $t('correo.nombre') }}">
          <input type="email" id="afEmail" placeholder="{{ $t('correo.email') }}">
          <button type="button" class="btn btn--primary" id="afAvisame">{{ $t('correo.avisame') }}</button>
        </div>
        <label class="af-check"><input type="checkbox" id="afBoletin"> {{ $t('correo.boletin') }}</label>
        <label class="af-check"><input type="checkbox" id="afFundadores"> {{ $t('correo.fundadores') }}</label>
        <p class="af-micro">{{ $t('correo.micro') }} <a href="{{ ruta('privacidad') }}">{{ $t('correo.privacidad') }}</a></p>
        <p class="af-ok" id="afGuardadoOk" hidden>{{ $t('correo.ok') }}</p>
      </div>

      {{-- Peldaño 3 · la segunda visita (inline, descartable, tope 30 días) --}}
      <div class="af-segunda" id="afSegunda" hidden>
        <h3>{{ $t('segunda.title') }}</h3>
        <p>{!! $t('segunda.texto') !!}</p>
        <div class="af-cta__btns">
          <a class="btn btn--primary" href="{{ $app }}/register?from=afinador" data-app-link>{{ $t('segunda.cta') }}</a>
          <button type="button" class="btn btn--ghost" id="afAhoraNo">{{ $t('segunda.no') }}</button>
        </div>
        <p class="af-micro">{{ $t('segunda.micro') }}</p>
      </div>
    </div>

    {{-- Escalera de defensa: el bloque de conversión (a partir de 15 cálculos).
         FUERA de #afResult a propósito: tras una recarga con la sesión ya al
         tope, el resultado sigue oculto — si el límite viviera dentro, la
         página se quedaría muda, sin ingredientes ni explicación. --}}
    <div class="af-limite" id="afLimite" hidden>
      <h3>{{ $t('limite.title') }}</h3>
      <p>{{ $t('limite.texto') }}</p>
      <a class="btn btn--primary" href="{{ $app }}/register?from=afinador" data-app-link>{{ $t('limite.cta') }}</a>
    </div>

    {{-- Cualquier otro fallo (red, sesión caducada): un resultado que deja de
         moverse sin decir nada parece un error de la herramienta. --}}
    <p class="af-error" id="afError" hidden>{{ $t('resultado.error') }}</p>

    {{-- Enlaces cruzados: DEBAJO del CTA, no encima — una salida lateral no
         compite con la conversión (Afinador_Kefir_Web.md §8). El triángulo:
         al otro afinador, al estante, y la guía del propio fermento. --}}
    <div class="af-cruce" style="margin-top:36px;font-size:14.5px;color:var(--ink-500)">
      <p style="margin:0 0 8px">{!! $t('cruce.kefir', ['url' => ruta('afinador-kefir')]) !!}</p>
      <p style="margin:0">{!! $t('cruce.estante', ['url' => ruta('herramientas')]) !!}</p>
    </div>
  </div>
</section>

{{-- ══════════ LA PROSA — aquí es donde la página rankea (SSR) ══════════ --}}
<section class="section af-prosa" style="background:var(--bg-canvas-deep)">
  <div class="wrap af-wrap">

    <h2 id="azucar">{{ $t('prosa.azucar_t') }}</h2>
    <p>{{ $t('prosa.azucar_p') }}</p>

    <h2 id="dias">{{ $t('prosa.dias_t') }}</h2>
    <p>{{ $t('prosa.dias_p') }}</p>

    <h2 id="suelo">{{ $t('prosa.suelo_t') }}</h2>
    <p>{{ $t('prosa.suelo_p') }}</p>

    <h2 id="arrancador">{{ $t('prosa.arrancador_t') }}</h2>
    <p>{{ $t('prosa.arrancador_p') }}</p>

    <h2 id="segunda">{{ $t('prosa.segunda_t') }}</h2>
    <p>{{ $t('prosa.segunda_p') }}</p>

    <h2 id="acida">{{ $t('prosa.acida_t') }}</h2>
    <p>{{ $t('prosa.acida_p') }} <a href="{{ ruta('fermentos.show', 'kombucha') }}">{{ $t('prosa.acida_enlace') }}</a> {{ $t('prosa.acida_cierre') }}</p>
  </div>
</section>

{{-- FAQ --}}
<section class="section">
  <div class="wrap af-wrap">
    <h2 style="font-family:var(--font-display)">{{ $t('faq.title') }}</h2>
    <div class="ficha-faq">
      @foreach($faqs as $f)
        <details @if($loop->last) id="ejes" @endif>
          <summary>{{ $f[0] }}</summary>
          {{-- Las respuestas admiten HTML: la a2 enlaza al método en zymolab.es (§3 del enlace) --}}
          <p>{!! $f[1] !!}</p>
          @if($loop->last)
            <p><a href="{{ ruta('pro') }}">{{ $t('faq.que_pro') }}</a> · <a href="{{ ruta('mentor') }}">{{ $t('faq.como_calcula') }}</a></p>
          @endif
        </details>
      @endforeach
    </div>

    {{-- Avisos y responsabilidad (§8): coherencia, no letra pequeña defensiva --}}
    <div class="af-legal">
      <p>{{ $t('legal.p1') }}</p>
      <p>{{ $t('legal.p2') }}</p>
    </div>
  </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset_v('landing/pages/afinador.js') }}" defer></script>
@endpush