import Image from 'next/image'

import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { Logo_hero } from '@/components/Logo_hero'



export function Hero() {
  return (
    <div className="relative overflow-hidden min-h-screen">
      {/* 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-24 pb-12 text-center lg:pt-32">
        <div className="hidden sm:mb-8 sm:flex sm:justify-center">
            <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-100 ring-1 ring-gray-100/20 hover:ring-gray-100/5">
              Interested to Take Part?{' '}
              <a href="https://calendly.com/florian_threefold/30min" className="font-bold text-white0">
                <span aria-hidden="true" className="absolute inset-0" />
                Book a Meeting <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </div>
      <div className="mx-auto max-w-4xl flex justify-center">
        <Logo_hero className='lg:h-auto h-0.5' />
      </div>
      <p className="mx-auto lg:mt-6 mt-4 max-w-2xl text-xl lg:text-2xl tracking-tight font-medium text-white/90">
        Shaping the future of Augmented Collective Intelligence
      </p>
      <p className="mx-auto 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>
      <div className="mt-10 flex justify-center">
        <Button href="/about" color="white">Learn More</Button>
      </div>
      
    </Container>
    </div>
  )
}