// Benefits — editorial numbered list
function Benefits() {
  const items = [
    { n: '01', title: 'Jobs with staying power', text: 'Hundreds of high‑paying technical and operations roles, alongside thousands of construction jobs supporting local contractors, trades, and suppliers.' },
    { n: '02', title: 'Support for local services', text: 'Grows the tax base that helps fund local schools, fire and EMS, county services, and road improvements.' },
    { n: '03', title: 'Private infrastructure investment', text: 'Utility and grid upgrades funded through the project — not placed on existing residents or small businesses.' },
    { n: '04', title: 'A quiet neighbor', text: 'Designed to operate quietly in the background, with low daily traffic and strong protections for nearby homes, nature areas, and drinking water.' },
  ];
  return (
    <section id="benefits" style={{ padding: '140px 0 120px', background: 'var(--paper)' }}>
      <div className="container-x">
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.3fr', gap: 80, alignItems: 'start' }}>
          <div>
            <Reveal><div className="eyebrow"><span className="dot" /> About the project</div></Reveal>
            <Reveal delay={1}><h2 className="h2" style={{ marginTop: 22 }}>A long‑term anchor <span className="italic-serif" style={{ color: 'var(--forest-800)' }}>for the place we call home.</span></h2></Reveal>
            <Reveal delay={2}>
              <p style={{ color: 'var(--slate-700)', fontSize: 16, lineHeight: 1.7, marginTop: 24, maxWidth: 440 }}>
                The campus is being designed with the community in mind — low daily traffic, strict noise controls, generous setbacks, and strong protections for drinking water and nearby natural areas. Built to deliver real, lasting value with as little disruption to daily life as possible.
              </p>
            </Reveal>
          </div>
          <div style={{ borderTop: '1px solid rgba(20,32,27,.22)' }}>
            {items.map((it, i) => (
              <Reveal key={i} delay={(i % 4) + 1}>
                <div style={{ padding: '32px 0', borderBottom: '1px solid rgba(20,32,27,.14)', display: 'grid', gridTemplateColumns: '80px 1fr', gap: 32, alignItems: 'start' }}>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '.22em', color: 'var(--accent-deep)', fontWeight: 600, paddingTop: 6 }}>{it.n}</div>
                  <div>
                    <div className="font-display" style={{ fontWeight: 500, fontSize: 24, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{it.title}</div>
                    <div style={{ color: 'var(--slate-700)', fontSize: 15.5, marginTop: 10, lineHeight: 1.6, maxWidth: 620 }}>{it.text}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media(max-width: 960px){ #benefits > .container-x > div { grid-template-columns: 1fr !important; gap: 48px !important; } }
        @media(max-width: 560px){
          #benefits > .container-x > div > div:last-child > div > div {
            grid-template-columns: 1fr !important;
            gap: 8px !important;
          }
        }
      `}</style>
    </section>
  );
}
window.Benefits = Benefits;