/* global React */
const { useState, useEffect, useRef } = React;

// ==================== SHARED PRIMITIVES ====================
const Eyebrow = ({ children, color, style }) =>
  <div style={{
    fontFamily: "'Saira', system-ui, sans-serif",
    fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
    fontWeight: 500, color: color || "var(--fg-muted)",
    display: "inline-flex", alignItems: "center", gap: 10,
    ...style
  }}>
    <span style={{ width: 18, height: 1, background: "currentColor", opacity: 0.5 }}></span>
    {children}
  </div>;


const Button = ({ variant = "primary", children, onClick, icon, iconRight, style, ...rest }) => {
  const base = {
    fontFamily: "'Saira', system-ui, sans-serif",
    fontWeight: 500, fontSize: 15,
    padding: "14px 24px", borderRadius: 999, border: 0,
    cursor: "pointer",
    transition: "all 220ms cubic-bezier(.22,1,.36,1)",
    display: "inline-flex", alignItems: "center", gap: 10,
    whiteSpace: "nowrap"
  };
  const variants = {
    primary: { background: "var(--dark-green)", color: "var(--white-lynx)" },
    secondary: { background: "var(--green-lynx)", color: "var(--white-lynx)" },
    ghost: { background: "transparent", color: "var(--dark-green)", border: "1px solid var(--border-strong)" },
    light: { background: "var(--white-lynx)", color: "var(--dark-green)" },
    lightOutline: { background: "transparent", color: "var(--white-lynx)", border: "1px solid rgba(255,247,233,.35)" }
  };
  return (
    <button
      {...rest}
      onClick={onClick}
      style={{ ...base, ...variants[variant], ...(style || {}) }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>

      {icon && <i data-lucide={icon} style={{ width: 16, height: 16, strokeWidth: 1.75 }}></i>}
      {children}
      {iconRight && <i data-lucide={iconRight} style={{ width: 16, height: 16, strokeWidth: 1.75 }}></i>}
    </button>);

};

const Chip = ({ children, tone = "sage" }) => {
  const tones = {
    sage: { background: "rgba(136,166,143,.25)", color: "var(--dark-green)" },
    dark: { background: "var(--dark-green)", color: "var(--white-lynx)" },
    light: { background: "var(--white-lynx)", color: "var(--dark-green)" },
    outline: { background: "transparent", color: "var(--dark-green)", border: "1px solid var(--border-strong)" }
  };
  return (
    <span style={{
      fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
      fontWeight: 600, padding: "7px 14px", borderRadius: 999,
      display: "inline-flex", alignItems: "center", gap: 6,
      ...tones[tone]
    }}>{children}</span>);

};

// ==================== HEADER / NAV ====================
const Header = ({ current, onNav, theme = "light" }) => {
  const dark = theme === "dark";
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const bg = dark ?
    scrolled ? "rgba(21,55,56,.85)" : "rgba(21,55,56,.25)" :
    scrolled ? "rgba(255,247,233,.88)" : "rgba(255,247,233,.6)";
  const txt = dark ? "var(--white-lynx)" : "var(--dark-green)";
  const borderColor = dark ? "rgba(255,247,233,.1)" : "rgba(21,55,56,.08)";

  const items = [
    { key: "home", label: "Accueil" },
    { key: "about", label: "Qui sommes-nous" },
    { key: "faq", label: "FAQ" },
    { key: "contact", label: "Contact" }];


  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: bg,
      backdropFilter: "blur(14px)",
      WebkitBackdropFilter: "blur(14px)",
      borderBottom: `1px solid ${borderColor}`,
      transition: "background 220ms ease"
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto",
        padding: "18px 48px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <div
          onClick={() => onNav("home")}
          style={{ display: "flex", alignItems: "center", gap: 12, cursor: "pointer" }}>

          <div style={{
            background: dark ? "transparent" : "var(--dark-green)",
            padding: dark ? 0 : "6px 10px",
            borderRadius: 10,
            display: "flex", alignItems: "center",
            transition: "background 220ms ease"
          }}>
            <img src="assets/logo/foodlynx-logo.png" alt="FoodLynx" style={{
              height: 34, width: "auto", display: "block"
            }} />
          </div>
        </div>

        <nav style={{ display: "flex", gap: 36 }}>
          {items.map((it) =>
            <a
              key={it.key}
              onClick={() => onNav(it.key)}
              style={{
                fontFamily: "'Saira', system-ui, sans-serif",
                fontSize: 14, fontWeight: 500,
                color: txt, opacity: current === it.key ? 1 : 0.72,
                cursor: "pointer", textDecoration: "none",
                borderBottom: current === it.key ? `2px solid ${txt}` : "2px solid transparent",
                paddingBottom: 3, transition: "opacity 180ms"
              }}
              onMouseEnter={(e) => { e.currentTarget.style.opacity = 1; }}
              onMouseLeave={(e) => { e.currentTarget.style.opacity = current === it.key ? 1 : 0.72; }}>
              {it.label}</a>
          )}
        </nav>

        <Button
          variant={dark ? "light" : "primary"}
          icon="download"
          onClick={() => {
            const el = document.getElementById("download-cta");
            if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
          }}>
          Télécharger l'app</Button>
      </div>
    </header>);

};

// ==================== HERO ====================
const Hero = ({ onCTA }) => {
  return (
    <section style={{
      position: "relative", overflow: "hidden",
      background: "var(--dark-green)", color: "var(--white-lynx)",
      padding: "140px 48px 120px",
      minHeight: "100vh", display: "flex", alignItems: "center",
      marginTop: -73, paddingTop: 200
    }}>
      {/* Oil bubbles decorative */}
      <div style={{
        position: "absolute", right: "-10%", top: "-15%",
        width: "70%", height: "130%",
        backgroundImage: "url('assets/imagery/oil-bubbles-green.png')",
        backgroundSize: "cover", backgroundPosition: "center",
        opacity: 0.75, mixBlendMode: "screen",
        maskImage: "radial-gradient(ellipse at 45% 50%, #000 38%, transparent 72%)",
        WebkitMaskImage: "radial-gradient(ellipse at 45% 50%, #000 38%, transparent 72%)"
      }} />
      {/* Vignette */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(110deg, rgba(21,55,56,.95) 0%, rgba(21,55,56,.4) 55%, transparent 80%)"
      }} />

      <div style={{ position: "relative", maxWidth: 1320, margin: "0 auto", width: "100%", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 60, alignItems: "center" }}>
        <div style={{ maxWidth: 660 }}>
          <Eyebrow color="rgba(255,247,233,.7)">Aide au diagnostic · Accompagnement</Eyebrow>
          <h1 style={{
            fontFamily: "'Expletus Sans', serif", fontWeight: 500,
            fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 1.02,
            letterSpacing: "-0.025em", margin: "22px 0 28px",
            color: "var(--white-lynx)", textWrap: "balance"
          }}>
            Comprenez et suivez vos troubles digestifs,<br />
            <span style={{ fontStyle: "italic", color: "var(--pale-green)" }}>simplement.</span>
          </h1>
          <p style={{
            fontSize: 20, lineHeight: 1.5, maxWidth: 560,
            color: "rgba(255,247,233,.82)", margin: "0 0 40px",
            fontFamily: "'Saira', system-ui, sans-serif"
          }}>Mettons fin à l'errance digestive. Une aide au diagnostic intelligente, un journal sans effort, un accompagnement personnalisé — à votre rythme.


          </p>
          <div id="download-cta" style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <Button variant="light" icon="apple" onClick={onCTA}>Télécharger — iOS</Button>
            <Button variant="lightOutline" icon="smartphone" onClick={onCTA}>Télécharger — Android</Button>
          </div>
          <div style={{
            marginTop: 36, display: "flex", gap: 24, alignItems: "center",
            fontSize: 13, color: "rgba(255,247,233,.65)"
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <i data-lucide="shield-check" style={{ width: 15, height: 15, strokeWidth: 1.75 }}></i>
              Données chiffrées — hébergement santé HDS
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <i data-lucide="france" style={{ width: 15, height: 15, strokeWidth: 1.75 }}></i>
              Conçu en France
            </div>
          </div>
        </div>

        {/* Phone mockup */}
        <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
          <PhoneMockup />
        </div>
      </div>
    </section>);

};

const PhoneMockup = () =>
  <div style={{
    position: "relative",
    width: 340, height: 680,
    background: "var(--dark-lynx)",
    borderRadius: 56, padding: 10,
    boxShadow: "0 40px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,247,233,.08)",
    transform: "rotate(3deg)"
  }}>
    <div style={{
      width: "100%", height: "100%",
      borderRadius: 46, overflow: "hidden",
      background: "linear-gradient(180deg, #1a2a6e 0%, #01084c 100%)",
      position: "relative",
      display: "flex", flexDirection: "column"
    }}>
      {/* Notch */}
      <div style={{
        position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)",
        width: 110, height: 30, background: "var(--dark-lynx)", borderRadius: 20, zIndex: 5
      }}></div>

      {/* Status bar */}
      <div style={{
        padding: "18px 28px 0", display: "flex", justifyContent: "space-between",
        fontSize: 12, fontWeight: 600, color: "var(--white-lynx)"
      }}>
        <span>9:41</span>
        <span style={{ display: "flex", gap: 5, alignItems: "center" }}>
          <i data-lucide="signal" style={{ width: 13, height: 13 }}></i>
          <i data-lucide="wifi" style={{ width: 13, height: 13 }}></i>
          <i data-lucide="battery-full" style={{ width: 16, height: 16 }}></i>
        </span>
      </div>

      {/* App content */}
      <div style={{ padding: "52px 22px 20px", flex: 1, display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <div style={{ fontSize: 11, color: "rgba(255,247,233,.55)", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 500 }}>Mardi 24 avril</div>
          <div style={{ fontFamily: "'Expletus Sans', serif", fontSize: 28, color: "var(--white-lynx)", fontWeight: 500, letterSpacing: "-0.01em", marginTop: 2 }}>Bonjour Emma.</div>
        </div>

        {/* Score card */}
        <div style={{
          background: "var(--pale-green)", borderRadius: 20, padding: 18,
          color: "var(--dark-green)"
        }}>
          <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600, opacity: 0.7 }}>Confort digestif</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 4 }}>
            <div style={{ fontFamily: "'Expletus Sans', serif", fontSize: 44, fontWeight: 500, letterSpacing: "-0.02em" }}>82</div>
            <div style={{ fontSize: 13, opacity: 0.7 }}>/100</div>
            <div style={{ marginLeft: "auto", fontSize: 11, fontWeight: 600, background: "var(--dark-green)", color: "var(--white-lynx)", padding: "4px 10px", borderRadius: 999 }}>+ 6 pts</div>
          </div>
          <div style={{ display: "flex", gap: 3, marginTop: 10, height: 36, alignItems: "flex-end" }}>
            {[50, 62, 48, 72, 68, 78, 82].map((v, i) =>
              <div key={i} style={{ flex: 1, height: `${v}%`, background: "var(--dark-green)", borderRadius: 3, opacity: 0.85 }}></div>
            )}
          </div>
        </div>

        {/* Quick log */}
        <div style={{
          background: "rgba(255,247,233,.08)", border: "1px solid rgba(255,247,233,.1)",
          borderRadius: 18, padding: 14, display: "flex", alignItems: "center", gap: 12
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 999,
            background: "var(--green-lynx)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--white-lynx)"
          }}>
            <i data-lucide="camera" style={{ width: 18, height: 18, strokeWidth: 2 }}></i>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: "var(--white-lynx)", fontWeight: 600 }}>Ajouter un repas</div>
            <div style={{ fontSize: 11, color: "rgba(255,247,233,.55)" }}>Photo, vocal ou scan</div>
          </div>
          <i data-lucide="chevron-right" style={{ width: 16, height: 16, color: "rgba(255,247,233,.4)" }}></i>
        </div>

        {/* Insight */}
        <div style={{
          background: "var(--white-lynx)", borderRadius: 18, padding: 16, color: "var(--dark-green)"
        }}>
          <div style={{ display: "flex", gap: 6, marginBottom: 8 }}>
            <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", background: "var(--dark-green)", color: "var(--white-lynx)", padding: "3px 7px", borderRadius: 999 }}>Analyse</span>
          </div>
          <div style={{ fontFamily: "'Expletus Sans', serif", fontSize: 16, fontWeight: 500, lineHeight: 1.25, letterSpacing: "-0.01em" }}>
            Les laitages fermentés semblent bien tolérés cette semaine.
          </div>
          <div style={{ fontSize: 11, marginTop: 6, color: "var(--fg-muted)", opacity: 0.8 }}>
            3 repas · 0 épisode signalé
          </div>
        </div>
      </div>
    </div>
  </div>;


// ==================== VALUE PROPS ====================
const ValueProps = () => {
  const items = [
    { num: "01", icon: "sparkles", title: "Connaissez-vous", body: "Renseignez symptômes et repas sans effort — photo, vocal, scan. Obtenez un pré-diagnostic et des recommandations ciblées." },
    { num: "02", icon: "stethoscope", title: "Connectez-vous", body: "Selon vos résultats, accédez à notre annuaire de professionnels de santé vérifiés, près de chez vous." },
    { num: "03", icon: "sprout", title: "Faites-vous accompagner", body: "Un suivi personnalisé selon vos restrictions alimentaires, pour avancer vers un quotidien apaisé." }];

  return (
    <section style={{ padding: "140px 48px", background: "var(--white-lynx)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "end", marginBottom: 80 }}>
          <div>
            <Eyebrow>La solution</Eyebrow>
            <h2 style={{
              fontFamily: "'Expletus Sans', serif", fontWeight: 500,
              fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.06,
              letterSpacing: "-0.02em", margin: "18px 0 0",
              color: "var(--dark-green)", textWrap: "balance"
            }}>
              Mettre fin à l'errance digestive, pas à pas.
            </h2>
          </div>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 520,
            margin: 0, textWrap: "pretty"
          }}>
            Cinq ans en moyenne pour poser un diagnostic. Trois mille euros par an
            et par patient. FeeLynx raccourcit le chemin, sans remplacer votre médecin.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {items.map((it) =>
            <article key={it.num} style={{
              background: "var(--bg-elevated)",
              borderRadius: 22, padding: 36,
              boxShadow: "var(--shadow-sm)",
              border: "1px solid var(--border)",
              display: "flex", flexDirection: "column", gap: 20,
              minHeight: 320,
              transition: "transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms"
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}>

              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 999,
                  background: "var(--pale-green)", color: "var(--dark-green)",
                  display: "flex", alignItems: "center", justifyContent: "center"
                }}>
                  <i data-lucide={it.icon} style={{ width: 24, height: 24, strokeWidth: 1.5 }}></i>
                </div>
                <div style={{
                  fontFamily: "'Expletus Sans', serif",
                  fontSize: 32, color: "var(--pale-green)",
                  fontStyle: "italic", fontWeight: 500
                }}>{it.num}</div>
              </div>
              <h3 style={{
                fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                fontSize: 28, lineHeight: 1.1, letterSpacing: "-0.01em",
                color: "var(--dark-green)", margin: 0
              }}>{it.title}</h3>
              <p style={{
                fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", margin: 0,
                fontFamily: "'Saira', system-ui, sans-serif"
              }}>{it.body}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

};

// ==================== STATS / PROBLEM ====================
const StatBand = () => {
  const stats = [
    { value: "5 ans", label: "D'errance diagnostique en moyenne", sub: "Avant d'identifier un trouble digestif" },
    { value: "76 jours", label: "D'attente pour un examen digestif", sub: "Et +25 jours de délai en 10 ans" },
    { value: "3 000 €", label: "Dépensés par patient chaque année", sub: "Hors reste à charge et absentéisme" },
    { value: "40 %", label: "De la population concernée", sub: "Au moins un trouble chronique en France" }];

  return (
    <section style={{
      padding: "120px 48px",
      background: "var(--pale-green)",
      color: "var(--dark-green)",
      position: "relative", overflow: "hidden"
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
        <div style={{ maxWidth: 720, marginBottom: 72 }}>
          <Eyebrow color="var(--dark-green)" style={{ opacity: 0.7 }}>La problématique</Eyebrow>
          <h2 style={{
            fontFamily: "'Expletus Sans', serif", fontWeight: 500,
            fontSize: "clamp(36px, 4.5vw, 58px)", lineHeight: 1.08,
            letterSpacing: "-0.02em", margin: "18px 0 0",
            color: "var(--dark-green)", textWrap: "balance"
          }}>
            Un système saturé. Des patients livrés à eux-mêmes.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid rgba(21,55,56,.25)" }}>
          {stats.map((s, i) =>
            <div key={i} style={{
              padding: "40px 28px 32px 0",
              borderRight: i < 3 ? "1px solid rgba(21,55,56,.18)" : "none",
              paddingLeft: i === 0 ? 0 : 28
            }}>
              <div style={{
                fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                fontSize: "clamp(40px, 5vw, 64px)",
                letterSpacing: "-0.025em", lineHeight: 1,
                color: "var(--dark-green)", marginBottom: 18
              }}>{s.value}</div>
              <div style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.35, marginBottom: 6 }}>{s.label}</div>
              <div style={{ fontSize: 13, opacity: 0.65, lineHeight: 1.4 }}>{s.sub}</div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 24, fontSize: 12, opacity: 0.5 }}>
          Sources : DREES, CNGE, Publimed, IFOP, Améli.
        </div>
      </div>
    </section>);

};

// ==================== FEATURE SHOWCASE ====================
const FeatureShowcase = () => {
  return (
    <section style={{ padding: "140px 48px", background: "var(--white-lynx)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ textAlign: "center", maxWidth: 780, margin: "0 auto 80px" }}>
          <Eyebrow>L'algorithme</Eyebrow>
          <h2 style={{
            fontFamily: "'Expletus Sans', serif", fontWeight: 500,
            fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1.06,
            letterSpacing: "-0.02em", margin: "18px 0 18px",
            color: "var(--dark-green)", textWrap: "balance"
          }}>
            La puissance du diagnostic, <em style={{ color: "var(--green-lynx)" }}>à portée de main.</em>
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: "var(--fg-muted)",
            margin: "0 auto", maxWidth: 620
          }}>
            Notre moteur croise exposome, alimentation et biomarqueurs pour estimer la probabilité
            de chaque trouble, vérifier vos symptômes et produire un rapport lisible pour votre médecin.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 24
        }}>
          {/* Large feature card */}
          <div style={{
            background: "var(--dark-green)", color: "var(--white-lynx)",
            borderRadius: 28, padding: 44,
            gridRow: "span 2",
            position: "relative", overflow: "hidden",
            minHeight: 560,
            display: "flex", flexDirection: "column", justifyContent: "space-between"
          }}>
            <div style={{
              position: "absolute", bottom: "-20%", right: "-30%",
              width: "90%", height: "90%",
              backgroundImage: "url('assets/imagery/oil-bubbles-green.png')",
              mixBlendMode: "screen",
              maskImage: "radial-gradient(circle, #000 50%, transparent 80%)",
              WebkitMaskImage: "radial-gradient(circle, #000 50%, transparent 80%)", backgroundSize: "auto", opacity: "0.5"
            }} />
            <div style={{ position: "relative" }}>
              <Chip tone="light">Pré-diagnostic</Chip>
              <h3 style={{
                fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.02em",
                margin: "20px 0 16px", textWrap: "balance"
              }}>Un questionnaire qui ne ressemble pas à un questionnaire.</h3>
              <p style={{
                fontSize: 16, lineHeight: 1.55, maxWidth: 460,
                color: "rgba(255,247,233,.8)", margin: 0
              }}>
                Scannez un ticket, photographiez une assiette, dictez vos symptômes.
                FeeLynx comprend et structure les informations pour vous.
              </p>
            </div>
            <div style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
              {[
                { ic: "camera", l: "Photo" },
                { ic: "mic", l: "Vocal" },
                { ic: "scan-line", l: "Scan" }].
                map((x) =>
                  <div key={x.l} style={{
                    background: "rgba(255,247,233,.08)", border: "1px solid rgba(255,247,233,.14)",
                    borderRadius: 16, padding: "18px 16px",
                    display: "flex", alignItems: "center", gap: 10
                  }}>
                    <i data-lucide={x.ic} style={{ width: 18, height: 18, strokeWidth: 1.75 }}></i>
                    <span style={{ fontSize: 13, fontWeight: 500 }}>{x.l}</span>
                  </div>
                )}
            </div>
          </div>

          {/* Top right */}
          <div style={{
            background: "var(--bg-elevated)", borderRadius: 28, padding: 36,
            border: "1px solid var(--border)", minHeight: 268,
            display: "flex", flexDirection: "column", justifyContent: "space-between"
          }}>
            <Chip tone="sage">Journal intelligent</Chip>
            <div>
              <h3 style={{
                fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                fontSize: 28, lineHeight: 1.1, letterSpacing: "-0.01em",
                color: "var(--dark-green)", margin: "0 0 10px"
              }}>Les corrélations trouvées pour vous.</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--fg-muted)", margin: 0 }}>
                Aliments, horaires, stress, sommeil — on fait le lien, sans vous demander de statistiques.
              </p>
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {["gluten", "produits laitiers", "stress matinal", "sommeil < 6h"].map((t) =>
                <Chip key={t} tone="outline">{t}</Chip>
              )}
            </div>
          </div>

          {/* Bottom right */}
          <div style={{
            background: "var(--bg-elevated)", borderRadius: 28, padding: 36,
            border: "1px solid var(--border)", minHeight: 268
          }}>
            <Chip tone="sage">Rapport clinique</Chip>
            <h3 style={{
              fontFamily: "'Expletus Sans', serif", fontWeight: 500,
              fontSize: 28, lineHeight: 1.1, letterSpacing: "-0.01em",
              color: "var(--dark-green)", margin: "20px 0 10px"
            }}>Un document propre, pour votre médecin.</h3>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--fg-muted)", margin: "0 0 20px" }}>
              Exportable en PDF, construit à partir de vos données, lisible en deux minutes.
            </p>
            <div style={{
              background: "var(--bg-muted)", borderRadius: 14, padding: 18,
              display: "flex", alignItems: "center", gap: 14
            }}>
              <div style={{
                width: 44, height: 56, background: "var(--white-lynx)", borderRadius: 6,
                border: "1px solid var(--border)", display: "flex", flexDirection: "column",
                padding: 6, gap: 3, flexShrink: 0
              }}>
                <div style={{ height: 3, background: "var(--dark-green)", borderRadius: 2 }}></div>
                <div style={{ height: 2, background: "var(--border-strong)", borderRadius: 2, width: "70%" }}></div>
                <div style={{ height: 2, background: "var(--border-strong)", borderRadius: 2, width: "85%" }}></div>
                <div style={{ height: 2, background: "var(--border-strong)", borderRadius: 2, width: "60%" }}></div>
                <div style={{ height: 14, background: "var(--pale-green)", borderRadius: 3, marginTop: 2 }}></div>
              </div>
              <div style={{ fontSize: 13, color: "var(--fg-muted)" }}>
                <div style={{ fontWeight: 600, color: "var(--dark-green)", marginBottom: 2 }}>rapport-feelynx-avr.pdf</div>
                <div>3 pages · mis à jour il y a 2 h</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// ==================== DOWNLOAD CTA ====================
const DownloadBand = () =>
  <section style={{
    padding: "140px 48px",
    background: "var(--dark-green)", color: "var(--white-lynx)",
    position: "relative", overflow: "hidden"
  }}>
    <div style={{
      position: "absolute", inset: 0,
      backgroundImage: "url('assets/imagery/oil-bubbles-green.png')",
      backgroundSize: "cover", backgroundPosition: "center",
      opacity: 0.22, mixBlendMode: "screen"
    }} />
    <div style={{ position: "relative", maxWidth: 960, margin: "0 auto", textAlign: "center" }}>
      <Eyebrow color="rgba(255,247,233,.7)">Disponible maintenant</Eyebrow>
      <h2 style={{
        fontFamily: "'Expletus Sans', serif", fontWeight: 500,
        fontSize: "clamp(44px, 5.5vw, 76px)", lineHeight: 1.05,
        letterSpacing: "-0.025em", margin: "20px 0 28px",
        color: "var(--white-lynx)", textWrap: "balance"
      }}>Téléchargez FeeLynx et reprenez la main sur votre confort digestif.</h2>
      <p style={{
        fontSize: 19, lineHeight: 1.55, maxWidth: 560, margin: "0 auto 44px",
        color: "rgba(255,247,233,.75)"
      }}>
        Gratuit pour démarrer. Un abonnement pour l'accompagnement personnalisé dès que vous êtes prêt.
      </p>
      <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
        <AppStoreButton variant="apple" />
        <AppStoreButton variant="google" />
      </div>
      <div style={{ marginTop: 32, fontSize: 13, color: "rgba(255,247,233,.55)" }}>Note moyenne à définir avec vous !

      </div>
    </div>
  </section>;


const AppStoreButton = ({ variant }) => {
  const apple = variant === "apple";
  return (
    <a href="#" style={{
      display: "inline-flex", alignItems: "center", gap: 14,
      background: "var(--white-lynx)", color: "var(--dark-green)",
      padding: "16px 28px", borderRadius: 18,
      textDecoration: "none",
      transition: "transform 220ms cubic-bezier(.22,1,.36,1)"
    }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>

      <i data-lucide={apple ? "apple" : "play"} style={{ width: 28, height: 28, strokeWidth: 1.5 }}></i>
      <div style={{ textAlign: "left", lineHeight: 1.1 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.06em", opacity: 0.7 }}>
          {apple ? "Télécharger sur l'" : "Disponible sur"}
        </div>
        <div style={{ fontFamily: "'Expletus Sans', serif", fontSize: 22, fontWeight: 500, marginTop: 2 }}>
          {apple ? "App Store" : "Google Play"}
        </div>
      </div>
    </a>);

};

// ==================== ABOUT ====================
const About = () => {
  const founders = [
    {
      name: "Aude Devilder",
      role: "Cofondatrice & CEO",
      bio: "Agroalimentaire, retail et gestion de projets. Ancienne category manager & négociatrice chez Carrefour.",
      initial: "AD",
      bg: "var(--green-lynx)"
    },
    {
      name: "Antoine Barberin",
      role: "Cofondateur & CTO",
      bio: "Développement logiciel, spécialisé en IA et science des données. ISAE-SUPAERO / Polytechnique Montréal.",
      initial: "AB",
      bg: "var(--dark-green)"
    }];


  const advisors = [
    { name: "Dr Edouard Sève", role: "Advisor médical", bio: "Allergologue, Conseil national professionnel d'allergologie, CSO Drago." },
    { name: "Nicolas Bommel", role: "Advisor commercial", bio: "JOW, E. Leclerc. Directeur Commercial / Retail." },
    { name: "Lionel Rigaud", role: "Advisor technique", bio: "Co-fondateur QbitSoft, CEO The Blockchain Group." },
    { name: "Romain Buquet", role: "Advisor stratégique", bio: "Entrepreneur, enseignant-chercheur en innovation." },
    { name: "Gerhard Schaumann", role: "Expert médical", bio: "Medical Doctor, Clinical Lead chez Alan." }];


  return (
    <main style={{ background: "var(--white-lynx)" }}>
      {/* Mission hero */}
      <section style={{
        padding: "160px 48px 120px",
        background: "var(--white-lynx)",
        position: "relative", overflow: "hidden"
      }}>
        <div style={{
          position: "absolute", right: "-15%", top: "10%",
          width: "55%", aspectRatio: "1",
          backgroundImage: "url('assets/imagery/oil-bubbles-green.png')",
          backgroundSize: "cover", opacity: 0.5,
          maskImage: "radial-gradient(circle, #000 40%, transparent 75%)",
          WebkitMaskImage: "radial-gradient(circle, #000 40%, transparent 75%)"
        }} />
        <div style={{ position: "relative", maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow>Qui sommes-nous</Eyebrow>
          <h1 style={{
            fontFamily: "'Expletus Sans', serif", fontWeight: 500,
            fontSize: "clamp(56px, 8vw, 120px)", lineHeight: 0.98,
            letterSpacing: "-0.03em", margin: "24px 0 40px",
            color: "var(--dark-green)", maxWidth: "1100px", textWrap: "pretty", width: "100%"
          }}>
            Notre mission : mettre fin à l'<em style={{ fontStyle: "italic", color: "var(--green-lynx)" }}>errance digestive.</em>
          </h1>
          <p style={{
            fontSize: 20, lineHeight: 1.55, maxWidth: 640,
            color: "var(--fg-muted)", margin: 0
          }}>
            FeeLynx est né d'un constat simple : trop de personnes vivent pendant des années
            avec des troubles digestifs sans être écoutées, sans être comprises, sans être accompagnées.
            Nous pensons que l'intelligence artificielle, bien utilisée, peut ramener de l'humanité
            dans le parcours de soin.
          </p>
        </div>
      </section>

      {/* Founders */}
      <section style={{ padding: "40px 48px 120px", background: "var(--white-lynx)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow>Les fondateurs</Eyebrow>
          <h2 style={{
            fontFamily: "'Expletus Sans', serif", fontWeight: 500,
            fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: "18px 0 60px",
            color: "var(--dark-green)"
          }}>Deux parcours, une conviction.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
            {founders.map((f) =>
              <article key={f.name} style={{
                background: "var(--bg-elevated)",
                borderRadius: 28, padding: 40,
                border: "1px solid var(--border)",
                boxShadow: "var(--shadow-sm)",
                display: "flex", gap: 28, alignItems: "flex-start"
              }}>
                <div style={{
                  width: 120, height: 120, borderRadius: 999,
                  background: f.bg, color: "var(--white-lynx)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "'Expletus Sans', serif", fontSize: 42, fontWeight: 500,
                  letterSpacing: "-0.01em", flexShrink: 0,
                  fontStyle: "italic"
                }}>{f.initial}</div>
                <div>
                  <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-subtle)", fontWeight: 600 }}>{f.role}</div>
                  <h3 style={{
                    fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                    fontSize: 34, lineHeight: 1.1, letterSpacing: "-0.015em",
                    color: "var(--dark-green)", margin: "8px 0 14px"
                  }}>{f.name}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", margin: 0 }}>{f.bio}</p>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>

      {/* Advisors */}
      <section style={{
        padding: "120px 48px",
        background: "var(--bg-muted)"
      }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "end", marginBottom: 64 }}>
            <div>
              <Eyebrow>Notre cercle</Eyebrow>
              <h2 style={{
                fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1.05,
                letterSpacing: "-0.02em", margin: "18px 0 0",
                color: "var(--dark-green)"
              }}>Des advisors qui nous poussent.</h2>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 540, margin: 0 }}>Des médecins, des experts, des entrepreneurs. Un comité resserré qui challenge nos décisions et nous apporte ses connaissances


            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {advisors.map((a) =>
              <article key={a.name} style={{
                background: "var(--bg-elevated)",
                borderRadius: 22, padding: 28,
                border: "1px solid var(--border)",
                minHeight: 200,
                transition: "transform 220ms, box-shadow 220ms"
              }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}>

                <div style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--green-lynx)", fontWeight: 600 }}>{a.role}</div>
                <h3 style={{
                  fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                  fontSize: 24, lineHeight: 1.1, letterSpacing: "-0.01em",
                  color: "var(--dark-green)", margin: "10px 0 12px"
                }}>{a.name}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.5, color: "var(--fg-muted)", margin: 0 }}>{a.bio}</p>
              </article>
            )}
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ padding: "120px 48px", background: "var(--white-lynx)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
          <div>
            <Eyebrow>Nos valeurs</Eyebrow>
            <h2 style={{
              fontFamily: "'Expletus Sans', serif", fontWeight: 500,
              fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.02em",
              margin: "18px 0 0", color: "var(--dark-green)"
            }}>Ce qui nous guide.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
            {[
              { t: "Clarté", b: "Pas de jargon. Pas de promesses floues. On vous explique ce qu'on fait, pourquoi et avec quelle limite." },
              { t: "Complémentarité", b: "FeeLynx n'est pas un médecin. Nous complétons le parcours de soin — nous ne le remplaçons pas." },
              { t: "Rigueur", b: "Nos modèles sont validés avec un laboratoire de recherche. Chaque recommandation est explicable." },
              { t: "Respect", b: "Vos données de santé sont hébergées en France (HDS), chiffrées, jamais revendues." }].
              map((v) =>
                <div key={v.t}>
                  <h3 style={{
                    fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                    fontSize: 26, lineHeight: 1.1, letterSpacing: "-0.01em",
                    color: "var(--dark-green)", margin: "0 0 12px"
                  }}>{v.t}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", margin: 0 }}>{v.b}</p>
                </div>
              )}
          </div>
        </div>
      </section>
    </main>);

};

// ==================== FAQ ====================
const FAQ = () => {
  const groups = [
    {
      title: "L'application",
      items: [
        { q: "FeeLynx remplace-t-il une consultation médicale ?", a: "Non. FeeLynx est une aide au diagnostic et un outil d'accompagnement. Il structure vos données et produit un document explicable, que votre médecin peut utiliser pour affiner sa démarche. Il ne remplace ni un médecin, ni un examen, ni un traitement." },
        { q: "Combien de temps faut-il pour obtenir un premier pré-diagnostic ?", a: "Environ sept jours de saisie quotidienne suffisent à produire un premier rapport. Plus vous consignez de repas et de symptômes, plus les corrélations deviennent fiables." },
        { q: "Comment se passe la saisie au quotidien ?", a: "Vous pouvez prendre une photo de votre assiette, dicter vocalement ce que vous avez mangé ou scanner un ticket produit. L'application extrait et catégorise les aliments automatiquement — vous n'avez rien à remplir à la main." },
        { q: "Est-ce que FeeLynx fonctionne pour tous les troubles digestifs ?", a: "À ce jour, nous couvrons le syndrome de l'intestin irritable, la sensibilité au gluten non cœliaque, l'intolérance au lactose, le SIBO et la maladie cœliaque. D'autres pathologies sont en cours d'intégration." }]

    },
    {
      title: "Données & confidentialité",
      items: [
        { q: "Où sont stockées mes données ?", a: "Chez un hébergeur français agréé HDS (Hébergement de Données de Santé). Vos données ne quittent jamais l'Union européenne." },
        { q: "Qui a accès à mes informations ?", a: "Vous, uniquement. Vous pouvez partager ponctuellement un rapport avec un professionnel de santé de votre choix. Nos équipes n'accèdent jamais à vos données personnelles, sauf demande explicite de support." },
        { q: "Puis-je supprimer mes données ?", a: "Oui, à tout moment, depuis les réglages. La suppression est totale et irréversible sous 30 jours." }]

    },
    {
      title: "Abonnement & remboursement",
      items: [
        { q: "Combien ça coûte ?", a: "Le document explicatif et le journal sont à 2,99€. L'accompagnement personnalisé (plans alimentaires, suivi avec un·e diététicien·ne) est proposé à partir de 19,90 €/mois." },
        { q: "FeeLynx est-il remboursé par la Sécurité sociale ?", a: "Nous sommes engagés dans le parcours PECAN (Prise En Charge Anticipée Numérique). La labellisation est prévue pour permettre un remboursement partiel à horizon 2027." },
        { q: "Ma mutuelle peut-elle prendre en charge l'abonnement ?", a: "Plusieurs mutuelles partenaires proposent déjà un accès gratuit ou remboursé. Contactez-nous pour vérifier si la vôtre est partenaire." }]

    }];

  return (
    <main style={{ background: "var(--white-lynx)" }}>
      <section style={{
        padding: "160px 48px 80px",
        background: "var(--white-lynx)",
        position: "relative", overflow: "hidden"
      }}>
        <div style={{ position: "relative", maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
          <div>
            <Eyebrow>Questions fréquentes</Eyebrow>
            <h1 style={{
              fontFamily: "'Expletus Sans', serif", fontWeight: 500,
              fontSize: "clamp(56px, 8vw, 120px)", lineHeight: 0.98,
              letterSpacing: "-0.03em", margin: "24px 0 0",
              color: "var(--dark-green)", textWrap: "balance"
            }}>Vous vous <em style={{ color: "var(--green-lynx)" }}>demandez.</em></h1>
          </div>
          <p style={{
            fontSize: 19, lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 480, margin: 0
          }}>
            On répond. Si vous ne trouvez pas ce que vous cherchez, écrivez-nous —
            chaque message est lu par un humain.
          </p>
        </div>
      </section>

      <section style={{ padding: "40px 48px 140px", background: "var(--white-lynx)" }}>
        <div style={{ maxWidth: 1020, margin: "0 auto" }}>
          {groups.map((g, gi) =>
            <div key={g.title} style={{ marginTop: gi === 0 ? 0 : 80 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
                <div style={{
                  fontFamily: "'Expletus Sans', serif", fontStyle: "italic",
                  fontSize: 22, color: "var(--green-lynx)", fontWeight: 500
                }}>0{gi + 1}</div>
                <div style={{ height: 1, flex: 1, background: "var(--border)" }}></div>
                <h2 style={{
                  fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                  fontSize: 32, letterSpacing: "-0.01em", color: "var(--dark-green)",
                  margin: 0
                }}>{g.title}</h2>
              </div>
              {g.items.map((it, i) => <FAQItem key={it.q} item={it} first={i === 0} />)}
            </div>
          )}
        </div>
      </section>
    </main>);

};

const FAQItem = ({ item, first }) => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{
      borderTop: first ? "1px solid var(--border)" : "none",
      borderBottom: "1px solid var(--border)"
    }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: "100%", background: "transparent", border: 0,
          padding: "28px 8px", cursor: "pointer",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          textAlign: "left", fontFamily: "'Saira', system-ui, sans-serif"
        }}>

        <span style={{
          fontFamily: "'Expletus Sans', serif", fontWeight: 500,
          fontSize: 22, lineHeight: 1.25, letterSpacing: "-0.01em",
          color: "var(--dark-green)", paddingRight: 24
        }}>{item.q}</span>
        <span style={{
          width: 42, height: 42, borderRadius: 999,
          background: open ? "var(--dark-green)" : "var(--pale-green)",
          color: open ? "var(--white-lynx)" : "var(--dark-green)",
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "all 220ms", flexShrink: 0
        }}>
          <i data-lucide={open ? "minus" : "plus"} style={{ width: 18, height: 18, strokeWidth: 1.75 }}></i>
        </span>
      </button>
      <div style={{
        maxHeight: open ? 300 : 0, overflow: "hidden",
        transition: "max-height 360ms cubic-bezier(.22,1,.36,1)"
      }}>
        <p style={{
          fontSize: 16, lineHeight: 1.65, color: "var(--fg-muted)",
          margin: 0, padding: "0 8px 28px", maxWidth: 780
        }}>{item.a}</p>
      </div>
    </div>);

};

// ==================== CONTACT ====================
const Contact = () => {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", topic: "general", message: "" });
  return (
    <main style={{ background: "var(--white-lynx)" }}>
      <section style={{
        padding: "160px 48px 140px",
        background: "var(--white-lynx)",
        position: "relative", overflow: "hidden"
      }}>
        <div style={{
          position: "absolute", left: "-10%", bottom: "-20%",
          width: "55%", aspectRatio: "1",
          backgroundImage: "url('assets/imagery/oil-bubbles-green.png')",
          backgroundSize: "cover", opacity: 0.45,
          maskImage: "radial-gradient(circle, #000 45%, transparent 75%)",
          WebkitMaskImage: "radial-gradient(circle, #000 45%, transparent 75%)"
        }} />
        <div style={{ position: "relative", maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80 }}>
          <div>
            <Eyebrow>Contact</Eyebrow>
            <h1 style={{
              fontFamily: "'Expletus Sans', serif", fontWeight: 500,
              fontSize: "clamp(48px, 6.5vw, 88px)", lineHeight: 1,
              letterSpacing: "-0.025em", margin: "24px 0 28px",
              color: "var(--dark-green)", textWrap: "balance"
            }}>Dites-nous bonjour.</h1>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--fg-muted)", maxWidth: 440, margin: "0 0 48px" }}>
              Une question sur l'application, un partenariat, la presse, ou simplement pour
              nous raconter votre parcours ? Chaque message est lu et reçoit une réponse.
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              {[
                { ic: "mail", label: "Email", value: "bonjour@feelynx.fr", sub: "Réponse sous 48 h ouvrées" },
                { ic: "map-pin", label: "Bureau", value: "10 avenue Marc Pèlegrin, 31400 Toulouse", sub: "Sur rendez-vous uniquement" },
                { ic: "hand-helping", label: "Presse & partenariats", value: "press@feelynx.fr", sub: "Dossier de presse sur demande" }].
                map((x) =>
                  <div key={x.label} style={{ display: "flex", gap: 18, alignItems: "flex-start" }}>
                    <div style={{
                      width: 48, height: 48, borderRadius: 14,
                      background: "var(--pale-green)", color: "var(--dark-green)",
                      display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0
                    }}>
                      <i data-lucide={x.ic} style={{ width: 20, height: 20, strokeWidth: 1.75 }}></i>
                    </div>
                    <div>
                      <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-subtle)", fontWeight: 600, marginBottom: 4 }}>{x.label}</div>
                      <div style={{ fontFamily: "'Expletus Sans', serif", fontSize: 22, fontWeight: 500, color: "var(--dark-green)", letterSpacing: "-0.01em", marginBottom: 4 }}>{x.value}</div>
                      <div style={{ fontSize: 13, color: "var(--fg-muted)" }}>{x.sub}</div>
                    </div>
                  </div>
                )}
            </div>
          </div>

          {/* Form */}
          <div style={{
            background: "var(--bg-elevated)", borderRadius: 32, padding: 44,
            border: "1px solid var(--border)", boxShadow: "var(--shadow-md)",
            position: "relative"
          }}>
            {submitted ?
              <div style={{ textAlign: "center", padding: "60px 0" }}>
                <div style={{
                  width: 80, height: 80, borderRadius: 999,
                  background: "var(--pale-green)", color: "var(--dark-green)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  marginBottom: 24
                }}>
                  <i data-lucide="check" style={{ width: 34, height: 34, strokeWidth: 1.75 }}></i>
                </div>
                <h3 style={{
                  fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                  fontSize: 32, letterSpacing: "-0.01em", color: "var(--dark-green)",
                  margin: "0 0 12px"
                }}>Message reçu.</h3>
                <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 360, margin: "0 auto" }}>
                  Merci {form.name || "beaucoup"}. Notre équipe vous répondra sous 48 heures ouvrées.
                </p>
              </div> :

              <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 50); }}>
                <h3 style={{
                  fontFamily: "'Expletus Sans', serif", fontWeight: 500,
                  fontSize: 32, letterSpacing: "-0.01em", color: "var(--dark-green)",
                  margin: "0 0 28px"
                }}>Envoyez-nous un mot.</h3>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
                  <Field label="Nom" required>
                    <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
                      style={inputStyle} placeholder="Votre nom" />
                  </Field>
                  <Field label="Email" required>
                    <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}
                      style={inputStyle} placeholder="vous@email.fr" />
                  </Field>
                </div>

                <div style={{ marginBottom: 16 }}>
                  <Field label="Sujet">
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 8 }}>
                      {[
                        { k: "general", l: "Général" },
                        { k: "support", l: "Support app" },
                        { k: "press", l: "Presse" },
                        { k: "partnership", l: "Partenariat" }].
                        map((t) =>
                          <button
                            key={t.k} type="button"
                            onClick={() => setForm({ ...form, topic: t.k })}
                            style={{
                              padding: "9px 18px", borderRadius: 999,
                              background: form.topic === t.k ? "var(--dark-green)" : "transparent",
                              color: form.topic === t.k ? "var(--white-lynx)" : "var(--dark-green)",
                              border: `1px solid ${form.topic === t.k ? "var(--dark-green)" : "var(--border-strong)"}`,
                              fontFamily: "'Saira', system-ui, sans-serif",
                              fontSize: 13, fontWeight: 500, cursor: "pointer",
                              transition: "all 180ms"
                            }}>
                            {t.l}</button>
                        )}
                    </div>
                  </Field>
                </div>

                <div style={{ marginBottom: 24 }}>
                  <Field label="Message" required>
                    <textarea required rows={6} value={form.message}
                      onChange={(e) => setForm({ ...form, message: e.target.value })}
                      style={{ ...inputStyle, resize: "vertical", minHeight: 120 }}
                      placeholder="Racontez-nous…" />
                  </Field>
                </div>

                <button type="submit" style={{
                  width: "100%", padding: "18px 24px", borderRadius: 999,
                  background: "var(--dark-green)", color: "var(--white-lynx)",
                  border: 0, cursor: "pointer",
                  fontFamily: "'Saira', system-ui, sans-serif",
                  fontSize: 15, fontWeight: 500,
                  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                  transition: "transform 220ms"
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>

                  Envoyer le message
                  <i data-lucide="arrow-right" style={{ width: 16, height: 16, strokeWidth: 1.75 }}></i>
                </button>

                <p style={{ fontSize: 12, lineHeight: 1.5, color: "var(--fg-subtle)", margin: "16px 0 0", textAlign: "center" }}>
                  En envoyant ce message, vous acceptez notre politique de confidentialité.
                </p>
              </form>
            }
          </div>
        </div>
      </section>
    </main>);

};

const inputStyle = {
  width: "100%", padding: "14px 16px",
  borderRadius: 14, border: "1px solid var(--border-strong)",
  background: "var(--white-lynx)",
  fontFamily: "'Saira', system-ui, sans-serif", fontSize: 15,
  color: "var(--dark-green)", outline: "none",
  transition: "border-color 180ms",
  boxSizing: "border-box"
};

const Field = ({ label, required, children }) =>
  <label style={{ display: "block" }}>
    <div style={{
      fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase",
      color: "var(--fg-subtle)", fontWeight: 600, marginBottom: 8
    }}>{label}{required && <span style={{ color: "var(--danger)", marginLeft: 4 }}>*</span>}</div>
    {children}
  </label>;


// ==================== FOOTER ====================
const Footer = ({ onNav }) =>
  <footer style={{
    background: "var(--dark-lynx)", color: "rgba(255,247,233,.6)",
    padding: "80px 48px 40px"
  }}>
    <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48 }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
          <img src="assets/logo/foodlynx-logo.png" alt="FoodLynx" style={{ height: 48, width: "auto", display: "block" }} />
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.55, maxWidth: 340, margin: 0 }}>
          Aide au diagnostic et accompagnement pour les troubles digestifs.
          Dispositif non-médical — consultez votre médecin pour tout diagnostic.
        </p>
      </div>
      {[
        { h: "Produit", items: [["Accueil", "home"], ["Télécharger", "home"]] },
        { h: "Société", items: [["Qui sommes-nous", "about"], ["FAQ", "faq"], ["Contact", "contact"]] },
        { h: "Légal", items: [["Confidentialité", "home"], ["CGU", "home"], ["Mentions", "home"]] }].
        map((col) =>
          <div key={col.h}>
            <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--white-lynx)", fontWeight: 600, marginBottom: 18 }}>{col.h}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {col.items.map(([label, key]) =>
                <li key={label}>
                  <a onClick={() => onNav(key)} style={{ color: "rgba(255,247,233,.65)", textDecoration: "none", fontSize: 14, cursor: "pointer" }}>{label}</a>
                </li>
              )}
            </ul>
          </div>
        )}
    </div>
    <div style={{
      maxWidth: 1320, margin: "56px auto 0", paddingTop: 24,
      borderTop: "1px solid rgba(255,247,233,.08)",
      display: "flex", justifyContent: "space-between", fontSize: 12, color: "rgba(255,247,233,.45)"
    }}>
      <div>© 2026 FeeLynx SAS · Paris</div>
      <div>Fait avec soin pour votre confort digestif.</div>
    </div>
  </footer>;


Object.assign(window, {
  Eyebrow, Button, Chip,
  Header, Hero, ValueProps, StatBand, FeatureShowcase, DownloadBand,
  About, FAQ, Contact, Footer
});