// FAQ + Final CTA + Footer. Clean Institutional system.

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: "How fast can you actually ship?", a: "v1 of most agents in 2-5 days. Hardening and QA over 2-4 weeks. Production-ready builds typically land inside a month." },
    { q: "Do you take equity?", a: "No, by default. We'd rather you pay cash and keep your cap table clean. If you want us deeper, we'll talk." },
    { q: "What AI models do you use?", a: "Whatever fits the job and the budget. OpenAI, Anthropic, open-source. We'll recommend and show you the cost curve before we pick." },
    { q: "Who owns the code?", a: "You do. 100%. Delivered to your GitHub, your cloud, your control." },
    { q: "What if I don't know what I want?", a: "That's what the diagnostic is for. Most clients don't know what's possible until we show them." },
    { q: "What happens to AI costs?", a: "Passed through at cost. You see every token, every month, on a dashboard we give you access to." },
    { q: "Minimum engagement?", a: "A one-week diagnostic. A fixed-scope build. Or a three-month retainer minimum on the ongoing partner track." },
    { q: "Where are you based?", a: "James in Dubai, Udeme across Nigeria and Colombia. Async-first. Clients in the UK, UAE, US and Africa." },
  ];
  return (
    <section id="faq" className="section reveal" aria-label="FAQ">
      <div className="wrap">
        <div className="section-head">
          <h2>Questions we get on every first call.</h2>
        </div>
        <div className="faq">
          {qs.map((q, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={"faq-item" + (isOpen ? " open" : "")}>
                <button
                  className="faq-q"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                >
                  <span>{q.q}</span>
                  <span className="faq-toggle" aria-hidden="true">
                    <span className="faq-bar faq-bar-h"/>
                    <span className="faq-bar faq-bar-v"/>
                  </span>
                </button>
                <div className="faq-a"><p>{q.a}</p></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section id="contact" className="section section-final reveal" aria-label="Contact">
      <div className="wrap">
        <div className="final-inner">
          <h2>Stop reading. Have a chat with us.</h2>
          <p className="lede">
            Thirty minutes. No pitch deck. No sales engineer. Tell us the problem. We'll tell you whether AI can solve it, what it'd cost, and whether we're the right team for the job. If we're not, we'll tell you that too.
          </p>
          <div className="final-actions">
            <a href="https://calendar.app.google/pr4sprutBxycHg9d7" target="_blank" rel="noopener" className="btn btn-primary">Have a chat <Arrow/></a>
            <a href="#work" className="btn btn-ghost">See the work</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" aria-label="Footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-mark">
            <div className="footer-logo">Agent Ventures</div>
            <div className="caption">Dubai &middot; USA</div>
          </div>
          <nav className="footer-nav" aria-label="Footer">
            <a href="#work">Work</a>
            <a href="#how-we-work">How we work</a>
            <a href="#faq">FAQ</a>
            <a href="/who">Who we are</a>
            <a href="mailto:hey@useagentventures.com">hey@useagentventures.com</a>
          </nav>
          <div className="footer-meta caption">
            <span>&copy; {new Date().getFullYear()} Agent Ventures</span>
          </div>
        </div>
        <div className="footer-wordmark" aria-hidden="true">
          <svg viewBox="0 0 1800 260" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
            <text
              x="900"
              y="210"
              textAnchor="middle"
              fontFamily="'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif"
              fontWeight="900"
              fontSize="240"
              letterSpacing="-12"
              fill="currentColor"
            >Agent Ventures</text>
          </svg>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, FinalCTA, Footer });