// All page sections.

const { useState, useEffect, useRef } = React;

/* ---------- Reveal hook ---------- */
// Single shared observer attached on mount. Auto-reveals any element with
// `.reveal` class on the page — no per-component refs needed.
let __revealInit = false;
function ensureRevealObserver() {
  if (__revealInit) return;
  __revealInit = true;
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
    });
  }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
  const observe = () => document.querySelectorAll(".reveal:not(.in)").forEach(el => io.observe(el));
  observe();
  // Re-scan on mutations (handles late mounts).
  const mo = new MutationObserver(observe);
  mo.observe(document.body, { childList: true, subtree: true });
  // Safety: after 1.5s, force-reveal anything still hidden (e.g. if observer missed it).
  setTimeout(() => document.querySelectorAll(".reveal:not(.in)").forEach(el => {
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) el.classList.add("in");
  }), 1500);
}
function useReveal() {
  useEffect(() => { ensureRevealObserver(); }, []);
  // Return null so existing `ref={useReveal()}` calls don't break — they just
  // won't have a ref attached, which is fine since the global observer handles it.
  return null;
}

/* ---------- NAV ---------- */
function Nav({ mode, setMode }) {
  const [scrolled, setScrolled] = useState(false);
  const [hidden, setHidden] = useState(false);
  useEffect(() => {
    let lastY = window.scrollY;
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 12);
      // Hide as soon as we scroll past a small threshold; show again when near top.
      if (y > 120 && y > lastY) setHidden(true);
      else if (y < 80) setHidden(false);
      lastY = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav style={{
      position: "fixed", top: 18, left: 0, right: 0, zIndex: 100,
      display: "flex", justifyContent: "center",
      padding: "0 20px",
      pointerEvents: hidden ? "none" : "none",
      transform: hidden ? "translateY(-140%)" : "translateY(0)",
      opacity: hidden ? 0 : 1,
      transition: "transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease",
    }}>
      <div className="nav-pill" style={{
        pointerEvents: "auto",
        display: "flex", alignItems: "center", gap: 6,
        padding: "6px 6px 6px 22px",
        background: "color-mix(in srgb, var(--bg-card) 88%, transparent)",
        border: "1px solid var(--border)",
        borderRadius: 999,
        backdropFilter: "blur(20px) saturate(180%)",
        WebkitBackdropFilter: "blur(20px) saturate(180%)",
        boxShadow: scrolled
          ? "0 12px 40px -12px rgba(0,0,0,0.5), 0 0 0 1px var(--border) inset"
          : "0 8px 24px -12px rgba(0,0,0,0.3)",
        transition: "box-shadow 0.3s",
      }}>
        <a href="#" style={{ display: "flex", marginRight: 10 }}><LogoWord /></a>

        <div className="nav-links" style={{ display: "flex", alignItems: "center", gap: 0 }}>
          {[
            ["Accueil", "index.html"],
            ["Méthode", "index.html#methode"],
            ["Packages", "index.html#packages"],
            ["Cas d'usage", "index.html#cas-usage"],
            ["Témoignages", "index.html#temoignages"],
            ["FAQ", "#faq"],
          ].map(([l, h]) => (
            <a key={l} href={h} style={{
              padding: "8px 14px", fontSize: 14, color: "var(--text-muted)",
              borderRadius: 999, transition: "color 0.2s, background 0.2s",
              whiteSpace: "nowrap",
            }}
              onMouseEnter={e => { e.currentTarget.style.color = "var(--text)"; }}
              onMouseLeave={e => { e.currentTarget.style.color = "var(--text-muted)"; }}
            >{l}</a>
          ))}
        </div>

        <a href="#contact" style={{
          marginLeft: 10,
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "10px 18px", fontSize: 14, fontWeight: 500,
          background: "var(--text)", color: "var(--bg)",
          borderRadius: 999, whiteSpace: "nowrap",
          transition: "transform 0.2s",
        }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "none"; }}
        >Audit gratuit</a>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

/* ---------- HERO ---------- */
const HERO_HEADLINES = {
  speed: {
    eyebrow: "Agence IA française",
    h1: <>Votre entreprise,<br/><em style={{ fontStyle: "normal", color: "var(--accent)" }}>20× plus rapide</em> grâce à l'IA.</>,
    sub: "Lymorya intègre l'IA et l'automatisation dans les PME et ETI françaises.",
  },
  execute: {
    eyebrow: "Agence IA française",
    h1: <>L'IA qui exécute,<br/>vos équipes qui <em style={{ fontStyle: "normal", color: "var(--accent)" }}>décident</em>.</>,
    sub: "On déploie des automatisations sur-mesure dans votre stack existante. Vos collaborateurs reprennent la main sur ce qui a vraiment de la valeur.",
  },
  focus: {
    eyebrow: "Agence IA française",
    h1: <>Automatisez ce qui<br/>vous <em style={{ fontStyle: "normal", color: "var(--accent)" }}>ralentit</em>.</>,
    sub: "Audit, build et déploiement d'agents IA pour PME/ETI françaises. Trois mois pour transformer un service. Garantie résultat ou on continue gratuitement.",
  },
};

function Hero({ headlineKey, heroVisualVariant }) {
  const ref = useReveal();
  const data = HERO_HEADLINES[headlineKey] || HERO_HEADLINES.speed;
  return (
    <section style={{ paddingTop: 160, paddingBottom: 100, position: "relative", overflow: "hidden" }}>
      {/* Background grid */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)",
        backgroundSize: "60px 60px",
        maskImage: "radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 70%)",
        opacity: 0.5,
        pointerEvents: "none",
      }}/>

      <div className="container hero-grid" style={{
        position: "relative",
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 64,
        alignItems: "center",
      }} ref={ref}>
        <div className="reveal-stagger reveal" style={{ minWidth: 0 }}>
          <h1 style={{ marginBottom: 24 }}>{data.h1}</h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, maxWidth: 520, marginBottom: 32, color: "var(--text-muted)" }}>{data.sub}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 40 }}>
            <a href="#contact" className="btn btn-primary">Réserver un audit gratuit <IconArrow width="14" height="14"/></a>
            <a href="#cas-usage" className="btn btn-secondary">Voir les cas d'usage</a>
          </div>
          {/* Trust micro-row */}
          <div style={{ display: "flex", alignItems: "center", gap: 18, color: "var(--text-dim)", fontSize: 13 }}>
            <div style={{ display: "flex", gap: -8 }}>
              {["#FF5C28", "#4D8DFF", "#3DDC97"].map((c, i) => (
                <span key={i} style={{
                  width: 24, height: 24, borderRadius: "50%",
                  background: c, border: "2px solid var(--bg)",
                  marginLeft: i ? -8 : 0, opacity: 0.85,
                }}/>
              ))}
            </div>
            <span>+24 PME/ETI accompagnées en 2025</span>
          </div>
        </div>

        <div className="hero-visual-wrap reveal" ref={useReveal()}>
          <HeroVisual variant={heroVisualVariant} />
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .hero-visual-wrap { order: -1; }
        }
      `}</style>
    </section>
  );
}

/* ---------- CLIENT LOGOS (marquee) ---------- */
function ClientLogos() {
  const clients = [
    { name: "Safran", src: "assets/logos/safran-w.png" },
    { name: "Century 21", src: "assets/logos/century21-w.png" },
    { name: "Auchan", src: "assets/logos/auchan-w.png" },
    { name: "Décathlon", src: "assets/logos/decathlon-w.png" },
    { name: "GE Aerospace", src: "assets/logos/ge-aerospace-w.png" },
    { name: "Les Saveurs de Maya", src: "assets/logos/saveurs-maya-w.png" },
    { name: "Sacem", src: "assets/logos/sacem.png", custom: "sacem" },
  ];
  // Duplicate for seamless loop
  const row = [...clients, ...clients, ...clients];
  return (
    <section style={{ padding: "60px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", overflow: "hidden" }}>
      <div className="container" style={{ marginBottom: 32 }}>
        <div style={{ textAlign: "center", fontSize: 12, fontFamily: '"JetBrains Mono", monospace', color: "var(--text-dim)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
          Ils nous font confiance
        </div>
      </div>
      <div className="logo-marquee" style={{
        position: "relative",
        maskImage: "linear-gradient(90deg, transparent, black 12%, black 88%, transparent)",
        WebkitMaskImage: "linear-gradient(90deg, transparent, black 12%, black 88%, transparent)",
      }}>
        <div style={{
          display: "flex", gap: 80, alignItems: "center",
          width: "max-content",
          animation: "marquee 38s linear infinite",
        }}>
          {row.map((c, i) => {
            if (c.custom === "sacem") {
              return (
                <div key={i} style={{
                  height: 36, display: "flex", alignItems: "center",
                  opacity: 0.55, transition: "opacity 0.3s", flexShrink: 0,
                }}
                  onMouseEnter={e => { e.currentTarget.style.opacity = 1; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = 0.55; }}
                >
                  <svg viewBox="0 0 200 70" height="36" style={{ display: "block" }}>
                    <path d="M 30 10 L 195 10 Q 200 10 200 16 L 200 50 Q 200 56 195 56 L 60 56 Q 50 56 50 64 L 50 64 Q 50 68 46 68 L 36 68 Q 32 68 32 64 L 32 30 Q 32 24 26 24 L 14 24 Q 10 24 10 20 L 10 14 Q 10 10 14 10 Z"
                      fill="currentColor" style={{ color: "var(--text)" }}/>
                    <text x="115" y="42" textAnchor="middle"
                      fontFamily='"Mona Sans", sans-serif' fontWeight="700" fontSize="32"
                      fontStyle="italic" letterSpacing="-1" fill="var(--bg)">sacem</text>
                  </svg>
                </div>
              );
            }
            if (c.custom === "decathlon") {
              return (
                <div key={i} style={{
                  height: 36, display: "flex", alignItems: "center",
                  opacity: 0.55, transition: "opacity 0.3s", flexShrink: 0,
                  fontFamily: '"Mona Sans", sans-serif',
                  fontWeight: 800, fontSize: 30, letterSpacing: "-0.04em",
                  color: "var(--text)",
                  textTransform: "uppercase",
                  fontStyle: "italic",
                }}
                  onMouseEnter={e => { e.currentTarget.style.opacity = 1; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = 0.55; }}
                >Decathlon</div>
              );
            }
            return (
              <img key={i} src={c.src} alt={c.name}
                style={{
                  height: 32,
                  width: "auto",
                  maxWidth: 160,
                  objectFit: "contain",
                  opacity: 0.55,
                  transition: "opacity 0.3s, filter 0.3s",
                  flexShrink: 0,
                  display: "block",
                }}
                onMouseEnter={e => { e.currentTarget.style.opacity = 1; }}
                onMouseLeave={e => { e.currentTarget.style.opacity = 0.55; }}
              />
            );
          })}
        </div>
      </div>
      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to { transform: translateX(calc(-100% / 3)); }
        }
        :root[data-mode="light"] .logo-marquee img { filter: invert(1) !important; }
      `}</style>
    </section>
  );
}

/* ---------- LOGO BAR / METRICS ---------- */
function LogoBar() {
  const ref = useReveal();
  const stats = [
    { value: "24+", label: "Entreprise accompagnées" },
    { value: "184h", label: "Économisées en moyenne / mois" },
    { value: "8 sem.", label: "Délai moyen de déploiement" },
    { value: "97%", label: "Des workflows en production à 6 mois" },
  ];
  return (
    <section style={{ paddingTop: 60, paddingBottom: 60, borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container reveal reveal-stagger" ref={ref}
        style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            paddingLeft: 20, borderLeft: "1px solid var(--border)",
          }}>
            <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.04em", marginBottom: 4 }}>{s.value}</div>
            <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.4 }}>{s.label}</div>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 880px) {
          section .container[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; row-gap: 28px !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- SECTION HEADER ---------- */
function SectionHead({ eyebrow, title, sub, align = "left" }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 720 : 720, margin: align === "center" ? "0 auto 64px" : "0 0 64px" }}>
      <div className="eyebrow eyebrow-dot" style={{ marginBottom: 18 }}>{eyebrow}</div>
      <h2 style={{ marginBottom: 20 }}>{title}</h2>
      {sub && <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--text-muted)" }}>{sub}</p>}
    </div>
  );
}

/* ---------- PACKAGES ---------- */
function Packages() {
  const ref = useReveal();
  const pkgs = [
    {
      id: "genese", name: "Genèse", price: "",
      Icon: IconCompass,
      tagline: "Audit stratégique IA",
      desc: "1 à 2 automatisations déployées sur vos processus les plus chronophages.",
      bullets: ["Audit", "1-2 automatisations", "Support","Guide utilisateur","Documentation"],
      cta: "Réserver un audit",
      featured: false,
    },
    {
      id: "synthese", name: "Synthèse", price: "",
      Icon: IconWaves,
      tagline: "Automatisations ponctuelles",
      desc: "ROI moyen de 5x dès la première année.",
      bullets: ["Audit", "3-5 automatisations", "Tableau de bord","Intégration de vos outils","Formation d'équipe","Documentation","Support prenium 90 jours","Session d’optimisation"],
      cta: "Réserver un audit",
      featured: true,
    },
    {
      id: "osmose", name: "Osmose", price: "",
      Icon: IconInfinity,
      tagline: "Accompagnement continu",
      desc: "Votre partenaire IA stratégique",
      bullets: ["Audit IA complet", "Outil IA sur mesure", "Intégration dans l'écosystème","Formation à l'outil","Tableau de bord ROI","Support premium à vie","Optimisations mensuelles"],
      cta: "Réserver un audit",
      featured: false,
    },
  ];

  return (
    <section id="packages" style={{ position: "relative" }}>
      <div className="container">
        <div ref={ref} className="reveal">
          <SectionHead
            eyebrow="03 — Packages"
            title="Trois façon de travailler ensemble."
            sub="Chaque mission commence par un audit. Le reste s'adapte à votre maturité IA, à votre budget et à votre rythme."
          />
        </div>

        <div className="pkg-grid reveal-stagger reveal" ref={useReveal()}
          style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, alignItems: "stretch" }}>
          {pkgs.map(p => (
            <div key={p.id} style={{
              position: "relative",
              padding: 32,
              background: p.featured
                ? "linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent-soft) 60%, var(--bg-card)) 100%)"
                : "var(--bg-card)",
              border: p.featured ? "1px solid var(--accent)" : "1px solid var(--border)",
              borderRadius: 18,
              transition: "transform 0.3s, border-color 0.3s, background 0.3s",
              display: "flex", flexDirection: "column",
              boxShadow: p.featured ? "0 24px 64px -32px var(--accent-glow)" : "none",
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "none"; }}
            >
              {p.featured && (
                <div style={{
                  position: "absolute", top: -1, right: 24,
                  background: "var(--accent)", color: "#fff",
                  fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
                  padding: "5px 11px", borderRadius: "0 0 8px 8px",
                  letterSpacing: "0.04em", textTransform: "uppercase",
                }}>Le plus choisi</div>
              )}
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: p.featured ? "var(--accent)" : "var(--bg-card-hover)",
                color: p.featured ? "#fff" : "var(--accent)",
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 22,
                border: p.featured ? "none" : "1px solid var(--border)",
              }}>
                <p.Icon width="22" height="22"/>
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 4 }}>
                <h3 style={{ fontSize: 26 }}>{p.name}</h3>
              </div>
              <div style={{ fontSize: 13, color: "var(--text-muted)", marginBottom: 18, fontFamily: '"JetBrains Mono", monospace' }}>{p.tagline}</div>
              <p style={{ marginBottom: 20, lineHeight: 1.55 }}>{p.desc}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "flex", flexDirection: "column", gap: 10 }}>
                {p.bullets.map(b => (
                  <li key={b} style={{ display: "flex", gap: 10, fontSize: 14.5, color: "var(--text)" }}>
                    <IconCheck width="18" height="18" style={{ color: "var(--accent)", flexShrink: 0, marginTop: 2 }}/>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: "auto" }}>
                <div style={{ fontSize: 13, color: "var(--text-dim)", marginBottom: 12, fontFamily: '"JetBrains Mono", monospace' }}>{p.price}</div>
                <a href="#contact" className={p.featured ? "btn btn-primary" : "btn btn-secondary"} style={{ width: "100%", justifyContent: "center" }}>
                  {p.cta} <IconArrow width="14" height="14"/>
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .pkg-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- USE CASES ---------- */
function UseCases() {
  const ref = useReveal();
  const cases = [
    { Icon: IconLeads, title: "Qualification de leads automatique", time: "Gain : 12h/sem.", desc: "Chaque lead entrant est scoré, enrichi et routé vers le bon commercial en moins de 60 secondes." },
    { Icon: IconChart, title: "Reporting mensuel généré en 2 min", time: "Gain : 8h/mois", desc: "Extraction multi-sources, mise en forme automatique, envoi PDF ou Slack au comité de direction." },
    { Icon: IconUserPlus, title: "Onboarding client 100% automatisé", time: "Gain : 4h/client", desc: "De la signature au premier login : contrats, accès, e-mails, formation. Sans intervention humaine." },
    { Icon: IconMail, title: "Tri & réponse aux emails support", time: "Gain : 22h/sem.", desc: "Classification, brouillon de réponse, escalade des cas complexes. Vous gardez la main sur le ton." },
    { Icon: IconInvoice, title: "Traitement des factures fournisseurs", time: "Gain : 14h/sem.", desc: "OCR, vérification, rapprochement, intégration comptable. Validation finale en 1 clic." },
    { Icon: IconPhone, title: "Prise de RDV par agent vocal", time: "Disponible 24/7", desc: "Un agent IA répond, qualifie et planifie sur votre agenda. Avec un naturel troublant." },
  ];
  return (
    <section id="cas-usage" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container">
        <div ref={ref} className="reveal">
          <SectionHead
            eyebrow="04 — Cas d'usage"
            title="Concret, mesurable, déployé."
            sub="Voici ce que nos clients automatisent en ce moment. Chaque cas a été déployé chez au moins une PME française cette année."
          />
        </div>

        <div className="usecase-grid reveal-stagger reveal" ref={useReveal()}
          style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: 18, overflow: "hidden" }}>
          {cases.map((c, i) => (
            <div key={i} className="usecase-cell" style={{
              background: "var(--bg-elev)",
              padding: 32,
              transition: "background 0.25s",
              cursor: "pointer",
              minHeight: 220,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}
              onMouseEnter={e => e.currentTarget.style.background = "var(--bg-card-hover)"}
              onMouseLeave={e => e.currentTarget.style.background = "var(--bg-elev)"}
            >
              <div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22 }}>
                  <c.Icon width="22" height="22" style={{ color: "var(--accent)" }}/>
                  <span style={{ fontSize: 11, fontFamily: '"JetBrains Mono", monospace', color: "var(--text-dim)", letterSpacing: "0.04em" }}>{c.time}</span>
                </div>
                <h3 style={{ fontSize: 19, marginBottom: 10, letterSpacing: "-0.02em" }}>{c.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55 }}>{c.desc}</p>
              </div>

            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .usecase-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 600px) {
          .usecase-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- METHODE ---------- */
function Methode() {
  const ref = useReveal();
  const steps = [
    { n: "01", title: "Audit", time: "3 jours", desc: "On observe vos équipes, on cartographie les process, on chiffre les pertes de temps actuelles." },
    { n: "02", title: "Diagnostic", time: "1 semaine", desc: "On vous remet une roadmap priorisée par ROI. Vous validez le périmètre du premier chantier." },
    { n: "03", title: "Développement", time: "4–8 semaines", desc: "On code, on teste, on itère avec vos utilisateurs métier. Pas de big bang, des releases hebdomadaires." },
    { n: "04", title: "Déploiement", time: "Continu", desc: "Mise en prod, formation, monitoring. On reste à vos côtés ou on passe la main proprement." },
  ];

  return (
    <section id="methode">
      <div className="container">
        <div ref={ref} className="reveal">
          <SectionHead
            eyebrow="02 — Méthode"
            title="De l'audit au déploiement, en quatre temps."
            sub="Pas de slides interminables, pas de méthodologie propriétaire. On regarde, on diagnostique, on construit, on livre."
          />
        </div>

        <div className="reveal" ref={useReveal()} style={{ position: "relative" }}>
          {/* Timeline line */}
          <div className="timeline-line" style={{
            position: "absolute", top: 30, left: "8%", right: "8%", height: 1,
            background: "linear-gradient(90deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent)",
          }}/>
          <div className="method-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative" }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{ position: "relative" }}>
                <div style={{
                  width: 60, height: 60, borderRadius: "50%",
                  background: "var(--bg)",
                  border: "1px solid var(--border-strong)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 14,
                  color: "var(--accent)",
                  marginBottom: 20,
                  position: "relative", zIndex: 1,
                }}>{s.n}</div>
                <div style={{ fontSize: 11, fontFamily: '"JetBrains Mono", monospace', color: "var(--text-dim)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 8 }}>{s.time}</div>
                <h3 style={{ fontSize: 22, marginBottom: 10 }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55 }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .method-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .timeline-line { display: none !important; }
        }
        @media (max-width: 540px) {
          .method-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- TESTIMONIALS ---------- */
function Testimonials() {
  const ref = useReveal();
  const items = [
    {
      quote: "On a récupéré l'équivalent d'un mi-temps sur le service achats en six semaines. L'équipe Lymorya a compris notre métier avant même de toucher au code.",
      author: "Camille Bertin",
      role: "",
      company: "",
    },
    {
      quote: "Ce qui change avec Lymorya : ils livrent. On avait testé deux autres prestataires avant, beaucoup de slides, peu de production. Là, premier workflow en prod en quatre semaines.",
      author: "Yannick Mercier",
      role: "",
      company: "",
    },
    {
      quote: "La phase d'audit à elle seule valait le prix. On a découvert trois process automatisables qu'on n'imaginait pas. ROI atteint au bout de cinq mois.",
      author: "Lina Aubert",
      role: "",
      company: "",
    },
  ];

  return (
    <section id="temoignages" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container">
        <div ref={ref} className="reveal">
          <SectionHead
            eyebrow="05 — Ils nous ont fait confiance"
            title="Quelques retours, sans filtre."
          />
        </div>

        <div className="testi-grid reveal-stagger reveal" ref={useReveal()}
          style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {items.map((t, i) => (
            <div key={i} style={{
              padding: 32,
              background: "var(--bg-card)",
              border: "1px solid var(--border)",
              borderRadius: 18,
              display: "flex", flexDirection: "column",
            }}>
              <div style={{ marginBottom: 22, color: "var(--accent)", display: "flex", gap: 2 }}>
                {[0,1,2,3,4].map(i => <IconStar key={i} width="14" height="14" style={{ fill: "var(--accent)" }}/>)}
              </div>
              <p style={{ color: "var(--text)", fontSize: 16, lineHeight: 1.6, marginBottom: 28, flex: 1 }}>
                « {t.quote} »
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 22, borderTop: "1px solid var(--border)" }}>
                <div style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: "var(--bg-card-hover)",
                  border: "1px solid var(--border)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 13,
                  color: "var(--text-muted)",
                }}>
                  {t.author.split(" ").map(n => n[0]).join("")}
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: "var(--text)" }}>{t.author}</div>
                  <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .testi-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  const items = [
    { q: "Combien de temps avant de voir un premier résultat ?", a: "Notre cycle standard est de 4 à 8 semaines entre la signature et le premier workflow en production. La phase d'audit dure 3 jours, le diagnostic 1 semaine, et la construction démarre dès la validation du périmètre. Vous voyez des releases incrémentales chaque semaine — pas de big bang." },
    { q: "Faut-il avoir des données « propres » ou un SI moderne ?", a: "Non. Nous travaillons aussi bien avec des Excel partagés qu'avec des ERP modernes. Une partie de notre travail est précisément de structurer ce qui existe pour que l'IA puisse s'y greffer. Si votre stack est vraiment trop fragile, on vous le dira honnêtement." },
    { q: "Mes données restent-elles en France ?", a: "Selon votre cas d'usage, nous déployons sur des infrastructures hébergées en France (Scaleway, OVH) ou en UE. Les modèles sensibles peuvent tourner en self-hosted dans votre VPC. Nous signons des DPA conformes RGPD pour chaque mission." },
    { q: "Et si l'IA fait une erreur ?", a: "Nos workflows incluent toujours un mécanisme de validation humain pour les décisions à fort impact. Pour le reste, on monitore les taux d'erreur en continu et on déclenche des alertes au-delà de seuils définis avec vous. La fiabilité moyenne en prod sur nos déploiements 2025 est de 99,3%." },
    { q: "Vous remplacez nos équipes ?", a: "Non. Nous automatisons les tâches à faible valeur ajoutée pour que vos équipes en fassent plus de celles à forte valeur. Aucun de nos clients n'a réduit ses effectifs après une mission Lymorya — mais beaucoup ont annulé un recrutement prévu." },
    { q: "Quelle différence avec un cabinet de conseil ?", a: "On code. Un cabinet vous remet une recommandation, on vous remet un workflow qui tourne en prod. Notre audit débouche systématiquement sur du livrable technique — pas sur un PowerPoint et un devis pour la phase suivante." },
  ];

  return (
    <section id="faq">
      <div className="container">
        <div ref={ref} className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="eyebrow eyebrow-dot" style={{ marginBottom: 18 }}>06 — FAQ</div>
            <h2 style={{ marginBottom: 20 }}>Les questions qu'on nous pose souvent.</h2>
            <p style={{ marginBottom: 28, fontSize: 16 }}>Vous ne trouvez pas votre réponse ?</p>
            <a href="#contact" className="btn btn-secondary">Posez-la directement <IconArrow width="14" height="14"/></a>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} style={{
                borderTop: "1px solid var(--border)",
                borderBottom: i === items.length - 1 ? "1px solid var(--border)" : "none",
              }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
                  padding: "24px 0", textAlign: "left", fontSize: 17, fontWeight: 500, color: "var(--text)",
                  letterSpacing: "-0.015em",
                }}>
                  <span>{it.q}</span>
                  <span style={{
                    display: "flex", alignItems: "center", justifyContent: "center",
                    width: 32, height: 32, borderRadius: "50%",
                    border: "1px solid var(--border-strong)",
                    transition: "transform 0.3s, background 0.2s",
                    transform: open === i ? "rotate(45deg)" : "rotate(0)",
                    background: open === i ? "var(--accent)" : "transparent",
                    color: open === i ? "#fff" : "var(--text-muted)",
                    flexShrink: 0,
                  }}>
                    <IconPlus width="14" height="14"/>
                  </span>
                </button>
                <div style={{
                  maxHeight: open === i ? 400 : 0, overflow: "hidden",
                  transition: "max-height 0.4s cubic-bezier(0.22,1,0.36,1)",
                }}>
                  <p style={{ paddingBottom: 28, fontSize: 15.5, lineHeight: 1.65, maxWidth: 620 }}>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          #faq .container > div { grid-template-columns: 1fr !important; gap: 40px !important; }
          #faq .container > div > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- CONTACT FORM ---------- */
function ContactForm() {
  const [form, setForm] = useState({ name: "", email: "", message: "", consent: false });
  const [status, setStatus] = useState("idle"); // idle | sending | sent | error
  const submitted = status === "sent";
  const sending = status === "sending";
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.consent || sending) return;
    setStatus("sending");
    try {
      const res = await fetch("https://formsubmit.co/ajax/contact@lymorya.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          message: form.message,
          _subject: `Nouvelle demande d'audit — ${form.name}`,
          _template: "table",
          _captcha: "false",
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && (data.success === "true" || data.success === true || res.status === 200)) {
        setStatus("sent");
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  };

  const fieldStyle = {
    width: "100%",
    padding: "14px 16px",
    background: "transparent",
    border: "1px solid var(--border-strong)",
    borderRadius: 12,
    color: "var(--text)",
    fontSize: 15,
    fontFamily: "inherit",
    outline: "none",
    transition: "border-color 0.2s, background 0.2s",
  };
  const labelStyle = {
    fontSize: 11,
    fontFamily: '"JetBrains Mono", monospace',
    color: "var(--text-dim)",
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    marginBottom: 10,
    display: "block",
  };

  return (
    <section id="contact" style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="container">
        <div className="contact-grid reveal" style={{
          display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "start",
        }}>
          {/* Left: copy */}
          <div>
            <div className="eyebrow eyebrow-dot" style={{ marginBottom: 22 }}>Contact</div>
            <h2 style={{ marginBottom: 28 }}>30 minutes.<br/>Zéro engagement.</h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, marginBottom: 16 }}>
              Réservez votre audit IA gratuit. On analyse vos processus et on vous montre en moyenne combien d'heures et d'argent vous pouvez récupérer.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--text)", fontWeight: 500, marginBottom: 40 }}>
              100 % de valeur. On vous recontacte sous 24 h.
            </p>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["01", "Audit gratuit en visio"],
                ["02", "Recommandations chiffrées"],
                ["03", "Réponse sous 24 h"],
              ].map(([n, l]) => (
                <li key={n} style={{ display: "flex", alignItems: "center", gap: 18, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
                  <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 12, color: "var(--text-dim)" }}>{n}</span>
                  <span style={{ fontSize: 15, color: "var(--text)" }}>{l}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Right: form */}
          <form onSubmit={onSubmit} style={{
            padding: 36,
            background: "var(--bg-card)",
            border: "1px solid var(--border)",
            borderRadius: 22,
          }}>
            {submitted ? (
              <div style={{ textAlign: "center", padding: "60px 20px" }}>
                <div style={{
                  width: 56, height: 56, borderRadius: "50%",
                  background: "var(--accent-soft)", color: "var(--accent)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  marginBottom: 22,
                }}>
                  <IconCheck width="26" height="26" />
                </div>
                <h3 style={{ marginBottom: 12 }}>Message reçu.</h3>
                <p style={{ fontSize: 15 }}>On revient vers vous dans les 24 heures.</p>
              </div>
            ) : (
              <>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 22 }}>
                  <div>
                    <label style={labelStyle}>Votre nom</label>
                    <input type="text" required value={form.name} onChange={update("name")}
                      style={fieldStyle}
                      onFocus={e => e.target.style.borderColor = "var(--accent)"}
                      onBlur={e => e.target.style.borderColor = "var(--border-strong)"} />
                  </div>
                  <div>
                    <label style={labelStyle}>Votre mail</label>
                    <input type="email" required value={form.email} onChange={update("email")}
                      style={fieldStyle}
                      onFocus={e => e.target.style.borderColor = "var(--accent)"}
                      onBlur={e => e.target.style.borderColor = "var(--border-strong)"} />
                  </div>
                </div>
                <div style={{ marginBottom: 22 }}>
                  <label style={labelStyle}>Votre message</label>
                  <textarea rows={5} value={form.message} onChange={update("message")}
                    placeholder="Décrivez en quelques lignes vos processus actuels et ce que vous aimeriez automatiser."
                    style={{ ...fieldStyle, resize: "vertical", minHeight: 130, fontFamily: "inherit", lineHeight: 1.5 }}
                    onFocus={e => e.target.style.borderColor = "var(--accent)"}
                    onBlur={e => e.target.style.borderColor = "var(--border-strong)"} />
                </div>
                <label style={{
                  display: "flex", alignItems: "flex-start", gap: 12,
                  fontSize: 13, lineHeight: 1.55, color: "var(--text-muted)",
                  marginBottom: 26, cursor: "pointer",
                }}>
                  <input type="checkbox" required checked={form.consent} onChange={update("consent")}
                    style={{ marginTop: 3, accentColor: "var(--accent)", flexShrink: 0 }} />
                  <span>J'accepte que les informations saisies dans ce formulaire soient utilisées pour me recontacter dans le cadre de ma demande de rendez-vous et de la relation de conseil qui peut en découler.</span>
                </label>
                <button type="submit" className="btn btn-primary" disabled={sending}
                  style={{ width: "100%", justifyContent: "center", padding: "16px 22px", fontSize: 15, opacity: sending ? 0.7 : 1, cursor: sending ? "wait" : "pointer" }}>
                  {sending ? "Envoi en cours…" : <>Réserver mon audit gratuit <IconArrow width="14" height="14"/></>}
                </button>
                {status === "error" && (
                  <p style={{ marginTop: 14, fontSize: 13, color: "#FF6B6B", textAlign: "center" }}>
                    Une erreur est survenue. Réessayez ou écrivez-nous à <span style={{ textDecoration: "underline" }}>contact@lymorya.com</span>.
                  </p>
                )}
              </>
            )}
          </form>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- CTA ---------- */
function FinalCTA() {
  const ref = useReveal();
  return (
    <section id="cta" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div ref={ref} className="reveal" style={{
          position: "relative",
          padding: "80px 56px",
          background: "linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%)",
          borderRadius: 24,
          overflow: "hidden",
          textAlign: "center",
        }}>
          {/* Grid bg */}
          <div style={{
            position: "absolute", inset: 0,
            backgroundImage: "linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)",
            backgroundSize: "40px 40px",
            maskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
            WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
          }}/>
          {/* Glow */}
          <div style={{
            position: "absolute", bottom: "-50%", left: "50%", transform: "translateX(-50%)",
            width: "60%", height: "100%",
            background: "radial-gradient(ellipse, rgba(255,255,255,0.3), transparent 60%)",
            filter: "blur(40px)",
          }}/>

          <div style={{ position: "relative", color: "#fff" }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px", borderRadius: 999, background: "rgba(255,255,255,0.15)", border: "1px solid rgba(255,255,255,0.2)", fontSize: 12, fontFamily: '"JetBrains Mono", monospace', letterSpacing: "0.06em", marginBottom: 24 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#3DDC97" }}/>
              <span>Disponible</span>
            </div>
            <h2 style={{ color: "#fff", fontSize: "clamp(36px, 5vw, 60px)", maxWidth: 800, margin: "0 auto 22px" }}>
              Discutons de votre projet.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.85)", fontSize: 17, maxWidth: 560, margin: "0 auto 36px", lineHeight: 1.6 }}>
              30 minutes en visio. Vous repartez avec une estimation de gains chiffrée, que vous décidiez de travailler avec nous ou non.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <a href="#contact" className="btn" style={{
                background: "#fff", color: "#0A0A0A",
                padding: "14px 22px", fontSize: 15, fontWeight: 500,
              }}>Réserver l'audit gratuit <IconArrow width="14" height="14"/></a>
            </div>
            <div style={{ marginTop: 32, fontSize: 13, color: "rgba(255,255,255,0.7)" }}>
              Pas de relance commerciale. On regarde, on chiffre, on vous laisse décider.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer style={{ borderTop: "1px solid var(--border)", padding: "60px 0 36px" }}>
      <div className="container">
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48, marginBottom: 48 }}>
          <div>
            <LogoWord />
            <p style={{ marginTop: 18, fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
              Agence IA & automatisation pour PME et ETI françaises. Intervient partout en France.
            </p>
            <div style={{ marginTop: 22, display: "flex", gap: 8 }}>
              {[].map(s => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, borderRadius: 8,
                  border: "1px solid var(--border)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 12, color: "var(--text-muted)",
                  fontFamily: '"JetBrains Mono", monospace',
                }}>{s}</a>
              ))}
            </div>
          </div>
          {[
            { title: "", links: [] },
            { title: "", links: [] },
            { title: "Société", links: [["Mentions légales", "mentions-legales.html"], ["CGU", "cgu.html"], ["Politique de confidentialité", "politique-confidentialite.html"]] },
          ].map(col => (
            <div key={col.title}>
              <div style={{ fontSize: 12, fontFamily: '"JetBrains Mono", monospace', color: "var(--text-dim)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 18 }}>{col.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {col.links.map(([l, href]) => (
                  <li key={l}><a href={href} style={{ fontSize: 14, color: "var(--text-muted)", transition: "color 0.2s" }}
                    onMouseEnter={e => e.currentTarget.style.color = "var(--text)"}
                    onMouseLeave={e => e.currentTarget.style.color = "var(--text-muted)"}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingTop: 28, borderTop: "1px solid var(--border)",
          fontSize: 12.5, color: "var(--text-dim)",
          fontFamily: '"JetBrains Mono", monospace', letterSpacing: "0.02em",
          flexWrap: "wrap", gap: 12,
        }}>
          <div>© 2026 Lymorya · France</div>
          <div style={{ display: "flex", gap: 22 }}>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
          .footer-grid > div:first-child { grid-column: span 2; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, LogoBar, ClientLogos, Packages, UseCases, Methode, Testimonials, FAQ, ContactForm, FinalCTA, Footer });