// ---------- FAQ-Sektion (specs/seo-geo-aeo/04-faq.md) ----------
// Zeigt nur freigegebene Fragen (Admin -> FAQ). Ohne Eintraege: nichts.
// Genutzt auf der Startseite (allgemein, kurse, hebamme) und der
// Bauchschmiede-Seite (bauchschmiede). Global als window.WBFaqSection.

const WBFaqSection = ({ areas, eyebrow = '● Häufige Fragen', headline = 'Gut zu [wissen]', id = 'faq' }) => {
  const key = `wb_faq_${areas.join('_')}_v1`;
  const [items, setItems] = React.useState(() => {
    try {
      const p = JSON.parse(localStorage.getItem(key) || 'null');
      return p && Array.isArray(p.data) && Date.now() - p.ts < 1000 * 60 * 60 * 24 * 7 ? p.data : [];
    } catch { return []; }
  });
  const [openId, setOpenId] = React.useState(null);

  React.useEffect(() => {
    let active = true;
    fetch(`https://project-zd7wa.vercel.app/api/public/faqs?areas=${areas.join(',')}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (!active || !Array.isArray(data)) return;
        setItems(data);
        try { localStorage.setItem(key, JSON.stringify({ data, ts: Date.now() })); } catch {}
      })
      .catch(() => {});
    return () => { active = false; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!items.length) return null;

  const title = window.wbT
    ? window.wbT(`faq.${areas[0]}.headline`, headline, 'var(--heather-plum)')
    : headline.replace(/\[|\]/g, '');

  return (
    <section id={id} style={{ padding: 'clamp(56px, 8vw, 96px) 0' }}>
      <div className="container" style={{ maxWidth: 860 }}>
        <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-block' }}>{eyebrow}</span>
        <h2 style={{
          fontFamily: 'Fraunces, serif',
          fontSize: 'clamp(30px, 4vw, 44px)', lineHeight: 1.1, letterSpacing: '-0.015em',
          fontVariationSettings: '"opsz" 96, "SOFT" 40',
          marginBottom: 24,
        }}>{title}</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((f) => {
            const open = openId === f.id;
            return (
              <div key={f.id} style={{
                background: 'var(--offwhite)', border: '1px solid var(--sandstone)',
                borderRadius: 12, overflow: 'hidden',
              }}>
                <button
                  type="button"
                  aria-expanded={open}
                  onClick={() => setOpenId(open ? null : f.id)}
                  style={{
                    width: '100%', textAlign: 'left', background: 'none', border: 'none',
                    padding: '16px 18px', cursor: 'pointer', fontFamily: 'inherit',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
                    fontSize: 16, fontWeight: 600, color: 'var(--ink)',
                  }}>
                  <span>{f.question}</span>
                  <span aria-hidden="true" style={{
                    flexShrink: 0, fontSize: 20, color: 'var(--heather-plum)',
                    transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 200ms var(--ease)',
                  }}>+</span>
                </button>
                {open && (
                  <p style={{ margin: 0, padding: '0 18px 18px', fontSize: 15, lineHeight: 1.65, color: 'var(--ink-70)', whiteSpace: 'pre-line' }}>
                    {f.answer}
                  </p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

window.WBFaqSection = WBFaqSection;