import { ExternalLink } from "lucide-react";

import { cn } from "@/lib/utils";

import { Badge } from "@/components/ui/badge";
import { Button, buttonVariants } from "@/components/ui/button";
import Link from "next/link";

const Hero = () => {
	return (
		<section className="flex h-[calc(100vh-68px)] justify-center items-center relative overflow-hidden py-32">
			<div className="">
				<div className="bg-blue-50 magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center opacity-100" />
				<div className="mx-auto flex max-w-5xl flex-col items-center">
					<div className="z-10 flex flex-col items-center gap-6 text-center">
						<img
							src="https://shadcnblocks.com/images/block/block-1.svg"
							alt="logo"
							className="h-16"
						/>
						<Badge variant="outline">Latosa-Escrima</Badge>
						<div>
							<h1 className="mb-6 text-pretty text-2xl font-bold lg:text-5xl">
								Trouvez votre équilibre avec Latosa-Escrima
							</h1>
							<p className="text-muted-foreground lg:text-xl">
								Une évolution des arts martiaux Philippins
							</p>
						</div>
						<div className="mt-4 flex justify-center gap-2">
							<Button>
								<Link href="/contact">Nous contacter</Link>
							</Button>
							<Button variant="outline">
								À propos
								<ExternalLink className="ml-2 h-4" />
							</Button>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};

export default Hero;