import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowDown } from "lucide-react";
import { aboutMe } from "@/lib/data";

export function Hero() {
  return (
    <section
      id="hero"
      className="relative flex min-h-[calc(100vh-4rem)] w-full items-center justify-center bg-gradient-to-b from-background to-secondary"
    >
      <div className="container text-center px-4 md:px-6">
        <div className="flex flex-col items-center space-y-6">
          <div className="space-y-4">
            <h1 className="font-headline text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl/none bg-clip-text text-transparent bg-gradient-to-r from-primary via-accent to-primary">
              {aboutMe.name}
            </h1>
            <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
              {aboutMe.title}
            </p>
          </div>
          <p className="max-w-[600px] text-foreground/80 md:text-lg">
            Transforming data into insights and building intelligent solutions.
          </p>
          <Link href="#projects">
            <Button size="lg" className="group">
              View My Work
              <ArrowDown className="ml-2 h-4 w-4 transition-transform group-hover:translate-y-1" />
            </Button>
          </Link>
        </div>
      </div>
    </section>
  );
}