// FAQ accordion
function FAQ({ t }) {
  const narrow = window.useNarrow(768);
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" style={{ background: "var(--bg-2)" }}>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "0.9fr 1.1fr", gap: narrow ? 28 : 80, alignItems: "start" }}>
        <div style={{ position: narrow ? "static" : "sticky", top: 100 }}>
          <Kicker>{t.kicker}</Kicker>
          <h2 className="serif" style={{
            fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.02em",
            margin: "16px 0 0", fontWeight: 400,
          }}>{t.title}</h2>
        </div>
        <div>
          {t.items.map((it, i) => (
            <div key={i} style={{
              borderTop: "1px solid var(--rule)",
              borderBottom: i === t.items.length - 1 ? "1px solid var(--rule)" : "none",
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: "100%", textAlign: "left", padding: "20px 0",
                background: "transparent", border: 0,
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
              }}>
                <span className="serif" style={{ fontSize: narrow ? 18 : 22, letterSpacing: "-0.01em", lineHeight: 1.25, fontWeight: 400, textAlign: "left" }}>{it.q}</span>
                <span className="mono" style={{ fontSize: 13, color: "var(--ink-3)", flexShrink: 0 }}>{open === i ? "−" : "+"}</span>
              </button>
              <div style={{
                maxHeight: open === i ? 1200 : 0,
                overflow: "hidden",
                transition: "max-height .35s ease, padding .35s",
                paddingBottom: open === i ? 22 : 0,
              }}>
                <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 580, textWrap: "pretty" }}>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

window.FAQ = FAQ;