function FAQ() {
  const items = [
    {
      q: "Is my production's data private?",
      a: "Yes. Every production is fully isolated, and access is scoped on multiple levels — per-studio, per-production, per-department, and per-person. Documents are encrypted in transit and at rest. Nothing from your production is used to train general models. Krew's patent-pending technology and infrastructure are built to SOC 2 and TPN standards, with formal certifications in progress."
    },
    {
      q: "Is there a learning curve?",
      a: "None. Think of Krew as a colleague you reach through the tools you already use — text, email, iMessage. No new app to learn, no training, no onboarding sessions for the team. If someone on your crew can send a text, they can work with Krew."
    },
    {
      q: "What does Krew need to get started?",
      a: "Just add Krew to your distribution lists and relevant file sharing folders. That's it — we work with whatever formats you already use (PDFs, Google Docs, Excel, Final Draft, Movie Magic). Setup takes a few days, not weeks, and Krew is up and running immediately."
    },
    {
      q: "Will this replace anyone on my team?",
      a: "No. Krew augments human judgment, it doesn't replace it. We're building tech that saves the humans — by taking the tedious cross-checking and document-wrangling off your plate so your team can focus on the creative and strategic work only they can do. The stuff you didn't want to do anyway."
    },
    {
      q: "Has this been tested on a real production?",
      a: "Yes. Krew has been deployed on an active $50M–$100M flagship TV series since January. In a historical analysis of a prior season, we caught 800+ discrepancies that survived every round of human review undetected."
    },
    {
      q: "What does it cost?",
      a: "Per-production pricing (dependent on scale) with volume discounts for studios and production companies. If you're interested in running a pilot, get in touch below."
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" id="faq" style={{padding: '50px 0px 80px'}}>
      <div className="container" style={{maxWidth: 880}}>
        <div className="section-head reveal" style={{marginBottom: 32}}>
          <span className="eyebrow-row"><i className="dot"></i>FAQ</span>
          <h2>Straight answers.</h2>
        </div>
        <div className="faq reveal">
          {items.map((it, i) => {
            const isOpen = open === i;
            const panelId = `faq-panel-${i}`;
            const buttonId = `faq-button-${i}`;
            return (
              <div key={i} className={`faq-item ${isOpen ? 'open' : ''}`}>
                <button
                  type="button"
                  id={buttonId}
                  className="faq-q"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <h4>{it.q}</h4>
                  <div className="plus" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
                      <line className="plus-h" x1="2" y1="7" x2="12" y2="7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                      <line className="plus-v" x1="7" y1="2" x2="7" y2="12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                    </svg>
                  </div>
                </button>
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={buttonId}
                  className="faq-a"
                >
                  <div style={{paddingTop: 4, paddingRight: 48}}>{it.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer footer-sth-bleed">
      <img className="footer-sth-img" src="/assets/save-the-humans.png" alt="Save the Humans — from Krew" style={{width: '500px'}} />

      <div className="container">
        <div className="footer-grid footer-grid--slim">
          <div className="footer-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#capabilities">What Krew does</a></li>
              <li><a href="#demo">Book a demo</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#team">Founders</a></li>
              <li><a href="mailto:founders@getkrew.ai">Contact</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="/privacy/">Privacy policy</a></li>
              <li><a href="/terms/">Terms of use</a></li>
              <li><a href="/sms-consent/">SMS consent</a></li>
              <li><a href="/accessibility/">Accessibility</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 Krew Technologies, Inc. All rights reserved.</div>
        </div>
      </div>
    </footer>
  );
}

window.FAQ = FAQ;
window.Footer = Footer;