/* global React, Wordmark, AppIcon, EightCratesSvg, Arrow, CheckGlyph */

const { useState, useEffect } = React;

/* -------------------------------------------------------------------------- */
/*  Nav                                                                        */
/* -------------------------------------------------------------------------- */

function Nav({ sticky = true, withDot = false }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav
      style={{
        position: sticky ? "sticky" : "relative",
        top: 0,
        zIndex: 50,
        background: scrolled ? "rgba(244,236,215,0.92)" : "transparent",
        backdropFilter: scrolled ? "saturate(180%) blur(12px)" : "none",
        WebkitBackdropFilter: scrolled ? "saturate(180%) blur(12px)" : "none",
        borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
        transition: "background 200ms, border 200ms",
      }}
    >
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 32px" }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <AppIcon size={36} variant="primary" />
          <Wordmark size={28} withDot={withDot} />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <a href="#comment" className="navlink">Comment ça marche</a>
          <a href="#calcul" className="navlink">Le calcul</a>
          <a href="#qui" className="navlink">Pour qui</a>
          <a href="#temoignages" className="navlink">Avis</a>
          <span style={{ width: 14 }} />
          <a href="/app/" className="btn btn-outline btn-sm">Ouvrir l'app</a>
          <a href="/app/" className="btn btn-primary btn-sm">Essai gratuit <Arrow /></a>
        </div>
      </div>
      <style>{`
        .navlink {
          font-family: var(--sans);
          font-size: 14px;
          font-weight: 500;
          color: var(--encre-douce);
          text-decoration: none;
          padding: 8px 12px;
          border-radius: 8px;
          transition: background 140ms, color 140ms;
        }
        .navlink:hover { background: rgba(58,18,25,0.06); color: var(--bordeaux); }
        @media (max-width: 880px) {
          .navlink { display: none; }
        }
      `}</style>
    </nav>
  );
}

/* -------------------------------------------------------------------------- */
/*  Hero                                                                       */
/* -------------------------------------------------------------------------- */

const HEADLINES = {
  instrument: {
    pre: "L'instrument de l'importateur.",
    hl: <>Le vrai <em style={{ fontStyle: "italic", color: "var(--bordeaux)" }}>coût de revient</em> d'un import. <span style={{ color: "var(--or-fonce)" }}>Sur cellulaire.</span></>,
    sub: "Décrivez un produit, recevez un code SH suggéré, et calculez le coût complet d'un envoi — marchandise, transport, douane, courtage — réparti correctement entre vos produits. Envoyez la fiche d'un clic.",
  },
  import: {
    pre: "Pour les petits et moyens importateurs au Canada.",
    hl: <>L'import <em style={{ fontStyle: "italic", color: "var(--bordeaux)" }}>sans surprise.</em> Et sans Excel.</>,
    sub: "cr8up fait le calcul fastidieux à votre place : code SH par IA, douane par produit, frais répartis, prix de revente selon la marge cible. Dans l'entrepôt, en déplacement, sur votre téléphone.",
  },
  decisif: {
    pre: "Coût de revient · douane · prix de revente.",
    hl: <>Calculez le vrai coût d'un achat à l'import — <em style={{ fontStyle: "italic", color: "var(--bordeaux)" }}>en quelques touches.</em></>,
    sub: "Photo du produit, code SH proposé par IA, frais d'envoi répartis automatiquement entre tous les produits. La fiche finale part d'un clic.",
  },
};

function Hero({ headline = "instrument" }) {
  const h = HEADLINES[headline] || HEADLINES.instrument;
  return (
    <section id="top" style={{ position: "relative", overflow: "hidden", paddingTop: 40 }}>
      {/* Subtle texture: a giant 8 fading off to the right */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          right: "-12vw",
          top: "8%",
          width: "55vw",
          height: "70vw",
          maxWidth: 900,
          maxHeight: 1200,
          color: "rgba(212,160,75,0.08)",
          pointerEvents: "none",
        }}
      >
        <EightCratesSvg />
      </div>

      <div className="container" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center", paddingTop: 48, paddingBottom: 80, position: "relative" }}>
        <div>
          <div className="label">{h.pre}</div>
          <h1 className="h1-hero text-balance" style={{ marginTop: 18 }}>
            {h.hl}
          </h1>
          <p className="text-pretty text-muted" style={{ fontSize: 19, lineHeight: 1.55, marginTop: 22, maxWidth: 560 }}>
            {h.sub}
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <a href="/app/" className="btn btn-primary">Essayer gratuitement <Arrow /></a>
            <a href="#calcul" className="btn btn-outline">Voir un calcul</a>
          </div>
          <div style={{ display: "flex", gap: 20, marginTop: 36, alignItems: "center", flexWrap: "wrap" }}>
            <div className="mono" style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(26,22,18,0.5)" }}>
              <CheckGlyph color="var(--or-fonce)" /> 14 jours d'essai · sans carte
            </div>
            <div className="mono" style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(26,22,18,0.5)" }}>
              <CheckGlyph color="var(--or-fonce)" /> Conçu au Québec
            </div>
          </div>
        </div>
        <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
          <PhoneMockHero />
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          #top > .container { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 24px !important; }
        }
      `}</style>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/*  Phone Mock — used in hero                                                  */
/* -------------------------------------------------------------------------- */

function PhoneMockHero() {
  return (
    <div style={{ position: "relative", width: "min(420px, 90vw)" }}>
      {/* back card: floating quote */}
      <div
        style={{
          position: "absolute",
          left: "-32px",
          top: "20%",
          background: "var(--papier)",
          border: "1px solid var(--border)",
          borderRadius: 16,
          padding: "14px 16px",
          boxShadow: "0 18px 40px -20px rgba(47,14,22,0.25)",
          width: 220,
          zIndex: 1,
          transform: "rotate(-3deg)",
        }}
      >
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--or-fonce)", fontWeight: 500 }}>
          Code SH suggéré
        </div>
        <div style={{ fontFamily: "var(--mono)", fontWeight: 500, fontSize: 22, color: "var(--bordeaux)", marginTop: 6 }}>
          1704.90
        </div>
        <div style={{ fontSize: 11.5, color: "rgba(26,22,18,0.6)", marginTop: 2, lineHeight: 1.3 }}>
          Sucreries sans cacao
        </div>
      </div>

      {/* phone */}
      <PhoneFrame>
        <AppScreen />
      </PhoneFrame>

      {/* front card: total */}
      <div
        style={{
          position: "absolute",
          right: "-28px",
          bottom: "12%",
          background: "var(--vin-fonce)",
          color: "var(--creme)",
          borderRadius: 16,
          padding: "16px 18px",
          boxShadow: "0 24px 50px -20px rgba(47,14,22,0.5)",
          width: 200,
          zIndex: 3,
          transform: "rotate(3deg)",
        }}
      >
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(244,236,215,0.55)", fontWeight: 500 }}>
          Coût de revient · unité
        </div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 32, color: "var(--or-clair)", marginTop: 4, letterSpacing: "-0.01em" }}>
          2,84 $
        </div>
        <div style={{ fontSize: 11.5, color: "rgba(244,236,215,0.6)", marginTop: 2 }}>
          Marge 45 % → 5,15 $
        </div>
      </div>
    </div>
  );
}

function PhoneFrame({ children }) {
  return (
    <div
      style={{
        background: "var(--vin-fonce)",
        padding: 10,
        borderRadius: 44,
        boxShadow: "0 40px 80px -30px rgba(47,14,22,0.4), 0 0 0 1px rgba(58,18,25,0.12) inset",
        position: "relative",
        zIndex: 2,
        width: "min(360px, 80vw)",
        aspectRatio: "9 / 19",
        margin: "0 auto",
      }}
    >
      <div
        style={{
          background: "var(--creme)",
          borderRadius: 36,
          height: "100%",
          overflow: "hidden",
          position: "relative",
        }}
      >
        {/* status bar */}
        <div style={{ height: 26, position: "relative" }}>
          <div style={{ position: "absolute", left: "50%", top: 8, transform: "translateX(-50%)", width: 88, height: 22, background: "var(--vin-fonce)", borderRadius: 22 }} />
        </div>
        {children}
      </div>
    </div>
  );
}

function AppScreen() {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "calc(100% - 26px)" }}>
      {/* App header (vin foncé) */}
      <div style={{ background: "var(--vin-fonce)", padding: "14px 16px 16px", position: "relative" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <AppIcon size={36} variant="inverse" />
          <div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 700, color: "var(--creme)", fontSize: 16, lineHeight: 1 }}>cr8up</div>
            <div className="mono" style={{ fontSize: 8, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(244,236,215,0.55)", marginTop: 4 }}>
              Coût de revient · douane
            </div>
          </div>
        </div>
        <div style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 3, background: "var(--or)" }} />
      </div>

      {/* Body */}
      <div style={{ padding: "18px 16px", flex: 1, overflow: "hidden" }}>
        <h3 className="serif" style={{ fontSize: 22, margin: 0, color: "var(--encre)" }}>Catalogue</h3>
        <p style={{ fontSize: 11.5, color: "rgba(26,22,18,0.6)", margin: "6px 0 14px", lineHeight: 1.45 }}>
          Chaque produit est classé une seule fois. Son code SH s'applique ensuite à chaque fiche.
        </p>

        {/* Sample card */}
        <div style={{
          background: "var(--papier)",
          border: "1px solid var(--border)",
          borderRadius: 12,
          padding: "12px 12px 10px",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13, color: "var(--encre)" }}>nerds</div>
              <div className="mono" style={{ fontSize: 9.5, color: "rgba(26,22,18,0.6)", marginTop: 3, letterSpacing: "0.04em" }}>
                SH 1704.90
              </div>
            </div>
            <div className="mono" style={{
              fontSize: 8.5, letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--bordeaux)", background: "rgba(212,160,75,0.25)",
              border: "1px solid rgba(212,160,75,0.5)",
              padding: "3px 6px", borderRadius: 999, fontWeight: 500,
            }}>Moyenne</div>
          </div>
          <div style={{ fontSize: 10.5, color: "rgba(26,22,18,0.7)", marginTop: 8, lineHeight: 1.4 }}>
            Sucreries sans cacao (chocolat blanc)
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontSize: 10.5, paddingTop: 8, borderTop: "1px solid var(--border)" }}>
            <span style={{ color: "rgba(26,22,18,0.6)" }}>Taux de douane</span>
            <span style={{ color: "var(--encre)", fontWeight: 700 }}>8,0 %</span>
          </div>
        </div>

        {/* Second card */}
        <div style={{
          background: "var(--papier)",
          border: "1px solid var(--border)",
          borderRadius: 12,
          padding: "12px 12px 10px",
          marginTop: 10,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13, color: "var(--encre)" }}>turrón doux</div>
              <div className="mono" style={{ fontSize: 9.5, color: "rgba(26,22,18,0.6)", marginTop: 3, letterSpacing: "0.04em" }}>
                SH 1704.90
              </div>
            </div>
            <div className="mono" style={{
              fontSize: 8.5, letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--bordeaux)", background: "rgba(212,160,75,0.25)",
              border: "1px solid rgba(212,160,75,0.5)",
              padding: "3px 6px", borderRadius: 999, fontWeight: 500,
            }}>Espagne</div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontSize: 10.5, paddingTop: 8, borderTop: "1px solid var(--border)" }}>
            <span style={{ color: "rgba(26,22,18,0.6)" }}>Taux de douane</span>
            <span style={{ color: "var(--encre)", fontWeight: 700 }}>8,0 %</span>
          </div>
        </div>
      </div>

      {/* Bottom tab bar */}
      <div style={{
        margin: "0 12px 14px",
        padding: 6,
        background: "var(--papier)",
        border: "1px solid var(--border)",
        borderRadius: 14,
        display: "flex",
        justifyContent: "space-around",
      }}>
        {["Catalogue", "Fiche", "Historique", "Réglages"].map((l, i) => (
          <div key={l} style={{
            padding: "6px 10px",
            borderRadius: 10,
            background: i === 0 ? "rgba(212,160,75,0.25)" : "transparent",
            fontSize: 9.5,
            fontWeight: 500,
            color: i === 0 ? "var(--bordeaux)" : "rgba(26,22,18,0.55)",
          }}>{l}</div>
        ))}
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/*  Comment ça marche                                                          */
/* -------------------------------------------------------------------------- */

function Comment() {
  const steps = [
    {
      n: "01",
      title: "Décrivez votre produit.",
      body: "Photo + deux ou trois mots. L'IA propose un code SH douanier — vous validez en une touche. Le produit entre au catalogue, classé pour toujours.",
      visual: <StepVisualOne />,
    },
    {
      n: "02",
      title: "Ajoutez les frais d'envoi.",
      body: "Transport, courtage, manutention, droits de douane par produit. cr8up répartit chaque frais au prorata entre tous les produits du même envoi — sans calcul mental.",
      visual: <StepVisualTwo />,
    },
    {
      n: "03",
      title: "Envoyez la fiche.",
      body: "Prix de revente proposé selon votre marge cible. Fiche imprimée propre, envoyée d'un clic par courriel à votre équipe ou à votre comptable. C'est tout.",
      visual: <StepVisualThree />,
    },
  ];
  return (
    <section id="comment" className="section" style={{ background: "var(--creme)" }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow">Comment ça marche</div>
          <h2 className="h2-section text-balance">Trois étapes, jamais plus.</h2>
          <p className="text-muted text-pretty" style={{ fontSize: 17, marginTop: 18, lineHeight: 1.55, maxWidth: 560 }}>
            Conçu pour être utilisé debout dans un entrepôt, le pouce sur l'écran. Pas de tableur, pas de menus profonds, pas d'à-deviner.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="steps-grid">
          {steps.map((s) => (
            <article key={s.n} className="card" style={{ display: "flex", flexDirection: "column", gap: 22, padding: 0, overflow: "hidden" }}>
              <div style={{ background: "var(--creme)", height: 220, display: "flex", alignItems: "center", justifyContent: "center", borderBottom: "1px solid var(--border)", padding: 22 }}>
                {s.visual}
              </div>
              <div style={{ padding: "0 26px 28px", display: "flex", flexDirection: "column", gap: 12 }}>
                <div className="mono" style={{ fontSize: 12, color: "var(--or-fonce)", letterSpacing: "0.18em", fontWeight: 500 }}>{s.n}</div>
                <h3 className="display" style={{ fontSize: 24, margin: 0, color: "var(--encre)" }}>{s.title}</h3>
                <p className="text-pretty" style={{ fontSize: 15, color: "var(--encre-douce)", lineHeight: 1.55, margin: 0 }}>{s.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .steps-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function StepVisualOne() {
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
      <div style={{
        width: 96, height: 96,
        background: "repeating-linear-gradient(135deg, rgba(58,18,25,0.06) 0 8px, transparent 8px 16px), var(--papier)",
        border: "1px solid var(--border)",
        borderRadius: 14,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <div className="mono" style={{ fontSize: 10, color: "rgba(58,18,25,0.45)", letterSpacing: "0.1em", textAlign: "center", padding: 8 }}>
          PHOTO<br/>PRODUIT
        </div>
      </div>
      <Arrow size={18} />
      <div style={{ background: "var(--papier)", border: "1px solid var(--border)", borderRadius: 14, padding: "12px 14px", minWidth: 130 }}>
        <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--or-fonce)", fontWeight: 500 }}>Code SH</div>
        <div className="mono" style={{ fontSize: 22, fontWeight: 500, color: "var(--bordeaux)", marginTop: 4 }}>1704.90</div>
        <div style={{ fontSize: 11, color: "rgba(26,22,18,0.6)", marginTop: 2 }}>Sucreries</div>
      </div>
    </div>
  );
}

function StepVisualTwo() {
  const rows = [
    { l: "Marchandise", v: "8 400 $", pct: 70 },
    { l: "Transport", v: "1 080 $", pct: 9 },
    { l: "Douane (8%)", v: "672 $", pct: 5.6 },
    { l: "Courtage", v: "180 $", pct: 1.5 },
    { l: "Manutention", v: "240 $", pct: 2 },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, width: "100%", maxWidth: 280 }}>
      {rows.map((r) => (
        <div key={r.l} style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ flex: 1, fontSize: 11, color: "var(--encre-douce)" }}>{r.l}</div>
          <div style={{ flex: 1.6, height: 6, background: "rgba(58,18,25,0.08)", borderRadius: 3, overflow: "hidden" }}>
            <div style={{ width: `${r.pct}%`, height: "100%", background: "var(--or)", borderRadius: 3 }} />
          </div>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--bordeaux)", fontWeight: 500, minWidth: 50, textAlign: "right" }}>{r.v}</div>
        </div>
      ))}
    </div>
  );
}

function StepVisualThree() {
  return (
    <div style={{ background: "var(--vin-fonce)", color: "var(--creme)", borderRadius: 14, padding: "16px 18px", width: "100%", maxWidth: 280 }}>
      <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(244,236,215,0.55)" }}>
        Fiche · envoyée à
      </div>
      <div style={{ marginTop: 8, fontSize: 13, fontWeight: 600 }}>marie@boutique.ca</div>
      <div style={{ fontSize: 12, color: "rgba(244,236,215,0.65)" }}>compta@boutique.ca</div>
      <div style={{ borderTop: "1px solid rgba(244,236,215,0.15)", margin: "14px 0 12px" }} />
      <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(244,236,215,0.55)" }}>
        Prix de revente · marge 45 %
      </div>
      <div className="serif" style={{ fontSize: 30, color: "var(--or-clair)", marginTop: 4 }}>5,15 $ <span style={{ fontSize: 14, color: "rgba(244,236,215,0.55)" }}>/ unité</span></div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/*  Le calcul — montrer une décomposition                                      */
/* -------------------------------------------------------------------------- */

function LeCalcul() {
  const items = [
    { label: "Marchandise (3 000 unités)", val: "8 400,00 $", percent: 79.6, color: "var(--bordeaux)" },
    { label: "Transport maritime", val: "1 080,00 $", percent: 10.2, color: "var(--or)" },
    { label: "Droits de douane (8 % avg.)", val: "672,00 $", percent: 6.4, color: "var(--bordeaux-deep)" },
    { label: "Courtage", val: "180,00 $", percent: 1.7, color: "var(--or-fonce)" },
    { label: "Manutention", val: "240,00 $", percent: 2.3, color: "var(--encre-douce)" },
  ];
  const total = "10 572,00 $";
  return (
    <section id="calcul" className="section" style={{ background: "var(--vin-fonce)", color: "var(--creme)", position: "relative", overflow: "hidden" }}>
      {/* faint giant 8 */}
      <div aria-hidden="true" style={{ position: "absolute", left: "-15vw", bottom: "-20vw", width: "60vw", maxWidth: 900, color: "rgba(212,160,75,0.06)" }}>
        <EightCratesSvg />
      </div>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="calc-grid">
          <div>
            <div className="eyebrow" style={{ color: "var(--or-clair)" }}>Le calcul</div>
            <h2 className="h2-section h2-on-dark text-balance">Chaque frais, réparti au bon produit.</h2>
            <p className="text-pretty" style={{ fontSize: 17, lineHeight: 1.55, marginTop: 20, color: "rgba(244,236,215,0.75)", maxWidth: 500 }}>
              Vous achetez 3 000 unités, payez 1 080 $ de transport. cr8up calcule combien ce transport coûte <em>par unité</em>, ajoute la douane qui dépend du code SH, et vous donne le coût de revient exact à la pièce.
            </p>
            <div style={{ display: "flex", gap: 24, marginTop: 28, flexWrap: "wrap" }}>
              <Stat n="3,52 $" l="Coût par unité" />
              <Stat n="8,0 %" l="Taux SH appliqué" />
              <Stat n="45 %" l="Marge cible → 5,11 $" />
            </div>
          </div>

          <div style={{ background: "rgba(244,236,215,0.04)", border: "1px solid rgba(244,236,215,0.12)", borderRadius: 22, padding: "32px 32px 28px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(244,236,215,0.55)" }}>Envoi · Espagne → QC</div>
              <div className="mono" style={{ fontSize: 12, color: "rgba(244,236,215,0.65)" }}>3 000 unités</div>
            </div>

            {/* stacked bar */}
            <div style={{ display: "flex", height: 14, borderRadius: 6, overflow: "hidden", marginBottom: 22 }}>
              {items.map((it) => (
                <div key={it.label} style={{ background: it.color, width: `${it.percent}%` }} title={`${it.label}: ${it.val}`} />
              ))}
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {items.map((it) => (
                <div key={it.label} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, fontSize: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, color: "rgba(244,236,215,0.85)" }}>
                    <span style={{ width: 10, height: 10, borderRadius: 3, background: it.color, display: "inline-block" }} />
                    {it.label}
                  </div>
                  <div className="mono" style={{ color: "var(--creme)", fontWeight: 500 }}>{it.val}</div>
                </div>
              ))}
            </div>

            <div style={{ borderTop: "1px solid rgba(244,236,215,0.15)", marginTop: 20, paddingTop: 18, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <div style={{ fontSize: 14, color: "rgba(244,236,215,0.7)" }}>Coût de revient total</div>
              <div className="serif" style={{ fontSize: 34, color: "var(--or-clair)" }}>{total}</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .calc-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
      `}</style>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: 38, color: "var(--or-clair)", lineHeight: 1 }}>{n}</div>
      <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(244,236,215,0.55)", marginTop: 6 }}>{l}</div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/*  Pour qui                                                                   */
/* -------------------------------------------------------------------------- */

function PourQui() {
  const personas = [
    { tag: "Confiserie", t: "Bonbons, chocolat, biscuits importés d'Europe ou d'Asie.", n: "SH 1704 · 1806 · 1905" },
    { tag: "Épicerie spécialisée", t: "Pâtes, huiles, conserves, condiments de niche.", n: "SH 1902 · 1509 · 2103" },
    { tag: "Cosmétiques & bien-être", t: "Soins de peau, parfumerie, suppléments.", n: "SH 3304 · 3303 · 2106" },
    { tag: "Boutique de détail", t: "Articles cadeaux, papeterie, accessoires.", n: "SH 4202 · 4820 · 7117" },
    { tag: "Distributeur régional", t: "Achats en gros, redistribution Québec & Maritimes.", n: "Multi-SH · multi-fournisseurs" },
    { tag: "Restaurateur importateur", t: "Vins, spiritueux, ingrédients spécialisés.", n: "SH 2204 · 2208 · 2103" },
  ];
  return (
    <section id="qui" className="section" style={{ background: "var(--creme)" }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">Pour qui</div>
          <h2 className="h2-section text-balance">Pour le commerçant qui importe — pas pour le département logistique d'une multinationale.</h2>
          <p className="text-muted text-pretty" style={{ fontSize: 17, marginTop: 18, lineHeight: 1.55, maxWidth: 560 }}>
            Si vous gérez vos achats au pouce, depuis votre boutique ou votre entrepôt, et qu'Excel vous donne mal au crâne — c'est pour vous.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="personas">
          {personas.map((p) => (
            <article key={p.tag} className="card persona" style={{ padding: 24 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--or-fonce)", fontWeight: 500 }}>{p.tag}</div>
              <div className="display" style={{ fontSize: 18, marginTop: 12, color: "var(--encre)", lineHeight: 1.25 }}>{p.t}</div>
              <div className="mono" style={{ fontSize: 11.5, marginTop: 18, color: "rgba(26,22,18,0.5)", paddingTop: 14, borderTop: "1px solid var(--border)" }}>{p.n}</div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .personas { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          .personas { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/*  Témoignages                                                                */
/* -------------------------------------------------------------------------- */

function Temoignages() {
  const quotes = [
    {
      q: "Avant cr8up, je faisais mes calculs à la main dans un Excel que je copiais à chaque envoi. Maintenant j'ai mon prix de revente avant même de quitter le quai.",
      n: "Marc Tremblay",
      r: "Confiserie Tremblay · Trois-Rivières",
    },
    {
      q: "Le code SH suggéré par l'IA est exact 9 fois sur 10. Pour les distributeurs qui jonglent avec 200 produits, c'est juste pas comparable.",
      n: "Karine Leblanc",
      r: "Distribution K.L. · Québec",
    },
    {
      q: "Mon comptable m'a remerciée. Les fiches arrivent propres, datées, avec tous les frais ventilés. C'est devenu mon journal d'import.",
      n: "Geneviève Roy",
      r: "Boutique Geneviève · Montréal",
    },
  ];
  return (
    <section id="temoignages" className="section" style={{ background: "var(--papier)" }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">Avis</div>
          <h2 className="h2-section text-balance">Ce qu'en disent les commerçants qui s'en servent.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }} className="quotes">
          {quotes.map((qq) => (
            <figure key={qq.n} className="card" style={{ margin: 0, padding: 28, background: "var(--creme)", display: "flex", flexDirection: "column", gap: 22, height: "100%" }}>
              <div style={{ color: "var(--or)", fontFamily: "var(--serif)", fontSize: 56, lineHeight: 0.3, height: 24 }}>"</div>
              <blockquote className="text-pretty" style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 21, lineHeight: 1.3, color: "var(--encre)", flex: 1, letterSpacing: "-0.005em" }}>
                {qq.q}
              </blockquote>
              <figcaption style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 18, borderTop: "1px solid var(--border)" }}>
                <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--bordeaux)", color: "var(--or-clair)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--display)", fontWeight: 700, fontSize: 14 }}>
                  {qq.n.split(" ").map((w) => w[0]).join("").slice(0, 2)}
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13.5, color: "var(--encre)" }}>{qq.n}</div>
                  <div className="mono" style={{ fontSize: 11, color: "rgba(26,22,18,0.55)", marginTop: 2 }}>{qq.r}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .quotes { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Comment, LeCalcul, PourQui, Temoignages });