// SERVICES (index) + SERVICE DETAIL (Performance Marketing)
const { useState, useEffect, useRef } = React;
const { Link, Btn, MediaPh, useReveal, SERVICES, TEAM, CASES } = window;
const CaseGlyph = window.CaseGlyph;

function Services() {
  return (
    <main className="page-enter">
      <ServicesHero />
      <ServicesList />
      <ServicesProcess />
      <ServicesCTA />
    </main>
  );
}

function ServicesHero() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 180, paddingBottom: 80 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="eyebrow">↳ Ce que nous faisons</div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9.4vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            Six pratiques.<br/>
            Un seul système <em style={{ color: "var(--acid-deep)" }}>opérationnel</em>.
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ maxWidth: 520 }}>
            Chaque pratique a un responsable nommé, une charte écrite et une liste de livrables que nous inscrivons au contrat. Nous ne vendons ni « transformation », ni « innovation », ni aucun autre terme qui ne correspond pas à un livrable.
          </p>
          <div className="hairline" style={{ margin: "32px 0" }} />
          <div className="mono" style={{ color: "var(--muted)" }}>
            Cadrage en cours pour les missions du T3 / T4 2026.<br/>
            Durée moyenne : 14 mois · NPS : 76 · Créneaux : 2 restants
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesList() {
  return (
    <section style={{ borderTop: "1px solid var(--rule)", padding: 0 }}>
      <div className="page" style={{ padding: 0 }}>
        {SERVICES.map((s, i) => <ServiceListRow key={s.slug} s={s} idx={i} />)}
      </div>
    </section>
  );
}

function ServiceListRow({ s, idx }) {
  const [hover, setHover] = useState(false);
  const accent = idx % 3 === 0 ? "var(--acid)" : idx % 3 === 1 ? "var(--ox)" : "var(--cobalt)";
  return (
    <Link to={`/services/${s.slug}`}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", position: "relative", borderBottom: "1px solid var(--rule)", overflow: "hidden" }}>
      <div className="page" style={{ padding: "0 var(--page-x)", display: "grid", gridTemplateColumns: "120px 1fr 1.4fr 200px 80px", gap: 32, alignItems: "center", padding: "44px var(--page-x)", transition: "background .3s var(--ease), padding .35s var(--ease)", background: hover ? "var(--ink)" : "transparent", color: hover ? "var(--cream)" : "var(--ink)" }}>
        <div className="mono" style={{ color: hover ? "rgba(242,237,228,0.6)" : "var(--muted)" }}>
          {s.num} · Pratique
        </div>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 4.6vw, 84px)", lineHeight: 1, letterSpacing: "-0.02em" }}>
          {s.title}
          {hover && <span style={{ color: accent, fontStyle: "italic", marginLeft: 12, fontSize: "60%" }}>—</span>}
        </h2>
        <p className="body" style={{ color: hover ? "rgba(242,237,228,0.85)" : "var(--ink-2)", maxWidth: 520 }}>{s.lead}</p>
        <div className="mono" style={{ color: hover ? "rgba(242,237,228,0.7)" : "var(--muted)" }}>À partir de {s.starts}</div>
        <div className="serif" style={{ fontSize: 32, textAlign: "right", color: hover ? accent : "var(--ink)" }}>→</div>
      </div>
    </Link>
  );
}

function ServicesProcess() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--cream-2)", padding: "140px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 120 }}>
          <div className="eyebrow-num">Le déroulé d'une mission</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 84px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Six semaines<br/>du oui<br/>à la mise en ligne.
          </h2>
        </div>
        <div>
          {[
            { w: "Semaine 0", t: "Un paragraphe, un appel, un test d'adéquation.", d: "Vingt minutes en visioconférence. Nous vous disons par écrit si nous sommes le bon studio. Si nous ne le sommes pas, nous vous orientons souvent vers quelqu'un qui l'est." },
            { w: "Semaine 1", t: "Découverte à livre ouvert.", d: "Nous venons chez vous (ou vous venez à Cedar Rapids). Deux jours d'entretiens, de revue de données et de sessions de travail. Pas de slide — un brief Notion d'ici vendredi." },
            { w: "Semaine 2", t: "Stratégie et feuille de route.", d: "Nous livrons un point de vue de positionnement, un plan à 90 jours et un P&L cible. Vous le challengez. Nous le réécrivons une fois." },
            { w: "Semaine 3", t: "Lancement de la production.", d: "Votre équipe dédiée est nommée. Canaux Slack, vos outils, notre plateforme. Premiers livrables en cours." },
            { w: "Semaines 4–5", t: "Premières mises en ligne.", d: "Créations publicitaires en ligne. Scénarios cycle de vie armés. Calendrier éditorial calé. Dashboard branché à votre entrepôt de données." },
            { w: "Semaine 6+", t: "Opérer, mesurer, capitaliser.", d: "Revue hebdomadaire. Stratégie mensuelle. P&L trimestriel. Feuille de route ouverte. Nous itérons, nous ne répétons pas." },
          ].map((s, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, padding: "32px 0", borderTop: "1px solid var(--rule)" }}>
              <div className="mono" style={{ color: "var(--muted)", paddingTop: 6 }}>{s.w}</div>
              <div>
                <h3 className="serif" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing: "-0.01em" }}>{s.t}</h3>
                <p className="body-lg" style={{ marginTop: 12, maxWidth: 620 }}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesCTA() {
  return (
    <section style={{ padding: "100px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end" }}>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em" }}>
          Vous ne savez pas<br/>quelle pratique vous convient ?
        </h2>
        <div>
          <p className="body-lg" style={{ marginBottom: 20, maxWidth: 480 }}>
            Nous sommes souvent recrutés pour une pratique et nous finissons par en exercer une autre. Un appel de 30 minutes est le moyen le plus rapide de cerner la vôtre.
          </p>
          <Btn to="/contact" variant="acid" magnetic>Réserver l'appel</Btn>
        </div>
      </div>
    </section>
  );
}

// =========================================================
// SERVICE DETAIL — built fully for "Performance Marketing"
// Generic fallback for other services
// =========================================================
function ServiceDetail({ slug }) {
  const s = SERVICES.find(x => x.slug === slug);
  if (!s) return <NotFound />;
  if (slug === "performance") return <PerformanceDetail s={s} />;
  return <GenericServiceDetail s={s} />;
}

function PerformanceDetail({ s }) {
  return (
    <main className="page-enter">
      <PerfHero s={s} />
      <PerfProblem />
      <PerfApproach />
      <PerfDeliverables />
      <PerfTeam />
      <PerfRelated />
      <PerfPricing />
      <ServicesCTA />
    </main>
  );
}

function PerfHero({ s }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 180, paddingBottom: 80 }}>
      <div className="page">
        <div className="flex items-center gap-3" style={{ marginBottom: 28 }}>
          <Link to="/services" className="mono ilink">↳ Services</Link>
          <span className="mono" style={{ color: "var(--muted)" }}>·</span>
          <span className="mono" style={{ color: "var(--muted)" }}>{s.num} · Pratique</span>
        </div>
        <h1 className="serif" style={{ fontSize: "clamp(72px, 11vw, 224px)", lineHeight: 0.9, letterSpacing: "-0.025em", maxWidth: "12ch" }}>
          Marketing à la<br/>performance<em style={{ color: "var(--acid-deep)" }}>—</em>
        </h1>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 60, marginTop: 80, alignItems: "start" }}>
          <p className="serif" style={{ fontSize: 32, lineHeight: 1.15, letterSpacing: "-0.01em", textWrap: "pretty" }}>
            Une acquisition payante qui respecte votre marge. Nous pilotons le média comme des opérateurs, pas comme des acheteurs média.
          </p>
          <div>
            <div className="lx-label" style={{ marginBottom: 10 }}>Responsable</div>
            <div className="serif" style={{ fontSize: 22 }}>Rune Halvorsen</div>
            <div className="body-sm">Directeur Performance · Oslo · 9 ans</div>
            <div className="lx-label" style={{ marginTop: 20, marginBottom: 10 }}>Taille de l'équipe</div>
            <div className="serif" style={{ fontSize: 22 }}>4 à 7 personnes</div>
            <div className="body-sm">Stratège, responsable canal, directeur de création, analyste (+ spécialistes au besoin)</div>
          </div>
          <div>
            <div className="lx-label" style={{ marginBottom: 10 }}>Engagement</div>
            <div className="serif" style={{ fontSize: 22 }}>Forfait trimestriel</div>
            <div className="body-sm">12 mois en moyenne. Jamais de reconduction tacite. Nous le méritons.</div>
            <div className="lx-label" style={{ marginTop: 20, marginBottom: 10 }}>À partir de</div>
            <div className="serif" style={{ fontSize: 22 }}>28 k$ / mois</div>
            <div className="body-sm">Média non inclus. Nous ne prenons aucune commission d'agence sur les dépenses.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PerfProblem() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--ink)", color: "var(--cream)", padding: "120px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
        <div>
          <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>Le problème</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16, color: "var(--cream)" }}>
            La plupart du marketing à la performance est un théâtre de marge de contribution.
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <p className="body-lg" style={{ color: "rgba(242,237,228,0.85)" }}>
            Les agences qui vous annonçaient un « ROAS x9 » ne mentaient pas. Elles mesuraient simplement quelque chose qui n'a aucune pertinence. Le ROAS ignore le coût des marchandises, la logistique, les retours et le comportement de cohorte du client que vous venez d'acquérir.
          </p>
          <p className="body-lg" style={{ color: "rgba(242,237,228,0.85)" }}>
            Pendant ce temps, les fenêtres d'attribution se sont silencieusement raccourcies, le cookie s'est éteint en silence, la qualité du signal Meta s'est dégradée en silence, et le reporting que la plupart des agences envoient encore à leurs clients relève de la fiction, en silence.
          </p>
          <p className="body-lg" style={{ color: "rgba(242,237,228,0.85)" }}>
            Nous étions fatigués d'assister à cela. Notre pratique performance est donc bâtie autour de la marge de contribution, d'une mesure mixte, et d'un pipeline créatif qui livre du volume sans perdre en goût. Nous apportons un regard d'opérateur à un rôle d'acheteur.
          </p>
        </div>
      </div>
    </section>
  );
}

function PerfApproach() {
  const ref = useReveal();
  const items = [
    { n: "i.", t: "La marge de contribution d'abord.", d: "Chaque canal, chaque création, chaque campagne remonte à la marge de contribution, pas au ROAS. Vos données comptables vivent dans notre modèle dès la première semaine." },
    { n: "ii.", t: "Architecture de canaux, pas achat de canaux.", d: "Nous concevons le système — le rôle de chaque canal, l'endroit où le budget flexe, ce qui relève de l'acquisition et ce qui n'est que bruit de mesure. Ensuite, nous achetons." },
    { n: "iii.", t: "La création comme pipeline.", d: "Nous livrons 60 à 120 variantes publicitaires par mois et par canal majeur — produites par notre pratique créative interne, ni freelances, ni contenu IA bas de gamme. Testées dans un vrai cadre, pas au feeling." },
    { n: "iv.", t: "Mesure en méthodes mixtes.", d: "Le MMM comme socle. Geo-lift et holdouts pour les grands arbitrages. MTA pour les ajustements tactiques, avec le scepticisme qui s'impose. Nous vous disons ce que chaque méthode peut et ne peut pas voir." },
    { n: "v.", t: "Revue d'affaires du vendredi.", d: "Chaque semaine, un appel de 45 minutes avec votre équipe opérationnelle. P&L à l'écran, enseignements sur la table, plan de la semaine suivante consigné par écrit. Jamais de slides de statut." },
  ];
  return (
    <section ref={ref} className="reveal" style={{ padding: "140px 0" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">Notre approche</div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 5.6vw, 96px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Cinq principes<br/>qui s'incarnent<br/>chaque semaine.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 480 }}>
            Pas une méthodologie. Pas un framework. Les cinq habitudes opérationnelles que nous appliquons à chaque compte, chaque vendredi, chaque trimestre.
          </p>
        </div>
      </div>
      <div className="page">
        {items.map((it, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 2fr", gap: 32, padding: "44px 0", borderTop: "1px solid var(--rule)", alignItems: "start" }}>
            <div className="mono" style={{ color: "var(--muted)", paddingTop: 6 }}>{it.n}</div>
            <h3 className="serif" style={{ fontSize: 40, lineHeight: 1.0, letterSpacing: "-0.02em" }}>{it.t}</h3>
            <p className="body-lg" style={{ maxWidth: 620 }}>{it.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function PerfDeliverables() {
  const ref = useReveal();
  const groups = [
    { h: "Stratégie + planification", items: ["Document d'architecture de canaux", "Modèle P&L en marge de contribution", "Plan budgétaire trimestriel + matrice de flex", "Architecture d'audience et d'offres"] },
    { h: "Création", items: ["60 à 120 unités publicitaires / canal / mois", "Cadre de test créatif", "Bibliothèque d'assets conformes à la marque", "Statique + motion + UGC + influence"] },
    { h: "Achat + opérations", items: ["Gestion quotidienne des comptes média", "Opérations d'enchères et de budgets", "Mise à jour P&L hebdomadaire", "Revue conformité + brand safety"] },
    { h: "Mesure", items: ["Modèle marketing-mix (rafraîchi chaque mois)", "Tests geo-lift / holdout, chaque trimestre", "Dashboard MTA, hebdomadaire", "Archive d'apprentissages annuelle"] },
  ];
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--cream-2)", padding: "140px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">Ce que vous obtenez</div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 5.6vw, 96px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Des livrables,<br/>au contrat.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 480 }}>
            Chaque forfait livre une liste fixe d'artefacts chaque mois. Rien n'est laissé en « meilleurs efforts ». Ce que nous ne livrons pas, nous ne le facturons pas.
          </p>
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
        {groups.map(g => (
          <div key={g.h} style={{ background: "var(--cream)", padding: 28, border: "1px solid var(--rule)" }}>
            <div className="lx-label" style={{ marginBottom: 16 }}>{g.h}</div>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
              {g.items.map((x, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 10, alignItems: "start" }}>
                  <span className="mono" style={{ color: "var(--acid-deep)" }}>↳</span>
                  <span className="body">{x}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function PerfTeam() {
  const lineup = TEAM.filter(p => ["Rune Halvorsen", "Lior Ben-Ari", "Pilar Quesada", "Theo Krammer"].includes(p.name));
  return (
    <section style={{ padding: "140px 0" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">Qui s'en charge</div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 5.6vw, 96px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Des seniors,<br/>qui font le travail.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 480 }}>
            L'équipe que vous rencontrez est celle qui pilote votre compte. Ancienneté médiane de cette équipe : 11 ans. Aucun coordinateur junior ne rédigera votre stratégie en coulisses.
          </p>
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
        {lineup.map((p, i) => {
          const bg = p.accent === "acid" ? "var(--acid)" : p.accent === "ox" ? "var(--ox)" : p.accent === "cobalt" ? "var(--cobalt)" : "var(--ink)";
          const fg = p.accent === "acid" ? "var(--ink)" : "var(--cream)";
          return (
            <div key={p.name}>
              <div style={{ aspectRatio: "1/1", background: bg, color: fg, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 4 }}>
                <span className="serif" style={{ fontSize: 88 }}>{p.name.split(" ").map(n => n[0]).join("")}</span>
              </div>
              <div style={{ marginTop: 14 }}>
                <div className="serif" style={{ fontSize: 22 }}>{p.name}</div>
                <div className="body-sm">{p.role}</div>
                <div className="mono" style={{ marginTop: 6, color: "var(--muted)" }}>{p.city} · {p.years} ans</div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function PerfRelated() {
  const related = CASES.filter(c => c.services.includes("Performance Marketing") || c.slug === "olvera" || c.slug === "northwind");
  return (
    <section style={{ background: "var(--ink)", color: "var(--cream)", padding: "120px 0" }}>
      <div className="page" style={{ marginBottom: 48 }}>
        <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>Réalisations liées</div>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16, color: "var(--cream)" }}>
          Là où cette pratique s'est manifestée.
        </h2>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {related.slice(0, 3).map(c => (
          <Link key={c.slug} to={`/work/${c.slug}`} className="img-hover" style={{ display: "block" }}>
            <MediaPh ratio="4/5" accent={c.accent} label={c.client} tr={c.year}>
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <CaseGlyph slug={c.slug} accent={c.accent} />
              </div>
            </MediaPh>
            <h3 className="serif" style={{ fontSize: 24, marginTop: 16, lineHeight: 1.15, color: "var(--cream)" }}>{c.title}</h3>
            <div className="mono" style={{ color: "rgba(242,237,228,0.55)", marginTop: 8 }}>↳ {c.industry}</div>
          </Link>
        ))}
      </div>
    </section>
  );
}

function PerfPricing() {
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60 }}>
        <div>
          <div className="eyebrow-num">Tarification</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Un palier.<br/>Un chiffre.
          </h2>
          <p className="body-lg" style={{ marginTop: 24, maxWidth: 460 }}>
            Nous n'avons ni offre d'entrée, ni palier « pro », ni devis entreprise qui dépendrait du fait que vous portiez ou non des chaussures en réunion. Le forfait, c'est le forfait.
          </p>
        </div>
        <div style={{ background: "var(--cream-2)", padding: 40, border: "1px solid var(--rule)" }}>
          <div className="flex items-center justify-between" style={{ marginBottom: 24 }}>
            <div className="lx-label">Performance · Forfait</div>
            <span className="pill acid"><span className="dot" />Le plus reconduit</span>
          </div>
          <div className="serif" style={{ fontSize: 88, lineHeight: 1, letterSpacing: "-0.02em" }}>28<span style={{ fontSize: 32 }}>k$</span><span className="body-sm" style={{ marginLeft: 10 }}>/ mois</span></div>
          <div className="hairline" style={{ margin: "28px 0" }} />
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            {["Équipe de 4 à 7 personnes", "Jusqu'à 4 canaux payants", "60 à 120 unités créatives / mois", "Revue d'affaires hebdomadaire", "Rafraîchissement MMM trimestriel", "Pleine propriété des données"].map((x, i) => (
              <li key={i} className="body"><span className="mono text-acid" style={{ marginRight: 10 }}>↳</span>{x}</li>
            ))}
          </ul>
          <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
            <Btn to="/contact" variant="acid">Nous contacter</Btn>
            <Btn to="/pricing" variant="ghost">Toute la tarification</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

function GenericServiceDetail({ s }) {
  return (
    <main className="page-enter">
      <section style={{ paddingTop: 180, paddingBottom: 80 }}>
        <div className="page">
          <Link to="/services" className="mono ilink">↳ Services</Link>
          <h1 className="serif" style={{ fontSize: "clamp(72px, 10vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            {s.title}<em style={{ color: "var(--acid-deep)" }}>—</em>
          </h1>
          <p className="body-lg" style={{ maxWidth: 640, marginTop: 32, fontSize: 24 }}>{s.lead}</p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24, marginTop: 60 }}>
            {s.deliverables.map((d, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div className="mono" style={{ color: "var(--muted)", marginBottom: 8 }}>0{i+1}</div>
                <div className="serif" style={{ fontSize: 28 }}>{d}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 60 }}>
            <Btn to="/services/performance" variant="ghost">↳ Voir une page service entièrement construite (Performance)</Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Services = Services;
window.ServiceDetail = ServiceDetail;