/* Faq — reusable accordion section. Drop on any page; pass `items` and
 * optionally `eyebrow` / `title` / `intro` to retitle the block.
 *
 * Lives on paper (light) so it doubles as a section break between dark hero
 * variants and the dark footer. */

function Faq({
  number = "FAQ",
  eyebrow = "Common questions",
  title = "Things people ask us first.",
  intro,
  items = [],
}) {
  return (
    <section style={{
      background: "var(--bg-elevated)",
      borderTop: "1px solid var(--border)",
      padding: "100px 0",
    }}>
      <Container style={{ maxWidth: 880 }}>
        <div style={{ marginBottom: 36 }}>
          <Eyebrow number={number}>{eyebrow}</Eyebrow>
          <h2 style={{ fontSize: "clamp(32px, 4vw, 52px)", lineHeight: 1.08,
                       letterSpacing: "-0.02em", fontWeight: 700, margin: 0 }}>
            {title}
          </h2>
          {intro && (
            <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.55,
                        color: "var(--fg-muted)", maxWidth: 640 }}>{intro}</p>
          )}
        </div>
        <div style={{
          display: "flex", flexDirection: "column", gap: 0,
          borderTop: "1px solid var(--border)",
        }}>
          {items.map((it) => <FaqRow key={it.q} q={it.q} a={it.a} />)}
        </div>
      </Container>
    </section>
  );
}

function FaqRow({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: "1px solid var(--border)" }}>
      <button onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              style={{
                width: "100%", padding: "22px 0", background: "transparent", border: 0,
                display: "flex", justifyContent: "space-between", alignItems: "center",
                gap: 24, cursor: "pointer", fontFamily: "var(--font-sans)",
                textAlign: "left",
              }}>
        <span style={{ fontSize: 18, fontWeight: 600,
                       color: open ? "var(--ri-pink)" : "var(--fg)",
                       transition: "color 160ms var(--ease-out)",
                       letterSpacing: "-0.005em" }}>{q}</span>
        <span style={{ display: "inline-flex", lineHeight: 0,
                       color: open ? "var(--ri-pink)" : "var(--fg-muted)",
                       transform: open ? "rotate(45deg)" : "rotate(0)",
                       transition: "transform 200ms var(--ease-out), color 160ms" }}>
          <Icon name="plus" size={22} stroke={2.2} />
        </span>
      </button>
      {open && (
        <div style={{ padding: "0 0 24px", fontSize: 16, lineHeight: 1.65,
                      color: "var(--fg-muted)", maxWidth: 720 }}>
          {a}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Faq });