/* global React */
const { useState, useEffect } = React;

// ============================================================
// HERO — Split Assembly. Headline is static; the app sim loops.
// ============================================================

function Hero({ onCTA }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero__grid">
          <div className="hero__copy">
            <div className="eyebrow">AI RESEARCH · EVIDENCE ENGINE</div>
            <h1 className="display display-xl" style={{ marginTop: 24 }}>
              <div>From noise</div>
              <div>to <span style={{ color: "var(--accent)" }}>verdict.</span></div>
            </h1>
            <p className="hero__sub">
              We interview your customers and tell you exactly what to change —
              every call backed by a real quote, clip, and moment you can replay.
            </p>
            <div className="hero__ctas">
              <button className="btn btn--primary btn--lg" onClick={() => onCTA && onCTA("demo")}>
                Get a demo <span className="btn-arrow">→</span>
              </button>
              <button className="btn btn--ghost btn--lg" onClick={() => onCTA && onCTA("report")}>
                See a real report
              </button>
            </div>
            <div className="hero__trustline">
              <span className="hero__trustline-dot" />
              EVERY INSIGHT TRACEABLE TO QUOTES, CLIPS &amp; SOURCE EVIDENCE
            </div>
            <div className="hero__badges">
              <Tag dot>SOC 2 IN PROGRESS</Tag>
              <Tag>GDPR-AWARE</Tag>
            </div>
          </div>
          <div className="hero__visual">
            <HeroAppSim />
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// HERO APP SIM — step-sequencer state machine.
// Steps: 0 video plays · 1 transcript types · 2 timeline spikes ·
//        3 verdict stamps · 4 hold. Then participant swaps, loop.
// Swap path: each PANEL below is one sub-component; replace its
// internals with a real screenshot <img> without touching the
// sequencer or layout.
// ============================================================

const SIM_PARTICIPANTS = [
  {
    id: "P-042", time: "02:14", dur: "04:32",
    quoteLead: "“…I’d probably look around for a cheaper option — ",
    quoteHot: "the pricing page didn’t explain what’s included",
    quoteTail: " in the team plan.”",
    signal: "HESITATION · 02:14",
    verdict: "Pricing clarity blocks team-plan conversion",
    conf: 86, clips: 14, imageSrc: null,
  },
  {
    id: "P-017", time: "03:08", dur: "05:11",
    quoteLead: "“Honestly the export breaks ",
    quoteHot: "every single Friday",
    quoteTail: " and nobody believes me.”",
    signal: "FRUSTRATION · 03:08",
    verdict: "Friday export failures erode champion trust",
    conf: 91, clips: 9, imageSrc: null,
  },
];

const SIM_STEP_MS = [3000, 3200, 2600, 3400, 2800]; // per-step durations

function HeroAppSim() {
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [step, setStep] = useState(reduced ? 4 : 0);
  const [pi, setPi] = useState(0);
  const p = SIM_PARTICIPANTS[pi];

  useEffect(() => {
    if (reduced) return;
    const t = setTimeout(() => {
      if (step < 4) setStep(step + 1);
      else { setStep(0); setPi((pi + 1) % SIM_PARTICIPANTS.length); }
    }, SIM_STEP_MS[step]);
    return () => clearTimeout(t);
  }, [step, pi, reduced]);

  return (
    <div className="appsim" role="img" data-step={step} aria-label="NeroView platform, simulated">
      <div className="appsim__chrome">
        <i /><i /><i />
        <span className="appsim__url">platform.neroview.com/studies/NV-0612</span>
        <span className="appsim__live" aria-hidden="true">● LIVE</span>
      </div>
      <div className="appsim__body">
        <SimVideoPanel p={p} active={step >= 0} />
        <SimTranscriptPanel p={p} typed={step >= 1} />
        <SimTimelinePanel p={p} spiked={step >= 2} />
        <SimVerdictPanel p={p} stamped={step >= 3} reduced={reduced} />
      </div>
    </div>
  );
}

function SimVideoPanel({ p, active }) {
  return (
    <div className="appsim__panel appsim__video">
      <span className="appsim__rec">● REC {p.dur}</span>
      {p.imageSrc && (
        <>
          <img className="appsim__face" src={p.imageSrc} alt="" />
          <span className="appsim__sim-disclosure">SIMULATED PRODUCT DEMO · ILLUSTRATIVE PARTICIPANT FRAME</span>
        </>
      )}
      <div className={"appsim__wave" + (active ? " is-live" : "")}>
        {Array.from({ length: 24 }, (_, i) => <i key={i} style={{ animationDelay: `${i * 70}ms` }} />)}
      </div>
      <span className="appsim__pid">{p.id}</span>
    </div>
  );
}

function SimTranscriptPanel({ p, typed }) {
  return (
    <div className={"appsim__panel appsim__transcript" + (typed ? " is-typed" : "")}>
      <div className="appsim__panel-label">{p.id} · {p.time}</div>
      <p className="appsim__quote">
        {p.quoteLead}
        <mark className="appsim__hot">{p.quoteHot}</mark>
        {p.quoteTail}
      </p>
    </div>
  );
}

function SimTimelinePanel({ p, spiked }) {
  // 18 bars; index 11 is the spike moment
  const bars = [8, 12, 9, 14, 10, 7, 13, 9, 11, 8, 12, 26, 10, 9, 13, 8, 11, 9];
  return (
    <div className={"appsim__panel appsim__timeline" + (spiked ? " is-spiked" : "")}>
      <div className="appsim__bars">
        {bars.map((h, i) => (
          <i key={i} className={i === 11 ? "is-moment" : ""} style={{ height: h + "px" }} />
        ))}
      </div>
      <span className="appsim__signal">{p.signal}</span>
    </div>
  );
}

function SimVerdictPanel({ p, stamped, reduced }) {
  const [n, setN] = useState(reduced ? p.conf : 0);
  useEffect(() => {
    if (!stamped) { setN(0); return; }
    if (reduced) { setN(p.conf); return; }
    let v = 0;
    const iv = setInterval(() => {
      v += 3;
      if (v >= p.conf) { v = p.conf; clearInterval(iv); }
      setN(v);
    }, 28);
    return () => clearInterval(iv);
  }, [stamped, p, reduced]);
  return (
    <div className={"appsim__panel appsim__verdict" + (stamped ? " is-stamped" : "")}>
      <span className="appsim__verdict-t">VERDICT — {p.verdict}</span>
      <span className="appsim__verdict-n">{n}% CONF · {p.clips} CLIPS</span>
    </div>
  );
}

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