// Footer with brand presence + Qualiopi badge

const Footer = () => {
  const isMobile = useIsMobile();
  return (
  <footer style={{
    background: "var(--ahead-comp-01)", color: "var(--ahead-fg-on-dark-2)",
    padding: isMobile ? "56px 0 28px" : "72px 0 32px",
    fontFamily: "var(--font-sans)", fontSize: 14,
  }}>
    <div className="container">
      {/* Big mark */}
      <div style={{ marginBottom: isMobile ? 36 : 56, display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
        <div style={{
          fontFamily: "var(--font-display)", fontWeight: 900, textTransform: "uppercase",
          fontSize: "clamp(40px, 8vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.025em",
          color: "#fff",
        }}>
          Good things<br/>
          <span style={{ color: "var(--ahead-secondary)", display: "inline-block", transform: "skewY(-4deg)" }}>ahead.</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, minWidth: 240 }}>
          <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ahead-comp-05)" }}>
            Parlons IA
          </span>
          <a href="contact.html" style={{ fontSize: 22, color: "#fff", textDecoration: "none", fontWeight: 500 }}>
            Nous écrire →
          </a>
          <span style={{ fontSize: 14, color: "var(--ahead-fg-on-dark-2)" }}>
            Réponse sous quelques jours ouvrés
          </span>
        </div>
      </div>

      {/* Columns */}
      <div style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr 1fr 1fr",
        gap: isMobile ? 32 : 40,
        paddingBottom: isMobile ? 28 : 40,
        borderBottom: "1px solid rgba(255,255,255,.08)",
      }}>
        <div>
          <img src="design/logos/good-things-ahead-blue.png" alt=""
            style={{ width: 160, marginBottom: 16, borderRadius: 8 }} />
          <p style={{ color: "var(--ahead-fg-on-dark-3)", lineHeight: 1.6, margin: 0, maxWidth: 320, fontSize: 14 }}>
            Cabinet de conseil français spécialisé dans la stratégie digitale et l'intelligence artificielle.
          </p>
        </div>
        <div>
          <div style={{ color: "#fff", fontWeight: 600, marginBottom: 16, fontSize: 14 }}>AI Practice</div>
          <FooterLink href="offres.html#acculturation">Acculturation IA</FooterLink>
          <FooterLink href="offres.html#audit">Audit & Conseil</FooterLink>
          <FooterLink href="formations.html">Formation IA</FooterLink>
          <FooterLink href="offres.html#deploiement">Déploiement IA</FooterLink>
          <FooterLink href="offres.html#factory">AI Factory</FooterLink>
          <FooterLink href="offres.html#ecommerce">AI & eCommerce</FooterLink>
        </div>
        <div>
          <div style={{ color: "#fff", fontWeight: 600, marginBottom: 16, fontSize: 14 }}>Entreprise</div>
          <FooterLink>ahead consulting</FooterLink>
          <FooterLink>ahead tribe</FooterLink>
          <FooterLink href="etude-de-cas.html">Études de cas</FooterLink>
          <FooterLink href="contact.html">Contact</FooterLink>
        </div>
        <div>
          <div style={{ color: "#fff", fontWeight: 600, marginBottom: 16, fontSize: 14 }}>Légal</div>
          <FooterLink>Mentions légales</FooterLink>
          <FooterLink>RGPD</FooterLink>
          <FooterLink>Confidentialité</FooterLink>
          <div style={{ marginTop: 20, display: "flex", alignItems: "center", gap: 12 }}>
            <img src="design/logos/qualiopi-certified.png" alt="Qualiopi"
              style={{ height: 56, width: "auto", background: "#fff", padding: 6, borderRadius: 6 }} />
            <div style={{ fontSize: 11, color: "var(--ahead-fg-on-dark-3)", lineHeight: 1.4 }}>
              Agréé Qualiopi · 2026<br/>Actions de formation
            </div>
          </div>
        </div>
      </div>

      {/* Bottom */}
      <div style={{
        paddingTop: 24, display: "flex", justifyContent: "space-between",
        alignItems: "center", flexWrap: "wrap", gap: 12,
        fontSize: 12, color: "var(--ahead-fg-on-dark-3)",
      }}>
        <div>© {new Date().getFullYear()} ahead digital · Paris</div>
        <div style={{ display: "flex", gap: 16 }}>
          <a style={{ color: "var(--ahead-fg-on-dark-2)" }}><Icon name="linkedin" size={16} /></a>
          <a style={{ color: "var(--ahead-fg-on-dark-2)" }}><Icon name="twitter" size={16} /></a>
          <a style={{ color: "var(--ahead-fg-on-dark-2)" }}><Icon name="youtube" size={16} /></a>
        </div>
      </div>
    </div>
  </footer>
  );
};

const FooterLink = ({ children, href }) => (
  <a href={href || "#"} style={{
    display: "block", color: "var(--ahead-fg-on-dark-2)",
    textDecoration: "none", padding: "5px 0", fontSize: 14,
    transition: "color 150ms",
  }}
    onMouseEnter={e => e.currentTarget.style.color = "#fff"}
    onMouseLeave={e => e.currentTarget.style.color = "var(--ahead-fg-on-dark-2)"}>
    {children}
  </a>
);

Object.assign(window, { Footer, FooterLink });