const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = t("faq.items");
  return (
    <section id="faq">
      <div className="wrap" style={{ maxWidth: 920 }}>
        <div className="section-head">
          <span className="eyebrow">{t("faq.eyebrow")}</span>
          <h2>{t("faq.title")}</h2>
        </div>

        <div style={{ display: "grid", gap: 12 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="card" style={{
                padding: 0, overflow: "hidden",
                borderColor: isOpen ? "var(--ink)" : "var(--line)",
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%", display: "flex", alignItems: "center",
                    justifyContent: "space-between", gap: 16,
                    padding: "22px 28px", textAlign: "left",
                  }}
                  aria-expanded={isOpen}
                >
                  <span style={{ fontWeight: 700, fontSize: "calc(18px * var(--scale))", color: "var(--ink)", letterSpacing: "-0.015em" }}>{it.q}</span>
                  <div style={{
                    width: 36, height: 36, borderRadius: 999,
                    background: isOpen ? "var(--ink)" : "var(--bg-soft)",
                    color: isOpen ? "#fff" : "var(--ink-2)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0, transition: "all .2s",
                  }}>
                    {isOpen ? <Icon.minus size={18}/> : <Icon.plus size={18}/>}
                  </div>
                </button>
                {isOpen && (
                  <div style={{ padding: "0 28px 24px", color: "var(--ink-2)", fontSize: "calc(16px * var(--scale))", lineHeight: 1.65 }}>
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FAQ });