/* FriendlyPhotons — Marketing site REDESIGN · sections part 2. */

// ── CONTRIBUTE + METER GUIDE ─────────────────────────────────────────────────
const RMETERS = [
  { brand: "AlphaLab", model: "TriField TF2", price: "~$170–$190", tags: ["AC Magnetic", "AC Electric", "RF"], best: "Quick diagnostics and before/after comparisons. One of the few true tri-mode consumer meters.", url: "https://www.trifield.com" },
  { brand: "Cornet Microsystems", model: "ED88TPlus / ED85EXPlus", price: "~$200–$260", tags: ["RF 100MHz–8GHz", "AC Magnetic", "AC Electric"], best: "Identifying RF sources — Wi-Fi, cell, DECT. Includes numeric frequency readout.", url: "https://cornetmicro.com" },
  { brand: "GQ Electronics", model: "EMF-390", price: "~$140–$170", tags: ["RF 50MHz–10GHz", "AC Magnetic", "Data logging"], best: "Trending and field surveys. Data logging and USB export for long-term observation.", url: "https://www.gqelectronicsllc.com" },
  { brand: "Latnex", model: "MG-300 / AF-3500", price: "~$40–$70", tags: ["AC Magnetic (ELF)"], best: "Best entry-level option for power lines, appliances, and breaker panels.", url: "https://www.latnex.com" },
  { brand: "TES", model: "TES-1393", price: "~$180–$230", tags: ["RF 50MHz–3.5GHz"], best: "Wi-Fi and cellular density checks. Stable readings from a respected manufacturer.", url: "https://www.tes.com.tw" },
];
function RContribute() {
  const [open, setOpen] = React.useState(false);
  return (
    <section id="contribute" className="rd-contribute">
      <div className="rd-contrib-band">
        <h2 className="rd-contrib-h2">Start with a meter.</h2>
        <p className="rd-contrib-p">Contributing takes one piece of gear: an EMF meter. There's no official device — but any of these widely available consumer meters will get you started and on the map.</p>
        <button className={"rd-meter-toggle" + (open ? " open" : "")} onClick={() => setOpen(o => !o)}>{open ? "Hide meter guide ↑" : "See meter guide ↓"}</button>
      </div>
      <div className={"rd-meters-wrap" + (open ? " open" : "")}>
        <div className="rd-meters">
          {RMETERS.map(m => (
            <div className="rd-meter" key={m.model}>
              <div className="rd-meter-brand">{m.brand}</div>
              <div className="rd-meter-model">{m.model}</div>
              <div className="rd-meter-price">{m.price}</div>
              <div className="rd-meter-tags">{m.tags.map(t => <span className="rd-meter-tag" key={t}>{t}</span>)}</div>
              <p className="rd-meter-best">{m.best}</p>
              <a className="rd-meter-link" href={m.url} target="_blank" rel="noopener">Visit site →</a>
            </div>
          ))}
        </div>
        <p className="rd-meters-disclaimer">FriendlyPhotons does not manufacture, sell, or endorse hardware. Prices are approximate.</p>
      </div>
    </section>
  );
}

// ── QS BAND ──────────────────────────────────────────────────────────────────
function RQS() {
  const pillars = [["01","Visibility","That's FriendlyPhotons"],["02","Behavior change","Informed choices"],["03","Trust & certification","For organizations"],["04","Research & policy","The long game"]];
  return (
    <section id="qs" className="rd-qs">
      <div className="rd-qs-grid">
        <div>
          <h2 className="rd-qs-h2">This is about<br/>more than one app.</h2>
          <p className="rd-qs-p">FriendlyPhotons is part of the Quantum Spaces Project — a broader effort to make electromagnetic environments measurable, understandable and actionable.</p>
          <p className="rd-qs-p">Every reading is a small act of collective intelligence.</p>
          <a className="rd-qs-link" href="#">Learn about Quantum Spaces →</a>
        </div>
        <div className="rd-pillars">
          {pillars.map(([n,t,s]) => <div className="rd-pillar" key={n}><span className="rd-pillar-n">{n}</span><span className="rd-pillar-t">{t}</span><span className="rd-pillar-s">{s}</span></div>)}
        </div>
      </div>
    </section>
  );
}

// ── FINAL CTA ────────────────────────────────────────────────────────────────
function RFinal({ onDownload }) {
  return (
    <section className="rd-final">
      <img src="assets/photy.png" alt="" className="rd-final-photy" />
      <h2 className="rd-final-h2">The <em style={{color:"var(--teal-400)",fontStyle:"normal"}}>invisible</em> world is waiting to be <em style={{color:"var(--teal-400)",fontStyle:"normal"}}>seen</em>.</h2>
      <p className="rd-final-p">Explore right now — no meter required. Download the app, find your neighborhood, and see what the community has already discovered.</p>
      <Button onClick={onDownload}>Get early access</Button>
      <p className="rd-final-note">Available on iOS · Android coming soon</p>
    </section>
  );
}

// ── INSIDE THE APP — static product showcase ─────────────────────────────────
function RShowcase() {
  const shots = [
    { img: "shot-map.png?v=2",  index: "01 · Explore",     label: "See what's around you", desc: "Every rated space nearby, color-coded from quiet to blaring." },
    { img: "shot-card.png", index: "02 · Read",        label: "Read the rating",       desc: "One score from 1 to 5 — with the readings and notes behind it." },
    { img: "shot-add.png",  index: "03 · Contribute",  label: "Add a reading",         desc: "Contributors log what their meter shows, and the map grows." },
  ];
  return (
    <section id="inside" className="rd-showcase">
      <div className="rd-section-head">
        <span className="rd-eyebrow">Inside the app</span>
        <h2 className="rd-h2 rd-center">From map to meter, one calm place.</h2>
        <p className="rd-lead rd-center rd-balance">Find a space, read its rating, or add what your own meter sees. No physics degree required.</p>
      </div>
      <div className="rd-showcase-grid">
        {shots.map(s => (
          <div className="rd-showcase-col" key={s.img}>
            <div className="rd-shot-frame"><img src={RD_ASSET + s.img} alt={s.label} loading="lazy" /></div>
            <span className="rd-shot-index">{s.index}</span>
            <span className="rd-shot-label">{s.label}</span>
            <p className="rd-shot-desc">{s.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── RATING SCALE (folded into RAnswer) ───────────────────────────────────────

Object.assign(window, { RContribute, RQS, RFinal, RShowcase });

// ── JOURNEY — follow one reading from meter to map to conversation ───────────
function JSketch({ className }) {
  return (
    <svg className={className} viewBox="0 0 170 110" fill="none" aria-hidden="true">
      <path d="M14 10 C 20 60, 56 94, 104 88 C 128 85, 146 72, 156 56" stroke="currentColor" strokeWidth="8" strokeLinecap="round" />
      <path d="M18 16 C 25 60, 60 86, 100 81" stroke="currentColor" strokeWidth="3" strokeLinecap="round" opacity="0.35" />
      <path d="M162 48 L 132 62 L 150 84 Z" fill="currentColor" />
    </svg>
  );
}
function RJourney({ variant = "bands", rating = "noisy" }) {
  const RJ = ({ quiet: { level: 1, label: "Quiet" }, audible: { level: 2, label: "Audible" }, noisy: { level: 3, label: "Noisy" }, loud: { level: 4, label: "Loud" }, blaring: { level: 5, label: "Blaring" } })[rating] || { level: 3, label: "Noisy" };
  const steps = [
    { img: "journey-1-measure.png", h: "Take a reading", p: "A FriendlyPhotons contributor measures the electromagnetic radiation — ELF & RF — right where they stand: a home, a school, a park, anywhere in between." },
    { img: "journey-2-record-" + rating + ".png?v=hi", h: "It becomes the record", p: "The reading joins that place's record — a single rating, with the detailed numbers, photos, and comments behind it." },
    { img: "journey-3-map.png?v=5", h: "It lands on the map", p: "Live for everyone to see. Check your neighborhood for cell towers, your child's school, or the hotel you're booking." },
    { img: "journey-4-community-" + rating + ".png?v=r1", h: "The community weighs in", p: "Corroborate a reading, share what you know, and hunt down the source together." },
  ];
  const head = (
    <div className="rd-section-head">
      <h2 className="rd-h2 rd-center">One reading at a time.</h2>
      <p className="rd-lead rd-center">Follow a single measurement from a contributor's meter to the map.</p>
    </div>
  );
  const Copy = ({ i, side }) => (
    <div className={"rd-jb-copy rd-jb-copy--" + side}>
      <span className="rd-j-num">{i + 1}</span>
      <h3 className="rd-jb-h">{steps[i].h}</h3>
      <p className="rd-jb-p">{steps[i].p}</p>
    </div>
  );
  const Phone = ({ i }) => (
    <div className="rd-jb-phone"><img src={"assets/" + steps[i].img} alt={steps[i].h} /></div>
  );
  if (variant === "stack") {
    return (
      <section id="journey" className="rd-journey rd-journey--stack">
        {head}
        <div className="rd-jstack">
          {steps.map((s, i) => (
            <article className="rd-js-card" style={{ "--i": i }} key={s.img}>
              <div className="rd-js-media">
                <div className="rd-js-phone"><img src={"assets/" + s.img} alt={s.h} /></div>
              </div>
              <div className="rd-js-body">
                <span className="rd-js-step">Step 0{i + 1}</span>
                <h3 className="rd-js-h">{s.h}</h3>
                <p className="rd-js-p">{s.p}</p>
              </div>
            </article>
          ))}
        </div>
      </section>
    );
  }
  if (variant === "bands") {
    return (
      <section id="journey" className="rd-journey">
        {head}
        <div className="rd-jbands">
          <div className="rd-jb-band">
            <div className="rd-jb-cell rd-jb-cell--l"><Phone i={0} /><Copy i={0} side="r" /></div>
            <JSketch className="rd-jb-arrow rd-jb-arrow--seam" />
            <div className="rd-jb-cell rd-jb-cell--r"><Phone i={1} /><Copy i={1} side="r" /></div>
          </div>
          <JSketch className="rd-jb-arrow rd-jb-arrow--mid" />
          <div className="rd-jb-band rd-jb-band--2">
            <div className="rd-jb-cell rd-jb-cell--l"><Phone i={2} /><Copy i={2} side="r" /></div>
            <JSketch className="rd-jb-arrow rd-jb-arrow--seam" />
            <div className="rd-jb-cell rd-jb-cell--r"><Phone i={3} /><Copy i={3} side="r" /></div>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section id="journey" className="rd-journey">
      {head}
      <div className="rd-journey-grid">
        {steps.map((s, i) => (
          <div className="rd-j-step" key={s.img}>
            {i < 3 && (variant === "sharpie" ? (
              <JSketch className="rd-j-arrow rd-j-arrow--ink" />
            ) : (
              <svg className="rd-j-arrow" viewBox="0 0 200 112" fill="none" aria-hidden="true">
                <path d="M10 30 C 80 -4, 150 18, 184 86" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeDasharray="1.5 8" />
                <path d="M172 78 L 185 88 L 188 72" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
              </svg>
            ))}
            <div className="rd-j-phone"><img src={"assets/" + s.img} alt={s.h} /></div>
            <span className="rd-j-num">{i + 1}</span>
            <h3 className="rd-j-h">{s.h}</h3>
            <p className="rd-j-p">{s.p}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
window.RJourney = RJourney;