// FAQ — accordion

const FAQ_ITEMS = [
  {
    q: "Why not just run ads?",
    a: "Ads create traffic. Growth requires what happens next — capture, follow up, qualification, conversion, and retention. We build the engine; ads pour the fuel. Run ads without systems and you're paying to refill a leaky bucket."
  },
  {
    q: "Can we keep our current CRM?",
    a: "Usually, yes. We work natively in most major platforms and build around what you already use. If your CRM is actively holding you back, we'll tell you directly — and we'll migrate it cleanly."
  },
  {
    q: "Do you work with businesses that already have marketing?",
    a: "Often. We're frequently brought in to connect the dots — to make existing marketing, sales, and operations work together as one system instead of three disconnected ones."
  },
  {
    q: "Can you improve our sales process?",
    a: "Yes. Sales infrastructure is core to what we do — cadences, scripts, intake, qualification, follow up, and tracking. Marketing without a sales system is donations to your competitors."
  },
  {
    q: "How involved are you in implementation?",
    a: "Hands on. We build, deploy and tune the systems alongside your team — not over PowerPoint. Strategy without execution is theater."
  },
  {
    q: "Can you create custom workflows?",
    a: "Absolutely. Most businesses don't fit out-of-the-box templates. We design workflows for your specific operation, your team, and your customer journey."
  },
  {
    q: "What if we already have a website?",
    a: "We audit, optimize, or rebuild — depending on what's serving your goals. Sometimes a tune-up; sometimes a teardown. We'll tell you which honestly."
  },
];

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

  React.useEffect(() => {
    if (open && ref.current) {
      setH(ref.current.scrollHeight);
    } else {
      setH(0);
    }
  }, [open]);

  return (
    <div style={{
      borderBottom: "1px solid var(--line)",
    }}>
      <button
        onClick={onToggle}
        aria-expanded={open}
        style={{
          all: "unset",
          cursor: "pointer",
          width: "100%",
          padding: "28px 0",
          display: "grid",
          gridTemplateColumns: "60px 1fr auto",
          alignItems: "center",
          gap: 24,
        }}
      >
        <span className="idx">Q.{String(i + 1).padStart(2, "0")}</span>
        <span style={{
          fontSize: "clamp(20px, 1.6vw, 26px)",
          fontWeight: 500,
          letterSpacing: "-0.02em",
          color: open ? "var(--ink)" : "var(--ink-2)",
          transition: "color 0.3s",
        }}>
          {item.q}
        </span>
        <span style={{ color: open ? "var(--accent)" : "var(--ink)" }}>
          <Plus open={open} />
        </span>
      </button>
      <div style={{
        maxHeight: h,
        overflow: "hidden",
        transition: "max-height 0.5s cubic-bezier(0.2,0.8,0.2,1)",
      }}>
        <div ref={ref} style={{
          padding: "0 0 32px 84px",
          maxWidth: "70ch",
        }}>
          <p style={{ margin: 0, fontSize: 16.5, lineHeight: 1.6, color: "var(--muted)" }}>{item.a}</p>
        </div>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: "140px 0 120px", background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal><SectionLabel index="07" label="FAQ" /></Reveal>
            <Reveal delay={120}>
              <h2 className="h-1" style={{ marginTop: 32 }}>
                Questions we hear<br/>
                <span style={{ color: "var(--muted-2)" }}>most often.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p className="lede" style={{ maxWidth: "40ch" }}>
              Real answers from us. If something's missing, ask on your strategy call and we'll talk through it.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {FAQ_ITEMS.map((it, i) => (
              <FAQItem
                key={it.q}
                item={it}
                i={i}
                open={open === i}
                onToggle={() => setOpen(open === i ? -1 : i)}
              />
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.FAQ = FAQ;