'use client'

import { useRef, useEffect } from 'react'
import { H1, H5 } from '@/components/Texts'

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

  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      video.playbackRate = 0.4;
      const playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise.catch(error => {
          console.error("Video autoplay was prevented:", error);
        });
      }
    }
  }, []);

  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 (Temporarily commented out for debugging) */}
      {/* <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" /> */}

      {/* Center “halo” for text legibility (Temporarily commented out for debugging) */}
      {/* <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"
            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
          >
            Decentralized Autonomous Agentic Cloud.
          </H1>

          <H5
            className="mt-8"
            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.
          </H5>
        </div>
      </div>
    </section>
  )
}