/* Signature: the program curriculum as an animated, interactive roadmap */
const STAGES = [
  {
    k: "01", when: "See the machine", icon: "target", label: "Get oriented",
    title: "Get the real lay of the land",
    body: "Before you fix anything, understand why the callbacks aren't coming - and which Canadian employers actually hire newcomers.",
    points: ["Your true application → screen → offer funnel", "The ‘Canadian experience’ catch-22 - and 4 honest ways to beat it", "Which companies hire newcomers, and which rarely do"],
    stat: ["90d", "game plan"],
  },
  {
    k: "02", when: "Become legible", icon: "doc", label: "Position yourself",
    title: "Translate your career into ‘Canadian’",
    body: "Reframe a foreign resume and LinkedIn so recruiters and ATS stop filtering you out before a human ever reads it.",
    points: ["Remove the 6 ‘foreign signals’ that auto-reject you", "The impact-and-stack formula recruiters scan in seconds", "LinkedIn headline & location set-up that gets you found"],
    stat: ["12", "resume fixes"],
  },
  {
    k: "03", when: "Get referred", icon: "globe", label: "Hidden job market",
    title: "Reach people, not the void",
    body: "Most roles fill through referral. Learn how to get introduced when you don't know a single person in Canada yet.",
    points: ["The ‘coffee chat’ culture - scripts that don't feel cringe", "Working recruiters & staffing firms as a newcomer fast-lane", "Cold outreach to hiring managers that actually gets replies"],
    stat: ["15+", "outreach scripts"],
  },
  {
    k: "04", when: "Win the room", icon: "chat", label: "Interview prep",
    title: "Interview the Canadian way",
    body: "Behavioral rounds are weighted heavily here. Learn the culture cues and the answers that signal ‘great teammate.’",
    points: ["STAR stories tuned to what Canadian teams reward", "‘Canadian politeness’ decoded - disagreement, code review, standups", "Scripted answers for the landmine questions"],
    stat: ["50+", "interview prompts"],
  },
  {
    k: "05", when: "Prove the tech", icon: "code", label: "Sharpen the tech",
    title: "Sharpen only what gets tested",
    body: "Not a CS redo - just the focused technical prep local interviews actually use, plus one portfolio piece that opens doors.",
    points: ["The DSA patterns & one system-design framework that recur", "Local engineering norms: PRs, docs, agile as run here", "A portfolio project framed around a Canadian problem"],
    stat: ["1", "portfolio project"],
  },
  {
    k: "06", when: "Land the offer", icon: "badge", label: "Sign & land well",
    title: "Negotiate, sign, and land well",
    body: "Walk into the offer talk with real numbers - then survive your critical first 90 days as the new hire.",
    points: ["Live salary benchmarks by city, role & level", "Negotiation scripts for when you feel you ‘can't be picky’", "The first-90-days playbook so you don't get managed out"],
    stat: ["3", "city salary guides"],
  },
];

function Roadmap() {
  const [active, setActive] = useState(0);
  const [auto, setAuto] = useState(true);
  const wrapRef = useRef(null);

  useEffect(() => {
    if (!auto) return;
    const id = setInterval(() => {
      const el = wrapRef.current;
      let visible = true;
      if (el) {
        const r = el.getBoundingClientRect();
        const vh = window.innerHeight || document.documentElement.clientHeight;
        visible = r.top < vh && r.bottom > 0;
      }
      if (visible && !document.hidden) setActive((a) => (a + 1) % STAGES.length);
    }, 3600);
    return () => clearInterval(id);
  }, [auto]);

  const pick = (i) => { setActive(i); setAuto(false); };
  const progress = STAGES.length > 1 ? active / (STAGES.length - 1) : 0;
  const s = STAGES[active];

  return (
    <section className="po-road section" id="roadmap" ref={wrapRef}>
      <div className="po-road-glow" aria-hidden="true"></div>
      <div className="wrap po-road-wrap">
        <div className="po-head reveal">
          <span className="eyebrow"><Icon name="map" size={15} /> The modules</span>
          <h2>From “just landed” to “offer signed.”</h2>
          <p>Six modules, one clear path - the full curriculum that turns foreign experience into a Canadian offer. Tap any step to see what's inside.</p>
          <a className="btn btn-primary" href="/learn/module-1" style={{ marginTop: 22 }}>Go to Modules <Icon name="arrow" size={17} /></a>
        </div>

        {/* Track */}
        <div className="po-track reveal" role="tablist" aria-label="Module stages">
          <div className="po-track-line" aria-hidden="true">
            <div className="po-track-fill" style={{ "--p": progress }}></div>
          </div>
          {STAGES.map((st, i) => {
            const state = i < active ? "done" : i === active ? "now" : "next";
            return (
              <button key={st.k} role="tab" aria-selected={i === active}
                className={"po-node po-node-" + state} onClick={() => pick(i)} style={{ "--i": i }}>
                <span className="po-node-dot">
                  <Icon name={i < active ? "check" : st.icon} size={18} stroke={2.4} />
                </span>
                <span className="po-node-meta">
                  <span className="po-node-k mono">{st.k}</span>
                  <span className="po-node-label">{st.label}</span>
                </span>
              </button>
            );
          })}
        </div>

        {/* Detail */}
        <div className="po-detail card" key={active}>
          <div className="po-detail-l">
            <span className="po-detail-when mono">{s.when}</span>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
            <ul className="po-detail-points">
              {s.points.map((pt) => (
                <li key={pt}><Icon name="check" size={17} stroke={2.6} /><span>{pt}</span></li>
              ))}
            </ul>
            <a className="btn btn-ghost" href={"/learn/module-" + (active + 1)} style={{ marginTop: 22 }}>
              <Icon name="play" size={16} /> Look inside this module
            </a>
          </div>
          <div className="po-detail-r">
            <div className="po-detail-stat">
              <b>{s.stat[0]}</b>
              <span>{s.stat[1]}</span>
            </div>
            <div className="po-detail-nav">
              <button className="po-arrow" aria-label="Previous stage"
                onClick={() => pick((active - 1 + STAGES.length) % STAGES.length)}>
                <Icon name="arrow" size={18} style={{ transform: "rotate(180deg)" }} />
              </button>
              <span className="mono po-detail-count">{active + 1} / {STAGES.length}</span>
              <button className="po-arrow po-arrow-fwd" aria-label="Next stage"
                onClick={() => pick((active + 1) % STAGES.length)}>
                <Icon name="arrow" size={18} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Roadmap = Roadmap;