// Quantum Spaces — Problem, Why Now, Progression sections.

function Problem() {
  return (
    <section id="problem">
      <div className="container">
        <div className="problem-grid">
          <div className="problem-panel">
            <div className="problem-panel-header">
              <span className="eyebrow">The problem</span>
              <h2 className="problem-h2-over">A gap in basic environmental literacy.</h2>
            </div>
            <div className="problem-figure">
              <img className="problem-panel-img" src="assets/infra-towers.png" alt="" />
            </div>
          </div>
          <div className="problem-body">
            <p>Wireless networks, power systems, smart devices, and building infrastructure have transformed the electromagnetic character of every space we inhabit. These technologies are genuinely extraordinary, but they've outpaced our collective ability to observe, measure, or meaningfully discuss their environmental effects.</p>
            <p>We've mapped air quality. We've measured water. We track noise. But the electromagnetic conditions inside the homes, schools, hospitals, and offices where people spend their lives? Largely invisible, unmeasured and unknown.</p>
            <h3 className="problem-statement">Quantum Spaces exists to close that gap.</h3>
          </div>
        </div>
      </div>
    </section>
  );
}

const WHY_STAGES = [
  ["01", "Measurement"],
  ["02", "Public awareness"],
  ["03", "Standards & policy"],
  ["04", "Routine monitoring"],
];

const WHY_MATRIX = [
  { domain: "Air quality", icon: "air", cells: [
    ["1950s", "Soot & smog monitoring"],
    ["1960s", "Recognized health risk"],
    ["1970", "Clean Air Act"],
    ["Today", "Mapped block by block"],
  ]},
  { domain: "Water safety", icon: "water", cells: [
    ["1900s", "Bacteriological testing"],
    ["1960s", "Contamination concern"],
    ["1974", "Safe Drinking Water Act"],
    ["Today", "Tested at the tap"],
  ]},
  { domain: "Noise", icon: "noise", cells: [
    ["1930s", "Sound-level meters"],
    ["1960s", "Urban noise concern"],
    ["1972", "Noise Control Act"],
    ["Today", "City noise codes"],
  ]},
];

const WHY_EMR_CELLS = [
  ["Now", "Friendly Photons", "live"],
  ["—", "Ahead", "ahead"],
  ["—", "Ahead", "ahead"],
  ["—", "Ahead", "ahead"],
];

function WhyNowMobile() {
  // All trays default closed — user expands as desired.
  const [openTrays, setOpenTrays] = React.useState(new Set());
  const toggle = (i) => {
    setOpenTrays((prev) => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i); else next.add(i);
      return next;
    });
  };
  const allDomains = [
    ...WHY_MATRIX.map((d) => ({ ...d, emr: false })),
    { domain: "Electromagnetic radiation", icon: "emr", cells: WHY_EMR_CELLS, emr: true },
  ];
  return (
    <div className="why-mobile">
      {allDomains.map((d, i) => {
        const isOpen = openTrays.has(i);
        const sum = d.emr ? "NOW · 3 COMING" : `${d.cells[0][0]} → ${d.cells[3][0]}`;
        return (
          <div className={`mcard fd fc ${d.emr ? "emr" : ""}${isOpen ? " open" : ""}`} key={d.domain}>
            <button
              type="button"
              className="mc-head"
              aria-expanded={isOpen}
              aria-controls={`why-tray-${i}`}
              onClick={() => toggle(i)}
            >
              <span className="mc-head-l">
                <span className="mc-ico"><DomainIcon kind={d.icon} /></span>
                <span className="mc-name">{d.domain}</span>
              </span>
              <span className="mc-sum">{sum}</span>
              <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </button>
            <div className="tray" id={`why-tray-${i}`}>
              <div className="tl">
                {d.cells.map((c, j) => {
                  const isLive = d.emr && c[2] === "live";
                  const isAhead = d.emr && c[2] === "ahead";
                  const stepClass = d.emr ? (isLive ? "step live" : "step up") : "step";
                  return (
                    <div className={stepClass} key={j}>
                      <span className="stage">{WHY_STAGES[j][1]}</span>
                      {isAhead ? (
                        <span className="coming">Coming</span>
                      ) : (
                        <React.Fragment>
                          <span className="era">{isLive ? "Now" : c[0]}</span>
                          <span className="note">{c[1]}</span>
                        </React.Fragment>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function WhyNow() {
  return (
    <section id="whynow" className="why-bg">
      <div className="container">
        <div className="why-header">
          <div className="why-header-left">
            <span className="eyebrow">Why now</span>
            <h2 className="why-h2">
              Every <span style={{ color: "var(--teal)" }}>environmental</span> conversation<br />
              started with <span style={{ color: "var(--teal)" }}>measurement</span>
            </h2>
          </div>
          <div className="why-box">
            <p>Each domain we now take for granted followed the same arc — <strong>measurement first, standards later.</strong> Electromagnetic radiation sits at the very start of that path. The tools exist. The public interest is real. The dataset doesn't exist yet. That's what we're building.</p>
          </div>
        </div>

        <div className="why-desktop">
          <div className="why-matrix">
            <div className="wm-row wm-head">
              <div className="wm-cell wm-domain-cell"><span className="wm-collabel wm-collabel-lead">Environmental domain</span></div>
              {WHY_STAGES.map(([n, label]) => (
                <div className="wm-cell wm-head-cell" key={n}>
                  <span className="wm-colnum">{n}</span>
                  <span className="wm-collabel">{label}</span>
                </div>
              ))}
            </div>
            {WHY_MATRIX.map((row) => (
              <div className="wm-row" key={row.domain}>
                <div className="wm-cell wm-domain-cell">
                  <span className="wm-ico"><DomainIcon kind={row.icon} /></span>
                  <span className="wm-domain">{row.domain}</span>
                </div>
                {row.cells.map(([era, note], i) => (
                  <div className="wm-cell" key={i}>
                    <span className="wm-stage">{WHY_STAGES[i][1]}</span>
                    <div className="wm-cellval">
                      <span className="wm-era">{era}</span>
                      <span className="wm-note">{note}</span>
                    </div>
                  </div>
                ))}
              </div>
            ))}
            <div className="wm-row wm-row-emr">
              <div className="wm-cell wm-domain-cell">
                <span className="wm-ico"><DomainIcon kind="emr" /></span>
                <span className="wm-domain">Electromagnetic radiation</span>
              </div>
              {WHY_EMR_CELLS.map(([era, note, kind], i) => (
                kind === "ahead" ? (
                  <div className="wm-cell wm-cell-ahead" key={i}>
                    <span className="wm-stage">{WHY_STAGES[i][1]}</span>
                    <div className="wm-cellval">
                      <span className="wm-era wm-coming">Coming</span>
                    </div>
                  </div>
                ) : (
                  <div className="wm-cell" key={i}>
                    <span className="wm-stage">{WHY_STAGES[i][1]}</span>
                    <div className="wm-cellval">
                      <span className="wm-era wm-now"><span className="wm-dot"></span>{era}</span>
                      <span className="wm-note">{note}</span>
                    </div>
                  </div>
                )
              ))}
            </div>
          </div>
        </div>
        <WhyNowMobile />
        <p className="wm-foot-note">U.S. milestones · dates approximate</p>
      </div>
    </section>
  );
}

const PROG = [
  ["Visibility", "01", "Friendly Photons", "Creates visibility through community EMR mapping of real inhabited places."],
  ["Choice", "02", "Public awareness", "People make informed choices about the spaces they live and work in."],
  ["Action", "03", "EMR Certification", "Enables voluntary action and trust-building by businesses and property owners."],
  ["Understanding", "04", "Research program", "Real-world data supports independent scientific inquiry at scale."],
  ["Change", "05", "Policy evolution", "Evidence-based dialogue leads to responsible, proportional guidelines over time."],
];

function Progression() {
  const [active, setActive] = React.useState(0);
  return (
    <div className="prog-bg">
      <div className="container">
        <div className="prog-section">
          <span className="prog-eyebrow">Where this is going</span>
          <h2 className="prog-h2">A simple progression. A long commitment.</h2>
          <div className="prog-grid">
            {PROG.map(([step, num, title, text], i) => (
              <div className={"prog-col" + (active === i ? " active" : "")} key={num} onMouseEnter={() => setActive(i)}>
                <div className="prog-col-top">
                  <span className="prog-step-label">{step}</span>
                  <span className="prog-step-num">{num}</span>
                </div>
                <div className="prog-col-body">
                  <div className="prog-col-title">{title}</div>
                  <div className="prog-col-text">{text}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Problem, WhyNow, Progression });