// Process.jsx — sticky step-through with animated visual panels
function Process() {
  const steps = [
    {
      n: '01', title: 'Clarity first',
      body: 'We map how your business actually runs \u2014 not how the software says it should. No assumptions. No templates.',
      label: 'Audit · Map · Align',
      panel: 'clarity'
    },
    {
      n: '02', title: 'Simplify the stack',
      body: 'Remove what isn\u2019t earning its keep. Identify what\u2019s missing. Fewer tools. Cleaner data.',
      label: 'Consolidate · Remove · Replace',
      panel: 'simplify'
    },
    {
      n: '03', title: 'Build the backbone',
      body: 'CRM, workflows, integrations, and reporting that support sales and operations \u2014 built to last.',
      label: 'Design · Ship · Integrate',
      panel: 'build'
    },
    {
      n: '04', title: 'Ongoing support',
      body: 'A long-term partner so the systems evolve with the company \u2014 instead of breaking every year.',
      label: 'Iterate · Maintain · Scale',
      panel: 'support'
    },
  ];

  const pinRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      const el = pinRef.current; if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      if (total <= 0) return;
      const scrolled = -rect.top;
      const pct = Math.max(0, Math.min(1, scrolled / total));
      const idx = Math.min(steps.length - 1, Math.floor(pct * steps.length));
      setActive(idx);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="process" id="process">
      <div className="wrap process__intro">
        <div>
          <div className="eyebrow reveal">The process</div>
          <h2 className="reveal reveal-1">How we<br/>fix the<br/>systems.</h2>
        </div>
        <p className="reveal reveal-2">
          Four phases. No proposal theater.<br/>
          No dashboards nobody uses.<br/>
          Just the work that moves the needle.
        </p>
      </div>

      <div className="process__sticky" ref={pinRef}>
        <div className="process__pin">
          <div className="process__left">
            <ul className="process__steps">
              {steps.map((s, i) => (
                <li key={s.n} className={`process__step ${i === active ? 'active' : ''}`}
                    onClick={() => {
                      const el = pinRef.current;
                      const target = el.offsetTop + (el.offsetHeight - window.innerHeight) * (i / steps.length) + 10;
                      window.scrollTo({ top: target, behavior: 'smooth' });
                    }}>
                  <span className="num">{s.n}</span>
                  <div>
                    <h3>{s.title}</h3>
                    <p>{s.body}</p>
                  </div>
                </li>
              ))}
            </ul>
            <div className="process__progress">
              <span>Phase {active + 1} / {steps.length}</span>
              <span className="bar" style={{ '--progress': `${((active + 1) / steps.length) * 100}%` }} />
            </div>
          </div>

          <div className="process__visual">
            {steps.map((s, i) => (
              <div key={s.n} className={`process__panel panel-${s.panel} ${i === active ? 'active' : ''}`}>
                <PanelMotif kind={s.panel} active={i === active} />
                <span className="label">// {s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PanelMotif({ kind, active }) {
  if (kind === 'clarity') {
    // nodes resolving into a clean graph
    const nodes = [
      [60, 60], [200, 40], [340, 80],
      [80, 200], [220, 180], [340, 220],
      [120, 340], [260, 340]
    ];
    return (
      <svg viewBox="0 0 400 400">
        {nodes.map(([x, y], i) => (
          <g key={i}>
            {nodes.slice(i + 1).map(([x2, y2], j) => (
              <line key={j} x1={x} y1={y} x2={x2} y2={y2}
                stroke="#2B2B2B" strokeWidth="1"
                opacity={active && (j < 2) ? 0.8 : 0.1} />
            ))}
          </g>
        ))}
        {nodes.map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r={active ? 8 : 4}
            fill={i === 4 ? '#86C8A1' : '#F6F4EF'}
            style={{ transitionDelay: `${i * 60}ms` }} />
        ))}
      </svg>
    );
  }
  if (kind === 'simplify') {
    // Many disparate tools collapse into a single consolidated stack.
    // 4x3 grid of tool tiles — 3 keepers slide to the right and merge into
    // a unified mint column; the rest fade and collapse.
    const tiles = [
      { label: 'CRM',      keep: true,  slot: 0 },
      { label: 'Forms',    keep: false },
      { label: 'Sheets',   keep: false },
      { label: 'Email',    keep: false },
      { label: 'Quotes',   keep: true,  slot: 1 },
      { label: 'Docs',     keep: false },
      { label: 'Chat',     keep: false },
      { label: 'Drive',    keep: false },
      { label: 'Invoices', keep: true,  slot: 2 },
      { label: 'Tasks',    keep: false },
      { label: 'Notes',    keep: false },
      { label: 'Trello',   keep: false },
    ];
    return (
      <div className="motif simplify-motif">
        <div className="simplify-grid">
          {tiles.map((t, i) => {
            const col = i % 4;
            const row = Math.floor(i / 4);
            const base = {
              gridColumn: col + 1,
              gridRow: row + 1,
              transitionDelay: `${i * 90}ms`,
            };
            if (!active) {
              return (
                <div key={i} className="simplify-tile" style={base}>
                  {t.label}
                </div>
              );
            }
            if (t.keep) {
              return (
                <div key={i} className="simplify-tile simplify-tile--keep"
                  style={{
                    ...base,
                    gridColumn: 4,
                    gridRow: t.slot + 1,
                    transitionDelay: `${700 + t.slot * 280}ms`,
                  }}>
                  {t.label}
                </div>
              );
            }
            return (
              <div key={i} className="simplify-tile simplify-tile--drop" style={base}>
                {t.label}
              </div>
            );
          })}
          <div className="simplify-frame" data-shown={active ? 'yes' : 'no'} />
          <div className="simplify-caption" data-shown={active ? 'yes' : 'no'}>
            12 tools &rarr; 3
          </div>
        </div>
      </div>
    );
  }
  if (kind === 'build') {
    // Build the backbone — a schematic system diagram that draws itself in.
    // Spine draws down the middle, inputs/outputs connect, nodes light up.
    return (
      <div className="motif build-motif">
        <svg viewBox="0 0 460 380" className="build-svg" data-shown={active ? 'yes' : 'no'}>
          {/* Spine */}
          <line className="b-spine" x1="230" y1="40" x2="230" y2="340" />
          {/* Input lines (left) */}
          <line className="b-line b-line-1" x1="90"  y1="80"  x2="230" y2="120" />
          <line className="b-line b-line-2" x1="90"  y1="190" x2="230" y2="190" />
          <line className="b-line b-line-3" x1="90"  y1="300" x2="230" y2="260" />
          {/* Output lines (right) */}
          <line className="b-line b-line-4" x1="230" y1="140" x2="370" y2="110" />
          <line className="b-line b-line-5" x1="230" y1="240" x2="370" y2="270" />

          {/* Input nodes */}
          <g className="b-node b-node-1">
            <rect x="30" y="62" width="120" height="36" />
            <text x="90" y="85">SALES</text>
          </g>
          <g className="b-node b-node-2">
            <rect x="30" y="172" width="120" height="36" />
            <text x="90" y="195">OPS</text>
          </g>
          <g className="b-node b-node-3">
            <rect x="30" y="282" width="120" height="36" />
            <text x="90" y="305">INVENTORY</text>
          </g>

          {/* Backbone (central) */}
          <g className="b-core b-core-1">
            <rect x="190" y="100" width="80" height="40" />
            <text x="230" y="125">CRM</text>
          </g>
          <g className="b-core b-core-2">
            <rect x="190" y="170" width="80" height="40" />
            <text x="230" y="195">API</text>
          </g>
          <g className="b-core b-core-3">
            <rect x="190" y="240" width="80" height="40" />
            <text x="230" y="265">DB</text>
          </g>

          {/* Output nodes */}
          <g className="b-node b-node-4">
            <rect x="310" y="92" width="120" height="36" />
            <text x="370" y="115">REPORTS</text>
          </g>
          <g className="b-node b-node-5">
            <rect x="310" y="252" width="120" height="36" />
            <text x="370" y="275">AUTOMATIONS</text>
          </g>
        </svg>
      </div>
    );
  }
  if (kind === 'support') {
    // Ongoing support — a changelog / heartbeat timeline.
    // Entries land one-by-one with a live status tick, communicating
    // "we keep shipping as you grow."
    const entries = [
      { d: 'Q1', t: 'Shipped inventory v2',     tag: 'shipped' },
      { d: 'Q2', t: 'Added POS → books sync',   tag: 'shipped' },
      { d: 'Q3', t: 'Rebuilt quoting flow',      tag: 'shipped' },
      { d: 'Q4', t: 'Hired 2nd ops coordinator', tag: 'scoping' },
      { d: 'Now', t: 'Live monitoring',          tag: 'live' },
    ];
    return (
      <div className="motif support-motif">
        <ul className="support-log">
          {entries.map((e, i) => (
            <li key={i} className="support-entry"
                data-shown={active ? 'yes' : 'no'}
                style={{ transitionDelay: `${i * 140}ms` }}>
              <span className="support-entry__d">{e.d}</span>
              <span className="support-entry__t">{e.t}</span>
              <span className={`support-entry__tag support-entry__tag--${e.tag}`}>
                {e.tag === 'live' && <span className="support-pulse" />}
                {e.tag}
              </span>
            </li>
          ))}
        </ul>
      </div>
    );
  }
  return null;
}

window.Process = Process;