// Reusable FAQ accordion. Pass an array of {q, a} items.
const FAQ = ({ items, eyebrow = "FAQ", title }) => {
  const [open, setOpen] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const rows = ref.current.querySelectorAll(".faq-row");
    window.gsap.from(rows, {
      scrollTrigger: { trigger: ref.current, start: "top 80%" },
      y: 24, opacity: 0, duration: 0.7, stagger: 0.06, ease: "expo.out",
    });
  }, []);

  return (
    <section ref={ref} style={{ padding: "clamp(88px, 11vw, 160px) clamp(16px, 4vw, 48px)", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ marginBottom: 56 }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--cobalt-700)", marginBottom: 20,
          }}>{eyebrow}</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: 0,
          }}>
            {title || <>Common questions, <span style={{ fontStyle: "italic" }}>plain answers.</span></>}
          </h2>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="faq-row" style={{
                borderTop: "1px solid var(--border)",
                borderBottom: i === items.length - 1 ? "1px solid var(--border)" : "none",
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%", textAlign: "left",
                    padding: "26px 4px", border: "none", background: "transparent",
                    cursor: "pointer", display: "flex", justifyContent: "space-between",
                    alignItems: "center", gap: 24,
                  }}
                >
                  <span style={{
                    fontFamily: "var(--font-sans)", fontSize: "clamp(19px, 2.8vw, 24px)", fontWeight: 600,
                    letterSpacing: "-0.01em", color: "var(--ink-900)",
                  }}>{it.q}</span>
                  <span style={{
                    width: 36, height: 36, borderRadius: 9999, flexShrink: 0,
                    border: "1px solid var(--border-strong)",
                    display: "grid", placeItems: "center",
                    transition: "background 200ms, color 200ms, transform 200ms",
                    background: isOpen ? "var(--ink-900)" : "transparent",
                    color: isOpen ? "var(--paper)" : "var(--ink-900)",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                  }}>
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                      <path d="M8 3v10M3 8h10"/>
                    </svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 320 : 0,
                  opacity: isOpen ? 1 : 0,
                  overflow: "hidden",
                  transition: "max-height 360ms var(--ease-out-quart), opacity 240ms",
                  paddingBottom: isOpen ? 28 : 0,
                }}>
                  <p style={{
                    margin: 0, fontSize: 16, lineHeight: 1.7, color: "var(--fg-muted)",
                    maxWidth: 760,
                  }}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.FAQ = FAQ;