// FAQ — cut from 12 to 6 (2026-08-02). The other six are now answered in
// more depth by the Elephants-in-the-Room panels (noise, lighting, traffic,
// generators, power source/cost) — this section keeps only the questions
// Elephants doesn't cover, and links into the relevant panel or section for
// anyone who wants the sourced version. No mobile "show all" toggle needed
// anymore; six questions fit on one screen without truncation.
function FAQ() {
  const sections = [
    { title: 'About the project', items: [
      { q: 'How is this data center regulated?', a: <>{SITE.county} has adopted a section of its land use regulations dedicated to data centers &mdash; covering where they can locate, size, setbacks and open space, noise limits at property lines, cooling technology, lighting standards, wildlife protections, and utility responsibilities. {SITE.park} is designed in this template to comply with that ordinance and obtain a permit before construction. See the <a href="#regulations" style={{ textDecoration: 'underline' }}>full commitments list</a>.</> },
      { q: 'Why is this project different from other large developments?', a: 'A data center adds industrial property value with a small onsite workforce and comparatively low day-to-day traffic — that’s a real structural difference from housing or retail, not a reason to skip the specific questions residents actually have.' },
      { q: 'Who is the project sponsor?', a: <>{SITE.sponsor} is the sponsor behind {SITE.park} in this template. Site planning, permitting, and construction are shown as subject to {SITE.county} land use review, with environmental and traffic studies submitted before vertical work begins.</> },
      { q: 'What is the project timeline?', a: 'In this demonstration, site preparation and utility coordination begin first, with the first data hall energized roughly a year later. Subsequent halls phase in over a five-to-six year buildout, sequenced against substation upgrades and water infrastructure milestones. Each phase would trigger a fresh round of county engineering review in a real deployment, so the schedule adjusts to permitting outcomes rather than running on a fixed calendar.' },
    ]},
    { title: 'Infrastructure & quality of life', items: [
      { q: 'Does the water, sewer, and power investment only serve this project?', a: <>Some of the infrastructure a project like this requires can also extend capacity for the surrounding area &mdash; but not automatically, and not without a docket to check. See <a href="#answers-power" style={{ textDecoration: 'underline' }}>how cost allocation actually works</a> under Oklahoma&rsquo;s large-load tariff law.</> },
      { q: 'What about noise, lighting, and wildlife?', a: <>Each gets its own sourced answer: <a href="#answers-noise" style={{ textDecoration: 'underline' }}>noise</a>, <a href="#answers-lights" style={{ textDecoration: 'underline' }}>night lighting</a>, and the <a href="#regulations" style={{ textDecoration: 'underline' }}>full commitments list</a> covering setbacks and buffers.</> },
    ]},
  ];

  return (
    <section
      id="faq"
      style={{ padding: '140px 0', background: 'var(--paper-warm)' }}
    >
      <div className="container-x">
        <div style={{ display:'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 120 }}>
            <Reveal><div className="eyebrow"><span className="kicker-num">11</span><span className="dot" /> Transparency</div></Reveal>
            <Reveal delay={1}><h2 className="h2" data-content-path="section.faq.heading" style={{ marginTop: 18 }}>Frequently asked questions.</h2></Reveal>
            <Reveal delay={2}>
              <p style={{ color:'var(--slate-700)', fontSize: 16, lineHeight: 1.6, marginTop: 20, maxWidth: 360 }}>
                For the concerns residents raise most, see <a href="#answers" style={{ textDecoration: 'underline' }}>the straight answers</a> — sourced, with the strongest version of each worry addressed directly. This section covers what's left.
              </p>
            </Reveal>
            <Reveal delay={3} style={{ marginTop: 20 }}>
              <a href="#contact" className="btn-ghost">Still have questions? <ArrowRight /></a>
            </Reveal>
          </div>
          <div>
            {sections.map((s, i) => (
              <Reveal key={s.title} delay={(i%3)+1} style={{ marginBottom: 40 }}>
                <div className="tag-mono" style={{ color: 'var(--forest-700)', marginBottom: 6 }}>— {s.title}</div>
                {s.items.map((it, j) => (
                  <details key={j}>
                    <summary>
                      <span className="font-display" style={{ fontWeight: 500, fontSize: 19, letterSpacing: '-0.01em' }}>{it.q}</span>
                      <span className="plus"><Icons.Plus size={14} /></span>
                    </summary>
                    <div className="answer">{it.a}</div>
                  </details>
                ))}
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media(max-width: 900px){ #faq > .container-x > div { grid-template-columns: 1fr !important; gap: 40px !important; } #faq > .container-x > div > div:first-child { position: static !important; } }`}</style>
    </section>
  );
}
window.FAQ = FAQ;
