/* global React, Eyebrow, Icon, Button, SectionShell, CDT_DUDAS */

/* Sección «Dudas comunes» (#dudas) — va DESPUÉS de los Niveles a propósito:
   son las objeciones que frenan justo cuando ya se ha visto la oferta.

   Estructura: la duda y la respuesta, cara a cara, con un eje que las separa.
   Es a propósito la ÚNICA sección de la página sin tarjetas (solo filetes y
   aire), para que no se confunda con las de arriba y no se salte.

   Plegada por defecto, pero NUNCA vacía: cerrada ya se lee la pregunta y el
   veredicto en color, así que la sección se entiende entera sin tocar nada.
   Al desplegar aparece la respuesta completa de David. Se pueden abrir todas a
   la vez (no se cierran entre ellas): quien quiere leerlo todo, lo abre todo.

   Jerarquía en dos canales, para que el orden de lectura sea el natural:
     · la PREGUNTA manda por tamaño y peso → es lo primero que se lee;
     · el VEREDICTO manda por color → magenta en las dos principales, cian en
       el resto.

   Móvil primero: apilado, la respuesta lleva un filete de su color
   (`--cdt-acento`) — ver `.cdt-faq-*` en index.html. Contenido en dudas.js. */

const CDT_COLS = 'minmax(0,.80fr) minmax(0,1.20fr)';
const CDT_GAP = 'clamp(20px,3.5vw,48px)';
const CDT_SANGRIA = 'clamp(22px,3vw,40px)';

function LedgerRow({ d, i, abierta, onToggle }) {
  const [hover, setHover] = React.useState(false);
  const acento = d.clave ? 'var(--neon-magenta)' : 'var(--neon-cyan)';
  const idPanel = `cdt-duda-${i}`;

  return (
    <div style={{
      // lo heredan las dos columnas: el filete del móvil lee de aquí
      '--cdt-acento': acento,
      borderTop: i === 0 ? 'none' : '1px solid var(--divider)',
      background: d.clave ? 'var(--magenta-soft-2)' : 'transparent',
    }}>
      {/* Cabecera pulsable: pregunta + veredicto. El <h3> envuelve al botón
          (patrón accesible estándar), no al revés. */}
      <h3 style={{ margin: 0 }}>
        <button
          type="button" onClick={onToggle}
          aria-expanded={abierta} aria-controls={idPanel}
          onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
          className="cdt-faq-row"
          style={{
            width: '100%', display: 'grid', gridTemplateColumns: CDT_COLS, gap: CDT_GAP,
            background: hover ? 'rgba(242,242,242,.03)' : 'none',
            border: 0, padding: 0, margin: 0, textAlign: 'left', cursor: 'pointer',
            color: 'inherit', font: 'inherit', transition: 'background 160ms ease',
          }}>
          <span className="cdt-faq-q" style={{ display: 'block', padding: '26px 0' }}>
            <span style={{ fontFamily: 'var(--font-head)', fontWeight: 700,
              fontSize: d.clave ? 'clamp(20px,2vw,23px)' : 'clamp(18px,1.7vw,20px)',
              lineHeight: 1.3, letterSpacing: '.01em', color: 'var(--fg-1)' }}>{d.q}</span>
          </span>

          <span className="cdt-faq-a" style={{ position: 'relative', display: 'flex',
            alignItems: 'flex-start', gap: 14,
            paddingTop: 26, paddingBottom: abierta ? 10 : 26, paddingLeft: CDT_SANGRIA,
            borderLeft: '1px solid var(--hairline)' }}>
            <span aria-hidden className="cdt-faq-dot" style={{ position: 'absolute', left: -5, top: 33,
              width: 9, height: 9, borderRadius: '50%', background: acento,
              boxShadow: d.clave ? 'var(--glow-magenta-sm)' : 'var(--glow-cyan-sm)' }} />
            <span style={{ flex: 1, fontFamily: 'var(--font-head)', fontWeight: 700,
              fontSize: d.clave ? 'clamp(17px,1.8vw,20px)' : 'clamp(16px,1.6vw,18px)',
              lineHeight: 1.35, letterSpacing: '.01em', color: acento }}>{d.veredicto}</span>
            <span aria-hidden style={{ flexShrink: 0, display: 'inline-flex', marginTop: 1,
              transform: abierta ? 'rotate(180deg)' : 'none',
              transition: 'transform 220ms cubic-bezier(.4,0,.2,1)' }}>
              <Icon name="chevron-down" size={19}
                color={abierta || hover ? acento : 'var(--fg-3)'} stroke={2.2} />
            </span>
          </span>
        </button>
      </h3>

      {/* La respuesta completa, alineada bajo el veredicto para que el eje siga
          siendo una sola línea continua. */}
      <div id={idPanel} role="region" style={{ display: abierta ? 'grid' : 'none',
        gridTemplateColumns: CDT_COLS, gap: CDT_GAP }} className="cdt-faq-panel">
        <span className="cdt-faq-spacer" aria-hidden />
        <div className="cdt-faq-a" style={{ paddingTop: 0, paddingBottom: 28, paddingLeft: CDT_SANGRIA,
          borderLeft: '1px solid var(--hairline)', animation: 'cdtRise 240ms cubic-bezier(.2,.8,.2,1)' }}>
          <p style={{ fontFamily: 'var(--font-body)',
            fontSize: d.clave ? 'clamp(15px,1.4vw,15.5px)' : 'clamp(14.5px,1.3vw,15px)',
            lineHeight: 1.7, color: 'var(--fg-2)', margin: 0 }}>{d.a}</p>
        </div>
      </div>
    </div>
  );
}

function Faq({ onJoin }) {
  // Independientes: abrir una NO cierra las demás, así se pueden abrir todas.
  const [abiertas, setAbiertas] = React.useState({});
  const alternar = (i) => () => setAbiertas((prev) => ({ ...prev, [i]: !prev[i] }));

  return (
    <SectionShell id="dudas" bg="var(--surface-1)">
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ maxWidth: 620, marginBottom: 'clamp(30px,4vw,48px)' }}>
          <Eyebrow>Dudas comunes</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px,4vw,48px)',
            lineHeight: 1.08, textTransform: 'uppercase', color: 'var(--fg-1)', margin: '18px 0 14px' }}>
            Las dudas que<br /><span className="cdt-gradient-text">más nos llegan</span>
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(15px,1.5vw,16px)',
            lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
            Las seis que nos hacéis siempre, con la respuesta corta a la vista. Pulsa en la que te interese
            para leerla entera.
          </p>
        </div>

        {/* Cabeceras del eje. Solo en escritorio: apilado se entiende sin ellas. */}
        <div className="cdt-faq-row cdt-faq-head" style={{ display: 'grid',
          gridTemplateColumns: CDT_COLS, gap: CDT_GAP }}>
          <div style={{ paddingBottom: 12 }}>
            <span style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 12,
              letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Lo que preguntas</span>
          </div>
          <div style={{ paddingBottom: 12, borderLeft: '1px solid var(--hairline)', paddingLeft: CDT_SANGRIA }}>
            <span style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 12,
              letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--neon-cyan)' }}>Lo que responde David</span>
          </div>
        </div>

        <div style={{ borderTop: '1px solid var(--hairline-strong)' }}>
          {CDT_DUDAS.map((d, i) => (
            <LedgerRow key={i} d={d} i={i} abierta={!!abiertas[i]} onToggle={alternar(i)} />
          ))}
        </div>

        <div className="cdt-faq-cta" style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap',
          borderTop: '1px solid var(--hairline-strong)', paddingTop: 26 }}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6,
            color: 'var(--fg-2)', margin: 0, flex: '1 1 260px' }}>
            ¿Tu duda no está aquí? Pregúntala dentro, sin coste.
          </p>
          <Button variant="secondary" onClick={onJoin} icon="message-circle">Únete gratis al Discord</Button>
        </div>
      </div>
    </SectionShell>
  );
}

window.Faq = Faq;