import Image from 'next/image'
import clsx from 'clsx'

import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { Logo_hero } from '@/components/Logo_hero'
import { H1, P } from '@/components/UI/Texts'
import { FadeInOnView } from '@/components/UI/FadeInOnView'


type HeroProps = {
  className?: string
}

export function Hero({ className }: HeroProps) {
  return (
    <div
      className={clsx(
        'relative min-h-screen overflow-hidden flex flex-col justify-center md:block -z-20',
        className,
      )}
    >
      {/* Video Background */}
      <video
        autoPlay
        muted
        loop
        playsInline
        className="absolute inset-0 w-full h-full object-cover z-0"
      >
        <source src="/videos/ourworld.mp4" type="video/mp4" />
      </video>
      
      {/* Overlay for better text readability */}
      <div className="absolute inset-0 bg-black/20 z-10"></div>
      
      {/* Content */}
      
      <Container className="relative z-20 pt-12 pb-12 lg:pt-32">
        <FadeInOnView>
          <H1 className="max-w-3xl text-left text-white">
            Shaping the future of Augmented Collective Intelligence
          </H1>
        </FadeInOnView>

        <FadeInOnView delayMs={150} className="my-12 hidden md:flex justify-center">
          <div className="h-[2px] w-full max-w-7xl bg-white/90 animate-draw-line" />
        </FadeInOnView>

        <FadeInOnView
          delayMs={300}
          className="mx-auto md:mx-0 md:ml-auto md:w-[60%] space-y-6 flex flex-col items-start"
        >
          <P className="mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
            At OurWorld, we are building the required infrastructures and tools to enable an Augmented Collective Intelligence ;  creating a sovereign, sustainable, and autonomous future for all.
          </P>
          <Button href="/about" variant="outline" color="white" className="mt-4 md:w-auto">
            Learn More
          </Button>
        </FadeInOnView>
      </Container>
    </div>
  )
}
