// funnel-stub.jsx — generic six-stage funnel architecture
// (entry · framing · exercise · results · insight · cta). Stubbed but
// interactive: a real multi-step flow that computes a teaser "snapshot".
// Exports window.L180Funnel.

function L180Funnel({ tier, stream, mode, onExit }) {
  const hue = window.l180TierHue(tier.n);
  const stages = ["entry", "framing", "exercise", "results", "insight", "cta"];
  const stageLabels = ["Welcome", "Why this matters", "The exercise", "Your snapshot", "The insight", "Next step"];
  const [stage, setStage] = React.useState(0);

  // a small generic exercise: 3 sliders the user sets
  const exQuestions = [
    { q: `How clear are you on ${stream.name.toLowerCase()} today?`, lo: "Foggy", hi: "Crystal clear" },
    { q: "How confident are you in your current plan here?", lo: "Not at all", hi: "Very" },
    { q: "How urgent does this feel right now?", lo: "Someday", hi: "This quarter" },
  ];
  const [ex, setEx] = React.useState([40, 30, 60]);

  const score = Math.round((ex[0] + ex[1] + (100 - ex[2])) / 3);
  const archetype = score < 40 ? "Wide Open" : score < 70 ? "Forming" : "Dialed In";
  const archeBlurb = {
    "Wide Open": "Lots of upside here — this is exactly where the biggest clarity gains come from.",
    "Forming": "You've got a partial picture. The funnel sharpens the edges and closes the gaps.",
    "Dialed In": "Strong starting point. We'll optimize at the margins and pressure-test it.",
  }[archetype];

  const next = () => setStage((s) => Math.min(stages.length - 1, s + 1));
  const back = () => setStage((s) => Math.max(0, s - 1));

  function Body() {
    switch (stages[stage]) {
      case "entry":
        return (
          <div className="l180-fstep">
            <div className="l180-eyebrow" style={{ color: hue }}>Tier 0{tier.n} · {tier.name}</div>
            <h2 className="l180-fbig">{stream.name}</h2>
            <p className="l180-flead">{stream.one}</p>
            <p className="l180-fnote">A short, guided exercise. ~3 minutes. You'll leave with a snapshot you can act on.</p>
          </div>
        );
      case "framing":
        return (
          <div className="l180-fstep">
            <div className="l180-eyebrow" style={{ color: hue }}>Why this matters</div>
            <p className="l180-flead">{mode === "agent" ? stream.agent : stream.website}</p>
            {mode === "agent" && <div className="l180-agentchip">Agent layer · deeper framing shown</div>}
          </div>
        );
      case "exercise":
        return (
          <div className="l180-fstep">
            <div className="l180-eyebrow" style={{ color: hue }}>The exercise</div>
            <h2 className="l180-fbig" style={{ fontSize: 26 }}>A quick self-read</h2>
            <div className="l180-sliders">
              {exQuestions.map((q, i) => (
                <div key={i} className="l180-sliderrow">
                  <label>{q.q}</label>
                  <input type="range" min="0" max="100" value={ex[i]}
                         style={{ accentColor: hue }}
                         onChange={(e) => setEx((a) => a.map((v, j) => j === i ? +e.target.value : v))} />
                  <div className="l180-sliderends"><span>{q.lo}</span><span>{q.hi}</span></div>
                </div>
              ))}
            </div>
          </div>
        );
      case "results":
        return (
          <div className="l180-fstep">
            <div className="l180-eyebrow" style={{ color: hue }}>Your snapshot</div>
            <div className="l180-resultcard" style={{ borderColor: `color-mix(in oklch, ${hue} 40%, transparent)` }}>
              <div className="l180-resultscore" style={{ color: hue }}>{score}<span>/100</span></div>
              <div className="l180-resultarch">You're <strong>{archetype}</strong></div>
              <p>{archeBlurb}</p>
            </div>
            <p className="l180-fnote">This is the teaser snapshot. The full funnel goes far deeper — and your agent gets the complete report.</p>
          </div>
        );
      case "insight":
        return (
          <div className="l180-fstep">
            <div className="l180-eyebrow" style={{ color: hue }}>The insight</div>
            <p className="l180-flead">{mode === "agent" ? stream.agent : stream.funnel}</p>
            <div className="l180-pdfteaser" style={{ "--hue": hue }}>
              <div className="l180-pdficon">PDF</div>
              <div>
                <strong>{stream.name} Snapshot</strong>
                <span>Your personalized teaser document — yours to keep.</span>
              </div>
            </div>
          </div>
        );
      case "cta":
        return (
          <div className="l180-fstep" style={{ textAlign: "center" }}>
            <div className="l180-eyebrow" style={{ color: hue }}>Next step</div>
            <h2 className="l180-fbig">Turn this into a plan.</h2>
            <p className="l180-flead" style={{ margin: "0 auto 22px", maxWidth: 460 }}>
              Book a Clarity Call and we'll run your full {stream.name} workup as part of your Financial X-Ray.
            </p>
            <button className="l180-bigcta" style={{ "--hue": hue }}>Book a Clarity Call →</button>
          </div>
        );
      default: return null;
    }
  }

  return (
    <div className="l180-funnel" style={{ background: `radial-gradient(120% 80% at 50% -5%, #1c1c1e, ${L180_BRAND.navy} 60%, ${L180_BRAND.ink})` }}>
      {/* top bar */}
      <div className="l180-funnel-top">
        <button className="l180-back" onClick={onExit}>← Back to pyramid</button>
        <div className="l180-progress">
          {stages.map((_, i) => (
            <span key={i} className="l180-progdot" style={{ background: i <= stage ? hue : "rgba(255,255,255,.26)", width: i === stage ? 26 : 8 }} />
          ))}
        </div>
        <div className="l180-stagelabel">{stageLabels[stage]}</div>
      </div>

      <div className="l180-funnel-body">
        <Body />
      </div>

      <div className="l180-funnel-nav">
        {stage > 0 ? <button className="l180-ghostbtn" onClick={back}>Back</button> : <span />}
        {stage < stages.length - 1
          ? <button className="l180-solidbtn" style={{ "--hue": hue }} onClick={next}>
              {stages[stage] === "exercise" ? "See my snapshot" : "Continue"} →
            </button>
          : <button className="l180-ghostbtn" onClick={onExit}>Done · return to pyramid</button>}
      </div>
    </div>
  );
}

window.L180Funnel = L180Funnel;