import { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "@/auth/AuthProvider";

const brand = "#4f46e5";
const brandLight = "#818cf8";
const accent = "#06b6d4";
const bg = "#0a0f1e";
const card = "rgba(255,255,255,0.04)";
const cardHover = "rgba(255,255,255,0.07)";
const border = "rgba(255,255,255,0.08)";
const muted = "#94a3b8";
const dim = "#64748b";

// ── Feature card data ─────────────────────────────────────────────────────────
const features = [
  {
    icon: "🔍",
    title: "Anonymisation PII automatique",
    body: "3 couches de détection (regex, Presidio NER, validation LLM). Pseudonymisation réversible avec mapping chiffré AES-256-GCM en Redis.",
    badge: "latence <50ms",
  },
  {
    icon: "🧭",
    title: "Routage intelligent",
    body: "Moteur de règles basé sur le rôle, le département, la sensibilité et le modèle demandé. Fallback automatique en cas de panne provider.",
    badge: "circuit breaker intégré",
  },
  {
    icon: "🛡️",
    title: "RBAC granulaire",
    body: "4 rôles (admin, manager, user, auditor) avec contrôle par modèle et par département. Compatible OIDC / Keycloak / SAML 2.0.",
    badge: "SSO ready",
  },
  {
    icon: "📋",
    title: "Logs d'audit immuables",
    body: "Chaque requête est enregistrée dans ClickHouse (append-only). Impossible à modifier, rétention configurable, export PDF pour la CNIL.",
    badge: "RGPD Art. 30",
  },
  {
    icon: "⚖️",
    title: "Conformité RGPD & EU AI Act",
    body: "Registre de traitement automatique, classification des risques AI Act, rapports PDF téléchargeables. DPO-ready dès le premier jour.",
    badge: "EU AI Act ready",
  },
  {
    icon: "📊",
    title: "Contrôle des coûts",
    body: "Suivi des tokens par tenant, utilisateur et département. Alertes budgétaires, tableaux de bord Grafana, imputation par centre de coût.",
    badge: "dashboard temps réel",
  },
];

const problems = [
  {
    icon: "🕵️",
    title: "Shadow AI",
    body: "73 % des entreprises ont des employés utilisant des outils IA non approuvés. Données clients, contrats, code propriétaire partent vers des serveurs tiers sans votre accord.",
  },
  {
    icon: "🔓",
    title: "Fuites de données PII",
    body: "Sans filtre, vos prompts contiennent noms, IBAN, emails, numéros de sécurité sociale. Une seule fuite = violation RGPD notifiable à la CNIL sous 72h.",
  },
  {
    icon: "💸",
    title: "Coûts hors de contrôle",
    body: "Les abonnements prolifèrent, les tokens s'accumulent. Sans visibilité centralisée, la facture IA gonfle sans corrélation avec la valeur produite.",
  },
];

const personas = [
  {
    role: "RSSI",
    title: "Responsable Sécurité SI",
    items: [
      "Visibilité complète sur tous les flux LLM",
      "Zero Trust, mTLS, AES-256-GCM",
      "Rapport pentest disponible sur demande",
      "Alertes temps réel (PagerDuty, Slack)",
      "Shadow AI éliminé structurellement",
    ],
  },
  {
    role: "DSI",
    title: "Directeur Systèmes d'Information",
    items: [
      "Déploiement Helm/Kubernetes en 15 min",
      "Compatible tout SDK OpenAI existant",
      "Multi-provider avec fallback automatique",
      "Dashboard coûts par équipe et projet",
      "HPA autoscaling, blue/green deployment",
    ],
  },
  {
    role: "DPO",
    title: "Data Protection Officer",
    items: [
      "Registre Art. 30 généré automatiquement",
      "Classification risques EU AI Act intégrée",
      "Export PDF pour audits CNIL",
      "Pseudonymisation réversible et traçable",
      "Rétention configurable par type de donnée",
    ],
  },
];

// ── Reusable small components ─────────────────────────────────────────────────

function Label({ children }: { children: React.ReactNode }) {
  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "0.4rem",
        fontSize: "0.72rem",
        fontWeight: 700,
        textTransform: "uppercase",
        letterSpacing: "0.1em",
        color: brandLight,
        background: "rgba(79,70,229,0.15)",
        border: `1px solid rgba(79,70,229,0.3)`,
        padding: "0.3rem 0.85rem",
        borderRadius: "100px",
        marginBottom: "1.5rem",
      }}
    >
      {children}
    </div>
  );
}

function GradientText({ children }: { children: React.ReactNode }) {
  return (
    <span
      style={{
        background: `linear-gradient(135deg, #a5b4fc 0%, ${accent} 100%)`,
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent",
        backgroundClip: "text",
      }}
    >
      {children}
    </span>
  );
}

function BtnPrimary({ href, to, children }: { href?: string; to?: string; children: React.ReactNode }) {
  const style: React.CSSProperties = {
    display: "inline-flex",
    alignItems: "center",
    gap: "0.45rem",
    padding: "0.85rem 2rem",
    borderRadius: "10px",
    fontSize: "1rem",
    fontWeight: 600,
    textDecoration: "none",
    cursor: "pointer",
    border: "none",
    background: brand,
    color: "#fff",
    transition: "all .2s",
    whiteSpace: "nowrap",
  };
  if (to) return <Link to={to} style={style}>{children}</Link>;
  return <a href={href} style={style}>{children}</a>;
}

function BtnOutline({ href, to, children }: { href?: string; to?: string; children: React.ReactNode }) {
  const style: React.CSSProperties = {
    display: "inline-flex",
    alignItems: "center",
    gap: "0.45rem",
    padding: "0.85rem 2rem",
    borderRadius: "10px",
    fontSize: "1rem",
    fontWeight: 600,
    textDecoration: "none",
    background: "transparent",
    color: "#f1f5f9",
    border: `1px solid ${border}`,
    transition: "all .2s",
    whiteSpace: "nowrap",
  };
  if (to) return <Link to={to} style={style}>{children}</Link>;
  return <a href={href} style={style}>{children}</a>;
}

// ── Main component ─────────────────────────────────────────────────────────────

export function LandingPage() {
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (isAuthenticated) {
      navigate("/dashboard", { replace: true });
    }
  }, [isAuthenticated, navigate]);

  return (
    <div
      style={{
        fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif",
        background: bg,
        color: "#f1f5f9",
        minHeight: "100vh",
        overflowX: "hidden",
      }}
    >
      {/* Background glow */}
      <div
        style={{
          position: "fixed",
          inset: 0,
          background:
            "radial-gradient(ellipse at 15% 50%, rgba(79,70,229,.14) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(6,182,212,.09) 0%, transparent 50%)",
          pointerEvents: "none",
          zIndex: 0,
        }}
      />

      {/* ── NAV ── */}
      <nav
        style={{
          position: "sticky",
          top: 0,
          zIndex: 100,
          backdropFilter: "blur(14px)",
          WebkitBackdropFilter: "blur(14px)",
          background: "rgba(10,15,30,.88)",
          borderBottom: `1px solid ${border}`,
        }}
      >
        <div
          style={{
            maxWidth: 1200,
            margin: "0 auto",
            padding: "0 1.5rem",
            height: 64,
            display: "flex",
            alignItems: "center",
            gap: "2rem",
          }}
        >
          <Link
            to="/"
            style={{ fontSize: "1.25rem", fontWeight: 800, color: "#f1f5f9", textDecoration: "none", letterSpacing: "-0.5px", flexShrink: 0 }}
          >
            Veylant<span style={{ color: brandLight }}> IA</span>
          </Link>

          <div style={{ display: "flex", gap: "1.75rem", marginLeft: "auto", alignItems: "center" }}>
            <a href="#fonctionnalites" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Fonctionnalités</a>
            <a href="#securite" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Sécurité</a>
            <a href="#personas" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Pour qui</a>
            <a href="http://localhost:8090/playground" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Playground</a>
            <Link to="/docs" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Docs</Link>
            <Link
              to="/login"
              style={{
                background: brand,
                color: "#fff",
                padding: ".5rem 1.1rem",
                borderRadius: 8,
                fontSize: ".875rem",
                fontWeight: 600,
                textDecoration: "none",
              }}
            >
              Se connecter →
            </Link>
          </div>
        </div>
      </nav>

      {/* ── HERO ── */}
      <section style={{ padding: "7rem 1.5rem 5rem", position: "relative", zIndex: 1 }}>
        <div
          style={{
            maxWidth: 1200,
            margin: "0 auto",
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "4rem",
            alignItems: "center",
          }}
        >
          {/* Left */}
          <div>
            <Label>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
              Proxy IA d'entreprise
            </Label>
            <h1 style={{ fontSize: "clamp(2.4rem,5vw,3.8rem)", fontWeight: 800, lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: "1.25rem" }}>
              L'IA de vos équipes,<br />
              <GradientText>enfin sous contrôle</GradientText>
            </h1>
            <p style={{ fontSize: "1.1rem", color: muted, lineHeight: 1.75, marginBottom: "2rem", maxWidth: 500 }}>
              Veylant intercepte, anonymise et gouverne tous vos échanges LLM en moins de 50 ms. RGPD natif, EU AI Act prêt, zéro Shadow AI.
            </p>
            <div style={{ display: "flex", gap: ".875rem", flexWrap: "wrap" }}>
              <BtnPrimary href="#contact">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                Demander une démo
              </BtnPrimary>
              <BtnOutline href="http://localhost:8090/playground">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                Tester le playground
              </BtnOutline>
            </div>

            {/* Stats */}
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(4,1fr)",
                gap: "1rem",
                marginTop: "3.5rem",
                paddingTop: "2.5rem",
                borderTop: `1px solid ${border}`,
              }}
            >
              {[
                { val: "<50ms", lbl: "Latence pipeline PII" },
                { val: "5", lbl: "Providers LLM" },
                { val: "0", lbl: "Shadow AI autorisé" },
                { val: "100%", lbl: "Compatible OpenAI SDK" },
              ].map((s) => (
                <div key={s.lbl} style={{ textAlign: "center" }}>
                  <div
                    style={{
                      fontSize: "1.7rem",
                      fontWeight: 800,
                      letterSpacing: "-0.04em",
                      background: `linear-gradient(135deg, #a5b4fc, ${accent})`,
                      WebkitBackgroundClip: "text",
                      WebkitTextFillColor: "transparent",
                      backgroundClip: "text",
                    }}
                  >
                    {s.val}
                  </div>
                  <div style={{ fontSize: ".78rem", color: muted, marginTop: ".2rem" }}>{s.lbl}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Terminal */}
          <div
            style={{
              background: "#0d1117",
              border: `1px solid rgba(255,255,255,.1)`,
              borderRadius: 20,
              overflow: "hidden",
              boxShadow: "0 30px 60px rgba(0,0,0,.6)",
            }}
          >
            <div
              style={{
                background: "#161b22",
                padding: ".7rem 1rem",
                display: "flex",
                alignItems: "center",
                gap: ".4rem",
                borderBottom: `1px solid rgba(255,255,255,.07)`,
              }}
            >
              <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f57" }} />
              <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ffbd2e" }} />
              <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#28c840" }} />
              <span style={{ marginLeft: ".5rem", fontSize: ".72rem", color: dim, fontFamily: "monospace" }}>
                veylant-proxy — requête interceptée
              </span>
            </div>
            <div style={{ padding: "1.5rem", fontFamily: "monospace", fontSize: ".76rem", lineHeight: 1.9 }}>
              <div style={{ color: "#6e7681" }}>{`// Requête entrante`}</div>
              <div><span style={{ color: "#79c0ff" }}>POST</span> <span style={{ color: "#a5d6ff" }}>/v1/chat/completions</span></div>
              <div><span style={{ color: dim }}>tenant:</span> <span style={{ color: brandLight }}>acme-corp</span> · <span style={{ color: dim }}>user:</span> <span style={{ color: brandLight }}>alice</span></div>
              <br />
              <div style={{ color: "#6e7681" }}>{`// Détection PII — 12ms`}</div>
              <div>
                <span style={{ color: "#e3b341" }}>⚠ </span>
                <span style={{ color: "#79c0ff" }}>PERSON&nbsp;&nbsp;&nbsp; </span>
                <span style={{ color: "#f85149" }}>"Marie Dubois"</span>
                <span style={{ color: dim }}> → </span>
                <span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[PERSONNE_1]</span>
              </div>
              <div>
                <span style={{ color: "#e3b341" }}>⚠ </span>
                <span style={{ color: "#79c0ff" }}>IBAN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span style={{ color: "#f85149" }}>"FR76 3000..."</span>
                <span style={{ color: dim }}> → </span>
                <span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[IBAN_1]</span>
              </div>
              <div>
                <span style={{ color: "#e3b341" }}>⚠ </span>
                <span style={{ color: "#79c0ff" }}>EMAIL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span style={{ color: "#f85149" }}>"m.dubois@..."</span>
                <span style={{ color: dim }}> → </span>
                <span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[EMAIL_1]</span>
              </div>
              <br />
              <div style={{ color: "#6e7681" }}>{`// Routage intelligent — règle #3`}</div>
              <div><span style={{ color: "#56d364" }}>✓ </span>provider <span style={{ color: brandLight }}>azure</span> · model <span style={{ color: brandLight }}>gpt-4o</span></div>
              <div><span style={{ color: "#56d364" }}>✓ </span>dept <span style={{ color: brandLight }}>finance</span> · budget OK</div>
              <br />
              <div style={{ color: "#6e7681" }}>{`// Log d'audit — ClickHouse`}</div>
              <div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>tokens: </span><span style={{ color: "#a5d6ff" }}>847 in / 312 out</span></div>
              <div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>coût: </span><span style={{ color: "#a5d6ff" }}>€0.0043 imputé</span></div>
              <div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>latence totale: </span><span style={{ color: "#a5d6ff" }}>38ms ✨</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* ── TRUST BAR ── */}
      <div style={{ position: "relative", zIndex: 1, padding: "1.75rem 1.5rem", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: "rgba(255,255,255,.015)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", alignItems: "center", gap: "2.5rem", flexWrap: "wrap", justifyContent: "center" }}>
          <span style={{ fontSize: ".72rem", color: dim, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em" }}>Compatible avec</span>
          {["OpenAI", "Anthropic", "Azure OpenAI", "Mistral AI", "Ollama (on-premise)"].map((p) => (
            <span key={p} style={{ color: dim, fontSize: ".82rem", fontWeight: 600, opacity: 0.6 }}>{p}</span>
          ))}
        </div>
      </div>

      {/* ── PROBLEM ── */}
      <section id="probleme" style={{ padding: "6rem 1.5rem", position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Label>Le problème</Label>
          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
            Vos équipes utilisent l'IA.<br />Vous n'en savez rien.
          </h2>
          <p style={{ marginTop: "1rem", maxWidth: 560, lineHeight: 1.7, color: muted }}>
            ChatGPT, Claude, Copilot — vos collaborateurs contournent les politiques IT. Résultat : données sensibles exposées, coûts incontrôlés, conformité compromise.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
            {problems.map((p) => (
              <div
                key={p.title}
                style={{
                  background: "rgba(239,68,68,.05)",
                  border: "1px solid rgba(239,68,68,.15)",
                  borderRadius: 20,
                  padding: "2rem",
                }}
              >
                <div style={{ fontSize: "1.4rem", marginBottom: "1.25rem" }}>{p.icon}</div>
                <h3 style={{ fontWeight: 600, marginBottom: ".5rem" }}>{p.title}</h3>
                <p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FEATURES ── */}
      <section id="fonctionnalites" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Label>La solution</Label>
          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
            Un proxy intelligent entre<br />vos équipes et les LLMs
          </h2>
          <p style={{ marginTop: "1rem", maxWidth: 560, lineHeight: 1.7, color: muted }}>
            Veylant se déploie en 15 minutes sans modifier votre code existant. Il intercepte chaque requête et applique vos politiques en temps réel.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
            {features.map((f) => (
              <div
                key={f.title}
                style={{
                  background: card,
                  border: `1px solid ${border}`,
                  borderRadius: 20,
                  padding: "2rem",
                  transition: "all .3s",
                }}
              >
                <div
                  style={{
                    width: 46,
                    height: 46,
                    background: "rgba(79,70,229,.15)",
                    borderRadius: 11,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: "1.3rem",
                    marginBottom: "1.25rem",
                  }}
                >
                  {f.icon}
                </div>
                <h3 style={{ fontWeight: 600, marginBottom: ".45rem" }}>{f.title}</h3>
                <p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{f.body}</p>
                <span
                  style={{
                    display: "inline-block",
                    marginTop: ".9rem",
                    fontSize: ".72rem",
                    fontWeight: 700,
                    color: brandLight,
                    background: "rgba(79,70,229,.15)",
                    padding: ".2rem .65rem",
                    borderRadius: "100px",
                  }}
                >
                  {f.badge}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section style={{ padding: "6rem 1.5rem", background: "rgba(79,70,229,.03)", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Label>Démarrage en 15 minutes</Label>
          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em", textAlign: "center" }}>
            Trois étapes vers la conformité
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "2rem", marginTop: "4rem" }}>
            {[
              {
                n: 1,
                title: "Pointez votre endpoint",
                body: "Remplacez l'URL OpenAI par votre instance Veylant. Zéro modification de code — compatible avec tout SDK OpenAI existant.",
                code: (
                  <>
                    <div style={{ color: "#6e7681" }}># Avant</div>
                    <div>OPENAI_BASE_URL=<span style={{ color: "#f85149" }}>api.openai.com</span></div>
                    <br />
                    <div style={{ color: "#6e7681" }}># Après</div>
                    <div>OPENAI_BASE_URL=<span style={{ color: "#56d364" }}>ai.votre-entreprise.com</span></div>
                  </>
                ),
              },
              {
                n: 2,
                title: "Configurez vos politiques",
                body: "Via l'API admin ou l'interface React : règles de routage, RBAC, budgets par département, seuils d'alerte PII.",
                code: (
                  <>
                    <div style={{ color: "#6e7681" }}># Règle de routage</div>
                    <div>department == <span style={{ color: "#56d364" }}>"finance"</span></div>
                    <div>&nbsp;&nbsp;→ provider: <span style={{ color: brandLight }}>azure</span></div>
                    <div>&nbsp;&nbsp;→ model: <span style={{ color: brandLight }}>gpt-4o</span></div>
                  </>
                ),
              },
              {
                n: 3,
                title: "Observez et gouvernez",
                body: "Tableau de bord temps réel, alertes Prometheus/PagerDuty, logs d'audit exportables pour vos audits RGPD.",
                code: (
                  <>
                    <div style={{ color: "#6e7681" }}># Dashboard SLO</div>
                    <div>✓ SLO <span style={{ color: "#56d364" }}>99.5 %</span> respecté</div>
                    <div>✓ <span style={{ color: "#56d364" }}>0</span> fuite PII ce mois</div>
                    <div>✓ Budget: <span style={{ color: "#56d364" }}>847 / 1200 €</span></div>
                  </>
                ),
              },
            ].map((step) => (
              <div key={step.n} style={{ textAlign: "center" }}>
                <div
                  style={{
                    width: 54,
                    height: 54,
                    background: `linear-gradient(135deg, ${brand}, ${accent})`,
                    borderRadius: "50%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: "1.2rem",
                    fontWeight: 800,
                    color: "#fff",
                    margin: "0 auto 1.5rem",
                    boxShadow: `0 0 0 6px rgba(79,70,229,.15)`,
                  }}
                >
                  {step.n}
                </div>
                <h3 style={{ fontWeight: 600, marginBottom: ".45rem" }}>{step.title}</h3>
                <p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{step.body}</p>
                <div
                  style={{
                    marginTop: "1rem",
                    background: "#0d1117",
                    border: `1px solid ${border}`,
                    borderRadius: 8,
                    padding: ".75rem 1rem",
                    fontFamily: "monospace",
                    fontSize: ".7rem",
                    color: muted,
                    textAlign: "left",
                    lineHeight: 1.75,
                  }}
                >
                  {step.code}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SECURITY ── */}
      <section id="securite" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Label>Sécurité</Label>
          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
            Conçu pour les équipes<br />sécurité les plus exigeantes
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "3rem", alignItems: "center", marginTop: "3rem" }}>
            {/* Checks */}
            <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
              {[
                { icon: "🔐", title: "Zero Trust & mTLS", body: "Communication inter-services chiffrée via mTLS. TLS 1.3 en externe. Aucun trafic en clair, jamais." },
                { icon: "🔑", title: "Chiffrement bout-en-bout", body: "Prompts chiffrés AES-256-GCM au repos. Clés API en SHA-256. Rotation 90 jours via HashiCorp Vault." },
                { icon: "✅", title: "Pentest réussi — 2026", body: "0 vulnérabilité critique, 0 high. Semgrep SAST + Trivy image scanning + OWASP ZAP DAST en CI/CD." },
                { icon: "📝", title: "Audit de l'audit", body: "Chaque accès aux logs d'audit est lui-même loggué. Traçabilité complète et inviolable." },
              ].map((c) => (
                <div
                  key={c.title}
                  style={{ display: "flex", alignItems: "flex-start", gap: "1rem", padding: "1.25rem", background: card, border: `1px solid ${border}`, borderRadius: 12 }}
                >
                  <div style={{ width: 36, height: 36, background: "rgba(16,185,129,.1)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: ".95rem" }}>
                    {c.icon}
                  </div>
                  <div>
                    <h4 style={{ fontWeight: 600, fontSize: ".875rem", marginBottom: ".2rem" }}>{c.title}</h4>
                    <p style={{ fontSize: ".8rem", color: muted, lineHeight: 1.55 }}>{c.body}</p>
                  </div>
                </div>
              ))}
            </div>
            {/* Compliance badges */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
              {[
                { ico: "🇪🇺", title: "RGPD natif", body: "Registre Art. 30 automatique. Notification CNIL prête sous 72h." },
                { ico: "⚖️", title: "EU AI Act", body: "Classification des risques, documentation système requise." },
                { ico: "🏛️", title: "NIS2 ready", body: "Logs immuables, alertes PagerDuty, SLO 99,5 %." },
                { ico: "🔒", title: "ISO 27001", body: "Architecture Zero Trust, RBAC, gestion des secrets." },
              ].map((b) => (
                <div
                  key={b.title}
                  style={{ background: card, border: `1px solid ${border}`, borderRadius: 20, padding: "1.5rem", textAlign: "center" }}
                >
                  <div style={{ fontSize: "1.9rem", marginBottom: ".75rem" }}>{b.ico}</div>
                  <h4 style={{ fontWeight: 700, fontSize: ".875rem", marginBottom: ".2rem" }}>{b.title}</h4>
                  <p style={{ fontSize: ".75rem", color: muted }}>{b.body}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── PERSONAS ── */}
      <section id="personas" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Label>Pour qui</Label>
          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
            Un outil, trois interlocuteurs
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
            {personas.map((p) => (
              <div key={p.role} style={{ background: card, border: `1px solid ${border}`, borderRadius: 20, padding: "2rem" }}>
                <div style={{ fontSize: ".7rem", fontWeight: 800, textTransform: "uppercase", letterSpacing: ".12em", color: brandLight, marginBottom: ".2rem" }}>
                  {p.role}
                </div>
                <div style={{ fontSize: "1.05rem", fontWeight: 700, marginBottom: "1.1rem" }}>{p.title}</div>
                <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: ".55rem" }}>
                  {p.items.map((item) => (
                    <li key={item} style={{ fontSize: ".84rem", color: muted, display: "flex", gap: ".5rem", alignItems: "flex-start" }}>
                      <span style={{ color: brandLight, flexShrink: 0 }}>→</span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section
        id="contact"
        style={{
          padding: "6rem 1.5rem",
          textAlign: "center",
          background: "radial-gradient(ellipse at center, rgba(79,70,229,.14) 0%, transparent 65%)",
          position: "relative",
          zIndex: 1,
        }}
      >
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Label>Commencer</Label>
          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em", marginBottom: "1rem" }}>
            Prêt à reprendre le contrôle<br />de votre IA d'entreprise ?
          </h2>
          <p style={{ color: muted, fontSize: "1.05rem", marginBottom: "2.5rem" }}>
            Démo personnalisée · Déploiement en 15 minutes · Support dédié
          </p>
          <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
            <BtnPrimary href="mailto:demo@veylant.io">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              Demander une démo
            </BtnPrimary>
            <BtnOutline to="/login">
              Se connecter au dashboard
            </BtnOutline>
            <BtnOutline to="/docs">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
              Documentation
            </BtnOutline>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{ position: "relative", zIndex: 1, borderTop: `1px solid ${border}`, padding: "2.5rem 1.5rem" }}>
        <div
          style={{
            maxWidth: 1200,
            margin: "0 auto",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: "1rem",
          }}
        >
          <Link to="/" style={{ fontSize: "1.25rem", fontWeight: 800, color: "#f1f5f9", textDecoration: "none" }}>
            Veylant<span style={{ color: brandLight }}> IA</span>
          </Link>
          <div style={{ display: "flex", gap: "1.5rem" }}>
            <Link to="/docs" style={{ fontSize: ".84rem", color: dim, textDecoration: "none" }}>Documentation</Link>
            <a href="http://localhost:8090/playground" style={{ fontSize: ".84rem", color: dim, textDecoration: "none" }}>Playground</a>
            <a href="mailto:demo@veylant.io" style={{ fontSize: ".84rem", color: dim, textDecoration: "none" }}>Contact</a>
          </div>
          <span style={{ fontSize: ".8rem", color: dim }}>© 2026 Veylant. Conçu pour l'entreprise européenne.</span>
        </div>
      </footer>
    </div>
  );
}
