/* Process overview: intro column + icon card grid. Icons are 1.5px-stroke inline
   glyphs matching the system's iconography rules. */
const { Button } = window.ZaviFxDesignSystem_f15c31;

/* Real Lucide 24×24 path data (brain-circuit, target, pen-tool, code, shield-check,
   megaphone) — the icon set documented in readme.md's ICONOGRAPHY section. */
const I = {
  brain: [
    'M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z',
    'M9 13a4.5 4.5 0 0 0 3-4', 'M6.003 5.125A3 3 0 0 0 6.401 6.5',
    'M3.477 10.896a4 4 0 0 1 .585-.396', 'M6 18a4 4 0 0 1-1.967-.516',
    'M12 13h4', 'M12 18h6a2 2 0 0 1 2 2v1', 'M12 8h8', 'M16 8V5a2 2 0 0 1 2-2',
    'M20.5 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z', 'M20.5 13a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z',
    'M20.5 21a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z',
  ],
  target: ['M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z', 'M18 12a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z', 'M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'],
  pen: [
    'M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z',
    'm18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18',
    'm2.3 2.3 7.286 7.286', 'M13 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z',
  ],
  code: ['m16 18 6-6-6-6', 'm8 6-6 6 6 6'],
  shield: ['M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z', 'm9 12 2 2 4-4'],
  mega: ['m3 11 18-5v12L3 14v-3z', 'M11.6 16.8a3 3 0 1 1-5.8-1.6'],
};

function ProcIcon({ paths }) {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths.map((d, i) => <path key={i} d={d} />)}
    </svg>
  );
}

const STEPS = [
  { n: '01', k: 'brain', t: 'Discover', d: 'Business goals, offer economics and what "qualified" means for your sales team.' },
  { n: '02', k: 'target', t: 'Research', d: 'Analytics, funnel, competitor and keyword analysis. Findings are shared in writing.' },
  { n: '03', k: 'pen', t: 'Strategy', d: 'A 90-day roadmap with owners, budget split and the metric each workstream moves.' },
  { n: '04', k: 'code', t: 'Design & Build', d: 'Flows, interface design and development on a documented design system.' },
  { n: '05', k: 'shield', t: 'Testing & QA', d: 'Speed budgets, accessibility passes, tracking plan and a launch checklist.' },
  { n: '06', k: 'mega', t: 'Measure & Grow', d: 'Reporting cadence, experiment backlog and quarterly re-forecasting.' },
];

function ProcessGrid({ go }) {
  return (
    <section className="zx-proc">
      <div className="zx-container zx-proc__wrap">
        <div className="zx-proc__intro" data-reveal>
          <span className="zx-proc__eyebrow">Our model</span>
          <h2 className="zx-proc__title">How an engagement runs</h2>
          <p className="zx-proc__lede">Six stages, every engagement — whether it is a four-week brand sprint or a year-long growth retainer. You get written deliverables at each one.</p>
          <Button size="lg" onClick={() => go('about')} data-magnetic
            iconRight={<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M5.5 12.5 12.5 5.5M6.5 5.5h6v6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>}>
            Learn about our process
          </Button>
        </div>
        <div className="zx-proc__grid">
          {STEPS.map((s, i) => (
            <article className="zx-proc__card" key={s.n} data-reveal data-reveal-d={String((i % 3) + 1)} data-tilt>
              <span className="zx-proc__rule" aria-hidden="true" />
              <span className="zx-proc__ico"><ProcIcon paths={I[s.k]} /></span>
              <span className="zx-proc__n">{s.n}</span>
              <h3 className="zx-proc__h">{s.t}</h3>
              <p className="zx-proc__d">{s.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ProcessGrid });