// ===== How We Work =====
// Five workflow cards that sweep right-to-left as you scroll (KOTA-style),
// pinned on desktop. Falls back to a vertical stack otherwise.

// Client-facing project timeline: plain-English stage names, what actually
// happens in each, and the week(s) it happens in. `span` is [startWeek,
// endWeek] on a 10-unit track (week 10 = ongoing/infinity) for the timeline
// bar under the cards.
const HWW_CARDS = [
  {
    n: '01', time: 'Week 1', title: 'Research', span: [0, 1],
    body: "We get to know your business like we're joining it: what you sell, who buys it, what your competition is doing, and where the easy wins are hiding.",
    work: ['Your business & goals', 'Your current web presence', 'Your competition', 'Opportunities'],
  },
  {
    n: '02', time: 'Week 2', title: 'The Plan', span: [1, 2],
    body: "You get a written plan in plain English: what we'll build, what it costs, and when it ships. You see everything before you sign anything.",
    work: ['Scope of work', 'Timeline', 'Pricing', 'Mockups'],
  },
  {
    n: '03', time: 'Weeks 3–8', title: 'The Build', span: [2, 8],
    body: 'Design, development, copy, and content. You watch the site come together and steer as we go — we move fast and keep you in the loop.',
    work: ['Design', 'Development', 'Copywriting', 'SEO setup', 'Your feedback rounds'],
  },
  {
    n: '04', time: 'Week 9', title: 'The Launch', span: [8, 9],
    body: 'We go live, point your domain, wire up analytics, and run the first-week checks. Then we hand you the keys and teach you to drive.',
    work: ['Go-live', 'Analytics', 'Training & handoff', '30-day review'],
  },
  {
    n: '05', time: 'Ongoing', title: 'The Partnership', span: [9, 10],
    body: 'Once the site has earned its keep, we talk about what to build next. Most clients grow from a website into search, systems, and automation.',
    work: ['Maintenance', 'Growth planning', "New builds when you're ready"],
  },
];

function HomeHowWeWork() {
  const sectionRef = React.useRef(null);
  const headerRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);

  React.useEffect(() => {
    if (
      window.__pdaIsMobile ||
      window.__pdaReduceMotion ||
      typeof gsap === 'undefined' ||
      typeof ScrollTrigger === 'undefined'
    ) {
      return;
    }
    const section = sectionRef.current;
    const wrap = wrapRef.current;
    const track = trackRef.current;
    if (!section || !wrap || !track) return;

    section.classList.add('is-horizontal');
    const cards = track.querySelectorAll('.hww-card');
    const ticks = wrap.querySelectorAll('.hww-tl-tick');
    const fill = wrap.querySelector('.hww-tl-fill');

    // Active card tracking via direct DOM class toggles — React re-renders
    // here would fight the GSAP-pinned layout. The timeline fill slides to
    // the active stage's week span (10-unit track, week 10 = ongoing).
    let lastIdx = -1;
    const setActive = (idx) => {
      if (idx === lastIdx) return;
      lastIdx = idx;
      cards.forEach((c, i) => c.classList.toggle('is-active', i === idx));
      const [s, e] = HWW_CARDS[idx].span;
      if (fill) {
        fill.style.left = s * 10 + '%';
        fill.style.width = (e - s) * 10 + '%';
      }
      ticks.forEach((t, i) => t.classList.toggle('is-on', i >= s && i <= e));
    };
    setActive(0);

    const ctx = gsap.context(() => {
      gsap.to(track, {
        x: () => -(track.scrollWidth - window.innerWidth),
        ease: 'none',
        scrollTrigger: {
          trigger: wrap,
          start: 'top top',
          end: () => '+=' + (track.scrollWidth - window.innerWidth),
          pin: true,
          scrub: 1,
          snap: cards.length > 1 ? 1 / (cards.length - 1) : false,
          invalidateOnRefresh: true,
          onUpdate: (self) =>
            setActive(Math.round(self.progress * (cards.length - 1))),
        },
      });

      // The ghosted display heading is a background texture: it drifts
      // slowly against the card sweep instead of fading away.
      gsap.to(headerRef.current.querySelector('.section-display'), {
        xPercent: -12, ease: 'none',
        scrollTrigger: {
          trigger: wrap, start: 'top top',
          end: () => '+=' + (track.scrollWidth - window.innerWidth), scrub: true,
        },
      });
    }, section);

    return () => {
      ctx.revert();
      section.classList.remove('is-horizontal');
    };
  }, []);

  return (
    <section className="hww-section" ref={sectionRef} aria-label="How we work">
      <div className="hww-wrap" ref={wrapRef}>
        <span className="hww-eyebrow eyebrow">How we work</span>
        <div className="hww-header" ref={headerRef}>
          <h2 className="section-display">How We Work</h2>
        </div>
        <div className="hww-track" ref={trackRef}>
          {HWW_CARDS.map((c) => (
            <article className="hww-card" key={c.n}>
              <div className="hww-card-top">
                <span className="hww-card-num gradient-text">{c.n}</span>
                <span className="hww-card-time">{c.time}</span>
              </div>
              <h3 className="hww-card-title">{c.title}</h3>
              <p className="hww-card-body">{c.body}</p>
              <div className="hww-card-work">
                <span className="hww-card-work-label">Work involved</span>
                <div className="hww-card-chips">
                  {c.work.map((w, i) => (
                    <span className="hww-chip" key={i}>{w}</span>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
        {/* Week timeline: 10-unit track (weeks 1-9, then ongoing). The fill
            slides to the active stage's span. */}
        <div className="hww-timeline" aria-hidden="true">
          <span className="hww-tl-track" />
          <span className="hww-tl-fill" />
          {Array.from({ length: 11 }).map((_, i) => (
            <span
              className="hww-tl-tick"
              key={i}
              style={{ left: i * 10 + '%' }}
            >
              <i />
              <em>{i === 10 ? '∞' : i === 0 ? 'Kickoff' : 'Wk ' + i}</em>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HomeHowWeWork = HomeHowWeWork;