/* global React */
const { useState: useStateFaq } = React;

const FAQS = [
  {
    q: "How fast can you actually ship?",
    a: "Most projects ship in 4–8 weeks; simpler builds in 2–3. Architecture review is 1–2 weeks. If you have a deadline, we'll either commit to it in writing or tell you it's not realistic.",
  },
  {
    q: "What stack do you use?",
    a: "GoHighLevel and n8n for the core, Zapier where it's the right tool, OpenAI for the AI layer, Supabase for data, and Ulinc for outreach. We connect to 200+ tools (HubSpot, Salesforce, Pipedrive, Shopify, WooCommerce, WhatsApp, Twilio, Intercom, Make). When standard tools fall short, we build the missing piece — two of those are open-sourced on GitHub.",
  },
  {
    q: "Do you replace our engineers?",
    a: "No. We replace the contractor you were about to hire, or the 6-month project you were about to scope internally. We hand the operating runbook to your team so you own the system when we walk away.",
  },
  {
    q: "Who do you work best with?",
    a: "Growth-stage startups and mid-market teams across e-commerce, SaaS, healthcare, real estate, and fintech — operators running real volume who need systems that hold up, not a demo that breaks next month.",
  },
  {
    q: "What about support and security?",
    a: "30 days of support included post-launch, with monthly retainers available. We follow SOC 2 best practices — encrypted transfers, role-based access — and run HIPAA-compliant builds for healthcare clients.",
  },
];

function FAQ() {
  const [open, setOpen] = useStateFaq(0);
  return (
    <section className="at-section at-faq" id="faq">
      <div className="at-container at-faq-grid">
        <div>
          <div className="at-eyebrow">FAQ</div>
          <h2 className="at-h-section">The questions<br />we get most.</h2>
          <p className="at-body">
            If yours isn't here, email <a href="mailto:zian@ansartech.net" style={{ color: 'var(--at-red)' }} data-cursor-label="email us">zian@ansartech.net</a> — we reply same-day.
          </p>
        </div>

        <div className="at-faq-list">
          {FAQS.map((f, i) => (
            <div
              key={i}
              className={`at-faq-row${open === i ? ' is-open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
              data-cursor-label={open === i ? "close" : "expand"}
            >
              <div className="at-faq-q">
                <span className="at-faq-num">Q · {String(i + 1).padStart(2, '0')}</span>
                <span className="at-faq-q-text">{f.q}</span>
                <span className="at-faq-toggle">+</span>
              </div>
              <div className="at-faq-a">
                <div className="at-faq-a-inner">
                  <div className="at-faq-a-text">{f.a}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;