/* =====================================================================
   results2-guided.jsx — simplified, guided results page (v2)
   Clear, supportive, adult-to-adult. One focus, the score secondary,
   a visual snapshot across BUILD/SELL/LEAD with F.R.E.S.H underneath.
   Reuses ScoreSnapshot / WhyHere / SupportSignal / FirstFix / FFBBridge
   exported from results2.jsx.
   ===================================================================== */

const RG = () => window.FFP2.RESULT2;
const { ScoreSnapshot: GScore, WhyHere: GWhy, SupportSignal: GSupport, FirstFix: GFirstFix, FFBBridge: GBridge, FFBFloatingBar: GFloat } = window;

/* ---- 1. "Your results are in" intro ---- */
function ResultsIntro({ name }) {
  const r = RG();
  const who = name || r.firstName;
  return (
    <section className="g-intro"><div className="v2-wrap v2-wrap--narrow" style={{ textAlign: "center" }}>
      <p className="eyebrow eyebrow-accent" style={{ justifyContent: "center", display: "flex" }}>Your results are in</p>
      <h1 className="g-intro__title">{who ? "Take a breath, " + who + "." : "Take a breath."}</h1>
      <p className="g-intro__sub">This is a starting point, not a scorecard. We have looked at your whole business and found the one place worth your focus next, and the rhythm to help you do it.</p>
      <p className="g-intro__meta">Prepared for {who} &middot; {r.completedAt}</p>
    </div></section>
  );
}

/* ---- 2. Tracy video / explanation block ---- */
function TracyVideo() {
  const [playing, setPlaying] = useState(false);
  return (
    <section className="g-video"><div className="v2-wrap v2-wrap--mid">
      <div className="g-video__card">
        <div className="g-video__media">
          <img src="assets/images/tracy-lifestyle-podcast.jpg" alt="Tracy Harris" />
          {!playing && (
            <button className="g-video__play" onClick={() => setPlaying(true)} aria-label="Play video">
              <span className="g-video__play-btn"><Icon name="arrow" size={22} /></span>
            </button>
          )}
          {playing && <div className="g-video__playing">Universal intro video would play here</div>}
          <span className="g-video__dur">2 min</span>
        </div>
        <div className="g-video__copy">
          <p className="eyebrow eyebrow-accent">A note from Tracy</p>
          <h2 className="g-video__title">Watch Tracy explain how to read your result.</h2>
          <p className="g-video__sub">Two minutes on what your focus means, why we start here, and how to use the rest of this page. No pressure, just clarity.</p>
        </div>
      </div>
    </div></section>
  );
}

/* ---- 3. Main result hero (extremely clear) ---- */
function GuidedHero({ name }) {
  const r = RG(), p = r.primaryBusinessFocus;
  const who = name || r.firstName;
  return (
    <section className="g-hero"><div className="v2-wrap v2-wrap--mid" style={{ textAlign: "center" }}>
      <p className="eyebrow" style={{ justifyContent: "center", display: "flex", marginBottom: 18 }}>Your next business focus</p>
      <h2 className="g-hero__title">{who ? who + ", your" : "Your"} next business focus is <em>tightening your message</em>.</h2>
      <p className="g-hero__reassure">{p.reassurance}</p>
    </div></section>
  );
}

/* ---- 4. Pathway Readiness Score (secondary benchmark) ---- */
function GuidedScore() {
  return (
    <section className="rs"><div className="v2-wrap v2-wrap--mid">
      <div className="g-score">
        <div className="g-score__card"><GScore layout="card" /></div>
        <div className="g-score__aside">
          <p className="eyebrow eyebrow-accent">A supporting snapshot</p>
          <h3 className="g-score__h">Your score supports the result, it is not the result.</h3>
          <p className="g-score__p">A 68 is a healthy, capable business with one clear place to tighten. It tells you how supported you are for this next season, across your business pathway and the human rhythm needed to implement it.</p>
        </div>
      </div>
    </div></section>
  );
}

/* ---- 5. Business Focus Snapshot (BUILD/SELL/LEAD + FRESH) ---- */
function BusinessFocusSnapshot() {
  const r = RG();
  const stages = window.FFP2.STAGES;
  const pins = window.pinMap(r);
  const signal = r.implementationSupportSignal;
  return (
    <section className="rs"><div className="v2-wrap">
      <div className="rs__label"><span className="t">Your business focus snapshot</span></div>
      <p className="g-snap-intro">Here is where your focus sits across the three stages of a Freedom Filled<span className="reg">&reg;</span> business. F.R.E.S.H runs underneath as the human layer that makes the work sustainable.</p>
      <div className="snap">
        <div className="snap__stages">
          {stages.map((st, si) => {
            const hasPrimary = st.areas.some(a => pins[a.area] === "primary");
            const pinned = st.areas.filter(a => pins[a.area]);
            return (
              <React.Fragment key={st.key}>
                <div className={"snap__stage" + (hasPrimary ? " is-primary" : "")}>
                  <span className="snap__stage-name">{st.name}</span>
                  <div className="snap__stage-pins">
                    {pinned.length === 0 && <span className="snap__pin snap__pin--none"><span className="dot"></span>On track</span>}
                    {pinned.map(a => {
                      const pin = pins[a.area];
                      return (
                        <span key={a.key} className={"snap__pin snap__pin--" + pin}>
                          <span className="dot"></span>{a.area}
                          {pin === "primary" && <span className="snap__pin-tag">Your focus</span>}
                        </span>
                      );
                    })}
                  </div>
                </div>
                {si < stages.length - 1 && <div className="snap__arrow"><Icon name="arrow" size={16} /></div>}
              </React.Fragment>
            );
          })}
        </div>
        <div className="snap__fresh">
          <span className="snap__fresh-label">Human operating layer</span>
          <div className="snap__fresh-cells">
            {window.FFP2.FRESH.map(f => {
              const on = signal.freshAreas.includes(f.name);
              return <span key={f.key} className={"snap__fresh-cell" + (on ? " on" : "")}><span className="d" style={{ background: f.color, opacity: on ? 1 : 0.35 }}></span>{f.letter}</span>;
            })}
          </div>
          <span className="snap__fresh-cap">F.R.E.S.H &middot; {signal.publicTitle}</span>
        </div>
      </div>
    </div></section>
  );
}

/* ---- 6. Top three focus areas (primary expanded, two compact) ---- */
function GuidedTopThree() {
  const r = RG(), p = r.primaryBusinessFocus, secs = r.secondaryBusinessFocusAreas;
  const [open, setOpen] = useState(null);
  return (
    <section className="rs"><div className="v2-wrap">
      <div className="rs__label"><span className="t">Your top three focus areas</span></div>
      <p className="g-snap-intro">We start with one. The other two are next in the sequence, not three things to fix at once.</p>

      <div className="g-primary">
        <div className="g-primary__head">
          <span className="g-primary__badge">Start here</span>
          <span className="g-primary__stage">{p.stage} &middot; {p.area}</span>
        </div>
        <h3 className="g-primary__title">{p.title}</h3>
        <p className="g-primary__sum">{p.summary} {p.whyThisMatters}</p>
      </div>

      <div className="g-second-list">
        <p className="g-second-list__label">Then, in order</p>
        {secs.map((s, i) => {
          const isOpen = open === i;
          return (
            <div className={"g-second" + (isOpen ? " is-open" : "")} key={s.key}>
              <button className="g-second__btn" onClick={() => setOpen(isOpen ? null : i)}>
                <span className="g-second__n">{i + 2}</span>
                <span className="g-second__title">{s.title}</span>
                <span className="g-second__stage">{s.stage} &middot; {s.area}</span>
                <span className="g-second__chev"><Icon name="chevDown" size={16} /></span>
              </button>
              {isOpen && <div className="g-second__panel"><p>{s.summary} For now, simply keep it in view. We will get here once your message is doing more of the work.</p></div>}
            </div>
          );
        })}
      </div>
    </div></section>
  );
}

/* ============ Guided shell ============ */
function Results2Guided({ go, tweaks, name }) {
  return (
    <div className="v2 g-results">
      <TopBar onHome={() => go("landing")} right={<Btn variant="ghost" onClick={() => go("bridge")}>Next step</Btn>} />
      <ResultsIntro name={name} />
      <TracyVideo />
      <GuidedHero name={name} />
      <GuidedScore />
      <BusinessFocusSnapshot />
      <GuidedTopThree />
      <GWhy />
      <GSupport variant={tweaks.freshStyle} />
      <GFirstFix />
      <GBridge variant={tweaks.bridgeStyle} />
      <Footer2 />
      <GFloat />
    </div>
  );
}

Object.assign(window, { Results2Guided });