/* eslint-disable */
// Shared FAQ component — used on home page footer-adjacent and About / Services.

function FAQ({ items, title = "Common questions", kicker = "FAQ", num }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: "120px 0", background: "var(--navy-950)" }}>
      <div className="wc-container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 80, alignItems: "start" }}>
          <Reveal>
            <div style={{ position: "sticky", top: 100 }}>
              <div className="wc-kicker" style={{ marginBottom: 12, fontSize: "12px" }}>{num ? `${num} · ` : ""}{kicker}</div>
              <h2 style={{
                fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 40,
                color: "#fff", letterSpacing: "-0.025em", lineHeight: 1.12, margin: "0 0 16px"
              }}>{title}</h2>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: "#7299b5", lineHeight: 1.6, margin: 0 }}>
                Still unsure? The Discovery Call answers in 30 minutes what email can't in a week.
              </p>
              <div style={{ marginTop: 24 }}>
                <Button variant="secondary" href="contact.html" icon="calendar">Book a Discovery Call</Button>
              </div>
            </div>
          </Reveal>

          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {items.map((it, i) =>
            <FAQItem key={i} item={it} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            )}
          </div>
        </div>
      </div>
    </section>);

}

function FAQItem({ item, open, onToggle }) {
  const ref = React.useRef(null);
  const [h, setH] = React.useState(0);
  React.useEffect(() => {
    if (ref.current) setH(ref.current.scrollHeight);
  }, [item]);

  return (
    <div style={{
      borderRadius: 14,
      border: open ? "1px solid rgba(74,137,200,0.30)" : "1px solid rgba(255,255,255,0.08)",
      background: open ? "rgba(74,137,200,0.06)" : "rgba(255,255,255,0.02)",
      overflow: "hidden",
      transition: "all 220ms cubic-bezier(0.4,0,0.2,1)"
    }}>
      <button onClick={onToggle} style={{
        width: "100%",
        background: "transparent",
        border: "none",
        padding: "22px 26px",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
        cursor: "pointer",
        textAlign: "left"
      }}>
        <span style={{
          fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 16,
          color: "#fff", letterSpacing: "-0.005em"
        }}>{item.q}</span>
        <div style={{
          width: 28, height: 28, borderRadius: "50%",
          background: open ? "var(--navy-400)" : "rgba(255,255,255,0.05)",
          border: open ? "1px solid rgba(74,137,200,0.6)" : "1px solid rgba(255,255,255,0.10)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
          transition: "all 220ms cubic-bezier(0.4,0,0.2,1)",
          transform: open ? "rotate(45deg)" : "rotate(0)"
        }}>
          <i data-lucide="plus" style={{ width: 14, height: 14, color: "#fff" }} />
        </div>
      </button>
      <div style={{
        maxHeight: open ? h : 0,
        opacity: open ? 1 : 0,
        overflow: "hidden",
        transition: "all 280ms cubic-bezier(0.4,0,0.2,1)"
      }}>
        <div ref={ref} style={{
          padding: "0 26px 24px",
          fontFamily: "'DM Sans', sans-serif", fontSize: 14.5,
          color: "#9bbdd0", lineHeight: 1.7, maxWidth: 720
        }}>{item.a}</div>
      </div>
    </div>);

}

window.FAQ = FAQ;