// Gestopia landing page

const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

// ─────────────────────────────────────────────────────────────
// Reveal-on-scroll hook
// ─────────────────────────────────────────────────────────────
function useReveal() {
  const ref = useRefL(null);
  useEffectL(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ─────────────────────────────────────────────────────────────
// AnimatedCounter — counts up to target when in view.
// ─────────────────────────────────────────────────────────────
function AnimatedCounter({ to, duration = 1400, prefix = "", suffix = "", decimals = 0 }) {
  const [val, setVal] = useStateL(0);
  const ref = useRefL(null);
  const startedRef = useRefL(false);

  useEffectL(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !startedRef.current) {
            startedRef.current = true;
            const start = performance.now();
            const tick = (t) => {
              const p = Math.min(1, (t - start) / duration);
              const eased = 1 - Math.pow(1 - p, 3);
              setVal(eased * to);
              if (p < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);

  const formatted = val.toLocaleString("fr-FR", {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });
  return (
    <span ref={ref}>
      {prefix}{formatted}{suffix}
    </span>
  );
}

// ─────────────────────────────────────────────────────────────
// LiveAtelier — a faux "video" embed: media-player frame around
// a continuously animated dashboard. Cycles through 3 scenes
// every 4 seconds with a progress bar.
// ─────────────────────────────────────────────────────────────
function LiveAtelier() {
  const scenes = [
    {
      title: "Un nouveau ticket entre",
      sub: "M. Bertrand — iPhone 13, écran cassé. Devis prêt en 12 s.",
      hl: 0,
      kpis: { tickets: 27, ca: "1 284 €", parts: 6, delay: "1.8 j" },
    },
    {
      title: "Paiement encaissé",
      sub: "MacBook Air rendu, payé par CB sans contact via Stripe Terminal.",
      hl: 2,
      kpis: { tickets: 26, ca: "1 533 €", parts: 6, delay: "1.7 j" },
    },
    {
      title: "Réassort déclenché",
      sub: "Stock écran iPhone 13 sous seuil : commande auto chez votre fournisseur.",
      hl: 3,
      kpis: { tickets: 26, ca: "1 533 €", parts: 4, delay: "1.7 j" },
    },
  ];

  const [scene, setScene] = useStateL(0);
  const [tick, setTick] = useStateL(0);

  useEffectL(() => {
    const id = setInterval(() => {
      setScene((s) => (s + 1) % scenes.length);
      setTick((t) => t + 1);
    }, 7000);
    return () => clearInterval(id);
  }, []);

  const cur = scenes[scene];

  const tickets = [
    ["#R-4821", "iPhone 13 — écran", "M. Bertrand", "En cours", "var(--accent)"],
    ["#R-4820", "Galaxy S22 — batterie", "L. Moreau", "Devis envoyé", "#FFD400"],
    ["#R-4819", "MacBook Air — clavier", "Atelier X", scene === 1 ? "Payé · rendu" : "Prêt", "#00E5A0"],
    ["#R-4818", "iPad Pro — vitre", "C. Robin", scene === 2 ? "Pièce commandée" : "Pièce attendue", "#4F8BFF"],
    ["#R-4817", "Pixel 8 — port USB", "A. Diop", "À diagnostiquer", "var(--fg-faint)"],
  ];

  return (
    <div
      style={{
        position: "relative",
        borderRadius: 22,
        overflow: "hidden",
        border: "1px solid var(--line-strong)",
        background: "var(--surface)",
        boxShadow: "0 80px 160px -60px rgba(0,0,0,0.6)",
      }}
    >
      {/* Top bar — video chrome */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "14px 18px",
          borderBottom: "1px solid var(--line)",
          background: "var(--bg-2)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span
            className="status-pulse"
            style={{
              width: 8, height: 8, borderRadius: 999,
              background: "var(--accent)",
            }}
          />
          <span className="mono-eyebrow" style={{ fontSize: 11 }}>
            ATELIER · LIVE
          </span>
        </div>
        <div className="mono-eyebrow" style={{ fontSize: 10, color: "var(--fg-faint)" }}>
          {String(scene + 1).padStart(2, "0")} / {String(scenes.length).padStart(2, "0")}
        </div>
      </div>

      {/* Scene caption */}
      <div
        key={"cap-" + tick}
        className="ticker-up"
        style={{
          padding: "22px 22px 14px",
          display: "flex",
          flexDirection: "column",
          gap: 4,
          borderBottom: "1px solid var(--line)",
        }}
      >
        <div
          style={{
            fontFamily: "var(--font-display)",
            fontSize: 22,
            fontWeight: 600,
            letterSpacing: "-0.015em",
          }}
        >
          {cur.title}
        </div>
        <div style={{ color: "var(--fg-dim)", fontSize: 14 }}>{cur.sub}</div>
      </div>

      {/* Body: KPI row + ticket list */}
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
          {[
            ["Tickets ouverts", cur.kpis.tickets],
            ["CA du jour", cur.kpis.ca],
            ["Pièces faibles", cur.kpis.parts],
            ["Délai moyen", cur.kpis.delay],
          ].map(([k, v], i) => (
            <div
              key={i}
              style={{
                border: "1px solid var(--line)",
                borderRadius: 12,
                padding: 14,
                background: "var(--surface-2)",
              }}
            >
              <div className="mono-eyebrow" style={{ fontSize: 10 }}>{k}</div>
              <div
                key={"v-" + tick + "-" + i}
                className="ticker-up"
                style={{
                  marginTop: 6,
                  fontFamily: "var(--font-display)",
                  fontSize: 22,
                  fontWeight: 700,
                  letterSpacing: "-0.02em",
                }}
              >
                {v}
              </div>
            </div>
          ))}
        </div>

        <div
          style={{
            border: "1px solid var(--line)",
            borderRadius: 12,
            background: "var(--surface-2)",
            overflow: "hidden",
          }}
        >
          {tickets.map((t, i) => {
            const [id, item, client, status, color] = t;
            const isHl = i === cur.hl;
            return (
              <div
                key={i + "-" + tick}
                style={{
                  display: "grid",
                  gridTemplateColumns: "100px 1.5fr 1fr 160px 24px",
                  gap: 12,
                  alignItems: "center",
                  padding: "12px 16px",
                  borderTop: i === 0 ? "none" : "1px solid var(--line)",
                  background: isHl ? "var(--accent-soft)" : "transparent",
                  fontSize: 13.5,
                  animation: isHl ? "ticket-in 380ms ease-out both" : "none",
                  transition: "background 240ms ease",
                }}
              >
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-dim)" }}>{id}</div>
                <div>{item}</div>
                <div style={{ color: "var(--fg-dim)" }}>{client}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: color }} />
                  <span>{status}</span>
                </div>
                <div style={{ color: "var(--fg-faint)", fontFamily: "var(--font-mono)", fontSize: 12 }}>›</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Bottom progress */}
      <div
        style={{
          height: 3,
          background: "var(--line)",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div
          key={"prog-" + tick}
          style={{
            position: "absolute",
            inset: 0,
            transformOrigin: "left",
            background: "var(--accent)",
            animation: "scene-progress 7000ms linear both",
          }}
        />
      </div>

      <style>{`
        @keyframes scene-progress {
          from { transform: scaleX(0); }
          to { transform: scaleX(1); }
        }
      `}</style>
    </div>
  );
}

function Landing({ setView, tweaks }) {
  return (
    <div
      style={{
        background: "var(--bg)",
        color: "var(--fg)",
        position: "relative",
      }}
    >
      <Hero setView={setView} tweaks={tweaks} />
      <TestimonialBridge />
      <FeaturesSection />
      <ProductSection />
      <PricingSection setView={setView} />
      <FAQSection />
      <FinalCTA setView={setView} />
      <Footer setView={setView} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TestimonialBridge — sits between hero and features. Brings
// warmth and social proof, breaks the "empty after the grid"
// feeling without inventing fake metrics.
// ─────────────────────────────────────────────────────────────
function TestimonialBridge() {
  return (
    <section id="clients" style={{ padding: "100px 0 80px", position: "relative" }}>
      <div className="container">
        <div
          className="reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 56,
            alignItems: "center",
          }}
        >
          {/* Left: quote */}
          <div>
            <div className="mono-eyebrow" style={{ color: "var(--accent)", marginBottom: 28, fontSize: 11 }}>
              ↳ AVIS CLIENT · LYON
            </div>
            <blockquote
              style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(26px, 2.8vw, 40px)",
                fontWeight: 500,
                letterSpacing: "-0.02em",
                lineHeight: 1.18,
                margin: 0,
                textWrap: "balance",
                color: "var(--fg)",
              }}
            >
              <span style={{ color: "var(--accent)", fontFamily: "var(--font-display)", fontWeight: 700 }}>«&nbsp;</span>
              Avant Gestopia, je passais une heure le soir à clôturer ma journée.
              Maintenant <span style={{ color: "var(--accent)" }}>10 minutes</span>, montre
              en main. Le temps que je gagne, c'est du temps pour mes clients.
              <span style={{ color: "var(--accent)", fontFamily: "var(--font-display)", fontWeight: 700 }}>&nbsp;»</span>
            </blockquote>

            <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 16 }}>
              <div
                style={{
                  width: 48,
                  height: 48,
                  borderRadius: 999,
                  background:
                    "linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 50%, white))",
                  display: "grid",
                  placeItems: "center",
                  fontFamily: "var(--font-display)",
                  fontSize: 18,
                  fontWeight: 700,
                  color: "#fff",
                  flexShrink: 0,
                }}
              >
                JR
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>Jérémy R.</div>
                <div style={{ color: "var(--fg-dim)", fontSize: 13 }}>Gérant — Phone Repair Lyon</div>
              </div>

              <div
                style={{
                  marginLeft: 24,
                  paddingLeft: 24,
                  borderLeft: "1px solid var(--line-strong)",
                  display: "flex",
                  gap: 8,
                  alignItems: "center",
                }}
              >
                {[1, 2, 3, 4, 5].map((i) => (
                  <span
                    key={i}
                    style={{
                      color: "var(--accent)",
                      fontSize: 16,
                      letterSpacing: -2,
                    }}
                  >
                    ★
                  </span>
                ))}
                <span className="mono-eyebrow" style={{ fontSize: 10, marginLeft: 6 }}>
                  4,9 / 5 · 312 avis
                </span>
              </div>
            </div>
          </div>

          {/* Right: signature stat card with corail edge */}
          <div
            style={{
              position: "relative",
              borderRadius: 20,
              border: "1px solid var(--line-strong)",
              background: "var(--surface)",
              padding: 32,
              overflow: "hidden",
            }}
          >
            <div
              aria-hidden="true"
              style={{
                position: "absolute",
                left: 0,
                top: 0,
                bottom: 0,
                width: 3,
                background: "var(--accent)",
              }}
            />
            <div className="mono-eyebrow" style={{ fontSize: 10, marginBottom: 14 }}>
              CE TRIMESTRE
            </div>
            <div
              style={{
                fontFamily: "var(--font-display)",
                fontSize: 64,
                fontWeight: 700,
                letterSpacing: "-0.03em",
                color: "var(--fg)",
                lineHeight: 1,
              }}
            >
              <AnimatedCounter to={94} suffix="%" />
            </div>
            <p
              style={{
                marginTop: 14,
                color: "var(--fg-dim)",
                fontSize: 14,
                lineHeight: 1.55,
                textWrap: "pretty",
              }}
            >
              de nos clients valident leur 1ᵉʳ ticket dans les 10 minutes après inscription.
            </p>
            <div
              aria-hidden="true"
              style={{
                position: "absolute",
                right: -60,
                bottom: -60,
                width: 220,
                height: 220,
                background:
                  "radial-gradient(circle at center, var(--accent-soft), transparent 70%)",
                filter: "blur(24px)",
                pointerEvents: "none",
              }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// TicketCard — a tilted product UI fragment that floats in the
// hero. Communicates the product better than a marketing photo.
// ─────────────────────────────────────────────────────────────
function TicketCard() {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        maxWidth: 480,
        borderRadius: 20,
        background: "var(--surface)",
        border: "1px solid var(--line-strong)",
        boxShadow:
          "0 60px 140px -40px rgba(0,0,0,0.6), 0 30px 60px -30px rgba(255,77,109,0.25), inset 0 0 0 1px rgba(255,255,255,0.02)",
        overflow: "hidden",
        transform: "rotate(1.5deg)",
        transformOrigin: "center",
      }}
    >
      {/* Header strip */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "14px 18px",
          borderBottom: "1px solid var(--line)",
          background: "var(--bg-2)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span
            className="status-pulse"
            style={{
              width: 8,
              height: 8,
              borderRadius: 999,
              background: "var(--accent)",
            }}
          />
          <span
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.1em",
              color: "var(--fg-dim)",
            }}
          >
            TICKET #R-4821 · EN COURS
          </span>
        </div>
        <span
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            color: "var(--fg-faint)",
            letterSpacing: "0.08em",
          }}
        >
          Aujourd'hui · 14:22
        </span>
      </div>

      {/* Hero photo placeholder */}
      <div
        style={{
          height: 140,
          position: "relative",
          background:
            "linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%), repeating-linear-gradient(45deg, var(--surface-2) 0 8px, var(--bg-2) 8px 16px)",
          borderBottom: "1px solid var(--line)",
        }}
      >
        <div
          style={{
            position: "absolute",
            bottom: 12,
            left: 14,
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            color: "var(--fg-faint)",
            letterSpacing: "0.12em",
          }}
        >
          PHOTO APPAREIL · IMEI 35…921
        </div>
        {/* "Live" badge */}
        <div
          style={{
            position: "absolute",
            top: 12,
            right: 12,
            display: "flex",
            alignItems: "center",
            gap: 6,
            padding: "4px 10px",
            borderRadius: 999,
            background: "var(--accent)",
            color: "#fff",
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.14em",
            fontWeight: 500,
          }}
        >
          <span style={{ width: 5, height: 5, borderRadius: 999, background: "#fff" }} />
          DIAG
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 10,
              letterSpacing: "0.12em",
              color: "var(--fg-faint)",
              textTransform: "uppercase",
            }}
          >
            Client
          </div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 4 }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600 }}>
              M. Bertrand
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-dim)" }}>
              06 12 34 56 78
            </div>
          </div>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 10,
          }}
        >
          <div
            style={{
              border: "1px solid var(--line)",
              borderRadius: 10,
              padding: "10px 12px",
              background: "var(--surface-2)",
            }}
          >
            <div
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.12em",
                color: "var(--fg-faint)",
                textTransform: "uppercase",
              }}
            >
              Appareil
            </div>
            <div style={{ marginTop: 4, fontSize: 13.5, fontWeight: 500 }}>iPhone 13 — 128 Go</div>
          </div>
          <div
            style={{
              border: "1px solid var(--accent)",
              borderRadius: 10,
              padding: "10px 12px",
              background: "var(--accent-soft)",
            }}
          >
            <div
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.12em",
                color: "var(--accent)",
                textTransform: "uppercase",
              }}
            >
              Devis
            </div>
            <div
              style={{
                marginTop: 4,
                fontFamily: "var(--font-display)",
                fontSize: 18,
                fontWeight: 700,
                color: "var(--fg)",
              }}
            >
              89,00 €
            </div>
          </div>
        </div>

        {/* Status timeline */}
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 4 }}>
          {[
            ["Reçu", true],
            ["Diag", true],
            ["Pièce", false],
            ["Rendu", false],
          ].map(([l, done], i) => (
            <React.Fragment key={i}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, minWidth: 0, flexShrink: 0 }}>
                <span
                  style={{
                    width: 10,
                    height: 10,
                    borderRadius: 999,
                    background: done ? "var(--accent)" : "var(--surface)",
                    border: done ? "none" : "1px solid var(--line-strong)",
                  }}
                />
                <span
                  style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    letterSpacing: "0.06em",
                    color: done ? "var(--fg)" : "var(--fg-faint)",
                  }}
                >
                  {l}
                </span>
              </div>
              {i < 3 && (
                <div
                  style={{
                    flex: 1,
                    height: 1,
                    background:
                      done && i < 1
                        ? "var(--accent)"
                        : "var(--line)",
                    marginBottom: 16,
                  }}
                />
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
function Hero({ setView, tweaks }) {
  const scale = tweaks.heroScale || 1;
  return (
    <section
      style={{
        position: "relative",
        paddingTop: 56,
        paddingBottom: 100,
        overflow: "hidden",
        minHeight: "92vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
      }}
    >
      {tweaks.heroMedia !== "mockup" && <HeroBackdrop variant={tweaks.heroMedia} />}

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        {/* Top eyebrow row */}
        <div
          className="rise"
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 24,
            marginBottom: 40,
            flexWrap: "wrap",
          }}
        >
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              padding: "6px 12px",
              border: "1px solid var(--line-strong)",
              borderRadius: 999,
              background: "color-mix(in oklab, var(--bg) 70%, transparent)",
              backdropFilter: "blur(6px)",
            }}
          >
            <span
              className="status-pulse"
              style={{
                width: 6,
                height: 6,
                borderRadius: 999,
                background: "var(--accent)",
              }}
            />
            <span className="mono-eyebrow" style={{ fontSize: 11 }}>
              Nouveau · l'app v1 ouvre l'accès anticipé
            </span>
          </div>
          <div className="mono-eyebrow" style={{ display: "flex", gap: 16, fontSize: 11 }}>
            <span>v 1.0 · 2026</span>
            <span style={{ color: "var(--fg-faint)" }}>·</span>
            <span>FR · €</span>
          </div>
        </div>

        {/* Main grid: text left, ticket card right */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.15fr 1fr",
            gap: 64,
            alignItems: "center",
          }}
        >
          {/* LEFT */}
          <div>
            <h1
              className="rise"
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: 900,
                fontSize: `clamp(56px, ${8.5 * scale}vw, ${132 * scale}px)`,
                lineHeight: 0.92,
                letterSpacing: "-0.035em",
                margin: 0,
                textWrap: "balance",
                animationDelay: "60ms",
              }}
            >
              La caisse,<br />
              le stock,<br />
              <span
                style={{
                  background:
                    "linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, white))",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                }}
              >
                la réparation.
              </span>
            </h1>

            <p
              className="rise"
              style={{
                maxWidth: 520,
                fontSize: "clamp(16px, 1.3vw, 19px)",
                lineHeight: 1.5,
                color: "var(--fg-dim)",
                margin: "32px 0 36px",
                textWrap: "pretty",
                animationDelay: "160ms",
              }}
            >
              Le système d'exploitation des réparateurs indépendants —
              tickets, devis, factures, encaissement, stock, étiquettes.
              Un seul outil, pensé pour l'atelier.
            </p>

            <div
              className="rise"
              style={{ display: "flex", gap: 12, flexWrap: "wrap", animationDelay: "260ms" }}
            >
              <button
                className="btn btn-lg btn-accent"
                onClick={() => setView("signup")}
              >
                Démarrer gratuitement
                <span style={{ fontFamily: "var(--font-mono)" }}>→</span>
              </button>
              <button className="btn btn-lg btn-ghost">
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13 }}>▶</span>
                Voir la démo
              </button>
            </div>

            {/* Stats row */}
            <div
              className="rise"
              style={{
                marginTop: 56,
                display: "flex",
                gap: 40,
                flexWrap: "wrap",
                animationDelay: "360ms",
              }}
            >
              {[
                { n: 2400, prefix: "+", l: "ateliers" },
                { n: 1.8, suffix: " j", l: "délai moyen", decimals: 1 },
                { n: 99.97, suffix: "%", l: "uptime", decimals: 2 },
              ].map((s, i) => (
                <div key={i}>
                  <div
                    style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 30,
                      fontWeight: 700,
                      letterSpacing: "-0.02em",
                      color: "var(--fg)",
                    }}
                  >
                    <AnimatedCounter
                      to={s.n}
                      prefix={s.prefix || ""}
                      suffix={s.suffix || ""}
                      decimals={s.decimals || 0}
                    />
                  </div>
                  <div className="mono-eyebrow" style={{ fontSize: 10 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT: floating ticket card */}
          <div
            className="rise float-y"
            style={{
              animationDelay: "320ms",
              display: "flex",
              justifyContent: "center",
            }}
          >
            <TicketCard />
          </div>
        </div>
      </div>

      {/* Mockup variant — show below the fold */}
      {tweaks.heroMedia === "mockup" && (
        <div
          className="container rise"
          style={{ position: "relative", zIndex: 2, marginTop: 80, animationDelay: "260ms" }}
        >
          <MockDashboard height={560} />
        </div>
      )}
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function FeaturesSection() {
  const features = [
    {
      n: "01",
      title: "Tickets de réparation",
      body: "Cycle complet — diagnostic, devis, validation client, pièces, intervention, retrait. Notifications SMS automatiques à chaque étape.",
      meta: "Diag → Retrait",
    },
    {
      n: "02",
      title: "Stock & pièces détachées",
      body: "Code-barres, fournisseurs, alertes de réassort, traçabilité IMEI / N° série. Importez votre catalogue en CSV.",
      meta: "Multi-entrepôt",
    },
    {
      n: "03",
      title: "Devis & factures",
      body: "PDF normés, signature électronique, mentions légales FR. Acomptes, retenues, multi-TVA — sans bricoler.",
      meta: "PDF · Signature",
    },
    {
      n: "04",
      title: "Fiches client",
      body: "Historique complet, appareils, garanties, RGPD. Recherche par IMEI, N° série, téléphone ou nom.",
      meta: "RGPD",
    },
    {
      n: "05",
      title: "Caisse & encaissement",
      body: "TPE Stripe Terminal, espèces, chèques, virement. Z de caisse, journal des écarts, fiscalité conforme.",
      meta: "NF525 friendly",
    },
    {
      n: "06",
      title: "Étiquettes & impression",
      body: "Étiquettes ticket d'atelier, code-barres, étiquettes produit. Compatible Zebra, Brother, Dymo.",
      meta: "Zebra · Brother",
    },
  ];

  return (
    <section id="features" style={{ padding: "120px 0 80px" }}>
      <div className="container">
        <div className="chapter reveal">
          <span className="chapter-label">Ce qui est inclus</span>
        </div>

        <div
          className="reveal reveal-2"
          style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 1fr",
            gap: 40,
            alignItems: "end",
            marginTop: 28,
            marginBottom: 56,
          }}
        >
          <h2
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 600,
              fontSize: "clamp(40px, 5.4vw, 80px)",
              lineHeight: 0.96,
              letterSpacing: "-0.025em",
              margin: 0,
              textWrap: "balance",
            }}
          >
            Tout l'atelier dans une seule app.
          </h2>
          <p style={{ color: "var(--fg-dim)", fontSize: 16, lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>
            Pas de Zapier, pas de tableur, pas d'allers-retours entre cinq logiciels.
            Gestopia couvre la totalité de votre flux, du ticket entrant à la facture archivée.
          </p>
        </div>

        <div
          className="reveal reveal-3"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 1,
            background: "var(--line)",
            border: "1px solid var(--line)",
            borderRadius: 16,
            overflow: "hidden",
          }}
        >
          {features.map((f) => (
            <FeatureCard key={f.n} {...f} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ n, title, body, meta }) {
  const [hover, setHover] = useStateL(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--surface-2)" : "var(--surface)",
        padding: 28,
        minHeight: 260,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        gap: 24,
        position: "relative",
        transition: "background 180ms ease",
        cursor: "default",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            letterSpacing: "0.08em",
            color: hover ? "var(--accent)" : "var(--fg-faint)",
            transition: "color 180ms ease",
          }}
        >
          {n}
        </span>
        <span
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--fg-faint)",
            border: "1px solid var(--line-strong)",
            borderRadius: 999,
            padding: "4px 10px",
          }}
        >
          {meta}
        </span>
      </div>
      <div>
        <h3
          style={{
            fontFamily: "var(--font-display)",
            fontSize: 24,
            fontWeight: 600,
            letterSpacing: "-0.015em",
            margin: "0 0 10px",
            textWrap: "balance",
          }}
        >
          {title}
        </h3>
        <p style={{ color: "var(--fg-dim)", fontSize: 14, lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>
          {body}
        </p>
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────
function ProductSection() {
  return (
    <section id="produit" style={{ padding: "80px 0 120px" }}>
      <div className="container">
        <div className="chapter reveal">
          <span className="chapter-label">L'atelier en direct</span>
        </div>

        <div
          className="reveal reveal-2"
          style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 1fr",
            gap: 40,
            alignItems: "end",
            marginTop: 28,
            marginBottom: 56,
          }}
        >
          <h2
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 600,
              fontSize: "clamp(40px, 5.4vw, 80px)",
              lineHeight: 0.96,
              letterSpacing: "-0.025em",
              margin: 0,
              textWrap: "balance",
            }}
          >
            Conçu pour l'établi,<br/>
            pas pour Excel.
          </h2>
          <p style={{ color: "var(--fg-dim)", fontSize: 16, lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>
            Une interface dense quand il faut l'être, calme quand il faut respirer.
            Conçu avec des réparateurs qui traitent 30 tickets / jour.
          </p>
        </div>

        <div className="reveal reveal-3">
          <LiveAtelier />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function PricingSection({ setView }) {
  const plans = [
    {
      name: "Solo",
      price: "19 €",
      period: "/ mois",
      desc: "Pour les réparateurs indépendants qui démarrent.",
      includes: [
        "1 utilisateur",
        "Tickets illimités",
        "Devis & factures PDF",
        "Caisse simple",
        "Support email",
      ],
      cta: "Démarrer en solo",
      featured: false,
    },
    {
      name: "Boutique",
      price: "49 €",
      period: "/ mois",
      desc: "Pour une boutique avec une équipe d'atelier.",
      includes: [
        "Jusqu'à 5 utilisateurs",
        "Tout du plan Solo",
        "TPE Stripe Terminal",
        "Étiquettes & code-barres",
        "Catalogue & fournisseurs",
        "Support prioritaire",
      ],
      cta: "Choisir Boutique",
      featured: true,
    },
    {
      name: "Réseau",
      price: "Sur devis",
      period: "",
      desc: "Pour les enseignes multi-points de vente.",
      includes: [
        "Utilisateurs illimités",
        "Multi-boutiques",
        "API & SSO",
        "Gestionnaire de compte dédié",
        "SLA 99.97%",
      ],
      cta: "Nous contacter",
      featured: false,
    },
  ];

  return (
    <section id="tarifs" style={{ padding: "60px 0 120px" }}>
      <div className="container">
        <div className="chapter reveal">
          <span className="chapter-label">Tarifs</span>
        </div>

        <h2
          className="reveal reveal-2"
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 600,
            fontSize: "clamp(40px, 5.4vw, 80px)",
            lineHeight: 0.96,
            letterSpacing: "-0.025em",
            margin: "28px 0 14px",
            textWrap: "balance",
          }}
        >
          Un prix par atelier.<br/>
          Pas par fonctionnalité.
        </h2>
        <p style={{ color: "var(--fg-dim)", fontSize: 16, lineHeight: 1.55, maxWidth: 580, margin: "0 0 56px" }}>
          14 jours d'essai. Sans CB. Sans engagement. Vous changez de plan ou résiliez en un clic.
        </p>

        <div className="reveal reveal-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {plans.map((p) => (
            <article
              key={p.name}
              style={{
                background: p.featured ? "var(--surface-2)" : "var(--surface)",
                border: p.featured ? "1px solid var(--accent)" : "1px solid var(--line)",
                borderRadius: 18,
                padding: 28,
                display: "flex",
                flexDirection: "column",
                position: "relative",
                overflow: "hidden",
              }}
            >
              {p.featured && (
                <div
                  style={{
                    position: "absolute",
                    top: 14,
                    right: 14,
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    letterSpacing: "0.14em",
                    textTransform: "uppercase",
                    color: "#fff",
                    background: "var(--accent)",
                    borderRadius: 999,
                    padding: "5px 10px",
                  }}
                >
                  Le + choisi
                </div>
              )}
              <div className="mono-eyebrow" style={{ marginBottom: 18 }}>
                PLAN · {p.name.toUpperCase()}
              </div>
              <div
                style={{
                  fontFamily: "var(--font-display)",
                  fontSize: 56,
                  fontWeight: 600,
                  letterSpacing: "-0.03em",
                  lineHeight: 1,
                }}
              >
                {p.price}
                <span
                  style={{
                    fontFamily: "var(--font-ui)",
                    fontSize: 16,
                    fontWeight: 400,
                    color: "var(--fg-dim)",
                    marginLeft: 4,
                  }}
                >
                  {p.period}
                </span>
              </div>
              <p style={{ color: "var(--fg-dim)", fontSize: 14, lineHeight: 1.5, margin: "14px 0 24px" }}>
                {p.desc}
              </p>
              <ul
                style={{
                  listStyle: "none",
                  padding: 0,
                  margin: "0 0 28px",
                  display: "flex",
                  flexDirection: "column",
                  gap: 10,
                  flex: 1,
                }}
              >
                {p.includes.map((inc, i) => (
                  <li
                    key={i}
                    style={{
                      display: "flex",
                      gap: 10,
                      fontSize: 14,
                      color: "var(--fg-dim)",
                    }}
                  >
                    <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)" }}>+</span>
                    <span>{inc}</span>
                  </li>
                ))}
              </ul>
              <button
                onClick={() => setView("signup")}
                className={"btn " + (p.featured ? "btn-accent" : "btn-ghost")}
                style={{ width: "100%", justifyContent: "center" }}
              >
                {p.cta}
              </button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function FAQSection() {
  const items = [
    [
      "Est-ce que je peux importer mes données depuis mon outil actuel ?",
      "Oui. CSV pour les clients, le catalogue pièces et l'historique. Pour les outils les plus utilisés (RepairShopr, mHelpDesk, des tableurs Excel), nous proposons un assistant de migration gratuit.",
    ],
    [
      "Est-ce compatible avec la fiscalité française ?",
      "Oui. Mentions légales, multi-TVA, numérotation séquentielle, archivage des factures, journal d'audit. Compatible NF525 — un certificat formel arrive courant 2026.",
    ],
    [
      "Le TPE est inclus ?",
      "À partir du plan Boutique, vous bénéficiez de Stripe Terminal intégré (TPE physique à louer ou acheter, paiements sans contact, Apple Pay, etc.).",
    ],
    [
      "Et si je n'ai pas internet à l'atelier ?",
      "L'app continue de fonctionner hors-ligne pour la prise de tickets et la caisse. Tout se synchronise dès que la connexion revient.",
    ],
    [
      "Combien de temps pour démarrer ?",
      "Compter une après-midi pour importer ses données et imprimer ses premières étiquettes. Vous pouvez prendre votre premier ticket dans les 10 minutes après votre inscription.",
    ],
    [
      "Vous proposez une formation ?",
      "Une visio de 45 min de prise en main est offerte avec le plan Boutique. Des tutos vidéos courts sont disponibles à tout moment dans l'app.",
    ],
  ];

  return (
    <section id="docs" style={{ padding: "20px 0 120px" }}>
      <div className="container">
        <div className="chapter reveal">
          <span className="chapter-label">Questions fréquentes</span>
        </div>
        <h2
          className="reveal reveal-2"
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 600,
            fontSize: "clamp(40px, 5vw, 72px)",
            lineHeight: 0.96,
            letterSpacing: "-0.025em",
            margin: "28px 0 40px",
            textWrap: "balance",
          }}
        >
          Avant de vous lancer.
        </h2>
        <div className="reveal">
          {items.map(([q, a], i) => (
            <details className="faq" key={i}>
              <summary>
                <span style={{ textWrap: "balance" }}>{q}</span>
                <span className="faq-plus">+</span>
              </summary>
              <div className="faq-body">{a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function FinalCTA({ setView }) {
  return (
    <section style={{ padding: "20px 0 100px" }}>
      <div className="container">
        <div
          className="reveal"
          style={{
            position: "relative",
            borderRadius: 24,
            overflow: "hidden",
            background: "var(--surface)",
            border: "1px solid var(--line-strong)",
            padding: "80px 56px",
            minHeight: 360,
          }}
        >
          {/* corail glow */}
          <div
            aria-hidden="true"
            style={{
              position: "absolute",
              right: -200, bottom: -200,
              width: 600, height: 600,
              background: "radial-gradient(circle at center, var(--accent), transparent 60%)",
              opacity: 0.35,
              filter: "blur(40px)",
              pointerEvents: "none",
            }}
          />
          <div style={{ position: "relative", zIndex: 1, maxWidth: 720 }}>
            <div className="mono-eyebrow" style={{ marginBottom: 24 }}>PRÊT À DÉMARRER ?</div>
            <h2
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: 600,
                fontSize: "clamp(40px, 6vw, 92px)",
                lineHeight: 0.96,
                letterSpacing: "-0.03em",
                margin: 0,
                textWrap: "balance",
              }}
            >
              Votre atelier mérite mieux qu'un tableur.
            </h2>
            <p
              style={{
                color: "var(--fg-dim)",
                fontSize: 17,
                lineHeight: 1.55,
                margin: "24px 0 36px",
                maxWidth: 560,
                textWrap: "pretty",
              }}
            >
              Démarrez en 10 minutes. Aucune carte bancaire. Annulez quand vous voulez.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-lg btn-accent" onClick={() => setView("signup")}>
                Créer mon atelier
                <span style={{ fontFamily: "var(--font-mono)" }}>→</span>
              </button>
              <button className="btn btn-lg btn-ghost" onClick={() => setView("login")}>
                Réserver un appel
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function Footer({ setView }) {
  const cols = [
    {
      title: "PRODUIT",
      links: ["Fonctionnalités", "Tarifs", "Roadmap", "Changelog", "Statut système"],
    },
    {
      title: "RESSOURCES",
      links: ["Documentation", "Guides d'atelier", "Communauté", "Webinaires", "API"],
    },
    {
      title: "ENTREPRISE",
      links: ["À propos", "Clients", "Presse", "Recrutement", "Contact"],
    },
    {
      title: "LÉGAL",
      links: ["CGU", "Confidentialité", "RGPD", "Mentions légales", "Sécurité"],
    },
  ];

  // App passes the navigate-to-info handler through window for simplicity.
  const goToInfo = (label) => {
    const topicId = (typeof FOOTER_LINK_MAP !== "undefined" && FOOTER_LINK_MAP[label]) || null;
    if (topicId && window.__goToInfo) {
      window.__goToInfo(topicId);
    }
  };

  return (
    <footer style={{ padding: "60px 0 40px" }}>
      <div className="container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.6fr repeat(4, 1fr)",
            gap: 48,
            paddingBottom: 56,
          }}
        >
          <div>
            <Logo size={32} />
            <p
              style={{
                marginTop: 16,
                color: "var(--fg-dim)",
                fontSize: 13,
                lineHeight: 1.55,
                maxWidth: 280,
              }}
            >
              Le système d'exploitation des réparateurs indépendants.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div className="mono-eyebrow" style={{ marginBottom: 16, fontSize: 10 }}>
                {c.title}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map((l) => (
                  <li key={l}>
                    <button
                      onClick={() => goToInfo(l)}
                      className="ulink"
                      style={{
                        color: "var(--fg-dim)",
                        fontSize: 13.5,
                        background: "none",
                        border: "none",
                        padding: 0,
                        cursor: "pointer",
                        fontFamily: "inherit",
                        textAlign: "left",
                      }}
                    >
                      {l}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div
          style={{
            borderTop: "1px solid var(--line)",
            paddingTop: 24,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            color: "var(--fg-faint)",
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            flexWrap: "wrap",
            gap: 16,
          }}
        >
          <div>© 2026 Gestopia — Fait à Paris pour l'atelier</div>
          <div style={{ display: "flex", gap: 24 }}>
            <span>gestopia.fr</span>
            <span style={{ color: "var(--accent)" }}>● Systèmes opérationnels</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Landing });