// Quantum Spaces — Hero with the interactive EMR-source ticker.

const SOURCE_DATA = {
  power: { label: "Power Lines", cols: [
    { h: "Current Scale", lines: [["6.1M","miles of energized wire"],["600K","transmission miles"],["5.5M","distribution miles"]] },
    { h: "Speed of Growth", lines: [["73%","capacity growth since 2000"],["750 GW → 1.3 TW",""]] },
    { h: "What's Coming", lines: [["2.6×","DOE mandate by 2050"],["$121B","funded 2023–2026"]] },
  ]},
  cell: { label: "Cell Sites", cols: [
    { h: "Current Scale", lines: [["260K","macro cell sites"],["5M+","active radios"],["1M+","small cell nodes"]] },
    { h: "Speed of Growth", lines: [["18–29×","active radios since 2000"],["3×","macro sites since 2000"],["0 → 1M","small cells since 2012"]] },
    { h: "What's Coming", lines: [["280–300K","macro sites by 2030"]] },
  ]},
  devices: { label: "Personal Wireless", cols: [
    { h: "Current Scale", lines: [["2B","consumer devices"],["25","per household"]] },
    { h: "Speed of Growth", lines: [["20×","since 2000"],["100M → 2B","in 25 years"]] },
    { h: "What's Coming", lines: [["8B+","IoT devices by 2034"],["35","per household by 2030"]] },
  ]},
  satellites: { label: "Satellites", cols: [
    { h: "Current Scale", lines: [["12K","active LEO satellites"]] },
    { h: "Speed of Growth", lines: [["60%","launched since 2020"],["7,900","Starlink alone"]] },
    { h: "What's Coming", lines: [["42K+","constellations planned"]] },
  ]},
};

function Ticker() {
  const [active, setActive] = React.useState(null);
  const order = ["power", "cell", "devices", "satellites"];
  const data = active && SOURCE_DATA[active];
  return (
    <div className="hero-ticker">
      <div className="stats-sources">
        {order.map((k) => (
          <button key={k} className={"stats-source-btn" + (active === k ? " active" : "")}
            onClick={() => setActive(active === k ? null : k)}>
            <SourceIcon kind={k} />
            <span className="stats-source-btn-label">{SOURCE_DATA[k].label}</span>
          </button>
        ))}
      </div>
      {data && (
        <div className="stats-detail">
          <div className="stats-detail-inner" key={active}>
            <div className="stats-detail-cols">
              {data.cols.map((col, i) => (
                <div className="stats-detail-col" key={i}>
                  <span className="stats-col-header">{col.h}</span>
                  {col.lines.map(([val, txt], j) => (
                    <div className="stats-line" key={j}>
                      <span className="stats-val">{val}</span>
                      {txt && <span className="stats-txt">{txt}</span>}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
      <p className="stats-region-note">U.S. figures · Satellites global</p>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-meta">
          <span className="hero-tag">EST. 2025 — QUANTUM SPACES PROJECT</span>
        </div>
        <h1 className="hero-h1">
          When the environment changes at scale,<br/>
          <span style={{ color: "var(--teal)" }}>it's reasonable to measure it.</span>
        </h1>
        <div className="hero-bottom">
          <p className="hero-sub">Electromagnetic radiation is now a permanent feature of every inhabited space. The Quantum Spaces Project exists to make it observable — through place-based measurement, open data, voluntary certification, and evidence-based research.</p>
          <div className="hero-right">
            <a className="btn-ink" onClick={() => window.scrollTo({ top: document.getElementById("pillars").offsetTop - 62, behavior: "smooth" })}>Explore the project</a>
          </div>
        </div>
      </div>
      <Ticker />
    </section>
  );
}

Object.assign(window, { Hero, Ticker });