// Approach.jsx — playful tilted deck of numbered cards (fully readable)
function Approach() {
  const phases = [
    { n: '1', t: 'Discovery', b: 'We map your stack, your sources, and the decisions you can\u2019t make yet — you leave with a written plan.', bg: 'var(--w-green)', rot: -2.5, shift: -10 },
    { n: '2', t: 'Build', b: 'Senior engineers ship in your repo, against your conventions. Weekly demos, no junior handoffs.', bg: 'var(--w-pop)', rot: 1.8, shift: 14 },
    { n: '3', t: 'Hypercare', b: 'A structured hypercare window: we monitor, fix and document while your team takes the controls.', bg: 'var(--w-violet)', rot: -1.6, shift: -6 },
    { n: '4', t: 'Handoff', b: 'A finished system your team owns, documented end to end. We make ourselves replaceable.', bg: 'var(--w-yellow)', rot: 2.4, shift: 10 },
  ];
  return (
    <section className="w-section w-section--cream" id="approach">
      <span className="w-ov w-ov-target w-ov-app1" aria-hidden></span>
      <span className="w-ov w-ov-target w-ov-app2" aria-hidden></span>
      <div className="w-wrap">
        <div className="w-approach__grid">
          <div data-reveal>
            <p className="w-eyebrow w-section__eyebrow">How we work</p>
            <h2 className="w-section__title">Four steps<br /><span className="w-hl w-hl--pop">No surprises</span></h2>
            <p className="w-section__kicker">Most projects move through these phases. Scope and length vary with the work — but the shape stays the same.</p>
          </div>
          <div className="w-approach__deck">
            {phases.map((p, i) => (
              <div className="w-approach__card" key={p.n} data-reveal data-reveal-delay={String(i % 3)}
                style={{ background: p.bg, transform: `rotate(${p.rot}deg)`, marginLeft: p.shift + 'px' }}>
                <div className="w-approach__card-top">
                  <div className="w-approach__card-num">{p.n}</div>
                  <div className="w-approach__card-title">{p.t}</div>
                </div>
                <p className="w-approach__card-body">{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Approach });