{{-- /herramientas/afinador-kefir-agua — el afinador de kéfir de agua
     (docs/Afinador_Kefir_Web.md + Prosa_Afinador_Kefir_Web.md + SEO_Cierre).

     Tres decisiones de montaje que NO son cosméticas:
      · La página SE SIRVE con la propuesta de fábrica calculada dentro: sin
        JavaScript sigue habiendo cantidades, calendario y trueque (§4).
      · El calendario servido va en HORAS RELATIVAS («a las 48 h»); el JS pone
        las fechas al cargar. Así cada rastreo ve el mismo HTML (SEO §5.2).
      · Los textos de trueques y avisos vienen RENDERIZADOS en $resultado, de
        lang/motor.php vía la voz. Aquí no se escribe ninguno: si un texto de
        mentor apareciera en esta plantilla, la web y la app dirían cosas
        distintas del mismo cálculo (§1 bis, y hay un test que lo vigila). --}}
@extends('layouts.web')

@php
    $t = fn (string $k, array $p = []) => __("pagina_afinador_kefir.$k", $p);
    $r = $resultado;
    $totalHoras = $r['corte_h'] + $r['botella_h'];
@endphp

@section('seo')
<x-seo :title="$t('seo.title')" :description="$t('seo.desc')" :canonical="ruta('afinador-kefir')" />
@endsection

@push('head')
{{-- Mismo preload de mono que el afinador de kombucha: su pliegue vive en
     JetBrains Mono y el swap tardío movía los controles (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-kefir.css') }}">
@php
    $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' => $t('hero.title'), 'item' => ruta('afinador-kefir')],
    ]];
    $ldTool = ['@context' => 'https://schema.org', '@type' => 'SoftwareApplication',
        'name' => $t('hero.title'),
        'applicationCategory' => 'UtilitiesApplication',
        'operatingSystem' => 'Web',
        'url' => ruta('afinador-kefir'),
        'description' => $t('seo.desc'),
        'isAccessibleForFree' => true,
        'offers' => ['@type' => 'Offer', 'price' => '0', 'priceCurrency' => 'EUR'],
    ];
@endphp
<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 afk-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>

{{-- ══════════ EL INSTRUMENTO ══════════ --}}
<section class="section" style="padding-top:14px">
  <div class="wrap afk-wrap" id="afinadorKefir"
       data-endpoint="{{ route('afinador.formular') }}"
       data-guardar="{{ ruta('afinador.guardar') }}"
       data-puente-base="{{ url('/afinador/p') }}"
       data-inicial='@json($inicial + ['corte' => $r['corte_h'], 'ajustes' => $r['ajustes']])'
       data-resultado='@json($r)'
       data-tramo-label="{{ $t('curva.tramo') }}"
       data-colar-label="{{ $t('curva.colar') }}">

    {{-- El limitador, ENCIMA del instrumento: cuando salte, la explicación
         aparece justo donde la persona está tocando los mandos — y la última
         propuesta sigue intacta más abajo (§5: nunca se borra lo que ya tenía). --}}
    <div class="afk-limite" id="akLimite" hidden>
      <h3>{{ $t('limite.title') }}</h3>
      <p>{{ $t('limite.texto') }}</p>
      <a class="btn btn--primary" href="{{ rtrim((string) config('app.mobile_url'), '/') }}/register?from=afinador" data-app-link>{{ $t('limite.cta') }}</a>
    </div>

    <div class="afk-panel">
      <div class="afk-sliders">
        <label class="afk-field">
          <span class="afk-field__head">{{ $t('panel.temp') }} <output id="akTempOut">{{ $inicial['temp'] }} °C</output></span>
          <input type="range" id="akTemp" min="14" max="32" step="1" value="{{ $inicial['temp'] }}">
          <span class="afk-field__hint">{{ $t('panel.temp_hint') }}</span>
        </label>
        <label class="afk-field">
          <span class="afk-field__head">{{ $t('panel.volumen') }} <output id="akVolOut">{{ $inicial['volumen'] }} L</output></span>
          <input type="range" id="akVol" min="0.5" max="8" step="0.5" value="{{ $inicial['volumen'] }}">
          <span class="afk-field__hint">{{ $t('panel.volumen_hint') }}</span>
        </label>
      </div>

      {{-- Dos ejes y SEPARADOS a propósito: el modelo afirma que perfil y gas
           son independientes; meter el gas dentro del perfil sería contradecir
           el motor en la interfaz (§1 del briefing). --}}
      <div class="afk-ejes">
        <div>
          <p class="afk-label">{{ $t('panel.como') }}</p>
          <div class="afk-chips" id="akPerfiles" role="group" aria-label="{{ $t('panel.como') }}">
            @foreach($perfiles as $p)
              <button type="button" class="afk-chip @if($p['id'] === $inicial['perfil']) is-on @endif"
                      data-perfil="{{ $p['id'] }}" title="{{ $p['frase'] }}">{{ $t('panel.perfil.' . $p['id']) }}</button>
            @endforeach
          </div>
          <p class="afk-pie" id="akPiePerfil">{{ $t('panel.pie_perfil.' . $inicial['perfil']) }}</p>
        </div>
        <div>
          <p class="afk-label">{{ $t('panel.burbuja') }}</p>
          <div class="afk-chips" id="akGas" role="group" aria-label="{{ $t('panel.burbuja') }}">
            @foreach(['poco', 'normal', 'mucho'] as $g)
              <button type="button" class="afk-chip @if($g === $inicial['gas']) is-on @endif"
                      data-gas="{{ $g }}">{{ $t('panel.gas.' . $g) }}</button>
            @endforeach
          </div>
          <p class="afk-pie" id="akPieGas">{{ $t('panel.pie_gas.' . $inicial['gas']) }}</p>
        </div>
      </div>

      {{-- ══ LA CURVA — es el mando: el perfil se define por dónde se corta ══ --}}
      <div class="afk-curva">
        <div class="afk-curva__cab">
          <h2 class="afk-curva__titulo">{{ $t('curva.titulo') }}</h2>
          <p class="afk-curva__ayuda">{{ $t('curva.ayuda') }}</p>
        </div>
        <svg id="akSvg" viewBox="0 0 720 250" role="img" aria-label="{{ $t('curva.aria') }}"></svg>
        <div class="afk-leyenda">
          <span><i class="afk-muestra" style="border-color:var(--green-600)"></i>{{ $t('curva.f1') }}</span>
          <span><i class="afk-muestra afk-muestra--disc" style="border-color:var(--grape, #6B3F5B)"></i>{{ $t('curva.botella') }}</span>
          <span><i class="afk-muestra" style="border-color:var(--paper-4)"></i>{{ $t('curva.suelo') }}</span>
        </div>
      </div>

      {{-- La capa de ajuste: SOBREESCRITURA sobre lo que el perfil decidió
           (Lexico §6). Se inicializa desde la propuesta, lo tocado se cuenta,
           y cambiar de perfil lo descarta todo. --}}
      <details class="afk-ajustar" id="akAjustar">
        <summary>{{ $t('panel.ajustar') }} <span id="akAjustarResumen"></span></summary>
        <div class="afk-ajustar__grid">
          <label class="afk-field">
            <span class="afk-field__head">{{ $t('panel.granulos') }} <output id="akGranOut">{{ $r['ajustes']['granulos'] }} g/L</output></span>
            <input type="range" id="akGran" min="30" max="200" step="10" value="{{ $r['ajustes']['granulos'] }}">
          </label>
          <label class="afk-field">
            <span class="afk-field__head">{{ $t('panel.fruta') }} <output id="akFrutaOut">{{ $r['ajustes']['fruta'] }} uds/L</output></span>
            <input type="range" id="akFruta" min="0" max="4" step="1" value="{{ $r['ajustes']['fruta'] }}">
          </label>
          <div class="afk-field">
            <span class="afk-field__head">{{ $t('panel.estado') }}</span>
            <div class="afk-chips" id="akEstado">
              <button type="button" class="afk-chip is-on" data-estado="descansado">{{ $t('panel.descansados') }}</button>
              <button type="button" class="afk-chip" data-estado="encadenado">{{ $t('panel.recien_colados') }}</button>
            </div>
          </div>
          <label class="afk-field">
            <span class="afk-field__head">{{ $t('panel.corte') }} <output id="akCorteOut">{{ $r['corte_h'] }} h</output></span>
            <input type="range" id="akCorte" min="12" max="140" step="1" value="{{ $r['corte_h'] }}">
            <span class="afk-field__hint" id="akCorteManual" hidden>{{ $t('panel.corte_manual') }}</span>
          </label>
        </div>
        <button type="button" class="afk-volver" id="akVolver" hidden>{{ $t('panel.volver') }}</button>
      </details>
    </div>

    {{-- ══════════ LA PROPUESTA — servida, el orden no es negociable ══════════ --}}
    <div class="afk-propuesta" id="akPropuesta">
      <p class="afk-bloque">{{ $t('resultado.necesitas') }}</p>
      <div class="afk-cants" id="akCants">
        @foreach($r['cantidades'] as $c)
          <div class="afk-cant">
            <span class="afk-cant__v">{{ $c['cantidad'] }}<span class="afk-cant__u">{{ $c['unidad'] === 'unit' ? 'uds' : $c['unidad'] }}</span></span>
            <span class="afk-cant__q">{{ $c['nombre'] }}</span>
          </div>
        @endforeach
      </div>

      <div class="afk-calendario" id="akCalendario">
        <p class="afk-bloque">{{ $t('resultado.cuando') }}</p>
        @foreach($r['calendario'] as $tramo)
          <div class="afk-tramo">
            <span class="afk-marca afk-marca--{{ $tramo['tipo'] }}">{{ $tramo['marca'] }}@if($tramo['h'] > 0) · {{ $tramo['h'] }} h @endif</span>
            <div>
              {{-- Horas relativas en el HTML servido; el JS añade la fecha local. --}}
              <div class="afk-tramo__hora" data-h="{{ $tramo['h'] }}">{{ $tramo['h'] === 0 ? '—' : $t('resultado.en_horas', ['h' => $tramo['h']]) }}</div>
              <div class="afk-tramo__nota">{{ $tramo['nota'] }}</div>
            </div>
          </div>
        @endforeach
      </div>

      <div id="akTrueques" data-firma="{{ $t('resultado.del_mentor') }}">
        @foreach($r['trueques'] as $mensaje)
          <div class="afk-trueque">
            <span class="afk-firma">{{ $t('resultado.del_mentor') }}</span>
            <p>{{ $mensaje }}</p>
          </div>
        @endforeach
      </div>

      <div class="afk-avisos" id="akAvisos">
        @foreach($r['avisos_duros'] as $mensaje)
          <div class="afk-aviso-duro">{{ $mensaje }}</div>
        @endforeach
      </div>

      <details class="afk-numeros">
        <summary>{{ $t('resultado.ver_numeros') }}</summary>
        <table id="akNumeros">
          <tbody>
            @foreach($r['numeros'] as $fila)
              <tr>
                <th>{{ $fila['etiqueta'] }}</th>
                <td>{{ $fila['valor'] }}@if($fila['glosa'])<span class="afk-glosa">{{ $fila['glosa'] }}</span>@endif</td>
              </tr>
            @endforeach
          </tbody>
        </table>
        <ul class="afk-blandos" id="akBlandos">
          @foreach($r['avisos_blandos'] as $mensaje)
            <li>{{ $mensaje }}</li>
          @endforeach
        </ul>
      </details>
    </div>

    {{-- Hueco previsto: consejos de nivel fermento SIN síntoma (la cuarta
         ventana de Consejos_Admin_Pantalla §2). La decisión §7a/§7b sigue
         abierta y hoy no hay filas que pintar; cuando se cierre, el
         renderizador entra aquí sin rehacer la página (briefing §1 bis). --}}
    <div id="akConsejos" hidden></div>

    {{-- ══════════ EL CIERRE — anclado en lo que la herramienta no puede hacer ══════════ --}}
    <div class="afk-cierre">
      <p id="akCierreTexto" data-plantilla="{{ $t('cierre.texto', ['temp' => '###T###', 'horas' => '###H###']) }}">{{ $t('cierre.texto', ['temp' => $inicial['temp'], 'horas' => $totalHoras]) }}</p>
      <div class="afk-acciones">
        <button type="button" class="btn btn--primary btn--lg" id="akEmpezar">{{ $t('cierre.empezar') }} →</button>
        <button type="button" class="btn btn--ghost" id="akEnviarme">{{ $t('cierre.enviarme') }}</button>
      </div>

      <div class="afk-correo" id="akCorreo" hidden>
        <h3>{{ $t('correo.title') }}</h3>
        <p>{{ $t('correo.texto') }}</p>
        <div class="afk-correo__campos">
          <input type="text" id="akNombre" maxlength="80" placeholder="{{ $t('correo.nombre') }}">
          <input type="email" id="akEmail" placeholder="{{ $t('correo.email') }}">
          <button type="button" class="btn btn--primary" id="akAvisame">{{ $t('correo.avisame') }}</button>
        </div>
        {{-- Dos envíos distintos que no se mezclan (§6): la propuesta es
             transaccional; el boletín es Brevo con doble opt-in y sin premarcar. --}}
        <label class="afk-check"><input type="checkbox" id="akBoletin"> {{ $t('correo.boletin') }}</label>
        <label class="afk-check"><input type="checkbox" id="akFundadores"> {{ $t('correo.fundadores') }}</label>
        <p class="afk-micro">{{ $t('correo.micro') }} <a href="{{ ruta('privacidad') }}">{{ $t('correo.privacidad') }}</a></p>
        <p class="afk-ok" id="akCorreoOk" hidden>{{ $t('correo.ok') }}</p>
      </div>
    </div>

    <p class="afk-error" id="akError" hidden>{{ $t('resultado.error') }}</p>

    {{-- Los pies de eje de los estados no seleccionados, para el widget. Copy
         de la web (lang de página), no voz del motor. --}}
    @php
        $pies = [
            'perfil' => ['dulce' => $t('panel.pie_perfil.dulce'), 'equilibrado' => $t('panel.pie_perfil.equilibrado'), 'seco' => $t('panel.pie_perfil.seco')],
            'gas'    => ['poco' => $t('panel.pie_gas.poco'), 'normal' => $t('panel.pie_gas.normal'), 'mucho' => $t('panel.pie_gas.mucho')],
        ];
    @endphp
    <script type="application/json" id="akPies">@json($pies)</script>

    {{-- Enlaces cruzados: DEBAJO del CTA, no encima (§8). Guía primero — es el
         par que más pesa; el triángulo con kombucha y el estante, después. --}}
    <div class="afk-enlaces">
      <p>{!! $t('enlaces.guia', ['url' => ruta('fermentos.show', 'kefir-agua')]) !!}</p>
      <p>{!! $t('enlaces.kombucha', ['url' => ruta('afinador')]) !!}</p>
      <p>{!! $t('enlaces.estante', ['url' => ruta('herramientas')]) !!}</p>
    </div>
  </div>
</section>

{{-- ══════════ LA PROSA — es lo que posiciona (texto cerrado, no reescribir) ══════════ --}}
<section class="section afk-prosa" style="background:var(--bg-canvas-deep)">
  <div class="wrap afk-wrap">

    <h2 id="azucar">{{ $t('prosa.azucar_t') }}</h2>
    <p>{{ $t('prosa.azucar_p1') }}</p>
    <p>{!! $t('prosa.azucar_p2') !!}</p>
    <p>{{ $t('prosa.azucar_p3') }}</p>
    <ul>
      <li>{!! $t('prosa.azucar_l1') !!}</li>
      <li>{!! $t('prosa.azucar_l2') !!}</li>
    </ul>
    <p>{!! $t('prosa.azucar_p4') !!}</p>
    <p>{!! $t('prosa.azucar_p5') !!}</p>

    <h2 id="tiempo">{{ $t('prosa.tiempo_t') }}</h2>
    <p>{!! $t('prosa.tiempo_p1') !!}</p>
    <p>{{ $t('prosa.tiempo_p2') }}</p>
    <blockquote><strong>{{ $t('prosa.tiempo_cita') }}</strong></blockquote>
    <p>{{ $t('prosa.tiempo_p3') }}</p>
    <p>{{ $t('prosa.tiempo_p4') }}</p>
    <p>{!! $t('prosa.tiempo_p5') !!}</p>

    <h2 id="gas">{{ $t('prosa.gas_t') }}</h2>
    <p>{!! $t('prosa.gas_p1') !!}</p>
    <p>{!! $t('prosa.gas_p2') !!}</p>
    <p>{{ $t('prosa.gas_p3') }}</p>
    <ol>
      <li>{!! $t('prosa.gas_l1') !!}</li>
      <li>{!! $t('prosa.gas_l2') !!}</li>
      <li>{!! $t('prosa.gas_l3') !!}</li>
    </ol>
    <p>{!! $t('prosa.gas_p4') !!}</p>
    <p>{{ $t('prosa.gas_p5') }}</p>

    <h2 id="ingredientes">{{ $t('prosa.ingredientes_t') }}</h2>
    <p>{{ $t('prosa.ingredientes_p1') }}</p>
    <p>{!! $t('prosa.ingredientes_agua') !!}</p>
    <p>{!! $t('prosa.ingredientes_fruta') !!}</p>
    <p>{!! $t('prosa.ingredientes_limon') !!}</p>
    <p>{!! $t('prosa.ingredientes_granulos') !!}</p>

    <h2 id="listo">{{ $t('prosa.listo_t') }}</h2>
    <p>{{ $t('prosa.listo_p1') }}</p>
    <p>{!! $t('prosa.listo_p2') !!}</p>
    <p>{!! $t('prosa.listo_p3') !!}</p>
    <p>{!! $t('prosa.listo_p4') !!}</p>
    <p>{{ $t('prosa.listo_p5') }}</p>

    <h2 id="alcohol">{{ $t('prosa.alcohol_t') }}</h2>
    <p>{{ $t('prosa.alcohol_p1') }}</p>
    <p>{!! $t('prosa.alcohol_p2') !!}</p>

    <h2 id="nosabe">{{ $t('prosa.nosabe_t') }}</h2>
    <p>{{ $t('prosa.nosabe_p1') }}</p>
    <p>{{ $t('prosa.nosabe_p2') }}</p>
    <p>{!! $t('prosa.nosabe_p3') !!}</p>

    <div class="afk-legal">
      <p>{{ $t('legal.p1') }}</p>
      <p>{{ $t('legal.p2') }}</p>
    </div>
  </div>
</section>
@endsection

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