// HOME
const { useState, useEffect, useRef, useMemo } = React;
const { Link, Btn, MagneticWrap, Marquee, MediaPh, Eyebrow, useReveal, useCountUp, useMagnetic, CASES, SERVICES } = window;

function Home() {
  return (
    <main className="page-enter">
      <HomeOpening />
      <Marquee items={[
        "Stratégie", "Performance", "Création", "Cycle de vie", "Éditorial", "Plateforme",
        "Stratégie", "Performance", "Création", "Cycle de vie", "Éditorial", "Plateforme",
      ]} italicIdxs={[1, 4, 7, 10]} />
      <HomeChapterHow />
      <HomeChapterWho />
      <HomeChapterWhat />
      <HomeProof />
      <HomeManifesto />
      <HomeCTA />
    </main>
  );
}

function HomeOpening() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 180, paddingBottom: 80, position: "relative" }}>
      {/* Marginalia */}
      <div className="page" style={{ display: "grid", gridTemplateColumns: "120px 1fr 280px", gap: 32, alignItems: "start" }}>
        <div>
          <div className="mono" style={{ color: "var(--muted)", lineHeight: 1.8 }}>
            FICHIER / 001<br/>
            ACCUEIL · v.26.05<br/>
            CEDAR RAPIDS — 52402
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 36 }}>Un studio marketing, fondé en 2019</div>
          <h1 className="serif" style={{
            fontSize: "clamp(72px, 12vw, 232px)", lineHeight: 0.88,
            letterSpacing: "-0.025em",
          }}>
            Nous faisons croître des <em style={{ color: "var(--acid-deep)" }}>marques</em><br/>
            qui ne <span style={{ borderBottom: "6px solid var(--ink)", paddingBottom: 4 }}>tremblent</span> pas<br/>
            en période de récession.<span style={{ color: "var(--acid)", fontStyle: "italic" }}>—</span>
          </h1>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginTop: 60, alignItems: "start" }}>
            <p className="body-lg" style={{ maxWidth: 540 }}>
              Clyvonna est un studio marketing indépendant pour les fondateurs, directeurs marketing et responsables croissance qui en ont assez des agences qui confondent activité et résultats. Nous travaillons en sprints opérationnels de 90 jours, en toute transparence, P&L sur la table.
            </p>
            <div>
              <div className="lx-label" style={{ marginBottom: 12 }}>Travail en cours avec</div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.3 }}>
                Plusieurs marques DTC, un acteur SaaS B2B en santé, deux maisons indépendantes en Europe et quatre autres clients sous NDA.
              </div>
              <div style={{ marginTop: 22, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Btn to="/work" magnetic>Voir nos réalisations</Btn>
                <Btn to="/services" variant="ghost">Ce que nous faisons</Btn>
              </div>
            </div>
          </div>
        </div>
        <div style={{ position: "sticky", top: 120 }}>
          <div className="mono" style={{ color: "var(--muted)", marginBottom: 12 }}>↳ Ce trimestre</div>
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-2)" }}>
            <li>03 lancements livrés</li>
            <li>2,4 M$ de pipeline client ouvert</li>
            <li>1 bourse attribuée</li>
            <li>0 appel d'offres traité</li>
          </ul>
          <div style={{ marginTop: 36 }}>
            <MediaPh ratio="3/4" accent="acid" label="Studio · Cedar Rapids / Bureau" tr="MAI 26">
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="80%" viewBox="0 0 100 100" fill="none">
                  <circle cx="50" cy="50" r="36" stroke="#0F0F0E" strokeWidth="0.6" />
                  <circle cx="50" cy="50" r="24" stroke="#0F0F0E" strokeWidth="0.6" />
                  <circle cx="50" cy="50" r="12" stroke="#0F0F0E" strokeWidth="0.6" />
                  <path d="M50 4 V96 M4 50 H96" stroke="#0F0F0E" strokeWidth="0.4" />
                </svg>
              </div>
            </MediaPh>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeChapterHow() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--cream-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 120 }}>
          <div className="eyebrow-num">Chapitre 01</div>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 7vw, 132px)", lineHeight: 0.94, letterSpacing: "-0.02em", marginTop: 16 }}>
            Comment nous<br/>travaillons.<em style={{ color: "var(--acid-deep)" }}>—</em>
          </h2>
          <p className="body-lg" style={{ marginTop: 24, maxWidth: 480 }}>
            Trois modes. Nous en choisissons un avec vous dès la semaine zéro. Nous sommes honnêtes sur celui dont vous avez réellement besoin.
          </p>
        </div>
        <div>
          {[
            { n: "i.", t: "Opérer", lead: "Nous prenons en charge une fonction pour vous — performance, cycle de vie, contenu — en équipe intégrée. Canaux Slack, P&L hebdomadaire, vos outils, votre stack.", dur: "Forfait trimestriel", price: "à partir de 22 k$/mois" },
            { n: "ii.", t: "Construire", lead: "Un projet à périmètre fixe : refonte de marque, lancement, système d'acquisition, modèle d'attribution. Nous livrons, nous formons votre équipe, elle prend la main.", dur: "8 à 14 semaines", price: "à partir de 60 k$ forfaitaires" },
            { n: "iii.", t: "Intégrer", lead: "Nous nous installons dans vos bureaux pour un sprint. L'un de nos associés s'assoit à côté de votre équipe pendant 90 jours. Engagement fort, vitesse soutenue.", dur: "Sprints de 90 jours", price: "à partir de 180 k$" },
          ].map((m, i) => (
            <HowRow key={i} m={m} />
          ))}
        </div>
      </div>
    </section>
  );
}

function HowRow({ m }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "grid", gridTemplateColumns: "80px 1fr 200px", gap: 32, padding: "44px 0", borderTop: "1px solid var(--rule)", alignItems: "start", cursor: "default", transition: "padding .35s var(--ease)", paddingLeft: hover ? 16 : 0 }}
    >
      <div className="mono" style={{ color: "var(--muted)", paddingTop: 6 }}>{m.n}</div>
      <div>
        <h3 className="serif" style={{ fontSize: 56, lineHeight: 1.0, letterSpacing: "-0.02em", marginBottom: 16 }}>
          <span style={{ color: hover ? "var(--ink)" : "var(--ink)" }}>{m.t}</span>
          <span style={{ marginLeft: 14, color: hover ? "var(--acid-deep)" : "transparent", transition: "color .3s var(--ease)", fontStyle: "italic", fontSize: 28 }}>↳ chez vous, dans votre stack</span>
        </h3>
        <p className="body-lg" style={{ maxWidth: 540 }}>{m.lead}</p>
      </div>
      <div style={{ paddingTop: 6 }}>
        <div className="lx-label" style={{ marginBottom: 6 }}>{m.dur}</div>
        <div className="serif" style={{ fontSize: 22 }}>{m.price}</div>
      </div>
    </div>
  );
}

function HomeChapterWho() {
  const featured = CASES.slice(0, 4);
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 140, paddingBottom: 80 }}>
      <div className="page section-head" style={{ marginBottom: 80, padding: 0 }}>
        <div>
          <div className="eyebrow-num">Chapitre 02</div>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 7vw, 132px)", lineHeight: 0.94, letterSpacing: "-0.02em", marginTop: 16 }}>
            Avec qui nous<br/>travaillons.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Nous disons oui environ quatre fois par an. De la série A à la série C, parfois des spin-outs cotés, parfois du pré-lancement quand le fondateur reste en mémoire.
          </p>
          <Link to="/work" className="ilink mono" style={{ marginTop: 18, display: "inline-block" }}>↳ Toutes les 38 études de cas</Link>
        </div>
      </div>

      <div className="page" style={{ display: "grid", gridTemplateColumns: "5fr 4fr", gap: 24, marginBottom: 24 }}>
        <CaseCard c={featured[0]} large />
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <CaseCard c={featured[1]} />
          <CaseCard c={featured[2]} small />
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "3fr 5fr 3fr", gap: 24 }}>
        <CaseCard c={featured[3]} small />
        <CaseCard c={featured[0]} medium altLayout />
        <CaseCard c={featured[1]} small numeric />
      </div>
    </section>
  );
}

function CaseCard({ c, large = false, small = false, medium = false, altLayout = false, numeric = false }) {
  const ratio = large ? "5/4" : small ? "4/3" : medium ? "16/10" : "3/2";
  const accent = c.accent;
  return (
    <Link to={`/work/${c.slug}`} className="img-hover" style={{ display: "block", textDecoration: "none" }}>
      <div style={{ position: "relative" }}>
        <MediaPh ratio={ratio} accent={accent} label={c.client} tr={c.year}>
          {numeric ? (
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
              <div className="serif" style={{ fontSize: 88, lineHeight: 1, color: "var(--cream)" }}>+340%</div>
              <div className="mono" style={{ color: "rgba(242,237,228,0.7)", marginTop: 8 }}>Taux de rachat, 12 mois</div>
            </div>
          ) : (
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <CaseGlyph slug={c.slug} accent={accent} />
            </div>
          )}
        </MediaPh>
      </div>
      <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", gap: 16, alignItems: "start" }}>
        <div>
          <div className="mono" style={{ color: "var(--muted)", marginBottom: 6 }}>{c.industry} · {c.services[0]}</div>
          <h3 className="serif" style={{ fontSize: large ? 40 : small ? 22 : 28, lineHeight: 1.08, letterSpacing: "-0.01em", maxWidth: 520 }}>
            {c.title}
          </h3>
        </div>
        <span className="mono" style={{ color: "var(--muted)", whiteSpace: "nowrap", paddingTop: 6 }}>↳ Lire</span>
      </div>
    </Link>
  );
}

function CaseGlyph({ slug, accent }) {
  // CSS-drawn unique mark for each case
  const fg = accent === "acid" || accent === "cream" ? "#0F0F0E" : "#F2EDE4";
  if (slug === "olvera") {
    return (
      <svg width="60%" viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="34" stroke={fg} strokeWidth="0.6" />
        <circle cx="50" cy="50" r="22" stroke={fg} strokeWidth="0.6" />
        <text x="50" y="55" textAnchor="middle" fontFamily="Instrument Serif" fontSize="28" fill={fg}>A</text>
      </svg>
    );
  }
  if (slug === "halden") {
    return (
      <svg width="60%" viewBox="0 0 100 100" fill="none">
        <circle cx="30" cy="65" r="18" stroke={fg} strokeWidth="1" />
        <circle cx="70" cy="65" r="18" stroke={fg} strokeWidth="1" />
        <path d="M30 65 L50 35 L70 65 L48 65 L40 50" stroke={fg} strokeWidth="1" fill="none" />
      </svg>
    );
  }
  if (slug === "pierpoint") {
    return (
      <svg width="60%" viewBox="0 0 100 100" fill="none">
        <path d="M10 70 L30 50 L45 60 L60 30 L75 50 L90 35" stroke="#0F0F0E" strokeWidth="1.5" fill="none" />
        <circle cx="60" cy="30" r="3" fill="#0F0F0E" />
      </svg>
    );
  }
  if (slug === "fernweh") {
    return (
      <svg width="60%" viewBox="0 0 100 100" fill="none">
        <text x="50" y="60" textAnchor="middle" fontFamily="Instrument Serif" fontStyle="italic" fontSize="48" fill={fg}>C.</text>
      </svg>
    );
  }
  return (
    <svg width="50%" viewBox="0 0 100 100" fill="none">
      <rect x="20" y="20" width="60" height="60" stroke={fg} strokeWidth="0.6" />
      <path d="M20 20 L80 80 M80 20 L20 80" stroke={fg} strokeWidth="0.6" />
    </svg>
  );
}

function HomeChapterWhat() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal dark" style={{ paddingTop: 140, paddingBottom: 140 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start", marginBottom: 100 }}>
        <div>
          <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>Chapitre 03</div>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 7vw, 132px)", lineHeight: 0.94, letterSpacing: "-0.02em", marginTop: 16, color: "var(--cream)" }}>
            Ce que nous<br/>produisons.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 520, color: "rgba(242,237,228,0.85)" }}>
            Six pratiques. Pas d'équipe « innovation », pas de promesse de « transformation ». Si nous ne pouvons pas écrire un livrable noir sur blanc, ce n'est pas un service.
          </p>
        </div>
      </div>

      <div className="page">
        {SERVICES.map((s, i) => (
          <ServiceRow key={s.slug} s={s} last={i === SERVICES.length - 1} />
        ))}
      </div>
    </section>
  );
}

function ServiceRow({ s, last }) {
  const [hover, setHover] = useState(false);
  return (
    <Link to={`/services/${s.slug}`} style={{ display: "block", borderTop: "1px solid rgba(242,237,228,0.18)", borderBottom: last ? "1px solid rgba(242,237,228,0.18)" : "none", padding: "32px 0", position: "relative", overflow: "hidden" }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div style={{ display: "grid", gridTemplateColumns: "80px 1.4fr 2fr 200px 60px", gap: 32, alignItems: "center", transition: "transform .4s var(--ease)", transform: hover ? "translateX(20px)" : "translateX(0)" }}>
        <div className="mono" style={{ color: "rgba(242,237,228,0.5)" }}>{s.num}</div>
        <h3 className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em", color: hover ? "var(--acid)" : "var(--cream)", transition: "color .3s var(--ease)" }}>
          {s.title}
        </h3>
        <p className="body" style={{ color: "rgba(242,237,228,0.75)", maxWidth: 520 }}>{s.lead}</p>
        <div className="mono" style={{ color: "rgba(242,237,228,0.6)" }}>{s.starts}</div>
        <div className="serif" style={{ fontSize: 32, color: hover ? "var(--acid)" : "var(--cream)" }}>→</div>
      </div>
    </Link>
  );
}

// Interactive proof — scrubbable timeline of metrics
function HomeProof() {
  const ref = useReveal();
  const [t, setT] = useState(60);
  const data = [
    { wk: 0, rev: 480, cac: 64, repeat: 12 },
    { wk: 2, rev: 540, cac: 60, repeat: 14 },
    { wk: 4, rev: 612, cac: 52, repeat: 16 },
    { wk: 6, rev: 740, cac: 44, repeat: 19 },
    { wk: 8, rev: 880, cac: 38, repeat: 23 },
    { wk: 10, rev: 1100, cac: 33, repeat: 27 },
    { wk: 12, rev: 1340, cac: 29, repeat: 31 },
    { wk: 14, rev: 1620, cac: 26, repeat: 35 },
    { wk: 16, rev: 1880, cac: 24, repeat: 38 },
    { wk: 18, rev: 2100, cac: 23, repeat: 40 },
    { wk: 20, rev: 2400, cac: 22, repeat: 41 },
  ];
  const idx = Math.min(data.length - 1, Math.max(0, Math.round((t / 100) * (data.length - 1))));
  const d = data[idx];
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 140, paddingBottom: 140 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 120 }}>
          <div className="eyebrow">↳ Interactif · faites glisser la frise</div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 5.6vw, 96px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 20 }}>
            Un trimestre, un client,<br/>aucune slide.<em style={{ color: "var(--acid-deep)" }}>—</em>
          </h2>
          <p className="body-lg" style={{ marginTop: 24, maxWidth: 460 }}>
            Vingt semaines d'un client DTC anonymisé, semaine après semaine. Faites glisser le curseur, observez les chiffres. Voici à quoi ressemble chaque vendredi chez nous.
          </p>
          <div style={{ marginTop: 36 }}>
            <Btn to="/work/olvera">Lire l'étude de cas complète</Btn>
          </div>
        </div>

        <div className="card" style={{ background: "var(--ink)", color: "var(--cream)", padding: 36, borderColor: "var(--ink)" }}>
          <div className="flex justify-between items-center" style={{ marginBottom: 28 }}>
            <div>
              <div className="lx-label" style={{ color: "rgba(242,237,228,0.6)", marginBottom: 6 }}>Client confidentiel · DTC Café</div>
              <div className="serif" style={{ fontSize: 24 }}>Semaine {d.wk} sur 20</div>
            </div>
            <div className="mono" style={{ color: "var(--acid)" }}>● FICHIER DE PROJET LIVE</div>
          </div>

          {/* big tickers */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginBottom: 32 }}>
            <ProofMetric label="Revenu trimestriel (run-rate)" value={`$${d.rev.toLocaleString()}k`} delta={`+${Math.round((d.rev/480 - 1) * 100)}%`} />
            <ProofMetric label="CAC payant" value={`$${d.cac}`} delta={`-${Math.round((1 - d.cac/64) * 100)}%`} good />
            <ProofMetric label="Taux de rachat" value={`${d.repeat}%`} delta={`+${d.repeat - 12}pp`} />
          </div>

          {/* sparkline */}
          <ProofChart data={data} idx={idx} />

          {/* slider */}
          <div style={{ marginTop: 28 }}>
            <div className="flex justify-between" style={{ fontFamily: "var(--mono)", fontSize: 11, color: "rgba(242,237,228,0.6)", marginBottom: 8 }}>
              <span>SEM 0</span><span>FAIRE GLISSER →</span><span>SEM 20</span>
            </div>
            <input
              type="range" min="0" max="100" value={t}
              onChange={(e) => setT(+e.target.value)}
              aria-label="Curseur de progression de la frise"
              style={{ width: "100%", accentColor: "var(--acid)" }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function ProofMetric({ label, value, delta, good }) {
  return (
    <div>
      <div className="lx-label" style={{ color: "rgba(242,237,228,0.55)", marginBottom: 12 }}>{label}</div>
      <div className="serif ticker" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em", color: "var(--cream)" }}>{value}</div>
      <div className="mono" style={{ color: "var(--acid)", marginTop: 8 }}>{delta}</div>
    </div>
  );
}

function ProofChart({ data, idx }) {
  const W = 600, H = 140;
  const max = Math.max(...data.map(d => d.rev));
  const pts = data.map((d, i) => {
    const x = (i / (data.length - 1)) * W;
    const y = H - (d.rev / max) * (H - 10) - 4;
    return [x, y];
  });
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]} ${p[1]}` : `L${p[0]} ${p[1]}`)).join(" ");
  const cx = pts[idx][0], cy = pts[idx][1];
  return (
    <div style={{ position: "relative" }}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: 140 }}>
        <defs>
          <linearGradient id="lg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="oklch(88% 0.21 128)" stopOpacity="0.4" />
            <stop offset="100%" stopColor="oklch(88% 0.21 128)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={`${path} L${W} ${H} L0 ${H} Z`} fill="url(#lg)" />
        <path d={path} fill="none" stroke="oklch(88% 0.21 128)" strokeWidth="2" />
        <line x1={cx} x2={cx} y1="0" y2={H} stroke="rgba(242,237,228,0.3)" strokeDasharray="2 2" />
        <circle cx={cx} cy={cy} r="6" fill="oklch(88% 0.21 128)" stroke="#0F0F0E" strokeWidth="2" />
      </svg>
    </div>
  );
}

function HomeManifesto() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--cream-2)", paddingTop: 120, paddingBottom: 120, borderTop: "1px solid var(--rule)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "200px 1fr 200px", gap: 32 }}>
        <div className="mono" style={{ color: "var(--muted)" }}>↳ Ce que nous croyons</div>
        <div>
          <ol style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 36 }}>
            {[
              "La plupart des problèmes marketing sont des problèmes de positionnement déguisés en problèmes d'acquisition payante.",
              "L'attribution est un outil, pas un verdict. Arrêtez de la laisser piloter votre entreprise.",
              "Si votre marque peut être remplacée demain par celle d'un concurrent, vous n'avez pas de marque.",
              "Le meilleur investissement marketing de 2026 reste probablement vos canaux propriétaires. Oui, toujours.",
              "Les appels d'offres pilotés par les achats sélectionnent les agences les moins adaptées. Nous n'y participons pas.",
              "Une agence qui ne vous dit pas ce qu'elle ne ferait pas vous vend quelque chose dont vous n'avez pas besoin.",
            ].map((t, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 24, paddingBottom: 24, borderBottom: "1px solid var(--rule-soft)" }}>
                <span className="mono" style={{ color: "var(--muted)" }}>0{i+1}</span>
                <p className="serif" style={{ fontSize: "clamp(24px, 2.6vw, 40px)", lineHeight: 1.18, letterSpacing: "-0.01em" }}>{t}</p>
              </li>
            ))}
          </ol>
        </div>
        <div></div>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <section style={{ background: "var(--ink)", color: "var(--cream)", padding: "140px 0 80px", position: "relative", overflow: "hidden" }}>
      <div className="page" style={{ position: "relative" }}>
        <div className="mono" style={{ color: "var(--acid)", marginBottom: 24 }}>↳ Postulez pour travailler avec nous</div>
        <h2 className="serif" style={{ fontSize: "clamp(72px, 10vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.025em" }}>
          Nous prenons <em style={{ color: "var(--acid)" }}>quatre</em><br/>
          nouveaux engagements par an.<br/>
          <span style={{ opacity: 0.4 }}>Deux créneaux disponibles en 2026.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginTop: 80, alignItems: "end" }}>
          <p className="body-lg" style={{ maxWidth: 520, color: "rgba(242,237,228,0.8)" }}>
            Envoyez-nous un paragraphe à propos de votre activité. Pas un brief, pas un appel d'offres. Un paragraphe. Nous répondons sous 48 heures, ou nous vous disons que ce n'est pas pour nous.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn to="/contact" variant="acid" magnetic>Écrivez-nous</Btn>
            <Btn to="/work" variant="ghost">Voir d'abord nos réalisations</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home, CaseGlyph });