// ─── Preguntas Frecuentes Page ────────────────────────────────
// Contenido editable en components/lana-config.jsx → LANA.faqs

function FaqPage({ setCurrentPage }) {
  const [open, setOpen] = useState(0);

  return (
    <div className="page">

      {/* Hero */}
      <div style={{ background: 'var(--dark)', padding: '80px max(40px,5vw) 96px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -80, right: -80, width: 360, height: 360, borderRadius: '50%', border: '1px solid rgba(196,169,107,0.1)' }} />
        <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
          <Label light style={{ marginBottom: 20 }}>Preguntas frecuentes</Label>
          <h1 className="t-h2-inv" style={{ fontSize: 'clamp(40px, 5vw, 64px)', maxWidth: 600 }}>
            Todo lo que querés<br /><em style={{ color: 'var(--gold-light)', fontStyle: 'italic' }}>saber antes de empezar.</em>
          </h1>
        </div>
      </div>

      {/* Preguntas */}
      <div className="section" style={{ background: 'var(--white)' }}>
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          {LANA.faqs.map((faq, i) => (
            <FAQItem key={i} q={faq.q} a={faq.a} size={18} isOpen={open === i} onToggle={() => setOpen(open === i ? null : i)} />
          ))}
          <div style={{ borderTop: '1px solid var(--cream-dark)' }} />
        </div>
      </div>

      {/* CTA */}
      <CTASection
        title="¿Te quedó alguna duda?"
        text="La mejor forma de resolverla es en una evaluación. Es una conversación, sin costo ni compromiso."
      >
        <BtnPrimary href={waLink('Hola, tengo algunas preguntas y quisiera agendar una evaluación en LANA')}>Agendar evaluación</BtnPrimary>
        <BtnOutline ev="faq_ver_metodo" onClick={() => setCurrentPage('method')}>Conocer Nuestro Método</BtnOutline>
      </CTASection>
    </div>
  );
}

Object.assign(window, { FaqPage });