/* sections-story.jsx — pinned 5-step vortex scroll story */

const STORY_STEPS = [
  { n: "01", t: "Enter the pool." },
  { n: "02", t: "Shielded." },
  { n: "03", t: "Send privately." },
  { n: "04", t: "DeFi, privately." },
];

function activeStep(p) {
  if (p < 0.28) return 0;
  if (p < 0.52) return 1;
  if (p < 0.76) return 2;
  return 3;
}

function ScrollStory() {
  const sectionRef = useRef(null);
  const { canvasRef, instRef } = usePoolCanvas("story");
  const p = useScrollProgress(sectionRef);
  const step = activeStep(p);
  useEffect(() => { if (instRef.current) instRef.current.setProgress(p); }, [p]);

  return (
    <section id="story" ref={sectionRef} style={{ height: "440vh", position: "relative" }}>
      <div style={{ position: "sticky", top: 0, height: "100vh", overflow: "hidden" }}>
        <canvas ref={canvasRef} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} />

        {/* strk20 logo at the throat of the wormhole */}
        <img src={LOGO_URL} alt="strk20" style={{ position: "absolute", top: "52%", left: "50%",
          transform: "translate(-50%,-50%)", width: "clamp(86px,10vw,132px)", height: "auto", zIndex: 2,
          filter: "drop-shadow(0 0 22px rgba(255,67,0,0.85)) drop-shadow(0 0 6px rgba(255,255,255,0.5))",
          pointerEvents: "none" }} />

        {/* progress rail */}
        <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: 2,
          background: "var(--line)", zIndex: 3 }}>
          <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: `${p * 100}%`,
            background: "linear-gradient(var(--green),var(--orange))", boxShadow: "0 0 12px var(--green-glow)" }} />
        </div>

        {/* top: step title block (centered, above the funnel) */}
        <div style={{ position: "absolute", top: "6.5vh", left: 0, right: 0, zIndex: 4,
          display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
          pointerEvents: "none", padding: "0 var(--gut)" }}>
          {/* legibility scrim */}
          <div aria-hidden="true" style={{ position: "absolute", top: "-4vh", left: "50%",
            transform: "translateX(-50%)", width: "min(760px,92vw)", height: 280,
            background: "radial-gradient(ellipse at 50% 40%, var(--bg) 12%, rgba(6,10,20,0.72) 42%, transparent 72%)",
            zIndex: -1 }} />
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            <span className="tick">◢</span>&nbsp; HOW THE POOL WORKS
          </div>
          <div style={{ position: "relative", width: "100%", height: 110 }}>
            {STORY_STEPS.map((s, i) => {
              const on = i === step;
              return (
                <div key={s.n} style={{ position: "absolute", inset: 0,
                  display: "flex", flexDirection: "column", alignItems: "center",
                  opacity: on ? 1 : 0, transform: on ? "translateY(0)" : "translateY(14px)",
                  transition: "opacity .5s, transform .5s" }}>
                  <h2 style={{ fontSize: "clamp(26px,3.4vw,48px)", letterSpacing: "-0.025em",
                    textTransform: "uppercase", fontWeight: 800 }}>
                    <span style={{ color: "var(--green)" }}>{s.n}</span>&nbsp;&nbsp;{s.t}
                  </h2>
                </div>
              );
            })}
          </div>
        </div>

        {/* step dots */}
        <div style={{ position: "absolute", bottom: 40, left: "50%", transform: "translateX(-50%)",
          display: "flex", gap: 10, zIndex: 4 }}>
          {STORY_STEPS.map((s, i) => (
            <div key={i} style={{ width: i === step ? 26 : 8, height: 4, borderRadius: 2,
              background: i === step ? "var(--green)" : "var(--ghost)", transition: "all .4s" }} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ScrollStory });