import { Button } from '@/components/Button';
import { Container } from '@/components/Container';
import { Gradient } from '@/components/Gradient';
import { ChevronRightIcon } from '@heroicons/react/20/solid'

export function Homepage() {
  return (
    <div className="lg:pt-24 pt-24 pb-12 min-h-screen flex items-center justify-center relative">
      <Container>
        {/* Background Video */}
        <video
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 w-full h-full object-cover -z-10"
        >
          <source src="/videos/hero2.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>

        <div className="mx-auto max-w-xl lg:max-w-6xl text-center">
          <h1 className="font-display lg:max-w-3xl font-bold text-white tracking-tighter lg:text-7xl text-5xl">
            The Future of <span className='text-white'>Collaboration is Now.</span>
          </h1>
          <div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight leading-normal text-purple-800">
          </div>
          <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
            <a
              href="https://portal.ourverse.tf" 
              target="_blank" 
              rel="noopener noreferrer" 
              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold"
            >
              Join OurVerse
            </a>
            <a href="/features.html" className="text-base font-semibold leading-6 text-white hover:text-purple-200">
              Discover Features <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </Container>
    </div>
  );
}