const { useState, useEffect, useRef } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "case1_company": "Groupe Marlin",
  "case1_sector": "BTP",
  "case1_problem": "3h par chantier en saisie manuelle",
  "case1_solution": "Agent IA générant devis depuis emails fournisseurs",
  "case1_metric": "−68%",
  "case1_metricLabel": "temps administratif",
  "case2_company": "Hexagone Conseil",
  "case2_sector": "Services B2B",
  "case2_problem": "Qualification leads à 48h de délai",
  "case2_solution": "Agent qualification + routing commercial",
  "case2_metric": "+34%",
  "case2_metricLabel": "taux de conversion",
  "case3_company": "Atelier Verdier",
  "case3_sector": "Industrie",
  "case3_problem": "Reporting hebdo manuel par 4 chefs",
  "case3_solution": "Pipeline auto multi-sources + synthèse IA",
  "case3_metric": "12h",
  "case3_metricLabel": "économisées / semaine"
} /*EDITMODE-END*/;

function Counter({ to, suffix = "", duration = 1600, decimals = 0 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  const started = useRef(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const tick = (now) => {
          const p = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(eased * to);
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{val.toFixed(decimals)}{suffix}</span>;
}

function useMobile() {
  const [m, setM] = useState(typeof window !== 'undefined' ? window.innerWidth < 768 : false);
  useEffect(() => {
    const fn = () => setM(window.innerWidth < 768);
    window.addEventListener('resize', fn, { passive: true });
    return () => window.removeEventListener('resize', fn);
  }, []);
  return m;
}

/* ---------- NAV (light) ---------- */
function Nav() {
  const mobile = useMobile();
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [["Solutions IA","#solutions"],["Formations","#formations"],["Cas clients","#cas-clients"],["Méthode","#methode"],["FAQ","#faq"]];
  return (
    <header style={{
      position: "fixed", top: mobile ? 10 : 16, left: "50%", transform: "translateX(-50%)",
      zIndex: 50,
      background: (scrolled || menuOpen) ? "rgba(255,255,255,0.95)" : "rgba(255,255,255,0.6)",
      backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
      border: "1px solid rgba(14,14,20,0.08)",
      borderRadius: menuOpen ? 18 : 999,
      transition: "background .3s, border-radius .3s",
      width: "min(1100px, calc(100% - 24px))",
      boxShadow: (scrolled || menuOpen) ? "0 8px 24px rgba(14,14,20,0.06)" : "none"
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 56, padding: "0 20px" }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 700, fontSize: mobile ? 21 : 24, color: "var(--ink)", letterSpacing: "-0.025em" }}>
          <img src="assets/logo-balia.png" alt="BALIA" style={{ width: mobile ? 30 : 34, height: mobile ? 30 : 34, objectFit: "contain" }} />
          Balia.
        </a>
        {mobile ? (
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <a className="btn btn-primary" href="#contact" onClick={() => setMenuOpen(false)} style={{ height: 36, padding: "0 14px", fontSize: 12 }}>
              Audit <span className="arr">→</span>
            </a>
            <button onClick={() => setMenuOpen(!menuOpen)} style={{ width: 36, height: 36, border: "1px solid var(--line-strong)", borderRadius: 8, background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              {menuOpen
                ? <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2 L12 12 M12 2 L2 12" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round"/></svg>
                : <svg width="16" height="12" viewBox="0 0 16 12"><path d="M0 1 H16 M0 6 H16 M0 11 H16" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round"/></svg>
              }
            </button>
          </div>
        ) : (
          <>
            <nav style={{ display: "flex", alignItems: "center", gap: 26 }}>
              {links.map(([l, h]) =>
                <a key={h} href={h} style={{ fontSize: 13, color: "var(--ink-2)", transition: "color .2s" }}
                   onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"}
                   onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-2)"}>{l}</a>
              )}
            </nav>
            <a className="btn btn-primary" href="#contact" style={{ height: 38, padding: "0 16px", fontSize: 13 }}>
              Audit gratuit <span className="arr">→</span>
            </a>
          </>
        )}
      </div>
      {mobile && menuOpen && (
        <div style={{ padding: "4px 16px 16px", borderTop: "1px solid var(--line)" }}>
          {links.map(([l, h]) =>
            <a key={h} href={h} onClick={() => setMenuOpen(false)} style={{ display: "block", padding: "14px 4px", fontSize: 15, fontWeight: 500, color: "var(--ink)", borderBottom: "1px solid var(--line)" }}>{l}</a>
          )}
        </div>
      )}
    </header>);
}

/* ---------- HERO with photo + radial floaters ---------- */
function Hero() {
  const mobile = useMobile();
  const stageRef = useRef(null);
  const [scroll, setScroll] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = stageRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // 0 when stage fully visible, 1 when fully scrolled past top
      const p = Math.max(0, Math.min(1, (vh - rect.top - vh * 0.3) / (vh * 0.8)));
      setScroll(p);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // 8 floaters around the photo, starting close, moving outward as scroll progresses
  const floaters = [
  { angle: -90, tag: "Devis auto", icon: "doc", label: "ERP" },
  { angle: -45, tag: "Agent emails", icon: "mail", label: "+47%" },
  { angle: 0, tag: "Reporting IA", icon: "chart", label: "12h/sem" },
  { angle: 45, tag: "Qualif. leads", icon: "target", label: "−62%" },
  { angle: 90, tag: "Synthèse réunion", icon: "mic", label: "Auto" },
  { angle: 135, tag: "Triage support", icon: "ticket", label: "24/7" },
  { angle: 180, tag: "Onboarding", icon: "user", label: "Express" },
  { angle: 225, tag: "Workflow connecté", icon: "branch", label: "Live" }];

  const startRadius = 230;
  const endRadius = 720;

  return (
    <section id="top" className="hero">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 920, margin: "0 auto" }}>
          <div className="reveal" style={{ display: "inline-flex", marginBottom: 28 }}>
            <span className="pill" style={{ fontSize: "14px" }}><span className="dot" />Audit gratuit · Réponse sous 24h</span>
          </div>
          <h1 className="reveal" style={{ marginBottom: 24 }}>
            Éliminez les tâches numériques <span className="serif accent-grad">chronophages</span> grâce à l'IA.
          </h1>
          <p className="reveal" style={{ fontSize: mobile ? 16 : 19, lineHeight: 1.55, maxWidth: 640, margin: "0 auto 36px" }}>
            Solutions IA sur mesure et formations certifiées Qualiopi. Pour les équipes qui veulent libérer du temps et passer à l'échelle.
          </p>
          <div className="reveal" style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", flexDirection: mobile ? "column" : "row", alignItems: mobile ? "stretch" : "center" }}>
            <a className="btn btn-primary" href="#contact" style={{ justifyContent: "center" }}>Réserver un audit gratuit <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="#solutions" style={{ justifyContent: "center" }}>Voir nos offres</a>
          </div>
        </div>

        <div className="hero-stage" ref={stageRef}>
          <div className="hero-photo-glow" style={{ opacity: 1 - scroll * 0.4 }} />
          <div className="hero-photo">
            <img src="assets/bureau.png" alt="Au bureau" />
            <ClaudeBadge mobile={mobile} />
          </div>
          {!mobile && floaters.map((f, i) => {
            const radius = startRadius + (endRadius - startRadius) * scroll;
            const rad = f.angle * Math.PI / 180;
            const x = Math.cos(rad) * radius;
            const y = Math.sin(rad) * radius * 0.7;
            const opacity = Math.max(0, 1 - scroll * 1.4);
            return (
              <div key={i} className="floater" style={{
                transform: `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`,
                opacity,
                transition: "transform .25s cubic-bezier(.22,1,.36,1), opacity .3s ease"
              }}>
                <div className="floater-inner">
                  <FloaterIcon kind={f.icon} />
                  <span>{f.tag}</span>
                  <span className="mono" style={{ fontSize: 13, color: "var(--primary)", paddingLeft: 6, borderLeft: "1px solid var(--line)", marginLeft: 2 }}>{f.label}</span>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

function ClaudeBadge({ mobile }) {
  return (
    <div style={{
      position: "absolute",
      right: mobile ? 6 : 14,
      bottom: mobile ? 16 : 30,
      background: "rgba(255,255,255,0.92)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      border: "1px solid var(--line)",
      borderRadius: 12,
      padding: mobile ? "6px 9px" : "8px 13px",
      display: "flex",
      alignItems: "center",
      gap: mobile ? 5 : 7,
      boxShadow: "0 6px 20px rgba(14,14,20,0.08)",
      zIndex: 5,
      whiteSpace: "nowrap",
      pointerEvents: "none"
    }}>
      <svg width={mobile ? 13 : 15} height={mobile ? 13 : 15} viewBox="0 0 16 16" fill="none">
        <defs>
          <linearGradient id="cg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#1E5BFF"/>
            <stop offset="100%" stopColor="#0EA5E9"/>
          </linearGradient>
        </defs>
        <path d="M8 0.5 L9.9 6.1 L15.5 8 L9.9 9.9 L8 15.5 L6.1 9.9 L0.5 8 L6.1 6.1 Z" fill="url(#cg)"/>
      </svg>
      <span className="mono" style={{ fontSize: mobile ? 11 : 12, fontWeight: 500, color: "var(--ink-2)", letterSpacing: "0.02em" }}>Claude</span>
    </div>
  );
}

function FloaterIcon({ kind }) {
  const c = "#1E5BFF";
  const s = "#0EA5E9";
  const common = { width: 18, height: 18, fill: "none", stroke: c, strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "doc") return <svg {...common}><path d="M5 2 H12 L15 5 V16 H5 z" /><path d="M8 8 H12 M8 11 H12" /></svg>;
  if (kind === "mail") return <svg {...common}><rect x="2" y="5" width="16" height="11" rx="2" /><path d="M2 7 L10 12 L18 7" /></svg>;
  if (kind === "chart") return <svg {...common}><path d="M3 16 V8 M9 16 V4 M15 16 V11" /></svg>;
  if (kind === "target") return <svg {...common}><circle cx="10" cy="10" r="6" /><circle cx="10" cy="10" r="2.5" /></svg>;
  if (kind === "mic") return <svg {...common}><rect x="7" y="2" width="6" height="10" rx="3" /><path d="M4 10 a6 6 0 0 0 12 0 M10 16 V18" /></svg>;
  if (kind === "ticket") return <svg {...common}><path d="M2 8 V6 H18 V8 a2 2 0 0 0 0 4 V14 H2 V12 a2 2 0 0 0 0 -4 z" /></svg>;
  if (kind === "user") return <svg {...common}><circle cx="10" cy="7" r="3" /><path d="M4 17 a6 6 0 0 1 12 0" /></svg>;
  if (kind === "branch") return <svg {...common}><circle cx="5" cy="5" r="2" /><circle cx="5" cy="15" r="2" /><circle cx="15" cy="10" r="2" /><path d="M7 5 H11 a2 2 0 0 1 2 2 V8 M7 15 H11 a2 2 0 0 0 2 -2 V12" /></svg>;
  return null;
}

/* ---------- LOGOS / TRUST STRIP ---------- */
function TrustStrip() {
  const mobile = useMobile();
  return (
    <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "32px 0", background: "#fff" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "auto 1fr", gap: mobile ? 12 : 48, alignItems: "center" }}>
        <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
          Outils connectés
        </div>
        <div style={{ overflow: "hidden" }}>
          <div className="marquee-row" style={{ gap: 56, alignItems: "center" }}>
            {[..."OpenAI · Claude · n8n · Airtable · Notion · Slack · HubSpot · Salesforce · Mistral · Gemini · Zoho · Gmail · Outlook · Google Drive · Stripe · Excel · Word · Google Sheets · Google Doc · OpenAI · Claude · n8n · Airtable · Notion · Slack · HubSpot · Salesforce · Mistral · Gemini · Zoho · Gmail · Outlook · Google Drive · Stripe · Excel · Word · Google Sheets · Google Doc".split(" · ")].map((t, i) =>
            <span key={i} className="mono" style={{ fontSize: 14, color: "var(--ink-2)", flexShrink: 0, fontWeight: 500 }}>
                {t}
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- TWO OFFERS — main section ---------- */
function TwoOffers() {
  const mobile = useMobile();
  const [hov, setHov] = useState(null);
  return (
    <section id="solutions" className="section" style={{ position: "relative" }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 16 }}>
          <span className="pill" style={{ fontSize: "14px" }}><span className="mono">/01</span> Nos offres</span>
        </div>
        <h2 className="reveal" style={{ textAlign: "center", maxWidth: 880, margin: "0 auto 24px" }}>
          Deux façons de transformer votre <span className="serif accent-grad">entreprise</span> avec l'IA.
        </h2>
        <p className="reveal" style={{ textAlign: "center", fontSize: 18, maxWidth: 600, margin: "0 auto 64px" }}>
          Que vous souhaitiez déployer des solutions concrètes ou monter en compétences en interne, BALIA vous accompagne de bout en bout.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 20 }}>
          {/* OFFER 1 — Solutions IA */}
          <div className="reveal card" style={{
            padding: 0, overflow: "hidden",
            background: "#fff",
            border: `1.5px solid ${hov === 0 ? "rgba(30,91,255,0.45)" : "rgba(30,91,255,0.22)"}`,
            display: "flex", flexDirection: "column",
            transform: hov === 0 ? "translateY(-6px)" : "none",
            boxShadow: (mobile || hov === 0) ? "0 24px 64px rgba(30,91,255,0.14)" : "none",
            transition: "transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .2s ease",
            cursor: "pointer"
          }}
          onMouseEnter={() => !mobile && setHov(0)} onMouseLeave={() => setHov(null)}>
            <div style={{
              padding: "32px 36px 28px",
              background: "linear-gradient(135deg, #1E5BFF 0%, #0EA5E9 100%)",
              color: "#fff",
              position: "relative",
              overflow: "hidden"
            }}>
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(600px 200px at 80% 0%, rgba(255,255,255,0.18), transparent 70%)", pointerEvents: "none" }} />
              <div className="mono" style={{ fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 18, opacity: 0.85 }}>
                Offre 01 / Implémentation
              </div>
              <h3 style={{ fontSize: 36, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05, marginBottom: 16, color: "#fff" }}>
                Solutions IA<br />
                <span className="serif" style={{ opacity: 0.92 }}>déployées chez vous.</span>
              </h3>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.9)", maxWidth: 460 }}>On installe des automatisations et des agents IA dans votre entreprise pour aller plus vite. Audit, conception, déploiement, suivi de l'évolutivité.

              </p>
            </div>

            <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "32px 34px 36px 36px" }}>
              <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 18 }}>
                Inclus
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14, marginBottom: 32, textAlign: "left" }}>
                {[
                "Audit gratuit (à distance ou sur place) : cartographie des process actuels",
                "Identification des cas d'usages prioritaires",
                "Conception et déploiement d'infrastructures IA sur mesure",
                "Intégration à vos outils actuels",
                "Mse en production, ajustements et retours utilisateur",
                "Suivi continu et évolutivité possible"].
                map((f, i) =>
                <li key={i} style={{ display: "flex", gap: 12, fontSize: 15, color: "var(--ink-2)", textAlign: "left" }}>
                    <CheckIcon />
                    <span>{f}</span>
                  </li>
                )}
              </ul>

              <div style={{ paddingTop: 24, borderTop: "1px solid var(--line)", marginTop: "auto" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 20, gap: 16 }}>
                  <div>
                    <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>OFFRE DE PRIX SUR MESURE</div>
                    <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--ink)" }}>Prix sur étude</div>
                    <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>Audit · Offre de prix personnalisée</div>
                  </div>
                  <div style={{
                    padding: "6px 12px", borderRadius: 999,
                    background: "rgba(30,91,255,0.08)", color: "var(--primary)",
                    fontSize: 13, fontWeight: 500, fontFamily: "JetBrains Mono",
                    whiteSpace: "nowrap", flexShrink: 0
                  }}>Réponse sous 2j</div>
                </div>
                <a href="#contact" className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
                  Démarrer un audit gratuit <span className="arr">→</span>
                </a>
              </div>
            </div>
          </div>

          {/* OFFER 2 — Formations Qualiopi */}
          <div className="reveal card" style={{
            padding: 0, overflow: "hidden",
            background: "#fff",
            border: `1.5px solid ${hov === 1 ? "rgba(30,91,255,0.45)" : "rgba(30,91,255,0.22)"}`,
            display: "flex", flexDirection: "column",
            transform: hov === 1 ? "translateY(-6px)" : "none",
            boxShadow: (mobile || hov === 1) ? "0 24px 64px rgba(30,91,255,0.14)" : "none",
            transition: "transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .2s ease",
            cursor: "pointer"
          }}
          onMouseEnter={() => !mobile && setHov(1)} onMouseLeave={() => setHov(null)}>
            <div style={{
              padding: "32px 36px 28px",
              background: "linear-gradient(135deg, #0E2A6B 0%, #1E5BFF 100%)",
              color: "#fff",
              position: "relative",
              overflow: "hidden"
            }}>
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(600px 200px at 80% 0%, rgba(255,255,255,0.16), transparent 70%)", pointerEvents: "none" }} />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
                <div className="mono" style={{ fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.85 }}>
                  Offre 02 / Formation
                </div>
                <div style={{
                  background: "rgba(255,255,255,0.16)",
                  border: "1px solid rgba(255,255,255,0.3)",
                  padding: "5px 10px", borderRadius: 999,
                  fontSize: 12, fontWeight: 500, fontFamily: "JetBrains Mono",
                  letterSpacing: "0.06em", textTransform: "uppercase",
                  display: "inline-flex", alignItems: "center", gap: 6
                }}>
                  ✓ Qualiopi
                </div>
              </div>
              <h3 style={{ fontSize: 36, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05, marginBottom: 16, color: "#fff" }}>
                Formations sur mesure<br />
                <span className="serif" style={{ opacity: 0.92 }}>100% financées.</span>
              </h3>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.9)", maxWidth: 460 }}>Vos équipes formées à l'utilisation de l'IA dans votre domaine. Établissement d'un programme sur mesure ou proposition de programmes existants. Formation certifiée Qualiopi, finançable intégralement par votre OPCO et par CPF.

              </p>
            </div>

            <div style={{ padding: "32px 36px 36px", flex: 1, display: "flex", flexDirection: "column" }}>
              <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 18 }}>PRECISIONS

              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14, marginBottom: 32 }}>
                {[
                "Sur mesure selon le besoin de l'entreprise",
                "Niveaux débutant, intermédiaire, avancé",
                "Cas concrets selon le secteur d'activité",
                "Formations pragmatiques, orientées résultats",
                "Présentiel, distanciel ou hybride au choix",
                "Éligible de l'auto entreprise à la grande entreprise"].
                map((f, i) =>
                <li key={i} style={{ display: "flex", gap: 12, fontSize: 15, color: "var(--ink-2)" }}>
                    <CheckIcon />
                    <span>{f}</span>
                  </li>
                )}
              </ul>

              <div style={{ paddingTop: 24, borderTop: "1px solid var(--line)", marginTop: "auto" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 20, gap: 16 }}>
                  <div>
                    <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Pour vous</div>
                    <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--ink)" }}>0 €</div>
                    <div className="mono" style={{ fontSize: 15, fontWeight: 600, color: "var(--primary)", marginTop: 6, letterSpacing: "0.01em" }}>Prise en charge OPCO et CPF</div>
                  </div>
                  <div style={{
                    padding: "6px 12px", borderRadius: 999,
                    background: "rgba(14,165,233,0.10)", color: "#0277A8",
                    fontSize: 13, fontWeight: 500, fontFamily: "JetBrains Mono"
                  }}>
                    Certifié Qualiopi
                  </div>
                </div>
                <a href="#contact" className="btn btn-dark" style={{ width: "100%", justifyContent: "center", backgroundColor: "rgb(50, 112, 255)" }}>
                  Demander un financement <span className="arr">→</span>
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Stats strip */}
        <div className="reveal" style={{
          marginTop: 80,
          display: "grid",
          gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)",
          gap: mobile ? "24px 0" : 0,
          paddingTop: 32,
          borderTop: "1px solid var(--line)"
        }}>
          {[
          ["Heures moy. économisées /mois/pers", 16, " h"],
          ["Retour sur investissement moyen", 2.7, " mois", 1],
          ["Entreprises formées\n\n", 50, "", 0, "+"],
          ["Note de satisfaction\n\n", 4.9, " / 5", 1]].
          map(([label, val, suffix, dec, prefix], i) =>
          <div key={i} style={{ paddingLeft: (mobile ? i % 2 !== 0 : i !== 0) ? 32 : 0, borderLeft: (mobile ? i % 2 !== 0 : i !== 0) ? "1px solid var(--line)" : "none" }}>
              <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 12, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                {label}
              </div>
              <div style={{ fontSize: 38, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1, color: "var(--ink)" }}>
                {prefix}<Counter to={val} suffix={suffix} decimals={dec || 0} />
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
      <circle cx="9" cy="9" r="9" fill="#1E5BFF" fillOpacity="0.10" />
      <path d="M5.5 9.5 L8 12 L12.5 6.5" stroke="#1E5BFF" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>);

}

/* ---------- FORMATIONS detail (focus offer 2) ---------- */
function Formations() {
  const mobile = useMobile();
  const [hov, setHov] = useState(null);
  const [hovExtra, setHovExtra] = useState(null);
  const programs = [
  { title: "Booster sa productivité grâce à l'IA", duration: "1 jour · 7h", level: "Débutant · Intermédiaire", desc: "Découvrir et maîtriser les meilleures IA à utiliser dans son secteur pour booster sa productivité.", price: "500 €" },
  { title: "Copilot, ChatGPT, ou Claude en entreprise", duration: "2 jours · 14h", level: "Intermédiaire", desc: "Apprendre à utiliser un des 3 environnements de manière poussée pour créer des assistants spécialisés à déployer pour des tâches sur mesure.", price: "950 €" },
  { title: "Génération de visuels par IA", duration: "1 jour · 7h", level: "Débutant · Intermédiaire", desc: "Produire et modifier des visuels, images, vidéos, sites webs et présentations professionnelles grâce aux IA génératives actuelles.", price: "550 €" },
  { title: "Automatisations et agents IA avancés", duration: "2 jours · 14h", level: "Avancé", desc: "Apprendre les bases pour devenir architecte IA dans son entreprise et déployer des solutions d'automatisations avancées pour des tâches numériques précises.", price: "1 150 €" }];

  return (
    <section id="formations" className="section" style={{ background: "#fff", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="reveal" style={{ display: "flex", justifyContent: "center", marginBottom: 32 }}>
          <span className="pill" style={{ fontSize: "14px" }}><span className="mono">/03</span> Catalogue formations</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: mobile ? 32 : 80, alignItems: "end", marginBottom: 64 }}>
          <div>
            <h2 className="reveal" style={{ textAlign: "left", margin: "0px 0px 0px 2px" }}>
              5 programmes,<br />
              <span className="serif accent-grad">financés</span> OPCO et CPF.
            </h2>
          </div>
          <div className="reveal">
            <div style={{
              background: "linear-gradient(135deg, rgba(30,91,255,0.06), rgba(14,165,233,0.04))",
              border: "1px solid var(--line)",
              borderRadius: 16, padding: 24
            }}>
              <div className="mono" style={{ fontSize: 13, color: "var(--primary)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12 }}>✓ Qualiopi · Professionnalisant</div>
              <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6 }}>BALIA est organisme de formation certifié. Vos formations sont prises en charge à 100% par votre OPCO.</p>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 20 }}>
          {programs.map((p, i) => (
            <div key={i} className="reveal" style={{ transitionDelay: i * 60 + "ms" }}>
              <div style={{
                position: "relative", overflow: "hidden",
                background: !mobile && hov === i
                  ? "linear-gradient(135deg, rgba(30,91,255,0.06), #fff 70%)"
                  : "linear-gradient(135deg, rgba(30,91,255,0.03), #fff 70%)",
                border: `1.5px solid ${!mobile && hov === i ? "rgba(30,91,255,0.38)" : "rgba(30,91,255,0.16)"}`,
                borderRadius: 18, padding: "32px 28px 28px",
                display: "flex", flexDirection: "column", gap: 18,
                transition: "border-color .28s ease, box-shadow .28s ease, background .28s ease",
                boxShadow: !mobile && hov === i
                  ? "0 0 0 4px rgba(30,91,255,0.07), 0 20px 48px rgba(30,91,255,0.13)"
                  : "0 2px 12px rgba(30,91,255,0.06)",
                cursor: "pointer"
              }}
              onMouseEnter={() => setHov(i)}
              onMouseLeave={() => setHov(null)}>
                {/* Decorative number */}
                <div style={{
                  position: "absolute", bottom: 14, right: 20,
                  fontSize: 88, fontWeight: 700, lineHeight: 1,
                  fontFamily: "'JetBrains Mono', monospace",
                  color: !mobile && hov === i ? "rgba(30,91,255,0.10)" : "rgba(14,14,20,0.04)",
                  userSelect: "none", letterSpacing: "-0.04em",
                  transition: "color .28s ease", pointerEvents: "none"
                }}>0{i + 1}</div>

                {/* Header: title + price badge */}
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14, position: "relative" }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: mobile ? 17 : 19, fontWeight: 600, color: "var(--ink)", marginBottom: 10, letterSpacing: "-0.015em", lineHeight: 1.25 }}>{p.title}</div>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, fontFamily: "'JetBrains Mono', monospace", color: "var(--ink-3)", background: "rgba(14,14,20,0.04)", borderRadius: 999, padding: "4px 10px" }}>{p.duration}</span>
                      <span style={{ display: "inline-flex", alignItems: "center", fontSize: 12, fontFamily: "'JetBrains Mono', monospace", color: "var(--primary)", background: "rgba(30,91,255,0.08)", borderRadius: 999, padding: "4px 10px", textTransform: "uppercase", letterSpacing: "0.05em" }}>{p.level}</span>
                    </div>
                  </div>
                  <div style={{
                    flexShrink: 0, textAlign: "center",
                    background: !mobile && hov === i ? "rgba(30,91,255,0.10)" : "rgba(30,91,255,0.06)",
                    borderRadius: 14, padding: "10px 14px",
                    transition: "background .28s ease",
                    border: `1px solid ${!mobile && hov === i ? "var(--primary-line)" : "transparent"}`
                  }}>
                    <div style={{ fontSize: 12, color: "var(--ink-3)", textDecoration: "line-through", fontFamily: "'JetBrains Mono', monospace", marginBottom: 6 }}>{p.price}</div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: "var(--primary)", fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em", lineHeight: 1.3 }}>Finançable<br/>OPCO</div>
                  </div>
                </div>

                {/* Description */}
                <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, position: "relative" }}>{p.desc}</p>

                {/* CTA */}
                <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--line)", position: "relative" }}>
                  <a href="#contact" style={{
                    display: "inline-flex", alignItems: "center", gap: 10,
                    fontSize: 14, fontWeight: 500,
                    color: !mobile && hov === i ? "#fff" : "var(--primary)",
                    background: !mobile && hov === i ? "var(--primary)" : "rgba(30,91,255,0.08)",
                    borderRadius: 999, padding: "9px 16px",
                    transition: "all .28s ease"
                  }}>
                    Demander des détails <span style={{ display: "inline-block", transition: "transform .2s", transform: !mobile && hov === i ? "translateX(3px)" : "translateX(0)" }}>→</span>
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Programme CPF — pleine largeur */}
        <div className="reveal" style={{ marginTop: 20 }}>
          <div style={{
            position: "relative", overflow: "hidden",
            background: hovExtra === 'cpf' ? "linear-gradient(135deg, #fff6ee 0%, #fff 60%)" : "linear-gradient(135deg, #fffaf5 0%, #fff 70%)",
            border: `1.5px solid ${hovExtra === 'cpf' ? "rgba(249,115,22,0.5)" : "rgba(249,115,22,0.28)"}`,
            borderRadius: 18, padding: mobile ? "28px 24px" : "32px 36px",
            display: "flex", flexDirection: mobile ? "column" : "row", gap: 36,
            transform: hovExtra === 'cpf' ? "translateY(-5px)" : "none",
            boxShadow: hovExtra === 'cpf' ? "0 20px 56px rgba(249,115,22,0.12)" : "none",
            transition: "transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .2s ease, background .2s ease",
            cursor: "pointer"
          }}
          onMouseEnter={() => !mobile && setHovExtra('cpf')} onMouseLeave={() => setHovExtra(null)}
          onTouchStart={() => setHovExtra('cpf')} onTouchEnd={() => setTimeout(() => setHovExtra(null), 600)}>
            <div style={{ position: "absolute", top: 0, right: 0, width: 300, height: 200, background: "radial-gradient(ellipse, rgba(249,115,22,0.06), transparent 70%)", pointerEvents: "none" }} />
            <div style={{ flex: 1, position: "relative" }}>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 18 }}>
                <span style={{ fontSize: 12, fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, color: "#fff", background: "#F97316", borderRadius: 999, padding: "5px 12px", letterSpacing: "0.06em", textTransform: "uppercase" }}>CPF</span>
                <span style={{ fontSize: 12, fontFamily: "'JetBrains Mono', monospace", color: "var(--ink-2)", background: "rgba(14,14,20,0.05)", borderRadius: 999, padding: "5px 12px" }}>3 jours · 21h</span>
                <span style={{ fontSize: 12, fontFamily: "'JetBrains Mono', monospace", color: "var(--ink-2)", background: "rgba(14,14,20,0.05)", borderRadius: 999, padding: "5px 12px" }}>Bordeaux ou distanciel</span>
              </div>
              <div style={{ fontSize: mobile ? 19 : 22, fontWeight: 600, color: "var(--ink)", marginBottom: 14, letterSpacing: "-0.02em", lineHeight: 1.3 }}>
                Développer son activité grâce à l'intelligence artificielle
              </div>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, marginBottom: 20 }}>
                Développer les compétences des participants en stratégie d'intégration de l'IA dans son entreprise, au travers de cas pratiques.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                "Élaborer un plan d'intégration de l'IA dans son entreprise.",
                "Implémenter les solutions d'IA dans les processus de l'entreprise.",
                "Évaluer l'impact de l'intégration de l'IA sur les performances de l'entreprise."
                ].map((obj, i) =>
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <div style={{ flexShrink: 0, width: 22, height: 22, borderRadius: "50%", background: "rgba(249,115,22,0.14)", display: "flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
                      <span style={{ fontSize: 11, fontWeight: 700, color: "#F97316", fontFamily: "'JetBrains Mono', monospace" }}>{i + 1}</span>
                    </div>
                    <span style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55 }}>{obj}</span>
                  </div>
                )}
              </div>
              {!mobile && (
                <a href="#contact" style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  fontSize: 14, fontWeight: 500,
                  color: "#fff", background: "#F97316",
                  borderRadius: 999, padding: "10px 20px",
                  marginTop: 28, alignSelf: "flex-start",
                  transition: "all .25s ease",
                  boxShadow: "0 4px 16px rgba(249,115,22,0.3)"
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 8px 24px rgba(249,115,22,0.4)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 4px 16px rgba(249,115,22,0.3)"; }}>
                  Demander des détails <span>→</span>
                </a>
              )}
            </div>
            <div style={{ flexShrink: 0, display: "flex", flexDirection: "column", alignItems: mobile ? "flex-start" : "flex-end", justifyContent: mobile ? "space-between" : "flex-start", gap: 28, minWidth: 160, paddingRight: mobile ? 72 : 0 }}>
              <div style={{ textAlign: mobile ? "left" : "right" }}>
                <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.08em" }}>Tarif</div>
                <div style={{ fontSize: 28, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.02em", lineHeight: 1 }}>1 500 €</div>
                <div style={{
                  marginTop: 10, background: "rgba(249,115,22,0.09)",
                  border: "1px solid rgba(249,115,22,0.24)", borderRadius: 12,
                  padding: "8px 14px", textAlign: "center"
                }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: "#F97316", fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em", lineHeight: 1.3 }}>Finançable<br/>CPF</div>
                </div>
              </div>
              {mobile && (
                <a href="#contact" style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  fontSize: 14, fontWeight: 500,
                  color: "#fff", background: "#F97316",
                  borderRadius: 999, padding: "10px 14px",
                  alignSelf: "flex-start",
                  transition: "all .25s ease",
                  boxShadow: "0 4px 16px rgba(249,115,22,0.3)"
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 8px 24px rgba(249,115,22,0.4)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 4px 16px rgba(249,115,22,0.3)"; }}>
                  Demander des détails <span>→</span>
                </a>
              )}
            </div>
            <div style={{ position: "absolute", zIndex: 9999, bottom: mobile ? 16 : 12, right: mobile ? 8 : 20, fontSize: mobile ? 88 : 96, fontWeight: 700, lineHeight: 1, fontFamily: "'JetBrains Mono', monospace", color: hovExtra === 'cpf' ? "rgba(249,115,22,0.28)" : "rgba(249,115,22,0.18)", userSelect: "none", letterSpacing: "-0.04em", transition: "color .28s ease", pointerEvents: "none" }}>05</div>
          </div>
        </div>

        {/* Tronc commun — pleine largeur */}
        <div className="reveal" style={{ marginTop: 56 }}>
          <div style={{
            background: hovExtra === 'tronc'
              ? "linear-gradient(135deg, rgba(30,91,255,0.07) 0%, #fff 55%)"
              : "linear-gradient(135deg, rgba(30,91,255,0.05) 0%, #fff 55%)",
            border: `1.5px solid ${hovExtra === 'tronc' ? "rgba(30,91,255,0.32)" : "rgba(30,91,255,0.2)"}`,
            borderRadius: 20, padding: mobile ? "28px 24px" : "36px 44px",
            boxShadow: hovExtra === 'tronc' ? "0 8px 40px rgba(30,91,255,0.12)" : "0 4px 32px rgba(30,91,255,0.07)",
            transform: hovExtra === 'tronc' ? "translateY(-4px)" : "none",
            transition: "transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .2s ease, background .2s ease",
            cursor: "default"
          }}
          onMouseEnter={() => !mobile && setHovExtra('tronc')} onMouseLeave={() => setHovExtra(null)}
          onTouchStart={() => setHovExtra('tronc')} onTouchEnd={() => setTimeout(() => setHovExtra(null), 600)}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 28 }}>
              <div>
                <div className="mono" style={{ fontSize: 12, color: "var(--primary)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>
                  Tronc commun · Inclus dans chaque programme
                </div>
                <div style={{ fontSize: mobile ? 20 : 24, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.02em" }}>
                  Ce que chaque formation couvre, sans exception.
                </div>
              </div>
              <span style={{ flexShrink: 0, fontSize: 12, fontFamily: "'JetBrains Mono', monospace", color: "var(--ink-3)", background: "rgba(14,14,20,0.04)", border: "1px solid var(--line)", borderRadius: 999, padding: "6px 14px" }}>
                Adapté à votre secteur sur demande
              </span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: mobile ? 16 : 24 }}>
              {[
              ["Comprendre l'IA", "Bases, capacités et limites des modèles actuels. Panorama des outils disponibles en 2026."],
              ["Prompter comme un pro", "Méthodes structurées pour obtenir des résultats fiables et reproductibles."],
              ["RGPD & gouvernance IA", "Risques juridiques, conformité, bonnes pratiques data et politique d'usage interne."]].
              map(([t, d], i) => {
                const sk = `s${i}`;
                return (
                <div key={i}
                  style={{
                    background: hovExtra === sk ? "rgba(30,91,255,0.07)" : "rgba(30,91,255,0.03)",
                    border: `1.5px solid ${hovExtra === sk ? "rgba(30,91,255,0.3)" : "rgba(30,91,255,0.12)"}`,
                    borderRadius: 16, padding: mobile ? "22px 20px" : "28px 28px",
                    transform: hovExtra === sk ? "translateY(-3px)" : "none",
                    boxShadow: hovExtra === sk ? "0 8px 24px rgba(30,91,255,0.1)" : "none",
                    transition: "all .3s cubic-bezier(.22,1,.36,1)",
                    cursor: "default"
                  }}
                  onMouseEnter={() => !mobile && setHovExtra(sk)}
                  onMouseLeave={() => setHovExtra(null)}
                  onTouchStart={() => setHovExtra(sk)}
                  onTouchEnd={() => setTimeout(() => setHovExtra(null), 500)}>
                    <div style={{ marginBottom: 20, opacity: hovExtra === sk ? 1 : 0.8, transition: "opacity .3s ease" }}>
                      {i === 0 && (
                        <svg width="88" height="88" viewBox="0 0 44 44" fill="none">
                          <circle cx="22" cy="10" r="3.5" stroke="var(--primary)" strokeWidth="1.5"/>
                          <circle cx="10" cy="26" r="3.5" stroke="var(--primary)" strokeWidth="1.5"/>
                          <circle cx="34" cy="26" r="3.5" stroke="var(--primary)" strokeWidth="1.5"/>
                          <circle cx="16" cy="38" r="3.5" stroke="var(--primary)" strokeWidth="1.5"/>
                          <circle cx="28" cy="38" r="3.5" stroke="var(--primary)" strokeWidth="1.5"/>
                          <line x1="22" y1="13.5" x2="10" y2="22.5" stroke="var(--primary)" strokeWidth="1.2" strokeOpacity="0.6"/>
                          <line x1="22" y1="13.5" x2="34" y2="22.5" stroke="var(--primary)" strokeWidth="1.2" strokeOpacity="0.6"/>
                          <line x1="10" y1="29.5" x2="16" y2="34.5" stroke="var(--primary)" strokeWidth="1.2" strokeOpacity="0.6"/>
                          <line x1="10" y1="29.5" x2="28" y2="34.5" stroke="var(--primary)" strokeWidth="1.2" strokeOpacity="0.6"/>
                          <line x1="34" y1="29.5" x2="16" y2="34.5" stroke="var(--primary)" strokeWidth="1.2" strokeOpacity="0.6"/>
                          <line x1="34" y1="29.5" x2="28" y2="34.5" stroke="var(--primary)" strokeWidth="1.2" strokeOpacity="0.6"/>
                        </svg>
                      )}
                      {i === 1 && (
                        <svg width="88" height="88" viewBox="0 0 44 44" fill="none">
                          <rect x="6" y="9" width="26" height="20" rx="4" stroke="var(--primary)" strokeWidth="1.5"/>
                          <path d="M12 18l5 4-5 4" stroke="var(--primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                          <line x1="21" y1="26" x2="30" y2="26" stroke="var(--primary)" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.7"/>
                          <path d="M34 22l4-4-4-4" stroke="var(--primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" strokeOpacity="0.75"/>
                          <line x1="38" y1="18" x2="32" y2="18" stroke="var(--primary)" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.75"/>
                        </svg>
                      )}
                      {i === 2 && (
                        <svg width="88" height="88" viewBox="0 0 44 44" fill="none">
                          <path d="M22 4L8 10v12c0 9 6 16.5 14 19 8-2.5 14-10 14-19V10L22 4z" stroke="var(--primary)" strokeWidth="1.5" strokeLinejoin="round"/>
                          <path d="M16 22l4 4 9-9" stroke="var(--primary)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                      )}
                    </div>
                    <div style={{ fontSize: mobile ? 16 : 18, fontWeight: 600, color: "var(--ink)", marginBottom: 10, letterSpacing: "-0.015em", lineHeight: 1.25 }}>{t}</div>
                    <div style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55 }}>{d}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* CTA formation sur mesure */}
        <div className="reveal" style={{ marginTop: 20 }}>
          <div style={{
            background: "linear-gradient(135deg, #0E2A6B 0%, #1E5BFF 100%)",
            color: "#fff",
            borderRadius: 20,
            padding: mobile ? "28px 24px" : "32px 44px",
            display: "flex", flexDirection: mobile ? "column" : "row",
            alignItems: mobile ? "flex-start" : "center",
            justifyContent: "space-between", gap: 24,
            position: "relative", overflow: "hidden"
          }}>
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(700px 200px at 80% 0%, rgba(255,255,255,0.14), transparent 70%)", pointerEvents: "none" }} />
            <div style={{ position: "relative" }}>
              <div className="mono" style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 10, opacity: 0.75 }}>
                Besoin spécifique ?
              </div>
              <div style={{ fontSize: mobile ? 20 : 24, fontWeight: 600, lineHeight: 1.2, marginBottom: 10, letterSpacing: "-0.02em" }}>
                Une compétence spécifique à monter en interne ?
              </div>
              <p style={{ fontSize: 18, color: "rgba(255,255,255,0.88)", lineHeight: 1.6, maxWidth: 520 }}>
                On conçoit un programme 100% sur mesure, adapté à votre métier et à votre niveau. Toujours éligible aux financements OPCO.
              </p>
            </div>
            <a href="#contact" style={{
              display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
              flexShrink: 0, position: "relative",
              height: 50, padding: "0 26px", borderRadius: 999,
              background: "#fff", color: "var(--ink)",
              fontSize: 14, fontWeight: 600,
              whiteSpace: "nowrap",
              transition: "transform .2s"
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-1px)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
              Demander une formation sur mesure <span className="arr">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- METHODE ---------- */
function Methode() {
  const mobile = useMobile();
  const stepsRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = stepsRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = Math.max(0, Math.min(1, (vh - rect.top) / vh));
      setProgress(p);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const steps = [
  { num: "01", title: "Audit gratuit", body: "1h pour cartographier vos process et chercher des solutions IA sur mesure. Sans engagement.", t: "J+0" },
  { num: "02", title: "Conception", body: "Conception et développement des agents IA et des workflows. Suivi en temps réel du projet et validations intermédiaires.", t: "J+10" },
  { num: "03", title: "Déploiement", body: "Mise en production progressive avec formation simultanée des équipes.", t: "J+30" },
  { num: "04", title: "Optimisation", body: "Amélioration continue. Ajout de nouveaux cas d'usage. Suivi de l'évolutivité dans le temps.", t: "J+90" }];

  const thresholds = [0, 0.32, 0.64, 0.92];

  return (
    <section id="methode" className="section">
      <div className="container">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 16 }}>
          <span className="pill" style={{ fontSize: "14px" }}><span className="mono">/02</span> Solutions IA</span>
        </div>
        <h2 className="reveal" style={{ textAlign: "center", marginBottom: 24, maxWidth: 800, margin: "0 auto" }}>
          De l'audit au <span className="serif accent-grad">déploiement,</span> en 30 jours max.
        </h2>
        <p className="reveal" style={{ textAlign: "center", fontSize: 17, marginBottom: 80, maxWidth: 580, margin: "24px auto 80px" }}>
          Quatre étapes claires. Des livrables concrets. Aucun comité à rallonge.
        </p>

        {mobile ? (
          /* ---- MOBILE : timeline verticale ---- */
          <div className="reveal" ref={stepsRef} style={{ position: "relative", paddingLeft: 0 }}>
            {/* Ligne de fond */}
            <div style={{ position: "absolute", left: 6, top: 7, bottom: 0, width: 1.5, background: "var(--line)" }} />
            {/* Ligne animée */}
            <div style={{
              position: "absolute", left: 6, top: 7,
              width: 1.5,
              height: `${progress * 100}%`,
              background: "linear-gradient(180deg, #1E5BFF, #0EA5E9)",
              transition: "none"
            }} />
            {steps.map((s, i) => {
              const active = progress >= thresholds[i];
              return (
                <div key={i} style={{
                  position: "relative",
                  paddingLeft: 36,
                  paddingBottom: i < steps.length - 1 ? 52 : 0
                }}>
                  <div style={{
                    position: "absolute", left: 0, top: 0,
                    width: 14, height: 14, borderRadius: "50%",
                    background: active ? "linear-gradient(135deg, #1E5BFF, #0EA5E9)" : "#fff",
                    border: `1.5px solid ${active ? "var(--primary)" : "var(--line-strong)"}`,
                    boxShadow: active ? "0 0 0 4px rgba(30,91,255,0.14)" : "none",
                    transition: "all 0.45s ease",
                    zIndex: 1
                  }} />
                  <div className="mono" style={{
                    fontSize: 13, letterSpacing: "0.06em", marginBottom: 8,
                    color: active ? "var(--primary)" : "var(--ink-3)",
                    transition: "color 0.4s ease"
                  }}>{s.t} · {s.num}</div>
                  <h3 style={{
                    fontSize: 20, marginBottom: 8, letterSpacing: "-0.015em",
                    opacity: active ? 1 : 0.35,
                    transition: "opacity 0.45s ease"
                  }}>{s.title}</h3>
                  <p style={{
                    fontSize: 14, lineHeight: 1.55,
                    opacity: active ? 1 : 0.35,
                    transition: "opacity 0.5s ease"
                  }}>{s.body}</p>
                </div>
              );
            })}
          </div>
        ) : (
          /* ---- DESKTOP : timeline horizontale ---- */
          <div className="reveal" ref={stepsRef} style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, position: "relative" }}>
            {/* Ligne de fond */}
            <div style={{ position: "absolute", top: 6.5, left: 7, width: "calc(75% + 7px)", height: 1.5, background: "var(--line)" }} />
            {/* Ligne animée */}
            <div style={{
              position: "absolute", top: 6.5, left: 7,
              height: 1.5,
              width: `calc(${progress * 75}% + ${progress > 0 ? 7 : 0}px)`,
              background: "linear-gradient(90deg, #1E5BFF, #0EA5E9)",
              transition: "none"
            }} />
            {steps.map((s, i) => {
              const active = progress >= thresholds[i];
              return (
                <div key={i} style={{ paddingRight: 24 }}>
                  <div style={{
                    width: 14, height: 14, borderRadius: "50%",
                    background: active ? "linear-gradient(135deg, #1E5BFF, #0EA5E9)" : "#fff",
                    border: `1.5px solid ${active ? "var(--primary)" : "var(--line-strong)"}`,
                    marginBottom: 26, position: "relative", zIndex: 1,
                    boxShadow: active ? "0 0 0 4px rgba(30,91,255,0.14)" : "none",
                    transition: "all 0.45s ease"
                  }} />
                  <div className="mono" style={{
                    fontSize: 13, letterSpacing: "0.06em", marginBottom: 10,
                    color: active ? "var(--primary)" : "var(--ink-3)",
                    transition: "color 0.4s ease"
                  }}>{s.t} · {s.num}</div>
                  <h3 style={{
                    fontSize: 22, marginBottom: 10, letterSpacing: "-0.015em",
                    opacity: active ? 1 : 0.35,
                    transition: "opacity 0.45s ease"
                  }}>{s.title}</h3>
                  <p style={{
                    fontSize: 14, lineHeight: 1.55,
                    opacity: active ? 1 : 0.35,
                    transition: "opacity 0.5s ease"
                  }}>{s.body}</p>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </section>);

}

/* ---------- CAS CLIENTS ---------- */
function CasClients({ tweaks }) {
  const mobile = useMobile();
  const [hov, setHov] = useState(null);
  const cases = [
  {
    n: "01", company: tweaks.case1_company, sector: tweaks.case1_sector,
    problem: tweaks.case1_problem, solution: tweaks.case1_solution,
    metric: tweaks.case1_metric, metricLabel: tweaks.case1_metricLabel,
    before: 100, after: 32,
    bg: "linear-gradient(135deg, #1E5BFF 0%, #0EA5E9 100%)"
  },
  {
    n: "02", company: tweaks.case2_company, sector: tweaks.case2_sector,
    problem: tweaks.case2_problem, solution: tweaks.case2_solution,
    metric: tweaks.case2_metric, metricLabel: tweaks.case2_metricLabel,
    before: 60, after: 92,
    bg: "linear-gradient(135deg, #0E2A6B 0%, #1E5BFF 100%)"
  },
  {
    n: "03", company: tweaks.case3_company, sector: tweaks.case3_sector,
    problem: tweaks.case3_problem, solution: tweaks.case3_solution,
    metric: tweaks.case3_metric, metricLabel: tweaks.case3_metricLabel,
    before: 100, after: 25,
    bg: "linear-gradient(135deg, #0EA5E9 0%, #06618A 100%)"
  }];

  return (
    <section id="cas-clients" className="section" style={{ background: "#fff", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="reveal" style={{ display: "flex", justifyContent: "center", marginBottom: 32 }}>
          <span className="pill" style={{ fontSize: "14px" }}><span className="mono">/04</span> Cas clients</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: mobile ? 24 : 80, alignItems: "end", marginBottom: 64 }}>
          <div>
            <h2 className="reveal">
              Des résultats <span className="serif accent-grad">mesurés</span>,<br />
              pas des promesses.
            </h2>
          </div>
          <p className="reveal" style={{ fontSize: 17, maxWidth: 480, paddingBottom: 8 }}>
            Trois exemples concrets, chiffrés. Chaque mission est suivie sur des indicateurs business définis dès l'audit.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: 16 }}>
          {cases.map((c, i) =>
          <div key={i} className="reveal" style={{
            borderRadius: 18, overflow: "hidden",
            border: `1px solid ${hov === i ? "rgba(30,91,255,0.42)" : "rgba(30,91,255,0.18)"}`,
            transitionDelay: i * 80 + "ms",
            display: "flex", flexDirection: "column", minHeight: 460,
            background: "#fff",
            transform: hov === i ? "translateY(-6px) scale(1.01)" : "none",
            boxShadow: hov === i ? "0 24px 56px rgba(14,14,20,0.13), 0 0 0 4px rgba(30,91,255,0.05)" : "0 4px 20px rgba(30,91,255,0.07)",
            transition: "transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .2s ease",
            cursor: "pointer", position: "relative", zIndex: hov === i ? 1 : "auto"
          }}
          onMouseEnter={() => !mobile && setHov(i)} onMouseLeave={() => setHov(null)}>
              {/* Header gradient */}
              <div style={{ background: c.bg, padding: "24px 24px 20px", color: "#fff", position: "relative", overflow: "hidden" }}>
                <div style={{ position: "absolute", inset: 0, background: "radial-gradient(400px 200px at 80% 0%, rgba(255,255,255,0.18), transparent 70%)", pointerEvents: "none" }} />
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", position: "relative", marginBottom: 20 }}>
                  <span className="mono" style={{ fontSize: 12, color: "rgba(255,255,255,0.6)", letterSpacing: "0.1em" }}>- {c.n}</span>
                  <span className="mono" style={{ fontSize: 11, color: "#fff", padding: "4px 10px", background: "rgba(255,255,255,0.16)", border: "1px solid rgba(255,255,255,0.24)", borderRadius: 999, textTransform: "uppercase", letterSpacing: "0.06em" }}>{c.sector}</span>
                </div>
                <div style={{ position: "relative" }}>
                  <div style={{ fontSize: 64, fontWeight: 600, letterSpacing: "-0.045em", lineHeight: 0.9, color: "#fff", marginBottom: 8 }}>{c.metric}</div>
                  <div className="mono" style={{ fontSize: 12, color: "rgba(255,255,255,0.8)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{c.metricLabel}</div>
                </div>
              </div>
              {/* Body */}
              <div style={{ padding: "20px 24px 24px", background: "#fff", flex: 1, display: "flex", flexDirection: "column" }}>
                <div style={{ fontSize: 17, fontWeight: 600, color: "var(--ink)", marginBottom: 16, letterSpacing: "-0.015em", lineHeight: 1.25 }}>{c.company}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                  <div style={{ background: "rgba(14,14,20,0.03)", borderRadius: 10, padding: "10px 14px" }}>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4 }}>Problème</div>
                    <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>{c.problem}</div>
                  </div>
                  <div style={{ background: "rgba(30,91,255,0.04)", border: "1px solid rgba(30,91,255,0.1)", borderRadius: 10, padding: "10px 14px" }}>
                    <div className="mono" style={{ fontSize: 11, color: "var(--primary)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4 }}>Solution</div>
                    <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>{c.solution}</div>
                  </div>
                </div>
                {/* Before / after bars */}
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 8 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", width: 40, flexShrink: 0 }}>Avant</div>
                    <div className="bar-track" style={{ flex: 1 }}>
                      <div className="bar-fill muted" style={{ width: c.before + "%" }} />
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", width: 28, textAlign: "right" }}>{c.before}%</div>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <div className="mono" style={{ fontSize: 11, color: "var(--primary)", width: 40, flexShrink: 0 }}>Après</div>
                    <div className="bar-track" style={{ flex: 1 }}>
                      <div className="bar-fill" style={{ width: c.after + "%" }} />
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--primary)", width: 28, textAlign: "right" }}>{c.after}%</div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
function FAQ() {
  const mobile = useMobile();
  const items = [
  { q: "L'audit est-il vraiment gratuit ?", a: "Oui, totalement. Environ 1h pour comprendre les processus numériques de votre entreprise, identifier les possibilité d'améliorations avec des solutions IA pertinentes. Déterminer les cas d'usage à fort impact et proposer un plan d'action concret, sans engagement. Notre expertise nous permet de cibler vite, et juste." },
  { q: "Vos solutions sont-elles sécurisées ?", a: "Toutes les solutions sont sécurisées et respectueuses du RGPD. L'hébergement se fait sur un serveur interne dans l'entreprise. Sur demande, déploiement possible pour les données sensibles via IA françaises et transfert de data en France." },
  { q: "Combien de temps pour voir un premier résultat ?", a: "Les résultats surprennent dès la mise en production. Le retour sur investissement est directement mesurable !" },
  { q: "Les formations sont-elles vraiment financées ?", a: "Oui, les formations sont certifiées Qualiopi ou CPF. Elles peuvent être prises en charge à 100% par vos OPCO ou par le CPF. Pour cela, il suffit de nous contacter et nous vous donnerons plus de détails en fonction de votre OPCO." },
  { q: "Les formations sont-elles en présentiel ou distanciel ?", a: "Les deux, au choix. Présentiel dans vos locaux, distanciel via visio, ou format hybride." },
  { q: "Faut-il changer nos outils existants ?", a: "Non. Nous concevons les solutions IA pour qu'elles s'intègrent à votre stack actuelle (CRM, ERP, Slack, email, etc.) via API. L'objectif : zéro friction pour vos équipes." }];

  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section">
      <div className="container">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 16 }}>
          <span className="pill" style={{ fontSize: "14px" }}><span className="mono">/05</span> FAQ</span>
        </div>
        <h2 className="reveal" style={{ textAlign: "center", marginBottom: 64, maxWidth: 800, margin: "0 auto 64px" }}>
          Questions <span className="serif accent-grad">fréquentes.</span>
        </h2>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          {items.map((it, i) =>
          <div key={i} className="reveal" style={{ borderTop: "1px solid var(--line)", borderBottom: i === items.length - 1 ? "1px solid var(--line)" : "none" }}>
              <button
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{
                width: "100%", background: "transparent", border: "none",
                padding: "24px 0", display: "flex", justifyContent: "space-between", alignItems: "center",
                cursor: "pointer", textAlign: "left", color: "var(--ink)"
              }}>
                <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em" }}>{it.q}</span>
                <span style={{
                width: 32, height: 32, borderRadius: "50%",
                border: "1px solid var(--line-strong)",
                display: "flex", alignItems: "center", justifyContent: "center",
                transform: open === i ? "rotate(45deg)" : "rotate(0)",
                transition: "transform .3s",
                flexShrink: 0
              }}>
                  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1 V11 M1 6 H11" stroke="var(--ink)" strokeWidth="1.4" /></svg>
                </span>
              </button>
              <div style={{ maxHeight: open === i ? (mobile ? 400 : 200) : 0, overflow: "hidden", transition: "max-height .4s cubic-bezier(.22,1,.36,1)" }}>
                <p style={{ fontSize: 15, paddingBottom: 24, paddingRight: mobile ? 16 : 60, lineHeight: 1.6, color: "var(--ink-2)" }}>{it.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Calendly inline widget ---------- */
function CalendlyWidget() {
  const mobile = useMobile();
  useEffect(() => {
    if (!document.querySelector('script[data-balia-calendly]')) {
      var s = document.createElement('script');
      s.src = 'https://assets.calendly.com/assets/external/widget.js';
      s.async = true;
      s.setAttribute('data-balia-calendly', '1');
      document.head.appendChild(s);
    }
  }, []);
  return (
    <div
      className="calendly-inline-widget"
      data-url="https://calendly.com/studio-balan/appel-de-decouverte-solutions-ia-alban?hide_event_type_details=1"
      style={{ minWidth: 320, height: mobile ? 750 : 660 }}
    />
  );
}

/* ---------- CTA ---------- */
function CTA() {
  const mobile = useMobile();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  const [interest, setInterest] = useState("solutions");
  const [msg, setMsg] = useState("");
  const [newsletter, setNewsletter] = useState(true);
  const [sent, setSent] = useState(false);
  const [sendError, setSendError] = useState(false);
  const valid = name.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && company.trim();

  async function submit(e) {
    e.preventDefault();
    if (!valid) return;
    setSendError(false);
    try {
      const res = await fetch("https://n8n.srv1264991.hstgr.cloud/webhook/leads-site-web", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ interest, name, email, company, msg, newsletter, _k: "balia-form-2026" })
      });
      if (!res.ok) throw new Error('server');
      setSent(true);
    } catch (_) {
      setSendError(true);
    }
  }

  return (
    <section id="contact" className="section" style={{ position: "relative", overflow: "hidden", background: "linear-gradient(180deg, #FAFAF7 0%, #EAF1FF 100%)" }}>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none", background: "radial-gradient(700px 400px at 50% 30%, rgba(30,91,255,0.10), transparent 70%)" }} />
      <div className="container" style={{ position: "relative" }}>
        <div className="reveal" style={{ textAlign: "center", marginBottom: 16 }}>
          <span className="pill"><span className="dot" />Audit gratuit · Réponse sous 24h</span>
        </div>
        <h2 className="reveal" style={{ textAlign: "center", marginBottom: 24, maxWidth: 900, margin: "0 auto" }}>
          Parlons de <span className="serif accent-grad">votre projet.</span>
        </h2>
        <p className="reveal" style={{ textAlign: "center", fontSize: 18, maxWidth: 600, margin: "24px auto 56px" }}>
          Un échange rapide pour comprendre vos enjeux et identifier les premiers cas d'usage à fort impact. Sans engagement.
        </p>

        <div className="reveal" style={{ maxWidth: 960, margin: "0 auto 40px" }}>
          <CalendlyWidget />
        </div>

        <div className="reveal" style={{ display: "flex", alignItems: "center", gap: 16, maxWidth: 720, margin: "0 auto 40px" }}>
          <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
          <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em", whiteSpace: "nowrap" }}>Ou laissez-nous un message</span>
          <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
        </div>

        <div className="reveal" style={{ maxWidth: 720, margin: "0 auto" }}>
          {sent ?
          <div className="card" style={{ padding: 56, textAlign: "center" }}>
              <div className="mono" style={{ fontSize: 13, color: "var(--primary)", letterSpacing: "0.08em", marginBottom: 18, textTransform: "uppercase" }}>✓ Message envoyé</div>
              <h3 style={{ fontSize: 28, fontWeight: 500, marginBottom: 14, letterSpacing: "-0.02em" }}>Merci, {name.split(" ")[0]}.</h3>
              <p style={{ fontSize: 15 }}>Nous revenons vers vous sous 24h ouvrées avec une proposition de créneau.</p>
            </div> :

          <form onSubmit={submit} className="card" style={{ padding: 32, display: "flex", flexDirection: "column", gap: 16 }}>
              {sendError && (
                <div style={{ background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.25)", borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ fontSize: 15 }}>⚠</span>
                  <p style={{ fontSize: 14, color: "#B91C1C", margin: 0 }}>Une erreur est survenue. Veuillez réessayer ou nous contacter directement à <a href="mailto:alban@agence-balia.fr" style={{ color: "#B91C1C", textDecoration: "underline" }}>alban@agence-balia.fr</a></p>
                </div>
              )}
              <div>
                <label className="mono" style={{ fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.08em", display: "block", marginBottom: 10 }}>Je suis intéressé par</label>
                <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 10 }}>
                  {[
                { id: "solutions", label: "Solutions IA" },
                { id: "formations", label: "Formations" }].
                map((o) =>
                <button key={o.id} type="button" onClick={() => setInterest(o.id)}
                style={{
                  padding: "12px 14px",
                  background: interest === o.id ? "linear-gradient(135deg, rgba(30,91,255,0.10), rgba(14,165,233,0.06))" : "#fff",
                  border: "1px solid " + (interest === o.id ? "var(--primary)" : "var(--line-strong)"),
                  borderRadius: 10,
                  fontSize: 14, color: "var(--ink)", fontWeight: 500,
                  cursor: "pointer", textAlign: "left",
                  transition: "all .2s"
                }}>
                      {o.label}
                    </button>
                )}
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 16 }}>
                <div>
                  <label className="mono" style={{ fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.08em", display: "block", marginBottom: 10 }}>Nom</label>
                  <input className="field" value={name} onChange={(e) => setName(e.target.value)} placeholder="Camille Durand" maxLength={100} />
                </div>
                <div>
                  <label className="mono" style={{ fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.08em", display: "block", marginBottom: 10 }}>Email pro</label>
                  <input className="field" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="camille@entreprise.fr" maxLength={200} />
                </div>
              </div>
              <div>
                <label className="mono" style={{ fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.08em", display: "block", marginBottom: 10 }}>Entreprise</label>
                <input className="field" value={company} onChange={(e) => setCompany(e.target.value)} placeholder="Nom de l'entreprise" maxLength={150} />
              </div>
              <div>
                <label className="mono" style={{ fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.08em", display: "block", marginBottom: 10 }}>Contexte (optionnel)</label>
                <textarea className="field" value={msg} onChange={(e) => setMsg(e.target.value)} rows={4} placeholder="Quel process aimeriez-vous automatiser en priorité ?" style={{ resize: "vertical" }} maxLength={2000} />
              </div>
              <label style={{
                display: "flex", alignItems: "flex-start", gap: 12,
                cursor: "pointer", padding: "14px 16px",
                background: newsletter ? "linear-gradient(135deg, rgba(30,91,255,0.06), rgba(14,165,233,0.04))" : "rgba(14,14,20,0.02)",
                border: `1px solid ${newsletter ? "rgba(30,91,255,0.3)" : "var(--line)"}`,
                borderRadius: 12, transition: "all .2s ease"
              }}>
                <input type="checkbox" checked={newsletter} onChange={(e) => setNewsletter(e.target.checked)} style={{ display: "none" }} />
                <div style={{
                  flexShrink: 0, width: 20, height: 20, borderRadius: 6,
                  background: newsletter ? "var(--primary)" : "#fff",
                  border: `2px solid ${newsletter ? "var(--primary)" : "var(--line-strong)"}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  marginTop: 1, transition: "all .2s ease"
                }}>
                  {newsletter && <svg width="11" height="9" viewBox="0 0 11 9" fill="none"><path d="M1 4.5L4 7.5L10 1.5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </div>
                <span style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
                  <strong style={{ color: "var(--ink)", fontWeight: 500 }}>Recevoir les offres et actualités Balia en avant-première.</strong>{" "}Désabonnement à tout moment.
                </span>
              </label>
              <button type="submit" className="btn btn-primary"
            style={{ width: "100%", height: 52, justifyContent: "center", marginTop: 4, opacity: valid ? 1 : 0.5, cursor: valid ? "pointer" : "not-allowed" }}
            disabled={!valid}>
                Envoyer ma demande <span className="arr">→</span>
              </button>
              <p className="mono" style={{ fontSize: 12, color: "var(--ink-3)", textAlign: "center", marginTop: 4, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                Vos données restent confidentielles · Aucune prospection
              </p>
            </form>
          }
        </div>
      </div>
    </section>);

}

/* ---------- Cookie Banner ---------- */
function CookieBanner() {
  const [visible, setVisible] = useState(false);
  const [leaving, setLeaving] = useState(false);

  useEffect(() => {
    if (!localStorage.getItem('balia_cookie_consent')) {
      setTimeout(() => setVisible(true), 1200);
    }
  }, []);

  function loadScript(src) {
    var s = document.createElement("script");
    s.type = "text/javascript"; s.async = true; s.src = src;
    document.head.appendChild(s);
  }

  function dismiss(choice) {
    setLeaving(true);
    localStorage.setItem('balia_cookie_consent', choice);
    if (choice === 'accepted') {
      // Lemlist visitor tracking
      loadScript("https://app.lemlist.com/api/visitors/tracking?k=I7dFQTJZfMa2G8OfmmGBvnacJy%2F%2BXB6f9vIICTDyU2s%3D&t=tea_iBfvts94zda3AE8LS");
      // LinkedIn Insight Tag — remplacer 123456 par votre Partner ID LinkedIn Campaign Manager
      (function(l) {
        if (!l) { window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]; }
        loadScript("https://snap.licdn.com/li.lms-analytics/insight.min.js");
      })(window.lintrk);
    }
    setTimeout(() => setVisible(false), 400);
  }

  if (!visible) return null;

  return (
    <div style={{
      position: "fixed", bottom: 20, left: "50%",
      transform: leaving ? "translate(-50%, 120%)" : "translate(-50%, 0)",
      transition: "transform .4s cubic-bezier(.22,1,.36,1)",
      zIndex: 9999, width: "calc(100% - 40px)", maxWidth: 680
    }}>
      <div style={{
        background: "rgba(14,14,20,0.96)",
        backdropFilter: "blur(12px)",
        borderRadius: 16,
        border: "1px solid rgba(255,255,255,0.08)",
        padding: "16px 20px",
        display: "flex", alignItems: "center",
        gap: 16, flexWrap: "wrap",
        boxShadow: "0 8px 40px rgba(0,0,0,0.3)"
      }}>
        <div style={{ flex: 1, minWidth: 200 }}>
          <span style={{ fontSize: 13, color: "rgba(255,255,255,0.9)", lineHeight: 1.5 }}>
            Ce site utilise des cookies pour mesurer l'audience et améliorer votre expérience.{" "}
            <a href="confidentialite.html" style={{ color: "rgba(255,255,255,0.5)", textDecoration: "underline", fontSize: 12 }}>En savoir plus</a>
          </span>
        </div>
        <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
          <button onClick={() => dismiss('refused')} style={{
            height: 36, padding: "0 16px", borderRadius: 999,
            background: "transparent", border: "1px solid rgba(255,255,255,0.2)",
            color: "rgba(255,255,255,0.6)", fontSize: 13, cursor: "pointer",
            transition: "all .2s", fontFamily: "inherit"
          }}
          onMouseEnter={e => e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)"}
          onMouseLeave={e => e.currentTarget.style.borderColor = "rgba(255,255,255,0.2)"}>
            Refuser
          </button>
          <button onClick={() => dismiss('accepted')} style={{
            height: 36, padding: "0 18px", borderRadius: 999,
            background: "linear-gradient(135deg, #3D7BFF, #1E5BFF)",
            border: "none", color: "#fff", fontSize: 13, fontWeight: 500,
            cursor: "pointer", transition: "all .2s", fontFamily: "inherit",
            boxShadow: "0 4px 16px rgba(30,91,255,0.4)"
          }}
          onMouseEnter={e => e.currentTarget.style.transform = "translateY(-1px)"}
          onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}>
            Accepter
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const mobile = useMobile();
  return (
    <footer style={{ background: "#fff", borderTop: "1px solid var(--line)", padding: "56px 0 56px" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "1.6fr 1fr 1fr 1fr", gap: mobile ? 32 : 64 }}>
        <div style={{ gridColumn: mobile ? "1 / -1" : "auto" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 600, fontSize: 18, marginBottom: 16, color: "var(--ink)" }}>
            <img src="assets/logo-balia.png" alt="BALIA" style={{ width: 28, height: 28, objectFit: "contain" }} />
            Balia.
          </div>
          <p style={{ fontSize: 13, maxWidth: 320, color: "var(--ink-2)" }}>
            Solutions IA et formations Qualiopi.<br/>Bordeaux · mobilité nationale.
          </p>
          <div style={{ marginTop: 20, display: "flex", gap: 8, flexWrap: "wrap" }}>
            <span className="mono" style={{ fontSize: 13, padding: "5px 10px", borderRadius: 999, background: "rgba(30,91,255,0.08)", color: "var(--primary)" }}>✓ Qualiopi</span>
            <span className="mono" style={{ fontSize: 13, padding: "5px 10px", borderRadius: 999, background: "rgba(249,115,22,0.10)", color: "#F97316" }}>✓ CPF</span>
          </div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 16 }}>Offres</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              { label: "Solutions IA", href: "#solutions" },
              { label: "Formations", href: "#formations" },
              { label: "Méthode", href: "#methode" },
              { label: "Cas clients", href: "#cas-clients" }
            ].map((it, j) => <li key={j}><a href={it.href} style={{ fontSize: 13, color: "var(--ink-2)", transition: "color .2s" }} onMouseEnter={e=>e.target.style.color="var(--ink)"} onMouseLeave={e=>e.target.style.color="var(--ink-2)"}>{it.label}</a></li>)}
          </ul>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 16 }}>Réseaux</div>
          <a href="https://www.linkedin.com/in/alban-lartigau-%F0%9F%91%BE-310527397/" target="_blank" rel="noreferrer"
            style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--ink-2)", transition: "color .2s" }}
            onMouseEnter={e=>e.currentTarget.style.color="var(--ink)"} onMouseLeave={e=>e.currentTarget.style.color="var(--ink-2)"}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.35-1.85 3.59 0 4.25 2.36 4.25 5.43v6.31zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.46C23.2 24 24 23.23 24 22.27V1.73C24 .77 23.2 0 22.23 0z"/></svg>
            LinkedIn
          </a>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 13, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 16 }}>Légal</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              { label: "Mentions légales", href: "mentions-legales.html" },
              { label: "Confidentialité", href: "confidentialite.html" },
              { label: "CGV", href: "cgv.html" }
            ].map((it, j) => <li key={j}><a href={it.href} style={{ fontSize: 13, color: "var(--ink-2)", transition: "color .2s" }} onMouseEnter={e=>e.target.style.color="var(--ink)"} onMouseLeave={e=>e.target.style.color="var(--ink-2)"}>{it.label}</a></li>)}
          </ul>
        </div>
      </div>
      <div className="container" style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", flexDirection: mobile ? "column" : "row", gap: mobile ? 8 : 0 }}>
        <span className="mono" style={{ fontSize: 13, color: "var(--ink-3)" }}>© 2026 Balia - Tous droits réservés</span>
      </div>
    </footer>);

}

/* ---------- Tweaks ---------- */
function Tweaks({ tweaks, setTweak }) {
  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakText = window.TweakText;
  if (!TweaksPanel) return null;
  return (
    <TweaksPanel title="Cas clients">
      {[1, 2, 3].map((n) =>
      <React.Fragment key={n}>
          <TweakSection label={`Cas ${n}`} />
          <TweakText label="Entreprise" value={tweaks[`case${n}_company`]} onChange={(v) => setTweak(`case${n}_company`, v)} />
          <TweakText label="Secteur" value={tweaks[`case${n}_sector`]} onChange={(v) => setTweak(`case${n}_sector`, v)} />
          <TweakText label="Problème" value={tweaks[`case${n}_problem`]} onChange={(v) => setTweak(`case${n}_problem`, v)} />
          <TweakText label="Solution" value={tweaks[`case${n}_solution`]} onChange={(v) => setTweak(`case${n}_solution`, v)} />
          <TweakText label="Métrique" value={tweaks[`case${n}_metric`]} onChange={(v) => setTweak(`case${n}_metric`, v)} />
          <TweakText label="Libellé" value={tweaks[`case${n}_metricLabel`]} onChange={(v) => setTweak(`case${n}_metricLabel`, v)} />
        </React.Fragment>
      )}
    </TweaksPanel>);

}

function App() {
  const useTweaks = window.useTweaks;
  const [tweaks, setTweak] = useTweaks ? useTweaks(DEFAULTS) : [DEFAULTS, () => {}];
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <TrustStrip />
        <TwoOffers />
        <Methode />
        <Formations />
        <CasClients tweaks={tweaks} />
        <FAQ />
        <CTA />
      </main>
      <Footer />
      <CookieBanner />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);