{{-- /faq — preguntas frecuentes de uso. Pasa al chrome público (antes salía con
     la carcasa del ERP y sin footer) y se corrige el copy: fuera la narrativa de
     beta y «lote» dentro de la app → «tanda» (Lexico.md §8). Las de facturación
     viven en /pro; aquí va el uso. --}}
@extends('layouts.web')

@php
    $app = \App\Support\Superficie::base();
    // El copy vive en lang/{idioma}/pagina_faq.php.
    $t = fn (string $k) => __("pagina_faq.$k");
    $secciones = [
        $t('sec.tandas')     => [1, 2, 3, 4, 5],
        $t('sec.avisos')     => [6, 7, 8],
        $t('sec.fermentos')  => [9, 10, 11],
        $t('sec.cuenta')     => [12, 13, 14],
    ];
@endphp

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

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/fermentos.css') }}">
@php
    $ldFaq = ['@context' => 'https://schema.org', '@type' => 'FAQPage', 'mainEntity' => collect($secciones)->flatten()->map(fn ($i) => [
        '@type' => 'Question', 'name' => __("pagina_faq.p.t$i"),
        'acceptedAnswer' => ['@type' => 'Answer', 'text' => __("pagina_faq.p.a$i")],
    ])->all()];
@endphp
<script type="application/ld+json">{!! json_encode($ldFaq, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
<section class="section--tight" style="padding-top:48px">
  <div class="wrap" style="max-width:760px">
    <div class="ficha-crumb"><a href="{{ ruta('home') }}">{{ __('general.nav.inicio') }}</a> › {{ $t('crumb') }}</div>
    <h1 style="margin:.2rem 0 0">{{ $t('title') }}</h1>
    <p class="lede" style="margin-top:12px">{{ $t('lede_1') }} <a href="{{ ruta('pro') }}" style="color:var(--green-700)">Pro</a>.</p>
  </div>
</section>

<section class="section" style="padding-top:10px">
  <div class="wrap" style="max-width:760px">
    @foreach($secciones as $titulo => $preguntas)
      <h2 style="font-family:var(--font-display);font-size:1.3rem;margin:1.6em 0 .4em;color:var(--ink-900)">{{ $titulo }}</h2>
      <div class="ficha-faq">
        @foreach($preguntas as $i)
          <details>
            <summary>{{ $t("p.t$i") }}</summary>
            <p>{{ $t("p.a$i") }}
              @if($i === 11) <a href="{{ ruta('afinador') }}">{{ $t('cta.afinador') }}</a>@endif
              @if($i === 10) <a href="{{ ruta('pro') }}">{{ $t('cta.planes') }}</a>@endif
              @if($i === 2) <a href="{{ ruta('mentor') }}">{{ $t('cta.mentor') }}</a>@endif
            </p>
          </details>
        @endforeach
      </div>
    @endforeach

    <div style="margin-top:34px;padding-top:20px;border-top:1px solid var(--border-subtle)">
      <h2 style="font-family:var(--font-display);font-size:1.2rem;margin:0 0 8px">{{ $t('mas.title') }}</h2>
      <p style="color:var(--ink-700);line-height:1.65;margin:0 0 14px">{{ $t('mas.texto') }}</p>
      <a class="btn btn--primary" href="{{ ruta('contacto') }}">{{ $t('mas.cta') }}</a>
      <a class="btn btn--ghost" href="{{ $app }}/register" data-app-link>{{ $t('mas.cta2') }}</a>
    </div>
  </div>
</section>
@endsection