// Quantum Spaces — Four Pillars + Principles (dark).

const PILLARS = [
  { n: "PILLAR 01", tag: "Live now", tagMuted: false, h: "Friendly Photons", sub: "Making electromagnetic environments visible",
    body: ["Friendly Photons is a community-powered app that maps EMR readings from real inhabited places — homes, hotels, offices, schools, healthcare facilities, and public spaces.",
      "Every location is measured across two bands: ELF — extremely low frequency energy from electrical infrastructure like wiring, power lines, and appliances — and RF — radio frequency energy from wireless systems like Wi-Fi, cellular, and Bluetooth. Together, these two readings form a location's EMR profile.",
      "Each reading is time-stamped, geo-located, and anonymized. As contributions accumulate, individual measurements gain value through patterns, comparisons, and trends that no single reading could reveal alone.",
      "The result is the first wide-spread, place-based dataset of electromagnetic conditions across real living environments."],
    action: { type: "link", label: "Explore Friendly Photons →", href: "https://friendlyphotons.ai" }, status: ["live", "● Live on iOS"] },
  { n: "PILLAR 02", tag: "In development", tagMuted: true, h: "EMR Certification", sub: "Turning voluntary action into trust",
    body: ["Visibility creates awareness. Awareness creates demand. Some businesses and property owners will want to respond — not because they're required to, but because transparency matters to the people they serve.",
      "The EMR Certification Program gives them a credible, standardized way to do it. It answers a narrow but meaningful question: how has this environment been measured and managed?",
      "It's a market signal, not a regulatory mandate. A way for responsible actors to lead voluntarily — and for the market to reward them for it."],
    action: { type: "muted", label: "Coming soon" }, status: ["dev", "○ In development"] },
  { n: "PILLAR 03", tag: "In development", tagMuted: true, h: "Research", sub: "Data that supports scientific inquiry",
    body: ["As the dataset matures — longitudinal, real-world, across thousands of inhabited locations globally — it becomes something that hasn't existed before: a research resource for understanding electromagnetic environments as people actually experience them.",
      "The Quantum Spaces Research program collaborates with independent researchers and institutions to identify meaningful patterns, inform study design, and support long-term inquiry.",
      "We don't attempt to prove harm or causation. We improve the quality of observation. Better data leads to better science."],
    action: { type: "muted", label: "Coming soon" }, status: ["dev", "○ In development"] },
  { n: "PILLAR 04", tag: "Long view", tagMuted: true, h: "Policy & the Long View", sub: "From research to public safety",
    body: ["In every mature environmental domain, shared measurement came before shared standards. Air quality. Water safety. Noise. In each case, data preceded policy and regulation.",
      "Electromagnetic environments are at an earlier point along that same path. The Quantum Spaces policy work focuses on evidence-based dialogue, reasonable and proportional guidelines, and design-oriented approaches to mitigation.",
      "This isn't about advocacy. It's about ensuring that when the policy conversation happens, it's grounded in real-world observation."],
    action: { type: "muted", label: "Follows from research" }, status: ["dev", "○ Long-term focus"] },
];

function PillarCard({ p }) {
  return (
    <div className="pillar-card">
      <div className="pillar-head">
        <div className="pillar-meta">
          <span className="pillar-n">{p.n}</span>
          <span className={p.tagMuted ? "pillar-eyebrow-muted" : "pillar-eyebrow-tag"}>{p.tag}</span>
        </div>
        <h3 className="pillar-h3">{p.h}</h3>
        <div className="pillar-subtitle">{p.sub}</div>
      </div>
      <div className="pillar-body">
        {p.body.map((t, i) => <p key={i}>{t}</p>)}
        <div className="pillar-action">
          {p.action.type === "link"
            ? <a className="pillar-link" href={p.action.href} target={p.action.href ? "_blank" : undefined} rel={p.action.href ? "noopener noreferrer" : undefined}>{p.action.label}</a>
            : <span className="pillar-link-muted">{p.action.label}</span>}
        </div>
      </div>
      <div className="pillar-foot">
        <span className={p.status[0] === "live" ? "status-live" : "status-dev"}>{p.status[1]}</span>
      </div>
    </div>
  );
}

function Pillars() {
  return (
    <section id="pillars">
      <div className="container">
        <div className="pillars-header">
          <div>
            <span className="eyebrow">The mission</span>
            <h2 className="pillars-h2">Four pillars. One direction.</h2>
          </div>
          <p className="pillars-intro">Each pillar stands on its own and can be used independently. Together, they form a complete and rational response to a changing electromagnetic environment — from first measurement to lasting policy change.</p>
        </div>
        <div className="pillars-grid">
          {PILLARS.map((p) => <PillarCard p={p} key={p.n} />)}
        </div>
      </div>
    </section>
  );
}

const PRINCIPLES = [
  ["01", "Measurement before conclusion", "We don't start with an answer and work backwards. We start with data and let understanding emerge from it honestly."],
  ["02", "Voluntary action over fear", "Visibility enables choice — it doesn't mandate it. We're not in the business of alarming people into action."],
  ["03", "Scientific humility", "Understanding evolves. Our standards and communications are designed to be honest about what we know and what we don't."],
  ["04", "Individual agency", "What people do with information is theirs to decide. Always. We illuminate. We never prescribe."],
  ["05", "Long game thinking", "Real environmental literacy takes time. We're building infrastructure for decades, not chasing this quarter's headlines."],
  ["06", "Open to scrutiny", "Standards are documented. Methods are transparent. We welcome independent review and challenge. That's how trust is earned."],
];

function Principles() {
  return (
    <section className="principles-bg principles-section" id="principles">
      <div className="container">
        <div className="principles-inner">
          <div>
            <span className="eyebrow eyebrow-teal">How we work</span>
            <h2 className="principles-h2">A few things we believe.</h2>
            <p className="principles-sub">These aren't marketing values. They're the principles that make it possible to build a new layer of environmental measurement — one that earns trust from the people who study it, the industries that shape it, and the public that lives in it.</p>
          </div>
          <div className="principles-grid">
            {PRINCIPLES.map(([n, t, b]) => (
              <div className="principle" key={n}>
                <span className="p-n">{n}</span>
                <div className="p-title">{t}</div>
                <p className="p-body">{b}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pillars, Principles, PillarCard });