function Process() {
  const steps = [
    { n: 'I', t: 'Explore programs', d: 'Browse by level, field and career outcome. Save favourites.' },
    { n: 'II', t: 'Expert counseling', d: '1:1 call with a MentVecity advisor. No scripts, no pressure.' },
    { n: 'III', t: 'Compare options', d: 'Side-by-side comparison: fees, accreditation, outcomes.' },
    { n: 'IV', t: 'Submit documents', d: 'Structured checklist and direct university coordination.' },
    { n: 'V', t: 'Enrol & begin', d: 'Onboarding call, LMS walkthrough, mentor assignment.' },
  ];
  return (
    <section className="section" id="process">
      <div className="container">
        <FadeUp>
          <div className="section-head">
            <div className="section-eyebrow">How it works</div>
            <h2 className="section-title">
              Five steps from <span className="serif">curiosity to classroom.</span>
            </h2>
            <p className="section-sub">Clear. Supported. Done in days, not weeks.</p>
          </div>
        </FadeUp>
        <div className="process-track">
          <div className="process-line" />
          {steps.map((s, i) => (
            <FadeUp key={s.n} delay={(i % 3) + 1}>
              <div className="process-step">
                <div className="process-step-dot">{s.n}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;