'use client'

import { useRef, useEffect } from 'react'

export function HomeHeroLight2() {
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (videoRef.current) videoRef.current.playbackRate = 0.4
  }, [])

  return (
    <section className="relative h-screen overflow-hidden">
      {/* Background video */}
      <video
        ref={videoRef}
        src="/videos/cloud.mp4"
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 h-full w-full object-cover z-[-10]"
      />

      {/* Global soft wash + blur */}
      <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" />

      {/* Center “halo” for text legibility */}
      <div
        className="absolute inset-0 z-0"
        style={{
          background:
            'radial-gradient(ellipse at center, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 15%, rgba(255,255,255,0.72) 35%, rgba(255,255,255,0.08) 75%)'
        }}
      />

      {/* Content */}
      <div className="relative z-10 h-full flex items-center justify-center">
        <div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
          <h1
            className="pt-6 text-5xl sm:text-7xl font-semibold tracking-tight leading-tight text-gray-900"
            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
          >
            Decentralized Autonomous Agentic Cloud.
          </h1>

          <p
            className="mt-8 text-lg sm:text-xl font-medium text-gray-800/90 leading-relaxed"
            style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
          >
            Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
            autonomous Agents that connect, learn, and grow with you.
          </p>
        </div>
      </div>
    </section>
  )
}