/* =====================================================================
   results.jsx — Results page with three switchable treatments
   ===================================================================== */

function useResultData() {
  return useMemo(() => {
    const F = window.FFP;
    const R = F.SAMPLE_RESULT;
    const band = F.BANDS.find(b => b.key === R.bandKey);
    const arch = F.ARCHETYPES[R.archetypeKey];
    const primary = F.DIM[R.primaryLeakKey];
    const secondary = F.DIM[R.secondaryLeakKey];
    const ranked = F.rankedDims(R.dimensionScores);
    const strengths = [...ranked].reverse().slice(0, 3);
    const leaks = ranked.slice(0, 3);
    return { R, band, arch, primary, secondary, ranked, strengths, leaks };
  }, []);
}

/* ---------- export actions ---------- */
function downloadJSON(name, obj) {
  const blob = new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a"); a.href = url; a.download = name; a.click();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}
function resultObject() {
  const F = window.FFP, R = F.SAMPLE_RESULT;
  return {
    auditName: F.AUDIT.name, auditVersion: F.AUDIT.auditVersion, scoringVersion: F.AUDIT.scoringVersion,
    completedAt: R.completedAt, overallScore: R.overallScore,
    band: F.BANDS.find(b => b.key === R.bandKey).name, archetype: F.ARCHETYPES[R.archetypeKey].name,
    primaryLeak: F.DIM[R.primaryLeakKey].leak, secondaryLeak: F.DIM[R.secondaryLeakKey].leak,
    dimensionScores: R.dimensionScores, headline: R.headline,
    sevenDayAction: R.sevenDay.action, thirtyDayPlan: R.thirtyDay.map(s => s.t + ": " + s.d),
    recommendedPathway: R.recommendedPathway.label, signals: R.signals, tags: R.tags,
  };
}
function acPayload() {
  const F = window.FFP, R = F.SAMPLE_RESULT;
  return {
    contact: { email: "leah@thequietbrand.com.au", firstName: "Leah", lastName: "Marsh", phone: "" },
    customFields: {
      "FFP Audit - Version": F.AUDIT.auditVersion, "FFP Audit - Completed Date": "2026-06-08",
      "FFP Audit - Overall Score": String(R.overallScore), "FFP Audit - Band": F.BANDS.find(b => b.key === R.bandKey).name,
      "FFP Audit - Archetype": F.ARCHETYPES[R.archetypeKey].name, "FFP Audit - Primary Leak": F.DIM[R.primaryLeakKey].leak,
      "FFP Audit - Secondary Leak": F.DIM[R.secondaryLeakKey].leak, "FFP Audit - Top Strength": "Trust Production",
      "FFP Audit - Recommended Pathway": R.recommendedPathway.label, "FFP Audit - PDF Report URL": "secure-report-url",
      "FFP Audit - Country": "Australia", "FFP Audit - Business Stage": "established",
      "FFP Audit - Offer Type": "group_program", "FFP Audit - Source": "workshop",
    },
    tags: R.tags,
  };
}

/* ============ shared content blocks ============ */
function LeakDeepDive({ primary, leakData }) {
  return (
    <div className="leak-dive">
      <div className="leak-dive__grid">
        <div className="leak-dive__main">
          <p className="leak-dive__eyebrow">Your primary leak</p>
          <h3 className="leak-dive__title">{primary.leak}<span style={{ fontStyle: "normal", fontFamily: "var(--f-serif-display)" }}>.</span></h3>
          <p className="leak-dive__lead">{leakData.meaning}</p>
          <p className="leak-dive__lead" style={{ marginBottom: 0 }}>{leakData.why}</p>
        </div>
        <div className="leak-dive__aside">
          <div>
            <p className="leak-dive__cost-label">What it's likely costing</p>
            <p className="leak-dive__cost">{leakData.cost}</p>
          </div>
          <div style={{ display: "flex", gap: 18, paddingTop: 18, borderTop: "1px solid rgba(246,244,241,0.16)" }}>
            <div><div className="leak-dive__cost-label" style={{ marginBottom: 4 }}>Severity</div><span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "#e7b3aa", fontSize: 14 }}><span className="severity-dot sev-active"></span>Active leak</span></div>
            <div><div className="leak-dive__cost-label" style={{ marginBottom: 4 }}>Score</div><span style={{ fontFamily: "var(--f-serif-display)", fontSize: 18, color: "#fff" }}>{window.FFP.SAMPLE_RESULT.dimensionScores[primary.key]}/100</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StrengthsLeaks({ strengths, leaks }) {
  return (
    <div className="sl-grid">
      <div>
        <div className="sl-col__head"><span style={{ color: "var(--p-sage)" }}><Icon name="star" size={18} /></span><h4>Your top strengths</h4></div>
        {strengths.map((d, i) => (
          <div className="sl-item" key={d.key}>
            <span className="sl-item__rank">{i + 1}</span>
            <div><div className="sl-item__name">{d.internal}</div><div className="sl-item__sub">Keep leaning on this</div></div>
            <span className="sl-item__score">{d.score}</span>
          </div>
        ))}
      </div>
      <div>
        <div className="sl-col__head"><span style={{ color: "#b4493b" }}><Icon name="droplet" size={18} /></span><h4>Your top leaks</h4></div>
        {leaks.map((d, i) => (
          <div className="sl-item" key={d.key}>
            <span className="sl-item__rank">{i + 1}</span>
            <div><div className="sl-item__name">{d.leak}</div><div className="sl-item__sub">{d.internal}</div></div>
            <span className="sl-item__score">{d.score}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ActionPlan({ R }) {
  return (
    <div className="r-2col r-2col--top">
      <div className="action-card">
        <p className="action-card__tag"><Icon name="spark" size={14} />7-day stabiliser</p>
        <h4 className="action-card__h">{R.sevenDay.action}</h4>
        <p className="action-card__why">{R.sevenDay.why}</p>
      </div>
      <div>
        <p className="action-card__tag" style={{ color: "var(--p-sage)" }}><Icon name="layers" size={14} />30-day repair plan</p>
        <div className="plan-list">
          {R.thirtyDay.map((s, i) => (
            <div className="plan-item" key={i}>
              <span className="plan-item__n">{i + 1}</span>
              <div><h5 className="plan-item__t">{s.t}</h5><p className="plan-item__d">{s.d}</p></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function PathwayCTA({ R, tone = "ffb" }) {
  const p = R.recommendedPathway;
  return (
    <div className={"pathway pathway--" + tone} data-brand={tone}>
      <div className="pathway__inner">
        <div>
          <p className="pathway__eyebrow">Your recommended pathway</p>
          <h3 className="pathway__title">{tone === "ffm" ? <>The next room is <em>by application</em>.</> : <>Let's close the <em>freedom leak</em>, together.</>}</h3>
          <p className="pathway__blurb">{tone === "ffm" ? p.premiumBlurb : p.blurb}</p>
        </div>
        <div className="pathway__side">
          {tone === "ffm"
            ? <Btn variant="gold" icon="arrow" as="a" href="#" onClick={e => e.preventDefault()}>{p.premiumLabel}</Btn>
            : <Btn variant="light" icon="arrow" as="a" href="#" onClick={e => e.preventDefault()}>Get your {p.label}</Btn>}
          <Btn variant="ghost" as="a" href="#" onClick={e => e.preventDefault()} style={tone === "ffm" ? { color: "var(--p-oatmeal)", borderColor: "var(--p-oatmeal)" } : { color: "var(--p-oatmeal)", borderColor: "var(--p-oatmeal)" }}>Download your report</Btn>
          {tone !== "ffm" && (
            <div className="pathway__alt">
              <span className="pathway__alt-label">Ready for more leverage?</span>
              <a href="#" onClick={e => e.preventDefault()}>{p.premiumLabel}<Icon name="arrow" size={14} /></a>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ============ VARIATION 1 — Editorial Report ============ */
function ResultsEditorial({ data }) {
  const { R, band, arch, primary, strengths, leaks } = data;
  return (
    <div>
      <section className="r-hero">
        <div className="wrap wrap--mid center">
          <div className="r-eyebrow-row">
            <span className="r-name-tag">For {R.firstName}</span><span className="rule" style={{ width: 28 }}></span>
            <span className="r-name-tag">Completed {R.completedAt}</span>
          </div>
          <h1 className="r-headline">{R.firstName}, your business is not broken. It is leaking freedom through <em>life integration</em>.</h1>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 26, flexWrap: "wrap" }}>
            <span className="tag tag--band">{band.name}</span>
            <span className="tag" style={{ background: "var(--surface-elevated)", color: "var(--ink-heading)" }}>{arch.name}</span>
            <span className="tag tag--leak">Primary leak &middot; {primary.leak}</span>
          </div>
        </div>
      </section>

      <section className="r-section"><div className="wrap wrap--mid">
        <div className="r-2col">
          <div className="center" style={{ display: "grid", placeItems: "center", gap: 18 }}>
            <ScoreDial score={R.overallScore} size={210} />
            <div style={{ width: "100%", maxWidth: 320 }}><BandScale score={R.overallScore} /></div>
          </div>
          <div>
            <h2 className="r-block-title">A <em>Freedom-Ready Build</em>, with one clear leak.</h2>
            <div className="r-prose"><p>{R.executiveSummary}</p><p style={{ marginBottom: 0, color: "var(--ink-mute)" }}>{band.note}</p></div>
          </div>
        </div>
      </div></section>

      <section className="r-section"><div className="wrap wrap--mid">
        <div className="r-2col">
          <div><RadarChart scores={R.dimensionScores} size={400} /></div>
          <div>
            <p className="eyebrow" style={{ marginBottom: 12 }}>Your dimension map</p>
            <h2 className="r-block-title" style={{ marginBottom: 18 }}>Eight dimensions of a freedom-filled business.</h2>
            <DimensionBars scores={R.dimensionScores} />
          </div>
        </div>
      </div></section>

      <section className="r-section"><div className="wrap wrap--mid"><LeakDeepDive primary={primary} leakData={R.primaryLeak} /></div></section>
      <section className="r-section"><div className="wrap wrap--mid"><StrengthsLeaks strengths={strengths} leaks={leaks} /></div></section>
      <section className="r-section"><div className="wrap wrap--mid"><ActionPlan R={R} /></div></section>
      <section className="r-section"><div className="wrap wrap--mid"><PathwayCTA R={R} tone="ffb" /></div></section>
    </div>
  );
}

/* ============ VARIATION 2 — Diagnostic Dashboard ============ */
function ResultsDashboard({ data }) {
  const { R, band, arch, primary, secondary, strengths, leaks } = data;
  return (
    <div className="wrap" style={{ paddingTop: 40, paddingBottom: 64 }}>
      <div className="dash">
        <aside className="dash__rail">
          <div>
            <p className="eyebrow" style={{ marginBottom: 10 }}>Pathway result &middot; {R.firstName}</p>
            <div style={{ display: "grid", placeItems: "center", padding: "8px 0 4px" }}>
              <ScoreDial score={R.overallScore} size={170} track="rgba(246,244,241,0.14)" ink="#f6f4f1" />
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--f-serif-display)", fontSize: 24, color: "#f6f4f1" }}>{band.name}</div>
              <p style={{ fontSize: 12.5, color: "rgba(246,244,241,0.7)", lineHeight: 1.5, margin: "6px 0 0" }}>{band.note}</p>
            </div>
          </div>
          <div className="dash__rail-divide"></div>
          <div>
            <p className="dash__metric-label">Your archetype</p>
            <div className="dash__metric-val"><em>{arch.name}</em></div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div><p className="dash__metric-label">Primary leak</p><div className="dash__metric-val" style={{ fontSize: 18, color: "#e7b3aa" }}>{primary.leak}</div></div>
            <div><p className="dash__metric-label">Secondary</p><div className="dash__metric-val" style={{ fontSize: 18 }}>{secondary.leak}</div></div>
          </div>
          <div className="dash__rail-divide"></div>
          <Btn variant="light" icon="arrow" as="a" href="#" onClick={e => e.preventDefault()} className="btn--block">Get your pathway call</Btn>
          <Btn variant="ghost" as="a" href="#" onClick={e => e.preventDefault()} style={{ color: "var(--p-oatmeal)", borderColor: "rgba(246,244,241,0.4)", justifyContent: "center" }}>Download report</Btn>
        </aside>

        <div className="dash__body">
          <div>
            <h2 className="dash__panel-title">{R.headline}</h2>
            <p className="dash__panel-sub" style={{ fontSize: 14.5, color: "var(--ink-body)", lineHeight: 1.6, marginTop: 8 }}>{R.executiveSummary}</p>
          </div>
          <div className="premium-card" style={{ background: "var(--surface-elevated)" }}>
            <div className="r-2col">
              <div style={{ display: "grid", placeItems: "center" }}><RadarChart scores={R.dimensionScores} size={340} /></div>
              <div><p className="dash__panel-title" style={{ fontSize: 20, marginBottom: 16 }}>Dimension scores</p><DimensionBars scores={R.dimensionScores} /></div>
            </div>
          </div>
          <div>
            <h3 className="dash__panel-title">Strengths &amp; leaks</h3>
            <p className="dash__panel-sub">What to keep, and what to repair first.</p>
            <StrengthsLeaks strengths={strengths} leaks={leaks} />
          </div>
          <div>
            <h3 className="dash__panel-title">Your repair plan</h3>
            <p className="dash__panel-sub">One stabiliser this week, three moves this month.</p>
            <ActionPlan R={R} />
          </div>
          <PathwayCTA R={R} tone="ffb" />
        </div>
      </div>
    </div>
  );
}

/* ============ VARIATION 3 — Premium (FFM-routed) ============ */
function ResultsPremium({ data }) {
  const { R, band, arch, primary, strengths, leaks } = data;
  return (
    <div className="wrap" style={{ paddingTop: 40, paddingBottom: 64, display: "flex", flexDirection: "column", gap: 40 }}>
      <section className="premium-hero">
        <div className="premium-hero__grid">
          <div className="premium-hero__copy">
            <p className="eyebrow">Your Freedom Filled<span className="reg" style={{ color: "var(--p-gold-mid)" }}>&reg;</span> pathway &middot; {R.firstName}</p>
            <hr className="gold-divider" style={{ margin: "18px 0" }} />
            <h1 className="premium-hl">{R.firstName}, your business is not broken. It is leaking freedom through <em>life integration</em>.</h1>
            <p style={{ fontSize: 15.5, lineHeight: 1.7, color: "rgba(246,244,241,0.82)", margin: 0 }}>{R.archetypeLine}</p>
            <div className="premium-arch" style={{ marginTop: 24 }}>
              <span className="tag tag--gold">{arch.name}</span>
              <span className="tag" style={{ background: "rgba(246,244,241,0.1)", color: "rgba(246,244,241,0.85)" }}>{band.name}</span>
            </div>
          </div>
          <div className="premium-hero__score">
            <ScoreDial score={R.overallScore} size={190} track="rgba(246,244,241,0.12)" ink="#f6f4f1" />
            <div style={{ width: "100%", maxWidth: 220 }}><BandScale score={R.overallScore} compact /></div>
            <p style={{ fontSize: 12.5, color: "rgba(246,244,241,0.6)", margin: 0, lineHeight: 1.5 }}>{band.name} &middot; top 30% of audits</p>
          </div>
        </div>
      </section>

      <section className="premium-card">
        <div className="r-2col">
          <div style={{ display: "grid", placeItems: "center" }}><RadarChart scores={R.dimensionScores} size={380} /></div>
          <div>
            <p className="eyebrow" style={{ marginBottom: 12 }}>The dimension map</p>
            <h2 className="r-block-title" style={{ marginBottom: 18 }}>Where you're strong, where you <em>leak</em>.</h2>
            <DimensionBars scores={R.dimensionScores} />
          </div>
        </div>
      </section>

      <LeakDeepDive primary={primary} leakData={R.primaryLeak} />
      <section className="premium-card"><StrengthsLeaks strengths={strengths} leaks={leaks} /></section>
      <section className="premium-card"><ActionPlan R={R} /></section>
      <PathwayCTA R={R} tone="ffm" />
    </div>
  );
}

/* ============ Results shell + switcher ============ */
const RESULT_VARIANTS = [
  { key: "editorial", label: "Editorial", brand: "ffb", render: (d) => <ResultsEditorial data={d} /> },
  { key: "dashboard", label: "Diagnostic", brand: "ffb", render: (d) => <ResultsDashboard data={d} /> },
  { key: "premium", label: "Premium", brand: "ffm", render: (d) => <ResultsPremium data={d} /> },
];

function Results({ go, variant, setVariant }) {
  const data = useResultData();
  const active = RESULT_VARIANTS.find(v => v.key === variant) || RESULT_VARIANTS[0];
  return (
    <div className="results" data-brand={active.brand}>
      <TopBar onHome={() => go("landing")} right={<Btn variant="ghost" onClick={() => go("thankyou")}>Email &amp; finish</Btn>} />

      <div className="var-switch">
        <div className="var-switch__inner">
          <span className="var-switch__label"><Icon name="layers" size={14} />Results treatment</span>
          <div className="seg">
            {RESULT_VARIANTS.map(v => (
              <button key={v.key} aria-pressed={variant === v.key} onClick={() => { setVariant(v.key); window.scrollTo(0, 0); }}>{v.label}</button>
            ))}
          </div>
          <div className="var-switch__actions">
            <Btn variant="outline" iconLeft="print" onClick={() => window.print()} style={{ padding: "9px 16px", fontSize: 11 }}>Print / PDF</Btn>
            <Btn variant="outline" iconLeft="download" onClick={() => downloadJSON("ffp-result.json", resultObject())} style={{ padding: "9px 16px", fontSize: 11 }}>Result JSON</Btn>
            <Btn variant="outline" iconLeft="download" onClick={() => downloadJSON("ffp-activecampaign.json", acPayload())} style={{ padding: "9px 16px", fontSize: 11 }}>AC payload</Btn>
          </div>
        </div>
      </div>

      <div key={variant} className="fadein">{active.render(data)}</div>
      <Footer />
    </div>
  );
}

Object.assign(window, { Results, RESULT_VARIANTS });