// Vertical process timeline — replaces the earlier circular orbit layout
// (which clipped on narrow viewports) with a premium alternating
// left/right timeline: a center line that draws in as you scroll
// (Motion.scroll(), same technique as interactions.js's hero parallax),
// plus each step fading in via the shared Reveal wrapper.
const PROCESS_STEPS = [
  { id: 1, title: 'Discovery', desc: 'Understanding your goals, audience, and requirements before any design work begins.',
    icon: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35' },
  { id: 2, title: 'Research', desc: 'Studying your industry, competitors, and best practices to inform smart decisions.',
    icon: 'M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z' },
  { id: 3, title: 'Design', desc: 'Crafting the visual direction — layouts, branding, and UI that match your goals.',
    icon: 'M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5zM15 5l4 4' },
  { id: 4, title: 'Development', desc: 'Building it for real — clean, responsive code from design file to live site.',
    icon: 'M16 18l6-6-6-6M8 6l-6 6 6 6' },
  { id: 5, title: 'Testing', desc: 'Checking every screen size, browser, and interaction before anything ships.',
    icon: 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3' },
  { id: 6, title: 'Launch', desc: 'Going live, with a final check and support ready for what comes after.',
    icon: 'M12 2c2.2 2.2 3.2 5.2 3.2 8 0 2.2-1 4.4-3.2 6.4-2.2-2-3.2-4.2-3.2-6.4 0-2.8 1-5.8 3.2-8zM5.2 14.4C3.6 16 3 18.6 3 21c2.4 0 5-.6 6.6-2.2M18.8 14.4c1.6 1.6 2.2 4.2 2.2 6.6-2.4 0-5-.6-6.6-2.2' },
];

function ProcessIcon({ d, size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {d.split('M').filter(Boolean).map((seg, i) => <path key={i} d={'M' + seg}></path>)}
    </svg>
  );
}

function ProcessTimeline() {
  const trackRef = React.useRef(null);
  const lineRef = React.useRef(null);

  React.useEffect(() => {
    const M = window.Motion;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!M || !M.scroll || !M.animate || reduced || !lineRef.current || !trackRef.current) return;
    const stop = M.scroll(
      M.animate(lineRef.current, { scaleY: [0, 1] }, { ease: 'linear' }),
      { target: trackRef.current, offset: ['start 80%', 'end 55%'] }
    );
    return () => { if (typeof stop === 'function') stop(); };
  }, []);

  return (
    <div className="proc-timeline" ref={trackRef}>
      <div className="proc-line-track" aria-hidden="true">
        <div className="proc-line-fill" ref={lineRef}></div>
      </div>
      {PROCESS_STEPS.map((step, i) => (
        <Reveal key={step.id} delay={(i % 2) * 60}>
          <div className={`proc-step ${i % 2 === 0 ? 'proc-step-left' : 'proc-step-right'}`}>
            <div className="proc-step-icon"><ProcessIcon d={step.icon} /></div>
            <div className="proc-step-body">
              <div className="proc-step-num">STEP {String(step.id).padStart(2, '0')}</div>
              <div className="proc-step-title">{step.title}</div>
              <div className="proc-step-desc">{step.desc}</div>
            </div>
          </div>
        </Reveal>
      ))}
    </div>
  );
}

function Process() {
  return (
    <section className="section container" data-screen-label="Process">
      <Reveal><div className="eyebrow"><b>/</b> HOW I WORK</div></Reveal>
      <Reveal><h2 className="h2"><window.AnimatedText parts={[{t:'My '},{t:'Process',accent:true},{t:'.'}]} repel /></h2></Reveal>
      <ProcessTimeline />
    </section>
  );
}

window.Process = Process;