/* FriendlyPhotons — Marketing site REDESIGN · sections part 1.
   A rebalanced, more editorial layout: alternating immersive photography,
   clean product moments, and data — all within the existing brand. */

const RD_ASSET = "assets/";

// ── Shared EMR spectrum scale ────────────────────────────────────────────────
const RD_SCALE = [
  { n: 1, label: "Quiet",   c: "var(--emr-1)" },
  { n: 2, label: "Audible", c: "var(--emr-2)" },
  { n: 3, label: "Noisy",   c: "var(--emr-3)" },
  { n: 4, label: "Loud",    c: "var(--emr-4)" },
  { n: 5, label: "Blaring", c: "var(--emr-5)" },
];
// Rose Middle School rating — single source of truth for the rating Tweak.
const RD_RATING = {
  quiet:   { level: 1, label: "Quiet",   elf: "0.21",  rf: "0.04" },
  audible: { level: 2, label: "Audible", elf: "0.95",  rf: "0.38" },
  noisy:   { level: 3, label: "Noisy",   elf: "3.40",  rf: "2.10" },
  loud:    { level: 4, label: "Loud",    elf: "6.80",  rf: "7.50" },
  blaring: { level: 5, label: "Blaring", elf: "10.87", rf: "14.342" },
};
function SpectrumBar({ labels = true, compact = false, marker = null }) {
  // marker = 1..5 → render a gauge mark centered over that segment
  const markerLeft = marker ? `${(marker - 0.5) * 20}%` : null;
  return (
    <div className={"rd-spectrum" + (compact ? " compact" : "")}>
      {marker && (
        <div className="rd-spectrum-marker" style={{ left: markerLeft }}>
          <svg className="rd-spectrum-marker-tri" width="31" height="21" viewBox="0 0 22 15" aria-hidden="true">
            <path d="M11 13 L1.5 1.5 L20.5 1.5 Z" fill="#FFFFFF" stroke="#1A1A18" strokeWidth="2.5" strokeLinejoin="round" />
          </svg>
        </div>
      )}
      <div className="rd-spectrum-bar">
        {RD_SCALE.map(s => (
          <div className="rd-spectrum-seg" key={s.n} style={{ background: s.c }}>
            <span className="rd-spectrum-n">{s.n}</span>
          </div>
        ))}
      </div>
      {labels && (
        <div className="rd-spectrum-labels">
          {RD_SCALE.map(s => <span key={s.n} className={marker === s.n ? "is-marked" : ""} style={{ color: s.c }}>{s.label}</span>)}
        </div>
      )}
    </div>
  );
}

// ── HERO ─────────────────────────────────────────────────────────────────────
const HERO_PLACES = [
  { name: "Crestline Home", type: "Home", icon: "home", level: 1, label: "Quiet", top: "21%", left: "26%", below: true },
  { name: "Harbor Point Offices", type: "Office", icon: "building", level: 2, label: "Audible", top: "27%", left: "73%", below: true },
  { name: "Rose Middle School", type: "School", icon: "school", level: 3, label: "Noisy", top: "75%", left: "50%", big: true, rest: true },
  { name: "Large Cell Tower", type: "Cell Tower", icon: "tower", level: 5, label: "Blaring", top: "55%", left: "48%", source: true },
  { name: "Northgate Apartments", type: "Apartments", icon: "building", level: 4, label: "Loud", top: "55%", left: "79%" },
  { name: "Maple Hotel", type: "Hotel", icon: "bed", level: 5, label: "Blaring", top: "85%", left: "23%" },
];
const HERO_SOURCES = [
  { kind: "tower", top: "14%", left: "55%" },
  { kind: "tower", top: "44%", left: "20%" },
  { kind: "powerline", top: "74%", left: "76%" },
];
function SourceGlyph({ kind }) {
  if (kind === "powerline") return (
    <svg viewBox="0 0 24 36" fill="currentColor">
      <rect x="10.5" y="3" width="3" height="30" /><rect x="1" y="9" width="22" height="1.5" /><rect x="3" y="15" width="18" height="1.5" />
      <circle cx="1" cy="9.8" r="1" /><circle cx="23" cy="9.8" r="1" /><circle cx="3" cy="15.8" r="1" /><circle cx="21" cy="15.8" r="1" />
      <rect x="9" y="33" width="6" height="2" />
    </svg>
  );
  if (kind === "smallcell") return (
    <svg viewBox="0 0 24 32" fill="currentColor"><path d="M10.13 6.8 L13.87 6.8 L13.87 17.2 L10.13 17.2 Z M11.5 17.2 L12.5 17.2 L12.5 31 L11.5 31 Z M15.02 9.23 A3 3 0 0 1 15.02 14.77 L14.64 13.85 A2 2 0 0 0 14.64 10.15 Z M15.79 7.38 A5 5 0 0 1 15.79 16.62 L15.40 15.70 A4 4 0 0 0 15.40 8.30 Z M16.55 5.53 A7 7 0 0 1 16.55 18.47 L16.17 17.54 A6 6 0 0 0 16.17 6.46 Z M8.98 9.23 A3 3 0 0 0 8.98 14.77 L9.36 13.85 A2 2 0 0 1 9.36 10.15 Z M8.21 7.38 A5 5 0 0 0 8.21 16.62 L8.60 15.70 A4 4 0 0 1 8.60 8.30 Z M7.45 5.53 A7 7 0 0 0 7.45 18.47 L7.83 17.54 A6 6 0 0 1 7.83 6.46 Z" /></svg>
  );
  return (
    <svg viewBox="0 0 26 35" fill="currentColor">
      <rect x="12" y="11.5" width="2" height="23" /><rect x="4.5" y="3.5" width="3" height="11.5" /><rect x="8.5" y="1" width="3" height="14" /><rect x="15" y="1" width="3" height="14" /><rect x="19" y="3.5" width="3" height="11.5" />
      <line x1="12" y1="11.5" x2="6" y2="9" stroke="currentColor" strokeWidth="1" /><line x1="12" y1="11.5" x2="10" y2="8" stroke="currentColor" strokeWidth="1" /><line x1="14" y1="11.5" x2="16" y2="8" stroke="currentColor" strokeWidth="1" /><line x1="14" y1="11.5" x2="20.5" y2="9" stroke="currentColor" strokeWidth="1" />
    </svg>
  );
}
function RHero({ onDownload, rating = "noisy" }) {
  const roseLevel = (RD_RATING[rating] || RD_RATING.noisy).level;
  const others = [1, 2, 3, 4, 5].filter(l => l !== roseLevel);
  const rotate = { "Crestline Home": others[0], "Harbor Point Offices": others[1], "Northgate Apartments": others[2], "Maple Hotel": others[3] };
  const places = HERO_PLACES.map(p => {
    const lvl = p.name === "Rose Middle School" ? roseLevel : (rotate[p.name] != null ? rotate[p.name] : p.level);
    return { ...p, level: lvl, label: RD_SCALE[lvl - 1].label };
  });
  const restIdx = places.findIndex(p => p.rest);
  const [active, setActive] = React.useState(restIdx);
  React.useEffect(() => {
    const mq = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)");
    if (mq && mq.matches) { setActive(restIdx); return; }
    let i = restIdx;
    let interval;
    const start = setTimeout(() => {
      interval = setInterval(() => { i = (i + 1) % places.length; setActive(i); }, 3800);
    }, 1500);
    return () => { clearTimeout(start); clearInterval(interval); };
  }, []);
  return (
    <header className="rd-hero" id="top">
      <div className="rd-hero-grid">
        <div className="rd-hero-copy">
          <span className="rd-hero-eyebrow">A community map of electromagnetic readings</span>
          <h1 className="rd-hero-h1">See the <em>invisible energy</em> in any space.</h1>
          <p className="rd-hero-sub">FriendlyPhotons makes electromagnetic radiation visible in your everyday spaces — homes, hotels, offices, schools, and everywhere in between.</p>
          <div className="rd-hero-actions">
            <Button onClick={onDownload}>Get early access</Button>
            <GhostLink href="#how">See how it works</GhostLink>
          </div>
        </div>
        <div className="rd-hero-stage">
          <div className="rd-hero-glow"></div>
          <div className="rd-hero-map">
            <img className="rd-hm-base" src={RD_ASSET + "map-base-green2.png"} alt="A neighborhood map of electromagnetic readings" />
            <div className="rd-hm-grade"></div>
            {places.map((p, idx) => (
              <div className={"rd-hm-pin" + (p.big ? " big" : "")} key={p.name} style={{ top: p.top, left: p.left }}>
                <div className={"rd-hm-cpop" + (p.below ? " below" : "")} data-on={idx === active}>
                  <span className="rd-hm-cpop-type">{p.type}</span>
                  <span className="rd-hm-cpop-name">{p.name}</span>
                  <span className="rd-hm-cpop-chip" style={{ background: "var(--emr-" + p.level + ")", color: p.level <= 2 ? "var(--emr-" + p.level + "-text)" : "#fff" }}>
                    <b>{p.level}</b><span>{p.label}</span>
                  </span>
                </div>
                {p.source
                  ? <span className="rd-hm-src-head"><SourceGlyph kind={p.icon} /></span>
                  : <span className="rd-hm-head" style={{ background: "var(--emr-" + p.level + ")", animationDelay: (0.15 + idx * 0.12) + "s" }}><Icon name={p.icon} size={16} stroke={p.level <= 2 ? "var(--emr-" + p.level + "-text)" : "#fff"} width={2.4} /></span>}
              </div>
            ))}
            <div className="rd-hm-you" style={{ top: "82%", left: "64%" }}>
              <span className="rd-hm-you-ring"></span>
              <img src={RD_ASSET + "photy.png"} alt="" />
              <span className="rd-hm-you-tag">You</span>
            </div>
            {HERO_SOURCES.map((src, i) => (
              <div className="rd-hm-src" key={i} style={{ top: src.top, left: src.left, animationDelay: (0.5 + i * 0.1) + "s" }}><span className="rd-hm-src-head"><SourceGlyph kind={src.kind} /></span></div>
            ))}
          </div>
        </div>
      </div>
    </header>
  );
}

// ── STAKES — full-bleed immersive photography band ───────────────────────────
function RStakes() {
  return (
    <section id="stakes" className="rd-stakes">
      <div className="rd-stakes-img"></div>
      <div className="rd-stakes-scrim"></div>
      <div className="rd-stakes-inner">
        <h2 className="rd-stakes-h2">The air around you is <em className="rd-stakes-accent">alive</em> with invisible energy.</h2>
        <p className="rd-stakes-p">Every building you enter, room you sleep in, and street you walk on has an electromagnetic environment. Some are quiet. Some aren't. Until now, there was no easy way to know the difference.</p>
        <p className="rd-stakes-beat">You can't see it, but it's everywhere.</p>
      </div>
    </section>
  );
}

// ── ANSWER — product spotlight; rating diagram tucked behind a right-column tray ─
function RAnswer({ rating = "noisy" }) {
  const R = RD_RATING[rating] || RD_RATING.noisy;
  const [open, setOpen] = React.useState(false);
  const [inview, setInview] = React.useState(false);
  const secRef = React.useRef(null);
  React.useEffect(() => {
    function onClick(e) {
      const a = e.target.closest && e.target.closest('a[href="#how"]');
      if (a) { e.preventDefault(); setOpen(true); if (secRef.current) secRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); }
    }
    document.addEventListener("click", onClick);
    if (typeof location !== "undefined" && location.hash === "#how") { setOpen(true); setTimeout(() => secRef.current && secRef.current.scrollIntoView({ behavior: "smooth" }), 300); }
    let io;
    if (secRef.current && "IntersectionObserver" in window) {
      io = new IntersectionObserver((es) => es.forEach((en) => { if (en.isIntersecting) setInview(true); }), { threshold: 0.3 });
      io.observe(secRef.current);
    } else { setInview(true); }
    return () => { document.removeEventListener("click", onClick); if (io) io.disconnect(); };
  }, []);
  return (
    <section id="answer" className="rd-answer" ref={secRef}>
      <div className="rd-answer-grid">
        <div className="rd-answer-phone">
          <div className="rd-answer-stage">
            <div className={"rd-answer-card" + (open ? " is-hidden" : "")}>
              <div className="rd-locdetail"><img key={rating} src={RD_ASSET + "answer-card-" + rating + ".png"} alt={"FriendlyPhotons — Place EMR Card for Rose Middle School, rated " + R.level + " " + R.label} /></div>
            </div>
            <div className={"rd-answer-tray" + (open ? " is-open" : "")} aria-hidden={!open}>
              <div className="rd-vflow">
                <span className="rd-vflow-head"><img className="rd-vflow-thumb" src={RD_ASSET + "rose-cover-clean.png"} alt="" />Rose Middle School</span>
                <div className="rd-vsources">
                  <div className="rd-vsource">
                    <span className="rd-vsource-top"><Icon name="zap" size={16} stroke="#0D9373" />ELF</span>
                    <span className="rd-vsource-val">{R.elf}<em>mG</em></span>
                    <span className="rd-vsource-sub">Powerlines &amp; electrical</span>
                  </div>
                  <div className="rd-vsource">
                    <span className="rd-vsource-top"><Icon name="waves" size={16} stroke="#0D9373" />RF</span>
                    <span className="rd-vsource-val">{R.rf}<em>mW/m²</em></span>
                    <span className="rd-vsource-sub">Cell towers &amp; wireless</span>
                  </div>
                </div>
                <svg className="rd-vbeams" viewBox="0 0 240 60" fill="none" aria-hidden="true">
                  <defs>
                    <linearGradient id="rdVBeam" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor="#0D9373" /><stop offset="1" stopColor="#EC9A20" />
                    </linearGradient>
                  </defs>
                  <path className="rd-beam" d="M60 4 C 60 38, 120 26, 120 58" stroke="url(#rdVBeam)" strokeWidth="3.5" strokeLinecap="round" strokeDasharray="1.5 7" />
                  <path className="rd-beam" d="M180 4 C 180 38, 120 26, 120 58" stroke="url(#rdVBeam)" strokeWidth="3.5" strokeLinecap="round" strokeDasharray="1.5 7" />
                </svg>
                <div className="rd-vchip" style={{ background: "var(--emr-" + R.level + ")" }}>
                  <span className="rd-vchip-lbl" style={{ color: R.level <= 2 ? "var(--emr-" + R.level + "-text)" : "rgba(255,255,255,0.92)" }}>EMR rating</span>
                  <span className="rd-vchip-row"><span className="rd-vchip-num" style={{ color: R.level <= 2 ? "var(--emr-" + R.level + "-text)" : "#fff" }}>{R.level}</span><span className="rd-vchip-tag" style={{ color: R.level <= 2 ? "var(--emr-" + R.level + "-text)" : "#fff" }}>{R.label}</span></span>
                </div>
                <div className="rd-vscale" role="img" aria-label={"On the 1 to 5 scale, this place is " + R.level + ", " + R.label + "."}>
                  <div className="rd-vscale-track">
                    {RD_SCALE.map(s => (
                      <div key={s.n} className={"rd-vscale-seg" + (s.n === R.level ? " is-on" : "")} style={{ background: s.c }}>
                        <span className="rd-vscale-num" style={{ color: s.n <= 2 ? "var(--emr-" + s.n + "-text)" : "#fff" }}>{s.n}</span>
                      </div>
                    ))}
                  </div>
                  <div className="rd-vscale-ends"><span>Quiet</span><span>Blaring</span></div>
                </div>
              </div>
              <p className="rd-vflow-caption">Two readings, distilled into one number.</p>
            </div>
          </div>
        </div>
        <div className="rd-answer-copy">
          <h2 className="rd-h2">FriendlyPhotons<br/>makes it <em style={{color:"var(--teal-400)",fontStyle:"normal"}}>visible</em>.</h2>
          <p className="rd-body">Contributors with EMF meters take readings everywhere they go — homes, parks, hotels, schools, offices. We distill what they find into <strong style={{fontWeight:600,color:"var(--text-primary)"}}>a single rating, from 1 (Quiet) to 5 (Blaring),</strong> that anyone can read at a glance — one for every place on the map.</p>
          <div className="rd-answer-rule"></div>
          <p className="rd-body">That rating blends the two kinds of energy in the air: Extremely Low Frequency (<strong style={{fontWeight:700,color:"var(--text-primary)"}}>ELF</strong>), which radiates from powerlines and electrical wiring, and Radio Frequency (<strong style={{fontWeight:700,color:"var(--text-primary)"}}>RF</strong>) from cell towers, Wi-Fi, and wireless devices. You don't need an EMF meter or a background in physics to make sense of it.</p>
          <button className={"rd-learnmore" + (open ? " is-open" : "")} onClick={() => setOpen(o => !o)} aria-expanded={open}>
            <span className="rd-eyebrow">{open ? "Hide the diagram" : "Learn more"}</span>
            <svg className="rd-learnmore-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

// ── WHO IT'S FOR + WHAT YOU DO (merged) ──────────────────────────────────────
function RWho({ personas = "statements" }) {
  const usecases = [
    { icon: "activity", who: "Citizen scientists", why: "concerned about the environment." },
    { icon: "bulb",     who: "The curious",    why: "who want to make informed choices." },
    { icon: "school",   who: "Parents",        why: "checking a new school." },
    { icon: "home",     who: "Renters",        why: "touring an apartment." },
    { icon: "bed",      who: "Travelers",      why: "vetting a hotel room." },
    { icon: "building", who: "Remote workers", why: "picking a place to work." },
  ];
  return (
    <section id="who" className="rd-who">
      <div className="rd-section-head">
        <h2 className="rd-h2 rd-center">For anyone who cares about what's in the air around them.</h2>
        <p className="rd-lead rd-center">Whether you're a citizen scientist concerned about the environment,<br />or a health-conscious traveler looking for a quiet night's sleep,<br /><strong style={{fontWeight:600,color:"var(--teal-600)"}}>there's a place for you here.</strong></p>
      </div>
      <div className="rd-who-grid">
        <RWhoCard img="explorer-hotel-checkin.jpg?v=2" imgPos="center 14%" eyebrow="For Explorers" color="#0F6E56"
          title="See what the community's found."
          acts={[
            { icon: "map-pin", h: "See what's around you", p: "EMR ratings for every place on the map, built from real readings." },
            { icon: "search", h: "Check before you go", p: "Search a place and see its rating — filter by type, distance, or rating." },
            { icon: "message", h: "Join the discussion", p: "Learn from the community, ask questions, and share your thoughts." },
          ]} />
        <RWhoCard img="contributor-street-survey.jpg" eyebrow="For Contributors" color="#a67318"
          title="Got a meter? You're kind of a big deal."
          acts={[
            { icon: "activity", h: "Put places on the map", p: "Every reading you log is credited to you — and becomes a rating thousands of explorers rely on." },
            { icon: "award", h: "Earn your stars", p: "Take on challenges, earn badges, and watch your contribution add up over time." },
            { icon: "message", h: "Join the discussion", p: "Discuss readings, share what you've found, and learn from fellow contributors." },
          ]} />
      </div>
      {personas !== "none" && (
      <div className="rd-usecases">
        <span className="rd-eyebrow">Built for</span>
        <div className="rd-usecase-grid">
          {usecases.map(u => (
            <div className="rd-usecase" key={u.who}>
              <span className="rd-uc-text"><strong>{u.who}</strong> {u.why}</span>
            </div>
          ))}
        </div>
      </div>
      )}
    </section>
  );
}

function RWhoCard({ img, imgPos, eyebrow, color, title, acts }) {
  return (
    <article className="rd-who-card">
      <div className="rd-who-img"><img src={RD_ASSET + img} alt={eyebrow} style={imgPos ? { objectPosition: imgPos } : null} /></div>
      <div className="rd-who-body">
        <span className="rd-eyebrow" style={{ color }}>{eyebrow}</span>
        <h3 className="rd-who-title">{title}</h3>
        <ul className="rd-who-acts">
          {acts.map(a => (
            <li key={a.h}>
              <span className="rd-act-ic"><Icon name={a.icon} size={26} stroke={color} width={1.8} /></span>
              <div><strong>{a.h}</strong><span>{a.p}</span></div>
            </li>
          ))}
        </ul>
      </div>
    </article>
  );
}

// ── Walkthrough modal — opens a clickable, step-through demo ──────────────────
function WalkthroughModal({ role, onClose }) {
  const BASE_W = 440, BASE_H = 1056;
  const [scale, setScale] = React.useState(0.7);
  React.useEffect(() => {
    if (!role) return;
    const fit = () => {
      const availH = window.innerHeight - 96;
      const availW = Math.min(window.innerWidth - 56, 560);
      setScale(Math.min(1, availH / BASE_H, availW / BASE_W));
    };
    fit();
    window.addEventListener("resize", fit);
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("resize", fit);
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [role]);
  if (!role) return null;
  const src = role === "contributor" ? "../app/contributor-story.html" : "../app/explorer-story.html";
  return (
    <div className="wt-overlay" onClick={onClose}>
      <div className="wt-modal" onClick={(e) => e.stopPropagation()}>
        <button className="wt-close" onClick={onClose} aria-label="Close">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
        </button>
        <div className="wt-scaler" style={{ width: BASE_W * scale, height: BASE_H * scale }}>
          <iframe className="wt-frame" src={src} title="Walkthrough" scrolling="no"
            style={{ width: BASE_W, height: BASE_H, transform: `scale(${scale})` }}></iframe>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RHero, RStakes, RAnswer, RWho, RWhoCard, WalkthroughModal, SpectrumBar });