{{-- /herramientas/calculadora-salmuera — la misma calculadora que hay dentro de
     la app, abierta y sin registro: elige fermento, ajusta por temperatura y por
     textura, y distingue el salado en seco del salado en salmuera.
     Los coeficientes salen de App\Services\Calculators\BrineCalculator (fuente
     única): aquí no se copian números, se leen. No es el Motor — la salmuera es
     una proporción pública, no conocimiento de ficha. --}}
@extends('layouts.web')

@php
    use App\Services\Calculators\BrineCalculator as Brine;
    $app       = \App\Support\Superficie::base();
    $fermentos = Brine::ferments();
@endphp

@section('seo')
<x-seo title="Calculadora de salmuera — la sal exacta para tus vegetales fermentados"
       description="Cuánta sal para chucrut, kimchi, encurtidos o aceitunas, ajustada a la temperatura de tu cocina y a si lo quieres crujiente o tierno. Gratis, sin registro."
       :canonical="ruta('salmuera')" />
@endsection

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/tools.css') }}">
<link rel="stylesheet" href="{{ asset_v('landing/pages/fermentos.css') }}">
@endpush

@section('content')
<section class="section--tight" style="padding-top:48px">
  <div class="wrap" style="max-width:660px">
    <div class="ficha-crumb"><a href="{{ url('/') }}">Inicio</a> › <a href="{{ ruta('herramientas') }}">Herramientas</a> › Calculadora de salmuera</div>
    <p class="eyebrow" style="margin-top:10px">Herramienta gratis · sin registro</p>
    <h1 style="margin:.2rem 0 0">Calculadora de salmuera</h1>
    <p class="lede" style="margin-top:12px">La sal se ajusta a lo que fermentas, a la temperatura de tu cocina y al punto de textura que prefieres.</p>
  </div>
</section>

<section class="section" style="padding-top:8px">
  <div class="wrap" style="max-width:660px">
    <div class="tool-card reveal" id="brine"
         data-fermentos='@json($fermentos)'
         data-temp-ref="{{ Brine::REFERENCE_TEMP_C }}"
         data-temp-slope="{{ Brine::TEMP_SLOPE }}"
         data-temp-min="{{ Brine::TEMP_MIN_C }}"
         data-temp-max="{{ Brine::TEMP_MAX_C }}"
         data-gustos='@json(Brine::GUSTO_FACTORS)'>

      <p class="brn-paso">1 · ¿Qué vas a fermentar?</p>
      <div class="brn-chips" id="brnFermentos" role="group" aria-label="Fermento">
        @foreach($fermentos as $f)
          <button type="button" class="brn-chip {{ $loop->first ? 'is-on' : '' }}" data-ferment="{{ $f['slug'] }}">
            {{ $f['name'] }} <small>{{ str_replace('.', ',', (string) $f['pct']) }} %</small>
          </button>
        @endforeach
      </div>

      <p class="brn-paso">2 · <span id="brnCantidadPaso">Cuánta verdura</span></p>
      <div class="tool-row">
        <label class="tool-field">
          <span id="brnCantidadLabel">Peso de la verdura (g)</span>
          <input id="brnCantidad" class="tool-input" type="number" inputmode="decimal" placeholder="p. ej. 1000" min="0" step="50">
        </label>
        <label class="tool-field">
          <span>Temperatura de la cocina (°C) <small style="font-weight:400;color:var(--text-muted)">opcional</small></span>
          <input id="brnTemp" class="tool-input" type="number" inputmode="decimal" placeholder="ej. 20" min="0" max="50" step="any">
        </label>
      </div>

      <p class="brn-paso">3 · ¿Cómo lo quieres?</p>
      <div class="brn-chips" id="brnGusto" role="group" aria-label="Textura">
        <button type="button" class="brn-chip" data-gusto="crujiente">Crujiente <small>más sal</small></button>
        <button type="button" class="brn-chip is-on" data-gusto="normal">Equilibrado</button>
        <button type="button" class="brn-chip" data-gusto="suave">Tierno <small>menos sal</small></button>
      </div>

      <div class="tool-result" aria-live="polite">
        <div class="tool-result__label" id="brnLabel">Sal necesaria</div>
        <div><span id="brnSal" class="tool-result__num">2</span> <span id="brnUnidad">%</span></div>
        <div id="brnAyuda" class="tool-result__help"></div>
      </div>

      <p class="brn-metodo" id="brnMetodo"></p>
      <details class="af-numeros" style="margin-top:10px">
        <summary>Cómo sale ese número</summary>
        <p id="brnDetalle" style="font-size:14px;color:var(--text-secondary);line-height:1.7;margin:8px 0 0"></p>
      </details>
    </div>

    <p class="center" style="margin-top:14px;font-size:13px;color:var(--text-muted)">
      1 ml de agua ≈ 1 g. Pesa la sal siempre que puedas: medirla en cucharadas es la causa más común de un fermento blando.
    </p>
  </div>
</section>

{{-- La salmuera da una proporción; el afinador formula y predice. No son lo mismo
     y conviene decirlo (pagina-afinador.md §11). --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:760px">
    <h2 style="font-family:var(--font-display);margin:0 0 10px">Esto te da la sal. Los días son otra cosa</h2>
    <p style="color:var(--ink-700);line-height:1.7;margin:0 0 16px">La salmuera es una proporción: no sabe a qué temperatura está tu cocina ni cuándo tu chucrut entra en su punto. Eso lo calcula el mentor, y para la kombucha puedes probarlo ahora mismo sin cuenta.</p>
    <div class="hero__cta">
      <a class="btn btn--primary" href="{{ ruta('afinador') }}">Probar el afinador de kombucha</a>
      <a class="btn btn--ghost" href="{{ ruta('fermentos.show', 'chucrut') }}">La guía del chucrut</a>
    </div>
  </div>
</section>
@endsection

@push('scripts')
<script>
/* Calculadora de salmuera — misma lógica que dentro de la app: la salinidad
   base viene del fermento, se corrige por temperatura (±1 % por °C respecto a
   la de referencia, acotada) y por textura. Y se distingue el salado en SECO
   (el % es sobre el peso de la verdura, sin añadir agua) del salado en
   SALMUERA (el % es sobre el peso del agua). */
(function () {
  var root = document.getElementById('brine');
  if (!root) return;

  var FERMENTOS = JSON.parse(root.dataset.fermentos);
  var GUSTOS    = JSON.parse(root.dataset.gustos);
  var TREF   = parseFloat(root.dataset.tempRef);
  var SLOPE  = parseFloat(root.dataset.tempSlope);
  var TMIN   = parseFloat(root.dataset.tempMin);
  var TMAX   = parseFloat(root.dataset.tempMax);

  var estado = { ferment: FERMENTOS[0].slug, gusto: 'normal' };

  var $ = function (id) { return document.getElementById(id); };
  function esEN() { return (document.documentElement.lang || 'es').slice(0, 2) === 'en'; }
  function num(n, dec) { return n.toLocaleString(esEN() ? 'en-GB' : 'es-ES', { maximumFractionDigits: dec === undefined ? 1 : dec }); }
  function ferm() { for (var i = 0; i < FERMENTOS.length; i++) if (FERMENTOS[i].slug === estado.ferment) return FERMENTOS[i]; return FERMENTOS[0]; }

  function calcula() {
    var f = ferm();
    var seco = f.method === 'dry';
    var cantidad = parseFloat($('brnCantidad').value) || 0;
    var tempTxt = $('brnTemp').value;
    var temp = tempTxt === '' ? null : parseFloat(tempTxt);

    var fTemp = 1;
    if (temp !== null && !isNaN(temp)) {
      var acotada = Math.max(TMIN, Math.min(TMAX, temp));
      fTemp = 1 + (acotada - TREF) * SLOPE;
    }
    var fGusto = GUSTOS[estado.gusto] || 1;
    var pct = Math.round(f.pct * fTemp * fGusto * 10) / 10;
    var sal = Math.round(cantidad * pct / 100 * 10) / 10;

    // Etiquetas: en seco se pesa la verdura; en salmuera, el agua.
    $('brnCantidadPaso').textContent = seco ? 'Cuánta verdura' : 'Cuánta agua';
    $('brnCantidadLabel').textContent = seco ? 'Peso de la verdura (g)' : 'Agua (ml)';

    // Sin peso metido no se inventa un gramaje: se enseña la proporción (que
    // ya es respuesta útil) y se invita a escribir la cantidad para los gramos.
    if (!cantidad) {
      $('brnSal').textContent = num(pct);
      $('brnUnidad').textContent = '%';
      $('brnAyuda').textContent = seco
        ? 'Escribe cuánta verdura tienes y te decimos los gramos de sal.'
        : 'Escribe cuánta agua vas a usar y te decimos los gramos de sal.';
    } else {
      $('brnSal').textContent = num(sal);
      $('brnUnidad').textContent = 'g';
      $('brnAyuda').textContent = seco
        ? num(sal) + ' g de sal para ' + num(cantidad, 0) + ' g de verdura (' + num(pct) + ' %)'
        : num(sal) + ' g de sal en ' + num(cantidad, 0) + ' ml de agua (' + num(pct) + ' %)';
    }

    $('brnMetodo').textContent = seco
      ? 'El ' + f.name.toLowerCase() + ' se sala en seco: masajeas la verdura con la sal y fermenta en su propio jugo. El porcentaje es sobre el peso de la verdura y no se añade agua — si a las 24 horas no queda cubierta, se completa con salmuera a la misma concentración.'
      : f.name + ' va sumergido en salmuera: el porcentaje es sobre el peso del agua (1 ml ≈ 1 g). Lo que asoma al aire es lo único que corre peligro.';

    var partes = ['Base de ' + f.name.toLowerCase() + ': ' + num(f.pct) + ' %'];
    if (fTemp !== 1) {
      partes.push((fTemp > 1 ? 'más' : 'menos') + ' sal por la temperatura (' + num(temp, 0) + ' °C frente a ' + num(TREF, 0) + ' de referencia): ×' + num(fTemp, 2));
    }
    if (fGusto !== 1) {
      partes.push((fGusto > 1 ? 'más' : 'menos') + ' sal para que salga ' + (estado.gusto === 'crujiente' ? 'crujiente' : 'tierno') + ': ×' + num(fGusto, 2));
    }
    partes.push(cantidad ? 'Resultado: ' + num(pct) + ' % → ' + num(sal) + ' g' : 'Resultado: ' + num(pct) + ' %');
    $('brnDetalle').textContent = partes.join(' · ');
  }

  function chips(id, campo) {
    root.querySelectorAll('#' + id + ' .brn-chip').forEach(function (b) {
      b.addEventListener('click', function () {
        root.querySelectorAll('#' + id + ' .brn-chip').forEach(function (x) { x.classList.remove('is-on'); });
        b.classList.add('is-on');
        estado[campo] = b.dataset[campo] || b.dataset.ferment;
        calcula();
      });
    });
  }
  chips('brnFermentos', 'ferment');
  chips('brnGusto', 'gusto');
  ['brnCantidad', 'brnTemp'].forEach(function (id) { $(id).addEventListener('input', calcula); });
  document.querySelectorAll('.lang button').forEach(function (b) {
    b.addEventListener('click', function () { setTimeout(calcula, 0); });
  });

  calcula();
})();
</script>
@endpush