// FAQ — accordion, only questions with answers from doc
function FAQ() {
  const sections = [
    { title: 'About the Project', items: [
      { q: 'How is this data center regulated?', a: 'The City of Piedmont has adopted a detailed section of its land use regulations dedicated to Data Centers. These rules govern where data centers can locate, how large they can be, required setbacks and open space, noise limits at property lines, water and cooling technology requirements, lighting standards, wildlife protections, and infrastructure and utility responsibilities. Piedmont Technology Park is being designed to comply with this ordinance and must obtain a Data Center Permit from the County before construction.' },
      { q: 'Why is this project different?', a: 'Unlike residential or retail development, a data center adds significant high-value industrial property, strengthens one of the City\u2019s primary recurring revenue sources (property taxes), requires minimal population-driven services, provides long-duration predictable revenue, and expands the tax base without increasing resident tax burdens. This is scalable, durable tax base growth.' },
    ]},
    { title: 'Infrastructure & Environment', items: [
      { q: 'Will the project increase traffic?', a: 'Data centers generate low traffic volumes because there are no retail customers or frequent loading activities. Traffic impacts from the Piedmont Technology Park are minimal compared to many other commercial or industrial uses, and significantly lower than those associated with distribution centers or large retail developments.' },
      { q: 'Does the investment in water, sewer, and power infrastructure only serve this project?', a: 'No. As part of the Piedmont Technology Park, significant private investment is proposed in water, sewer, and power infrastructure that is intended to serve the broader area, not only a single facility. These upgrades are coordinated with local utilities and public agencies to align with long-term community planning and help reduce the need for future taxpayer-funded improvements.' },
    ]},
    { title: 'Quality of Life', items: [
      { q: 'Will this make my house less peaceful?', a: 'City rules and the project design are both built around keeping sound at the property line at or near today\u2019s levels, especially near homes and parks. Equipment is set back, turned inward, and enclosed where needed, and independent sound studies are required before and after construction.' },
      { q: 'What protections are in place for noise, lighting, and wildlife?', a: 'The City\u2019s standards include maximum allowable sound at property boundaries, dark\u2011sky\u2011friendly lighting limits, mandatory landscape buffers, and thoughtful fencing for wildlife. Regular sound studies and environmental assessments are required, and permits can be revoked if conditions are violated.' },
    ]},
  ];

  return (
    <section id="faq" style={{ padding: '140px 0', background: 'var(--paper)' }}>
      <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="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 }}>
                We've heard the questions our neighbors are asking. Here are straightforward answers.
              </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;