const { useState } = React;
const { Reveal, Icon, useLandingStats } = window;

function FAQ() {
  const { faq } = useLandingStats();
  const FAQ_ITEMS = (faq ?? []).map((f) => ({ q: f.question, a: f.answer }));
  const [open, setOpen] = useState(0);

  if (FAQ_ITEMS.length === 0) return null;
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal className="section-header" style={{ textAlign: 'center', alignItems: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <h2 className="h2" style={{ textAlign: 'center', textTransform: 'none', position: 'relative', display: 'inline-block' }}>
            <span style={{ fontSize: '1.15em' }}>Des questions</span><br />
            <span className="serif-i" style={{ color: 'var(--accent)', fontWeight: 400 }}>avant de te lancer.</span>
            {/* Point d'interrogation décoratif à droite du titre */}
            <span style={{
              position: 'absolute',
              right: '-0.7em',
              top: '50%',
              transform: 'translateY(-50%) rotate(12deg)',
              fontSize: '3.2em',
              fontFamily: 'Montserrat, Geist, sans-serif',
              fontWeight: 900,
              color: 'var(--accent)',
              opacity: 0.18,
              filter: 'blur(2px)',
              lineHeight: 1,
              pointerEvents: 'none',
              userSelect: 'none',
              animation: 'faqFloat 5s ease-in-out infinite',
            }}>?</span>
          </h2>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {FAQ_ITEMS.map((f, i) => (
            <Reveal key={i} delay={(i % 3) + 1}>
              <div
                data-cursor="hover"
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  padding: '24px 28px', borderRadius: 18,
                  background: open === i ? 'color-mix(in oklab, var(--accent) 5%, var(--bg-card))' : 'var(--bg-card)',
                  border: open === i ? '1px solid var(--accent)' : '1px solid var(--line)',
                  cursor: 'pointer',
                  transition: 'all 0.3s',
                }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
                  <span style={{ fontSize: 16, fontWeight: 500 }}>{f.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: open === i ? 'var(--accent)' : 'var(--bg-elev)',
                    color: open === i ? 'var(--bg)' : 'var(--ink)',
                    border: '1px solid var(--line)',
                    transition: 'all 0.3s',
                    flexShrink: 0,
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  }}>
                    <Icon.Plus size={14} />
                  </span>
                </div>
                <div style={{
                  overflow: 'hidden',
                  maxHeight: open === i ? 200 : 0,
                  opacity: open === i ? 1 : 0,
                  transition: 'max-height 0.4s ease, opacity 0.3s ease, margin 0.3s',
                  marginTop: open === i ? 14 : 0,
                }}>
                  <p style={{ color: 'var(--ink-dim)', lineHeight: 1.6, fontSize: 15 }}>{f.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });