/* ===================== JOURNEY (scroll-driven tiers) ===================== */
function Journey() {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = rect.height - vh;
      const p = Math.max(0, Math.min(1, -rect.top / total));
      setProgress(p);
      const idx = Math.min(TIERS.length - 1, Math.floor(p * TIERS.length * 0.999));
      setActive(idx);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section id="journey" className="journey" ref={ref} data-screen-label="02 Journey">
      <div className="container journey-head">
        <span className="eyebrow">The journey</span>
        <h2 className="h-1">Four tiers, one direction: <span style={{color: "var(--green-deep)"}}>up</span>.</h2>
        <p className="lede">Wherever you are, there's a clear next step. We help businesses move through these four tiers — starting wherever makes sense for you.</p>
      </div>

      <div className="journey-inner container-wide">
        <div className="journey-sticky">
          <JourneyDiagram active={active} progress={progress} />
        </div>
        <div className="journey-steps">
          {TIERS.map((t, i) => (
            <div key={t.id} className={"j-step" + (i === active ? " active" : "") + (i < active ? " done" : "")}>
              <div className="j-step-num">{t.num}</div>
              <div className="j-step-body">
                <div className="j-step-icon" style={{ background: t.bg, color: t.color }}>
                  {t.img
                    ? <img src={t.img} alt={t.label} style={{ width: "40px", height: "40px", objectFit: "contain" }} />
                    : React.createElement(Icon[t.icon])}
                </div>
                <div className="chip chip-green" style={{marginBottom: "10px"}}>
                  <span className="dot" /> Tier {t.num} · {t.label}
                </div>
                <h3 className="h-2 j-step-h">{t.headline}</h3>
                <p className="lede" style={{fontSize: "17px"}}>{t.blurb}</p>
                <ul className="j-step-list">
                  {t.bullets.map((b, j) => (
                    <li key={j}><Icon.check /> {b}</li>
                  ))}
                </ul>
                <div className="j-step-foot">
                  <span className="j-step-price">{t.price}</span>
                  <a className="btn btn-ghost" href={`tiers/${t.id}.html`}>
                    Explore {t.label} <Icon.arrowUpRight />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function JourneyDiagram({ active, progress }) {
  // A curve that grows as we scroll. 4 stops along it.
  const w = 540, h = 540;
  const path = "M 60 480 Q 140 460 200 380 T 320 220 T 480 60";
  // approximate length
  const totalLen = 700;
  const drawn = totalLen * Math.min(1, progress * 1.15);

  // node positions (manual approx along curve)
  const nodes = [
    { x: 100, y: 470, label: "01" },
    { x: 220, y: 360, label: "02" },
    { x: 340, y: 220, label: "03" },
    { x: 470, y: 80, label: "04" },
  ];

  return (
    <div className="jd-card">
      <div className="jd-card-head">
        <span className="eyebrow" style={{color: "var(--ink-3)"}}>Your trajectory</span>
        <span className="chip chip-green"><span className="dot-pulse green" /> Tier {TIERS[active]?.num}</span>
      </div>

      <svg className="jd-svg" viewBox={`0 0 ${w} ${h}`}>
        <defs>
          <linearGradient id="jdGrad" x1="0" x2="1" y1="1" y2="0">
            <stop offset="0%" stopColor="#1b3f73" />
            <stop offset="40%" stopColor="#0e7a3d" />
            <stop offset="80%" stopColor="#5bba42" />
            <stop offset="100%" stopColor="#f39c20" />
          </linearGradient>
        </defs>

        {/* faint full path */}
        <path d={path} stroke="#e2e7d8" strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray="4 6" />
        {/* drawn portion */}
        <path
          d={path}
          stroke="url(#jdGrad)"
          strokeWidth="5"
          fill="none"
          strokeLinecap="round"
          style={{
            strokeDasharray: totalLen,
            strokeDashoffset: totalLen - drawn,
            transition: "stroke-dashoffset 0.18s linear",
          }}
        />

        {/* nodes */}
        {nodes.map((n, i) => {
          const isActive = i === active;
          const isDone = i < active;
          const reached = i <= active;
          return (
            <g key={i} transform={`translate(${n.x}, ${n.y})`}>
              {isActive && <circle r="34" fill="rgba(91,186,66,0.22)" className="jd-pulse" />}
              <circle r="22" fill={reached ? "#0e7a3d" : "white"} stroke={reached ? "#0e7a3d" : "#c9d1bd"} strokeWidth="2" />
              <text textAnchor="middle" dy="5" fontFamily="var(--font-mono)" fontSize="12" fontWeight="600" fill={reached ? "white" : "#9aa3b4"}>
                {n.label}
              </text>
              {isDone && <circle r="6" cx="14" cy="-14" fill="#f39c20" />}
            </g>
          );
        })}
      </svg>

      <div className="jd-card-foot">
        <div className="jd-current">
          <div className="jd-current-num">{TIERS[active].num}</div>
          <div>
            <div className="jd-current-label">Currently exploring</div>
            <div className="jd-current-name">{TIERS[active].label}</div>
          </div>
        </div>
        <div className="jd-progress">
          <div className="jd-bar"><div className="jd-bar-fill" style={{width: `${progress * 100}%`}} /></div>
          <span>{Math.round(progress * 100)}%</span>
        </div>
      </div>
    </div>
  );
}

window.Journey = Journey;