// Approach.jsx — 3 temps Immersion / Reconstruction / Activation
const Approach = () => {
  const steps = [
    ["01", "Immersion", "On s'infiltre dans vos murs. On capte ce que vous êtes vraiment — au-delà du brief.", "2 — 4 semaines"],
    ["02", "Reconstruction", "On clarifie votre cap, vos objectifs, votre voix. On reconstruit la grammaire.", "4 — 6 semaines"],
    ["03", "Activation", "On orchestre une stratégie créative et intelligente, pensée pour durer dans la culture.", "En continu"],
  ];
  return (
    <section id="methode" style={{
      background: "#3D1520", color: "#fff", padding: "200px 56px",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 72, gap: 48 }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .65, marginBottom: 32, fontWeight: 700 }}>
              02 — Notre approche
            </div>
            <h2 style={{ fontSize: "clamp(72px, 8vw, 128px)", lineHeight: .98, letterSpacing: "-0.025em", fontWeight: 700, margin: 0, maxWidth: 1300 }}>
              L'intelligence d'une<br/>marque <i>se voit.</i>
            </h2>
          </div>
          <div style={{ maxWidth: 360, fontSize: 18, lineHeight: 1.55, opacity: .85 }}>
            Trois temps. Une logique. On ne saute aucune étape — c'est ce qui fait
            la différence entre un coup et une trajectoire.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48, marginTop: 60 }}>
          {steps.map(([n, t, d, dur]) => (
            <div key={n} style={{ borderTop: "1px solid rgba(255,255,255,.3)", paddingTop: 28 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 28 }}>
                <span style={{ fontSize: 13, letterSpacing: ".24em", opacity: .55, fontWeight: 700 }}>{n} / {t.toUpperCase()}</span>
                <span style={{ fontSize: 11, letterSpacing: ".22em", opacity: .45, fontWeight: 700 }}>{dur.toUpperCase()}</span>
              </div>
              <div style={{ fontSize: "clamp(36px, 3vw, 44px)", lineHeight: 1.05, fontWeight: 700, letterSpacing: "-0.01em", marginBottom: 24 }}>{t}.</div>
              <div style={{ fontSize: 19, lineHeight: 1.5, opacity: .82 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Approach = Approach;