// Hero section — sobre, focus sur le message.
function Hero({ variant, intensity, accent }) {
  return (
    <section
      data-screen-label="01 Hero"
      style={{
        position: "relative",
        minHeight: "min(96vh, 820px)",
        paddingTop: "clamp(160px, 16vw, 220px)",
        paddingBottom: "clamp(80px, 8vw, 120px)",
        overflow: "hidden",
        borderBottom: "1px solid var(--hairline)",
      }}
    >
      {/* 3D backdrop */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <Hero3D variant={variant} intensity={intensity} accent={accent} />
        <div className="grain" />
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(ellipse at center, transparent 35%, var(--canvas) 92%)",
          pointerEvents: "none",
        }} />
      </div>

      <div className="container" style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
        {/* Headline */}
        <h1 className="t-display-xl hero-title hero-fade hero-fade-1" style={{
          margin: 0,
          textWrap: "balance",
          maxWidth: 1100,
          marginInline: "auto",
          paddingInline: "clamp(4px, 2vw, 16px)",
        }}>
          Intégrer l'IA <span className="hero-mobile-break" /><em style={{
            fontStyle: "normal",
            background: `linear-gradient(180deg, var(--ink) 30%, var(--accent) 100%)`,
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            backgroundClip: "text",
          }}>au service</em><br />de votre <span className="hero-small-break" />entreprise.
        </h1>

        {/* Sub */}
        <p className="t-body-lg hero-fade hero-fade-2" style={{
          margin: "24px auto 0",
          maxWidth: 600,
          textWrap: "balance",
          color: "var(--ink)",
          fontWeight: 500,
          textShadow: "0 1px 12px rgba(0,0,0,0.7), 0 0 6px rgba(0,0,0,0.5)",
          position: "relative",
          zIndex: 2,
        }}>
          Nous intégrons l'IA dans votre entreprise pour augmenter la productivité de vos équipes, gagner du temps et de la croissance.
        </p>

        {/* CTAs */}
        <div className="hero-fade hero-fade-3" style={{
          display: "flex",
          justifyContent: "center",
          gap: 12,
          marginTop: 28,
          flexWrap: "wrap",
        }}>
          <a href="#booking" className="pill pill--primary pill--lg magnetic">
            Réserver un audit gratuit
            <svg width="13" height="13" viewBox="0 0 12 12" fill="none">
              <path d="M3 9 9 3M9 3H4M9 3v5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
            </svg>
          </a>
          <a href="#services" className="pill pill--lg magnetic">
            Découvrir nos services
          </a>
        </div>

        {/* Scroll indicator */}
        <div style={{
          marginTop: "clamp(36px, 5vw, 56px)",
          display: "flex",
          justifyContent: "center",
        }}>
          <span style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "var(--body-mid)",
            animation: "scrollDown 2.4s ease-in-out infinite",
          }}>
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none">
              <rect x="0.5" y="0.5" width="9" height="13" rx="4.5" stroke="currentColor" />
              <rect x="4" y="3" width="2" height="3" rx="1" fill="currentColor" />
            </svg>
            Faites défiler
          </span>
        </div>
        <style>{`
          .hero-mobile-break,
          .hero-small-break { display: none; }
          @keyframes scrollDown {
            0%, 100% { transform: translateY(0); opacity: 0.6; }
            50% { transform: translateY(4px); opacity: 1; }
          }
          @media (max-width: 520px) {
            .hero-title {
              font-size: 32px !important;
              line-height: 1.12 !important;
              letter-spacing: -0.025em !important;
              overflow-wrap: normal;
            }
            .hero-mobile-break { display: block; }
          }
          @media (max-width: 380px) {
            .hero-title { font-size: 30px !important; }
            .hero-small-break { display: block; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Hero = Hero;