function Hero() {
  const diag = typeof location !== "undefined" && /[?&]diag=1/.test(location.search);
  return (
    <section id="hero" style={{
      minHeight: "100vh", paddingTop: "var(--nav-height)",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      textAlign: "center", position: "relative", overflow: "hidden",
    }}>
      <video autoPlay muted loop playsInline preload="auto" poster="site/hero-studio.png" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
        transform: "translateZ(0)", contain: "paint",
      }}>
        <source src="site/hero-bg.mp4" type="video/mp4" />
      </video>
      {diag ? null : <div style={{ position: "absolute", inset: 0, background: "rgba(15,23,42,0.55)" }} />}
      {diag ? null : <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.1 }}>
      </svg>}
      <div style={{ position: "relative", zIndex: 10 }}>
        <h1 style={{
          fontSize: "clamp(26px, 4vw, 32px)", fontWeight: 600,
          letterSpacing: "-0.5px", lineHeight: 1.2,
          background: "var(--gradient-title)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent",
          margin: "0 0 12px", animation: "vb-fade-in-up 1s ease-out 0.2s backwards",
          fontFamily: "var(--font-body)", textTransform: "uppercase", cursor: "default", transition: "all 0.3s ease",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.textShadow = "0 0 15px rgba(217,119,6,0.3)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.textShadow = "none"; }}>THE VISUALS BROTHERS</h1>
        <div style={{
          fontSize: "14px", fontWeight: 400, letterSpacing: "1px", textTransform: "capitalize",
          color: "var(--text-secondary)", marginBottom: "40px",
          animation: "vb-fade-in-up 1s ease-out 0.4s backwards", fontFamily: "var(--font-body)",
          lineHeight: 1.4, cursor: "default", transition: "all 0.3s ease",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.textShadow = "0 0 10px rgba(217,119,6,0.2)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.textShadow = "none"; }}>Creative studio</div>
      </div>
      <div style={{
        position: "absolute", bottom: "40px", color: "var(--accent-primary)", animation: "vb-bounce 2s infinite", zIndex: 10, cursor: "pointer",
      }}>
        <i data-lucide="chevron-down" style={{ width: "28px", height: "28px" }}></i>
      </div>
    </section>
  );
}

window.Hero = Hero;