{{-- /pro — Fermenty Pro (briefing tabla 2026-08 sobre docs/paginas/pro.md v2).
     El copy es el definitivo: si algo no encaja en el diseño, se ajusta el
     diseño, no el texto. Voz Fermenty; el mentor solo habla dentro de tarjetas
     con emblema (§3) o entre comillas como ejemplo (tres voces). El tercer plan
     no se nombra en la página: la llamada del obrador es una conversación. --}}
@extends('layouts.web')

@php
    $app = \App\Support\Superficie::base();
    // El copy vive en lang/{idioma}/pagina_pro.php: la vista no lleva texto
    // escrito a mano, así que traducir la página es copiar ese fichero.
    $t = fn (string $k, array $p = []) => __("pagina_pro.$k", $p);
    $faqs = collect(range(1, 8))->map(fn ($i) => [$t("faq.q$i"), $t("faq.a$i")])->all();
@endphp

@section('seo')
<x-seo :title="__('pagina_pro.seo.title')" :description="__('pagina_pro.seo.desc')" :canonical="ruta('pro')" />
@endsection

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/pro.css') }}">
@php
    // SoftwareApplication vive en la HOME (bloque E3 del briefing): la entidad
    // se describe una sola vez, en su página principal.
    $ldFaq = ['@context' => 'https://schema.org', '@type' => 'FAQPage', 'mainEntity' => array_map(fn ($f) => [
        '@type' => 'Question', 'name' => $f[0], 'acceptedAnswer' => ['@type' => 'Answer', 'text' => $f[1]],
    ], $faqs)];
@endphp
<script type="application/ld+json">{!! json_encode($ldFaq, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
{{-- §2 Hero --}}
<section class="section--tight" style="padding-top:56px">
  <div class="wrap" style="max-width:820px">
    <p class="eyebrow">{{ $t('hero.eyebrow') }}</p>
    <h1 style="margin:.3rem 0 0">{{ $t('hero.title') }}</h1>
    <p class="lede" style="margin-top:14px">{{ $t('hero.lede') }}</p>
    <div class="hero__cta" style="margin-top:22px">
      <a class="btn btn--primary btn--lg" href="#planes">{{ $t('hero.cta') }}</a>
      <a class="btn btn--ghost btn--lg" href="{{ $app }}/register" data-app-link>{{ $t('hero.cta2') }}</a>
    </div>
    <p style="margin-top:12px;font-size:13.5px;color:var(--ink-400)">{{ $t('hero.pie') }}</p>
  </div>
</section>

{{-- §3 El bloque que vende la página: la misma pregunta, dos respuestas --}}
<section class="section">
  <div class="wrap" style="max-width:820px">
    <p class="eyebrow">{{ $t('compara.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 12px">{{ $t('compara.title') }}</h2>
    <p style="color:var(--ink-700);line-height:1.65;margin:0 0 22px">{{ $t('compara.intro') }}</p>

    <div class="pro-compara">
      <div>
        <p class="pro-compara__etiqueta">{{ $t('compara.gratis') }}</p>
        <x-mentor.note>{{ $t('compara.nota_free') }}</x-mentor.note>
      </div>
      <div>
        <p class="pro-compara__etiqueta">{{ $t('compara.pro') }}</p>
        <x-mentor.note class="pro-compara__destacada">{!! $t('compara.nota_pro') !!}</x-mentor.note>
      </div>
    </div>

    <p style="color:var(--ink-700);line-height:1.65;margin:22px 0 0">{{ $t('compara.cierre') }}
      <a href="{{ ruta('mentor') }}" style="color:var(--green-700)">{{ $t('compara.enlace') }}</a></p>
  </div>
</section>

{{-- §4 Lo que nunca se cobra --}}
<section class="section--tight" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:820px;padding-top:34px;padding-bottom:34px">
    <h2 style="margin:0 0 12px">{{ $t('gratis.title') }}</h2>
    <p style="color:var(--ink-700);line-height:1.65;margin:0 0 12px">{{ $t('gratis.p1') }}</p>
    <p style="color:var(--ink-700);line-height:1.65;margin:0">{{ $t('gratis.p2') }}</p>
  </div>
</section>

{{-- §5 Comparativa de planes (briefing tabla 2026-08). Dos columnas y tres
     bloques con subtítulo: los bloques son parte del mensaje. Para que «todo lo
     del plan gratis, más:» funcione, la columna gratis va llena — sus ✓ no se
     colapsan ni se atenúan. --}}
<section class="section">
  <div class="wrap" style="max-width:900px">
    <p class="eyebrow">{{ $t('tabla.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 12px">{{ $t('tabla.title') }}</h2>
    <p style="color:var(--ink-700);line-height:1.65;margin:0 0 22px">{{ $t('tabla.entrada') }}</p>
    <div class="pro-tabla-scroll">
      <table class="pro-tabla">
        <thead>
          <tr>
            <th></th>
            <th><span class="pro-tabla__plan">{{ $t('precios.gratis') }}</span><span class="pro-tabla__precio">{{ $t('tabla.precio_gratis') }}</span></th>
            <th><span class="pro-tabla__plan">Pro</span><span class="pro-tabla__precio">{{ $t('tabla.precio_pro') }}</span><span class="pro-tabla__mas">{{ $t('tabla.pro_mas') }}</span></th>
          </tr>
        </thead>
        <tbody>
          <tr class="pro-tabla__bloque"><th colspan="3"><span class="pro-tabla__bloque-titulo">{{ $t('tabla.b1_titulo') }}</span><span class="pro-tabla__bloque-sub">{{ $t('tabla.b1_sub') }}</span></th></tr>
          <tr><td>{{ $t('tabla.b1_f1') }}</td><td>✓</td><td>✓</td></tr>
          <tr><td>{{ $t('tabla.b1_f2') }}</td><td>✓</td><td>✓</td></tr>
          <tr><td>{{ $t('tabla.b1_f3') }}</td><td>✓</td><td>✓</td></tr>
          <tr><td>{{ $t('tabla.b1_f4') }}</td><td>✓</td><td>✓</td></tr>
          {{-- Las barandillas van en los dos planes: nunca como ventaja de pago. --}}
          <tr><td>{{ $t('tabla.b1_f5') }}</td><td>✓</td><td>✓</td></tr>

          <tr class="pro-tabla__bloque"><th colspan="3"><span class="pro-tabla__bloque-titulo">{{ $t('tabla.b2_titulo') }}</span><span class="pro-tabla__bloque-sub">{{ $t('tabla.b2_sub') }}</span></th></tr>
          <tr><td>{{ $t('tabla.b2_f1') }}</td><td>✓</td><td>✓</td></tr>
          <tr><td>{{ $t('tabla.b2_f2') }}</td><td>✓</td><td>✓</td></tr>
          {{-- 🔴 §7a: «Recetas especiales · ver / formular» — sin campo dueño en
               `recipes`, sin regla de marcado y sin candado real; prometería un
               candado que no existe. No publicar hasta que el backend lo cumpla. --}}
          {{-- 🔴 §7c: «Guardar tus propias formulaciones · 3 / sin límite» — el
               número del plan gratis sigue sin decidir; no inventarlo. --}}

          <tr class="pro-tabla__bloque"><th colspan="3"><span class="pro-tabla__bloque-titulo">{{ $t('tabla.b3_titulo') }}</span><span class="pro-tabla__bloque-sub">{{ $t('tabla.b3_sub') }}</span></th></tr>
          {{-- §7b: el número sale del plan (config/billing.plans), nunca cableado. --}}
          <tr><td>{{ $t('tabla.b3_f1') }}</td><td>{{ config('billing.plans.free.tandas_activas') }}</td><td>{{ $t('tabla.sin_limite') }}</td></tr>
          <tr><td>{{ $t('tabla.b3_f2') }}</td><td>✓</td><td>✓</td></tr>
          {{-- Las tres destacadas: son el argumento entero del plan. --}}
          <tr class="pro-tabla__destacada"><td>{{ $t('tabla.b3_f3') }}</td><td>—</td><td>✓</td></tr>
          <tr class="pro-tabla__destacada"><td>{{ $t('tabla.b3_f4') }}</td><td>—</td><td>✓</td></tr>
          <tr class="pro-tabla__destacada"><td>{{ $t('tabla.b3_f5') }}</td><td>—</td><td>✓</td></tr>
        </tbody>
      </table>
    </div>
    {{-- La nota que hace legible «ver / formular» cuando esa fila exista; hoy
         sostiene que lo que se paga es el atajo, no la capacidad. --}}
    <p style="font-size:13.5px;color:var(--ink-500);margin-top:12px">{{ $t('tabla.nota_recetas') }}</p>

    {{-- Tres voces — el acompañamiento en los pasos, que no aparecía en ningún sitio --}}
    <aside class="pro-voces">
      <p class="pro-voces__titulo">{{ $t('voces.titulo') }}</p>
      <p>{{ $t('voces.v1') }}</p>
      <p>{{ $t('voces.v2') }}</p>
      <p>{{ $t('voces.v3') }}</p>
    </aside>
  </div>
</section>

{{-- §6 Planes y precios --}}
<section class="section" id="planes" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:940px">
    <div class="section-head center">
      <p class="eyebrow">{{ $t('precios.eyebrow') }}</p>
      <h2>{{ $t('precios.title') }}</h2>
    </div>

    <div class="pro-toggle" id="proToggle">
      <button type="button" data-periodo="mes" class="is-on">{{ $t('precios.mes') }}</button>
      <button type="button" data-periodo="trimestre">{{ $t('precios.trimestre') }} <span>−13 %</span></button>
      <button type="button" data-periodo="anio">{{ $t('precios.anio') }} <span>−35 %</span></button>
    </div>

    {{-- Dos tarjetas: el obrador ya no es un plan con tarjeta, es la llamada
         de después de la tabla (§6 bis). --}}
    <div class="pro-cards" style="max-width:720px;margin-inline:auto">
      <div class="pro-card">
        <h3>{{ $t('precios.gratis') }}</h3>
        <p class="pro-card__precio">0 €</p>
        <p class="pro-card__nota">{{ $t('precios.para_siempre') }}</p>
        <ul>
          <li>{{ $t('precios.free_1') }}</li>
          <li>{{ $t('precios.free_2') }}</li>
          <li>{{ $t('precios.free_3') }}</li>
          <li>{{ $t('precios.free_4') }}</li>
        </ul>
        <a class="btn btn--ghost" href="{{ $app }}/register" data-app-link>{{ $t('precios.empezar') }}</a>
      </div>

      <div class="pro-card pro-card--destacada">
        <span class="pro-card__tag">{{ $t('precios.recomendado') }}</span>
        <h3>Pro</h3>
        <p class="pro-card__precio" data-precio data-mes="4,99 €/mes" data-trimestre="12,99 €/trimestre" data-anio="39 €/año">4,99 €/mes</p>
        <p class="pro-card__nota" data-nota data-mes="{{ $t('precios.fact_mes') }}" data-trimestre="{{ $t('precios.fact_trim') }}" data-anio="{{ $t('precios.fact_anio') }}">{{ $t('precios.fact_mes') }}</p>
        <ul>
          <li><strong>{{ $t('precios.pro_1') }}</strong></li>
          <li>{{ $t('precios.pro_2') }}</li>
          <li>{{ $t('precios.pro_3') }}</li>
          <li>{{ $t('precios.pro_4') }}</li>
          <li>{{ $t('precios.pro_5') }}</li>
          <li>{{ $t('precios.pro_6') }}</li>
        </ul>
        <a class="btn btn--primary" href="{{ $app }}/suscripcion" data-app-link>{{ $t('precios.pasar') }}</a>
      </div>
    </div>

    <p class="center" style="font-size:13.5px;color:var(--ink-500);margin-top:16px">{{ $t('precios.pie') }}</p>

    {{-- Banda Early Bird — sin contador mientras no haya dato real (G5) --}}
    <div class="pro-early">
      <h3>{{ $t('early.title') }}</h3>
      <p>{!! $t('early.texto') !!}</p>
      <p class="pro-early__letra">{{ $t('early.letra') }}</p>
    </div>
  </div>
</section>

{{-- §6 bis La llamada del obrador — no es un plan, es una conversación. Sin
     precio, sin tabla y sin nombre de plan (G6/§7d abiertos); el puente a
     Zymolab sigue bloqueado por el nombre. `?plan=scale` es solo el parámetro
     interno que contacto ya entiende, no copy visible. --}}
<section class="section">
  <div class="wrap" style="max-width:820px">
    <div class="pro-obrador">
      <h2>{{ $t('obrador.title') }}</h2>
      <p>{{ $t('obrador.p') }}</p>
      <a class="btn btn--primary" href="{{ ruta('contacto') }}?plan=scale">{{ $t('obrador.cta') }}</a>
    </div>
  </div>
</section>

{{-- §7 FAQ --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:820px">
    <p class="eyebrow">{{ $t('faq.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 16px">{{ $t('faq.title') }}</h2>
    <div class="ficha-faq">
      @foreach($faqs as $f)
        <details><summary>{{ $f[0] }}</summary><p>{{ $f[1] }} @if($loop->last)<a href="{{ ruta('afinador') }}">{{ $t('faq.abrir_afinador') }}</a>@endif</p></details>
      @endforeach
    </div>
  </div>
</section>

{{-- §8 Cierre --}}
<section class="section">
  <div class="wrap center" style="max-width:700px">
    <h2>{{ $t('cierre.title') }}</h2>
    <p class="lede" style="margin-top:10px">{{ $t('cierre.lede') }}</p>
    <div class="hero__cta center" style="justify-content:center;margin-top:20px">
      <a class="btn btn--primary btn--lg" href="{{ $app }}/register" data-app-link>{{ $t('cierre.cta') }}</a>
      <a class="btn btn--ghost btn--lg" href="{{ ruta('afinador') }}">{{ $t('cierre.cta2') }}</a>
    </div>
  </div>
</section>
@endsection

@push('scripts')
<script>
/* Selector de periodo: precios fijos por tramo (no factores), porcentajes reales. */
(function () {
  var botones = document.querySelectorAll('#proToggle button');
  botones.forEach(function (b) {
    b.addEventListener('click', function () {
      botones.forEach(function (x) { x.classList.remove('is-on'); });
      b.classList.add('is-on');
      var p = b.dataset.periodo;
      document.querySelectorAll('[data-precio]').forEach(function (el) { el.textContent = el.dataset[p]; });
      document.querySelectorAll('[data-nota]').forEach(function (el) { el.textContent = el.dataset[p]; });
    });
  });
})();
</script>
@endpush