function Hero() {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const video = videoRef.current;
    if (!video) return;
    const handleTimeUpdate = () => {
      if (video.currentTime >= 32) {
        video.currentTime = 0;
        video.play();
      }
    };
    video.addEventListener('timeupdate', handleTimeUpdate);
    return () => video.removeEventListener('timeupdate', handleTimeUpdate);
  }, []);

  return (
    <>
      <style>{`
        /* ── Hero wrapper ── */
        .hero {
          position: relative;
          width: 100%;
          height: 100vh;
          min-height: 600px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* ── Video background ── */
        .hero-video {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          z-index: 0;
        }

        /* ── Overlay layers ── */
        /* Base dark scrim */
        .hero-overlay {
          position: absolute;
          inset: 0;
          z-index: 1;
          background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.18) 0%,
            rgba(0,0,0,0.38) 40%,
            rgba(0,0,0,0.62) 70%,
            rgba(12,12,12,0.92) 100%
          );
        }
        /* Warm orange color grade — feels like sunset */
        .hero-grade {
          position: absolute;
          inset: 0;
          z-index: 2;
          background: radial-gradient(
            ellipse 90% 70% at 50% 55%,
            rgba(180, 60, 0, 0.18) 0%,
            transparent 70%
          );
          mix-blend-mode: screen;
          pointer-events: none;
        }
        /* Noise grain for film texture */
        .hero-grain {
          position: absolute;
          inset: 0;
          z-index: 3;
          pointer-events: none;
          opacity: 0.28;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
        }

        /* ── Content ── */
        .hero-content {
          position: relative;
          z-index: 10;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding: 0 24px;
          max-width: 860px;
        }

        /* Eyebrow label */
        .hero-eyebrow {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px;
          font-weight: 400;
          letter-spacing: 0.38em;
          text-transform: uppercase;
          color: rgba(255,255,255,0.55);
          display: flex;
          align-items: center;
          gap: 14px;
          margin-bottom: 28px;
          opacity: 0;
          transform: translateY(12px);
          animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
        }
        .hero-eyebrow-dot {
          width: 4px; height: 4px;
          border-radius: 50%;
          background: #E84800;
          flex-shrink: 0;
        }

        /* Main headline */
        .hero-headline {
          font-family: 'Playfair Display', serif;
          font-size: clamp(48px, 7vw, 92px);
          font-weight: 400;
          font-style: italic;
          color: #F5F0EA;
          line-height: 1.08;
          letter-spacing: -0.025em;
          margin-bottom: 28px;
          opacity: 0;
          transform: translateY(18px);
          animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.55s forwards;
        }
        /* Orange tint on "sunset" word */
        .hero-headline .accent { color: #E84800; font-style: italic; }

        /* Sub-copy */
        .hero-sub {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px;
          font-weight: 300;
          letter-spacing: 0.28em;
          text-transform: uppercase;
          color: rgba(255,255,255,0.42);
          margin-bottom: 48px;
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
          justify-content: center;
          opacity: 0;
          transform: translateY(14px);
          animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.8s forwards;
        }
        .hero-sub-sep {
          width: 3px; height: 3px;
          border-radius: 50%;
          background: rgba(232,72,0,0.6);
          flex-shrink: 0;
        }

        /* CTA row — side by side, centered */
        .hero-ctas {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 20px;
          flex-wrap: wrap;
          opacity: 0;
          transform: translateY(14px);
          animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 1.05s forwards;
        }
        .hero-cta-primary {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: #fff;
          background: #E84800;
          border: none;
          padding: 15px 36px;
          border-radius: 100px;
          cursor: pointer;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          box-shadow: 0 4px 28px rgba(232,72,0,0.38);
          transition: background 0.22s ease,
                      transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                      box-shadow 0.22s ease;
        }
        .hero-cta-primary:hover {
          background: #ff5c1a;
          transform: translateY(-2px);
          box-shadow: 0 8px 40px rgba(232,72,0,0.52);
        }
        .hero-cta-primary:active {
          transform: translateY(0);
          box-shadow: 0 3px 16px rgba(232,72,0,0.3);
        }
        .hero-cta-secondary {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: rgba(255,255,255,0.55);
          text-decoration: none;
          padding: 15px 4px;
          position: relative;
          transition: color 0.22s ease;
        }
        .hero-cta-secondary::after {
          content: '';
          position: absolute;
          bottom: 10px; left: 0;
          width: 0; height: 1px;
          background: rgba(255,255,255,0.5);
          transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
        }
        .hero-cta-secondary:hover { color: rgba(255,255,255,0.9); }
        .hero-cta-secondary:hover::after { width: 100%; }

        /* ── Scroll indicator ── */
        .hero-scroll {
          position: absolute;
          bottom: 36px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 10;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          opacity: 0;
          animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 1.4s forwards;
        }
        .hero-scroll-label {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px;
          font-weight: 400;
          letter-spacing: 0.3em;
          text-transform: uppercase;
          color: rgba(255,255,255,0.28);
        }
        .hero-scroll-line {
          width: 1px;
          height: 40px;
          background: linear-gradient(to bottom, rgba(232,72,0,0.7), transparent);
          animation: scrollPulse 2.2s ease-in-out 2s infinite;
          transform-origin: top;
        }
        @keyframes scrollPulse {
          0%   { transform: scaleY(1); opacity: 0.7; }
          50%  { transform: scaleY(0.5); opacity: 0.3; }
          100% { transform: scaleY(1); opacity: 0.7; }
        }

        /* ── Shared fade-up keyframe ── */
        @keyframes heroFadeUp {
          from { opacity: 0; transform: translateY(18px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Mobile tweaks ── */
        @media (max-width: 640px) {
          .hero-headline { letter-spacing: -0.02em; }
          .hero-cta-secondary { display: none; }
          .hero-sub { gap: 10px; }
        }
      `}</style>

      <section className="hero" id="home" aria-label="After5 Lounge Bar hero">
        {/* Video background */}
        <video
          ref={videoRef}
          className="hero-video"
          autoPlay
          muted
          playsInline
          poster="./brand_assets/oxygen/oxygen-01.webp"
        >
          <source src="./brand_assets/hero-video.webm" type="video/webm" />
        </video>

        {/* Overlay layers */}
        <div className="hero-overlay" aria-hidden="true" />
        <div className="hero-grade" aria-hidden="true" />
        <div className="hero-grain" aria-hidden="true" />

        {/* Content */}
        <div className="hero-content">
          <p className="hero-eyebrow">
            <span className="hero-eyebrow-dot" />
            Belle Vue Maurel, Mauritius
            <span className="hero-eyebrow-dot" />
          </p>

          <h1 className="hero-headline">
            Come for the <span className="accent">sunset,</span><br />
            stay for the night.
          </h1>

          <p className="hero-sub">
            Open-air Lounge Bar
            <span className="hero-sub-sep" />
            Cocktails
            <span className="hero-sub-sep" />
            Live Music
            <span className="hero-sub-sep" />
            Fine Food
          </p>

          <div className="hero-ctas">
            <a
              href="https://wa.me/23058582020?text=Hi%2C%20I'd%20like%20to%20make%20a%20reservation%20at%20After5%20Lounge%20Bar"
              className="hero-cta-primary"
              target="_blank"
              rel="noopener noreferrer"
            >
              {/* WhatsApp icon */}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
              </svg>
              Reserve a Table
            </a>
            <a href="#menu" className="hero-cta-secondary">
              View Menu
            </a>
          </div>
        </div>

        {/* Scroll indicator */}
        <div className="hero-scroll" aria-hidden="true">
          <span className="hero-scroll-label">Scroll</span>
          <div className="hero-scroll-line" />
        </div>
      </section>
    </>
  );
}
