// Process, five-stage education consulting engagement (3 + 2 grid with straight arrows)
function ProcessSection() {
  const steps = [
    { num: "01", title: "Discovery", desc: "Interviews, document review, and stakeholder alignment to surface what the work actually needs to address.", color: "pink" },
    { num: "02", title: "Diagnostic", desc: "Quantitative and qualitative analysis of learners, instruction, and operations, grounded in evidence, not opinion.", color: "coral" },
    { num: "03", title: "Design", desc: "Curriculum, programs, assessments, and AI policy designed to fit your context and constraints.", color: "blue" },
    { num: "04", title: "Delivery", desc: "Implementation alongside your team. Clear milestones, working artifacts, and tight feedback loops.", color: "teal" },
    { num: "05", title: "Measurement", desc: "Defined metrics, instruments, and reporting so you can see what's working and decide what's next.", color: "purple" },
  ];

  const Card = ({ s }) => (
    <div className="process__card fade-up" data-color={s.color}>
      <div className="process__num">{s.num}</div>
      <div className="process__bar" />
      <h3>{s.title}</h3>
      <p>{s.desc}</p>
    </div>
  );

  const Arrow = ({ from, to, dir = "right", id }) => {
    let path, head, viewBox, x1, x2, y1, y2;
    if (dir === "right") {
      path = "M 2 20 L 94 20"; head = "M 86 12 L 94 20 L 86 28";
      viewBox = "0 0 100 40"; x1="0"; x2="1"; y1="0"; y2="0";
    } else if (dir === "left") {
      path = "M 98 20 L 6 20"; head = "M 14 12 L 6 20 L 14 28";
      viewBox = "0 0 100 40"; x1="1"; x2="0"; y1="0"; y2="0";
    } else { // down
      path = "M 20 2 L 20 38"; head = "M 12 30 L 20 38 L 28 30";
      viewBox = "0 0 40 40"; x1="0"; x2="0"; y1="0"; y2="1";
    }
    return (
      <div className={`process__arrow process__arrow--${dir}`} aria-hidden="true">
        <svg viewBox={viewBox} preserveAspectRatio="none">
          <defs>
            <linearGradient id={`pa-${id}`} x1={x1} y1={y1} x2={x2} y2={y2}>
              <stop offset="0%"  stopColor={`hsl(var(--brand-${from}))`} />
              <stop offset="100%" stopColor={`hsl(var(--brand-${to}))`} />
            </linearGradient>
          </defs>
          <path className="process__arrow-path" d={path} stroke={`url(#pa-${id})`} />
          <path className="process__arrow-head" d={head} stroke={`url(#pa-${id})`} />
          <circle className="process__arrow-pulse" r="3.5" fill={`hsl(var(--brand-${from}))`}>
            <animateMotion dur="2.6s" repeatCount="indefinite" path={path} />
          </circle>
        </svg>
      </div>
    );
  };

  return (
    <section className="section" id="process">
      <div className="section__bg">
        <div className="orb" style={{ bottom:0, right:0, width:320, height:320, background:"hsl(var(--brand-purple) / 0.06)", transform:"translate(25%, 25%)" }} />
        <div className="orb" style={{ top:0, left:0, width:256, height:256, background:"hsl(var(--brand-teal) / 0.06)", transform:"translate(-25%, -25%)" }} />
      </div>
      <div className="section__inner">
        <div className="section__head fade-up">
          <div className="tag-pill tag-pill--purple">How We Work</div>
          <h2 className="section__title">A five-stage engagement.</h2>
          <p className="section__lede">Most projects move through these stages. Some compress into a single sprint; others run across a full academic year.</p>
        </div>

        <div className="process__flow stagger">
          <div className="process__row process__row--3">
            <Card s={steps[0]} />
            <Arrow from={steps[0].color} to={steps[1].color} id="0" />
            <Card s={steps[1]} />
            <Arrow from={steps[1].color} to={steps[2].color} id="1" />
            <Card s={steps[2]} />
          </div>

          <div className="process__connector process__connector--right" aria-hidden="true">
            <Arrow from={steps[2].color} to={steps[3].color} id="2" dir="down" />
          </div>

          <div className="process__row process__row--2 process__row--reverse">
            <Card s={steps[4]} />
            <Arrow from={steps[3].color} to={steps[4].color} id="3" dir="left" />
            <Card s={steps[3]} />
          </div>
        </div>
      </div>
    </section>
  );
}
window.ProcessSection = ProcessSection;