// Hero — two variants controlled via tweaks

const Hero = ({ variant = "network", tweaks }) => {
  if (variant === "wordmark") return <HeroWordmark tweaks={tweaks} />;
  return <HeroNetwork tweaks={tweaks} />;
};

// ---- Variant 1: NETWORK — full-bleed network with overlaid headline
const HeroNetwork = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    background: "var(--ahead-primary)",
    color: "#fff",
    position: "relative",
    overflow: "hidden",
    minHeight: isMobile ? 600 : 720,
    display: "flex",
    alignItems: "center",
  }}>
    {/* Network canvas */}
    <div style={{ position: "absolute", inset: 0 }}>
      <NetworkVisual />
    </div>

    {/* Floating coral blob */}
    <div aria-hidden style={{
      position: "absolute", right: -160, top: -160, width: 520, height: 520,
      borderRadius: "50%", background: "var(--ahead-secondary)",
      opacity: 0.22, filter: "blur(80px)",
      animation: "float-blob 14s ease-in-out infinite",
    }} />
    <div aria-hidden style={{
      position: "absolute", left: -120, bottom: -120, width: 380, height: 380,
      borderRadius: "50%", background: "var(--ahead-comp-02)",
      opacity: 0.25, filter: "blur(80px)",
      animation: "float-blob 18s ease-in-out infinite reverse",
    }} />

    <div className="container" style={{
      position: "relative",
      padding: isMobile ? "80px 20px 100px" : "120px 48px 100px",
      width: "100%",
    }}>
      <div style={{ maxWidth: 980, animation: "slide-in-up 800ms cubic-bezier(.2,.7,.2,1) both" }}>
        <span className="pill pill-onDark" style={{ marginBottom: 24 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ahead-secondary)", animation: "pulse-dot 1.6s ease-in-out infinite" }}></span>
          AI Practice · ahead digital
        </span>

        <h1 className="display-xl" style={{ color: "#fff", marginBottom: 24 }}>
          L'<span style={{ color: "var(--ahead-secondary)", fontStyle: "italic" }}>IA</span><br/>
          au service<br/>
          de votre <span style={{ display: "inline-block", transform: "skewY(-6deg)", color: "var(--ahead-comp-05)" }}>métier.</span>
        </h1>

        <p style={{
          fontSize: isMobile ? 17 : 22, lineHeight: 1.5, color: "var(--ahead-fg-on-dark-2)",
          fontWeight: 300, margin: "0 0 32px", maxWidth: 600,
        }}>
          Acculturation, audit, formation, déploiement, AI Factory.<br/>
          De la sensibilisation du Comex à la mise en production.
        </p>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Button variant="accent" icon="arrow-right" href="contact.html">
            Échanger sur votre besoin
          </Button>
          <Button variant="link-onDark" icon="arrow-down-right" href="#offres">
            Découvrir nos offres
          </Button>
        </div>
      </div>
    </div>

    {/* Bottom edge — positioning strip (hidden on small mobile to save space) */}
    {!isMobile && (
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0,
        borderTop: "1px solid rgba(255,255,255,.08)",
        background: "rgba(0,0,0,.18)", backdropFilter: "blur(8px)",
      }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", padding: "20px 48px", gap: 32, flexWrap: "wrap" }}>
          {[
            ["Acculturation", "Comex & équipes"],
            ["Audit", "cas d'usage priorisés"],
            ["Déploiement", "POC → MVP → run"],
            ["Qualiopi", "agréé 2026"],
          ].map(([n, l]) => (
            <div key={l} style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, color: "var(--ahead-secondary)" }}>{n}</span>
              <span style={{ fontSize: 12, color: "var(--ahead-fg-on-dark-2)", textTransform: "uppercase", letterSpacing: "0.12em" }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    )}
  </section>
  );
};

// ---- Variant 2: WORDMARK — split layout, oversized italic word
const HeroWordmark = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    background: "#fff",
    color: "var(--ahead-primary)",
    position: "relative",
    overflow: "hidden",
    minHeight: isMobile ? "auto" : 720,
  }}>
    <div className="container" style={{
      padding: isMobile ? "60px 20px 40px" : "100px 48px 0",
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr",
      gap: isMobile ? 32 : 48,
      alignItems: "center",
      minHeight: isMobile ? "auto" : 720,
    }}>
      <div style={{ animation: "slide-in-up 800ms cubic-bezier(.2,.7,.2,1) both" }}>
        <span className="eyebrow" style={{ marginBottom: 24 }}>AI Practice · ahead digital</span>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 900, textTransform: "uppercase",
          letterSpacing: "-0.03em", lineHeight: 0.85,
          fontSize: "clamp(64px, 10vw, 156px)",
          color: "var(--ahead-primary)", margin: "20px 0 28px",
        }}>
          GOOD<br/>
          <span style={{ color: "var(--ahead-secondary)", fontStyle: "italic", display: "inline-block", transform: "skewX(-4deg)" }}>A.I.</span><br/>
          AHEAD.
        </h1>
        <p className="lede" style={{ marginBottom: 36, maxWidth: 520 }}>
          Cabinet de conseil français. Nous accompagnons vos équipes
          de la sensibilisation IA à la mise en production — par étapes,
          en gardant la main.
        </p>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <Button variant="accent" icon="arrow-right" href="contact.html">
            Échanger sur votre besoin
          </Button>
          <Button variant="ghost" href="#offres">Nos 5 offres</Button>
        </div>
      </div>

      <div style={{ position: "relative", height: isMobile ? 320 : 560, alignSelf: "stretch", marginTop: isMobile ? 0 : 60 }}>
        {/* Coral accent panel */}
        <div style={{
          position: "absolute", inset: "20px 0 20px 40px",
          background: "var(--ahead-comp-01)", borderRadius: 24,
          overflow: "hidden",
        }}>
          <NetworkVisual />
          {/* Floating tag */}
          <div style={{
            position: "absolute", top: 32, left: 32, right: 32,
            display: "flex", justifyContent: "space-between",
            color: "rgba(255,255,255,.7)", fontSize: 11,
            fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase",
          }}>
            <span>// ai_practice.live</span>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ahead-secondary)", animation: "pulse-dot 1.6s ease-in-out infinite" }}></span>
              practice IA · ahead digital
            </span>
          </div>
          {/* Big italic letter */}
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--font-display)", fontWeight: 900, fontStyle: "italic",
            fontSize: isMobile ? 200 : 360, color: "rgba(255,85,91,.16)",
            letterSpacing: "-0.05em", lineHeight: 1, transform: "skewX(-6deg)",
            pointerEvents: "none",
          }}>AI</div>
        </div>
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { Hero, HeroNetwork, HeroWordmark });