"use client";

import { ArrowRightIcon } from "@radix-ui/react-icons";
import { useInView } from "framer-motion";
import { useRef } from "react";
import AnimatedGradientText from "./ui/animated-gradient-text";
import { Button } from "./ui/button";
import { BorderBeam } from "./ui/border-beam";
import { ny } from "@/lib/utils";
import { ChevronDown, ChevronRight } from "lucide-react";
import Particles from "./ui/particles";
import Image from "next/legacy/image";
import Link from "next/link";
import CoolHeaderText from "./cool-header-text";
export default function Header() {
	const ref = useRef(null);
	const inView = useInView(ref, { once: true, margin: "-100px" });
	return (
		<>
			<section
				id="hero"
				className="relative mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 text-center md:px-8"
			>
				<div className="relative">
					<CoolHeaderText />
				</div>
				<p className="mb-12 -translate-y-4 animate-fade-in text-balance text-lg tracking-tight text-gray-400 opacity-0 [--animation-delay:400ms] md:text-xl">
					Beautifully designed, privacy-focused, and packed with features.
					<br className="hidden md:block" /> We care about your experience, not
					your data.
				</p>
				<div className="flex w-full flex-col justify-center md:flex-row">
					<a href="/download">
						<Button className="-translate-y-4 animate-fade-in gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black">
							<span>Download Zen Now </span>
							<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
						</Button>
					</a>
					<a
						href="#features"
						className="-translate-y-4 animate-fade-up opacity-0 [--animation-delay:800ms]"
					>
						<Button variant="ghost" className="mt-4 md:ml-4 md:mt-0">
							Start Exploring <ChevronDown className="ml-1 size-4" />
						</Button>
					</a>
				</div>
			</section>
		</>
	);
}