import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import Navbar from "@/components/Navbar";
import HeroComponent from "./HeroComponent";
import Link from "next/link";

export default function HeroSection() {
  return (
    <>
      <section className="relative inset-0 -z-0 h-full w-full items-center px-5 py-24 pt-0 [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]">
        <Navbar />
        <div className="max-w-7xl mx-auto">
          <video
            className="absolute inset-0 w-full h-full object-cover z-[-1]"
            src="https://cdn.prejee.com/prejee/beta/video/hero.mp4"
            autoPlay
            loop
            muted
          />

          <div className="relative overflow-hidden py-24 lg:py-30 z-10">
            <div className="container">
              <div className="max-w-2xl text-center mx-auto">
                <a href="/tests" target="_blank" className="font-neueHaas pointer-events-auto cursor-pointer">
                  <div className="focus:ring-ring inline-flex items-center rounded-lg border border-[#F60]/20 bg-[#ffe6d6]/90 px-2.5 py-0.5 text-center text-lg font-semibold text-[#F60] shadow-[0_4px_20px_rgba(255,102,0,0.15)] backdrop-blur-sm transition-all duration-200 select-none hover:bg-[#FC651E] hover:text-[#ffe6d6] focus:ring-2 focus:ring-offset-2 focus:outline-none">
                    <Badge style={{ backgroundColor: '#FC651E', color: '#fff' }} className="mr-2 ml-1 rounded-sm px-2 py-0.5 text-xs font-semibold align-middle">
                      FLASH SALE
                    </Badge>
                    <span className="font-medium text-md text-base">
                      AI-powered Test Series is LIVE
                    </span>
                  </div>
                </a>
                <h1 className="scroll-m-20 text-5xl text-gray-50 font-bold tracking-tight lg:text-6xl lg:leading-tight pt-8">
                  The Future of <p>Agentic <span style={{ color: '#9EADFA' }}>Learning</span></p>
                </h1>
                <p className="mt-3 text-xl text-gray-400">
                  Quantik enforces quant learning, tracking your learning style.
                </p>
              </div>
              <div className="mt-8 gap-3 flex justify-center">
                <a href="/register">
                  <Button size="lg" variant={"secondary"} className="cursor-pointer">
                    Get started<span className="text-lg pl-2">{">"}</span>
                  </Button>
                </a>
                <Link href="/labs">
                  <Button size="lg" variant={"default"} className="cursor-pointer">
                    Learn more
                  </Button>
                </Link>
              </div>
            </div>
          </div>
          <HeroComponent />
        </div>
      </section>
    </>
  );
}