// REWIND website — FAQ. Grouped accordions in the REWIND idiom: tracked-caps
// group headers, hairline-separated questions, quiet + / – toggles. Each item
// opens and closes independently — any number can be open at once.
function FaqView({ go }) {
  const C = window.RW_CONTENT;
  const U = C.ui.faq;
  // stable keys "g-i"; a set of open keys so items toggle independently
  const [openKeys, setOpenKeys] = React.useState(() => new Set(["0-0"]));
  const toggle = (key) => setOpenKeys((prev) => {
    const next = new Set(prev);
    if (next.has(key)) next.delete(key); else next.add(key);
    return next;
  });
  return (
    <div>
      <section className="phero phero--sm">
        <img className="pimg" src={RWA("c-faq-bg")} alt="" style={{ opacity: 0.62 }} />
        <div className="pscrim"></div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: "var(--vs-5)" }}>
            <h2 className="rw-marquee title--lg" style={{ margin: 0 }}>{U.heading}</h2>
          </div>
          <div style={{ maxWidth: 820, margin: "0 auto" }}>
            {C.faq.map((grp, gi) => (
              <div key={grp.group} className="faqgroup">
                <div className="faqgrouphd">{grp.group}</div>
                {grp.items.map(([q, a], i) => {
                  const key = gi + "-" + i;
                  const open = openKeys.has(key);
                  return (
                    <div key={key}>
                      <button type="button" className="faq-q" id={"faq-q-" + key}
                      aria-expanded={open} aria-controls={"faq-a-" + key}
                      onClick={() => toggle(key)}>
                        <span className="rw-subtitle" style={{ fontWeight: "var(--wt-light)" }}>{q}</span>
                        <span aria-hidden="true" style={{ fontSize: 20, lineHeight: 1, flex: "0 0 auto", color: "var(--ink-muted)" }}>{open ? "–" : "+"}</span>
                      </button>
                      {open && (Array.isArray(a)
                        ? <div className="faq-a rw-body" id={"faq-a-" + key}>
                            {a.map((blk, bi) => Array.isArray(blk)
                              ? <ul key={bi} className="faq-ul">{blk.map((li, li2) => <li key={li2}>{li}</li>)}</ul>
                              : <p key={bi} style={{ margin: 0 }}>{blk}</p>)}
                          </div>
                        : <p className="faq-a rw-body" id={"faq-a-" + key}>{a}</p>)}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>

          <p className="fineprint" style={{ marginTop: "var(--vs-6)", maxWidth: "78ch" }}>{C.faqNote}</p>
        </div>
      </section>
    </div>
  );
}
window.FaqView = FaqView;