/* Why ZaviFx — spotlight rows: cursor-tracked glow, wipe fill, expanding copy. */
const WHY = [
  ['One brief, one team', 'Design, development and marketing sit together, so nothing is lost between vendors.'],
  ['Written deliverables', 'Audits, roadmaps and reports arrive in writing — you can act on them without us in the room.'],
  ['Build quality', 'Speed budgets, semantic markup and accessibility are part of the build, not an afterthought.'],
  ['You own everything', 'Accounts, code, design files and data stay yours from day one.'],
  ['One metric per engagement', 'Every retainer reports against a single primary number, agreed before work starts.'],
];

function WhyZavi({ go }) {
  const ref = React.useRef(null);
  const [open, setOpen] = React.useState(0);
  const move = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--gx', (e.clientX - r.left) + 'px');
    el.style.setProperty('--gy', (e.clientY - r.top) + 'px');
    el.dataset.live = '';
  };
  return (
    <section className="zx-why" ref={ref} onPointerMove={move} onPointerLeave={(e) => { delete e.currentTarget.dataset.live; }}>
      <span className="zx-why__glow" aria-hidden="true" style={{ left: 'var(--gx,50%)', top: 'var(--gy,50%)' }} />
      <div className="zx-container zx-why__grid">
        <div data-reveal>
          <span className="zx-why__eyebrow">Why ZaviFx</span>
          <h2 className="zx-why__h2">Strategy, creativity and technology in one team</h2>
          <p className="zx-why__lede">Five commitments that shape how every engagement is scoped, built and reported.</p>
          <div style={{ marginTop: 'var(--space-xl)' }}>
            <Button onClick={() => go('contact')} data-magnetic>Book a Free Consultation</Button>
          </div>
        </div>
        <div className="zx-why__rows" data-reveal>
          {WHY.map(([t, d], n) => (
            <button key={t} type="button" className="zx-why__row" data-open={open === n ? '' : undefined}
              onMouseEnter={() => setOpen(n)} onFocus={() => setOpen(n)} onClick={() => go('about')}>
              <span className="zx-why__n">{String(n + 1).padStart(2, '0')}</span>
              <span className="zx-why__body">
                <span className="zx-why__t">{t}</span>
                <span className="zx-why__d">{d}</span>
              </span>
              <span className="zx-why__mark" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 8h9M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { WhyZavi, WHY });