/* global React, useReveal */
const { useEffect, useRef, useState } = React;

const journey = [
  {
    step: "01",
    label: "The brief",
    verb: "Listen",
    title: "I begin before the campaign exists.",
    body: "I map the actual decision path: what someone needs to notice, trust, understand, and do before a message becomes action.",
    artifact: "Audience path",
    proof: "Fewer assumptions",
    note: "Question asked",
    quote: "What is stopping the next step?",
    bars: [22, 38, 31, 52, 43],
  },
  {
    step: "02",
    label: "The system",
    verb: "Build",
    title: "Then I turn the idea into an operating rhythm.",
    body: "Messaging, creative, channel cadence, stakeholder updates, and measurement all become one loop, so the campaign can improve while it is live.",
    artifact: "Campaign loop",
    proof: "50+ assets shipped",
    note: "Workflow built",
    quote: "Make the next version easier to produce.",
    bars: [30, 44, 58, 54, 71],
  },
  {
    step: "03",
    label: "The proof",
    verb: "Measure",
    title: "The work has to move a number, sharpen a decision, or make a team faster.",
    body: "I look for evidence that the system is working: engagement lift, reach expansion, faster turnaround, or cleaner reporting for the people leading the work.",
    artifact: "Performance read",
    proof: "+35% engagement",
    note: "Signal found",
    quote: "Creative matters more when it is measured.",
    bars: [42, 49, 61, 76, 89],
  },
  {
    step: "04",
    label: "The handoff",
    verb: "Translate",
    title: "Finally, I make the insight usable for the team.",
    body: "The best outcome is not a prettier slide. It is a clearer next decision: which audience to prioritize, which message to keep, and what to stop doing.",
    artifact: "Decision memo",
    proof: "Clear next move",
    note: "Decision made",
    quote: "If the team cannot use it, the analysis is unfinished.",
    bars: [50, 63, 67, 78, 84],
  },
];

window.Journey = function Journey() {
  const ref = useReveal();
  const stepsRef = useRef([]);
  const [active, setActive] = useState(0);
  const current = journey[active] || journey[0];

  useEffect(() => {
    const nodes = stepsRef.current.filter(Boolean);
    if (!nodes.length) return;

    const io = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
        if (visible) setActive(Number(visible.target.dataset.index || 0));
      },
      { threshold: [0.35, 0.5, 0.7], rootMargin: "-18% 0px -24% 0px" }
    );

    nodes.forEach((node) => io.observe(node));
    return () => io.disconnect();
  }, []);

  return (
    <section className="journey" id="journey" ref={ref} style={{ "--active-step": active }}>
      <div className="journey__frame">
        <aside className="journey__sticky" aria-label="Story progress">
          <div className="eyebrow">01 — Scroll story</div>
          <h2>
            Follow how I turn a loose brief into <em>measurable momentum.</em>
          </h2>
          <p>
            This is the working pattern behind the roles and outcomes below: listen, build, measure, translate.
          </p>

          <div className="journey__dial" aria-hidden="true">
            {journey.map((item, index) => (
              <span key={item.step} className={index === active ? "active" : ""}>
                {item.verb}
              </span>
            ))}
          </div>
        </aside>

        <div className="journey__steps">
          {journey.map((item, index) => (
            <article
              className={`journey__step reveal ${index === active ? "is-active" : ""}`}
              key={item.step}
              data-index={index}
              ref={(node) => { stepsRef.current[index] = node; }}
            >
              <div className="journey__marker">{item.step}</div>
              <div className="journey__copy">
                <div className="journey__label">{item.label} / {item.verb}</div>
                <h3>{item.title}</h3>
                <p>{item.body}</p>
              </div>
              <div className="journey__metric">{item.proof}</div>
            </article>
          ))}
        </div>

        <div className="journey__artifact">
          <div className="journey__casefile" aria-live="polite">
            <div className="casefile__top">
              <span>{current.artifact}</span>
              <strong>{current.proof}</strong>
            </div>
            <div className="casefile__quote">
              <span>{current.note}</span>
              <p>{current.quote}</p>
            </div>
            <div className="casefile__bars" aria-hidden="true">
              {current.bars.map((height, index) => (
                <i key={`${current.step}-${index}`} style={{ height: `${height}%` }} />
              ))}
            </div>
            <div className="casefile__footer">
              <span>Chapter {current.step}</span>
              <span>{current.label}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};