// Why.jsx — value props as playful cards on ink
function Why() {
  const vals = [
    { n: '01', t: 'Senior expertise', b: 'Every engagement is run by engineers with years in production data. No junior handoffs.' },
    { n: '02', t: 'Scales with you', b: 'From your first dashboard to enterprise warehouses — solutions that grow with your business.' },
    { n: '03', t: 'Cutting-edge stack', b: 'The latest in data & AI tooling, chosen for your problem — not last year\u2019s trend.' },
    { n: '04', t: 'Built on trust', b: 'Transparent work and a clean handoff. We finish ready for your team to own.' },
  ];
  return (
    <section className="w-section w-section--grad" id="why">
      <span className="w-ov w-ov-dots w-ov-why1" aria-hidden></span>
      <span className="w-ov w-ov-smiley w-ov-why2" aria-hidden></span>
      <div className="w-wrap">
        <div className="w-section__head" data-reveal>
          <p className="w-eyebrow w-section__eyebrow">Why Myra</p>
          <h2 className="w-section__title">A finished system<br />Not a <span className="w-hl w-hl--violet">dependency</span></h2>
          <p className="w-section__kicker">We empower clients with ready-to-use solutions. Every project ends with a structured hypercare window and a clean handoff — then we step back.</p>
        </div>
        <div className="w-why__grid">
          {vals.map((v, i) => (
            <div className="w-why__card" key={v.n} data-reveal data-reveal-delay={String(i % 4)}>
              <div className="w-why__card-num">{v.n}</div>
              <div className="w-why__card-title">{v.t}</div>
              <p className="w-why__card-body">{v.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Why });