"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";

export function Hero() {
  return (
    <section className="relative min-h-[80vh] flex items-center overflow-hidden bg-neutral-50">
      <Container className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-20">
        <div className="max-w-2xl">
          <Heading className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900">
            Step Into <span className="text-primary">Excellence</span>
          </Heading>
          <Subheading className="mt-6 text-lg md:text-xl text-neutral-600 leading-relaxed">
            Discover our curated collection of high-quality footwear. From formal elegance to casual comfort, find the perfect pair for every occasion.
          </Subheading>
          <div className="flex flex-wrap gap-4 mt-10">
            <Button size="lg" asChild className="px-8 py-6 text-lg">
              <Link href="/shop">Shop New Arrivals</Link>
            </Button>
            <Button size="lg" variant="outline" asChild className="px-8 py-6 text-lg">
              <Link href="/book">Book a Fitting</Link>
            </Button>
          </div>
          <div className="mt-12 flex items-center gap-8">
            <div>
              <p className="text-2xl font-bold text-neutral-900">5k+</p>
              <p className="text-sm text-neutral-500">Happy Customers</p>
            </div>
            <div className="w-px h-10 bg-neutral-200" />
            <div>
              <p className="text-2xl font-bold text-neutral-900">200+</p>
              <p className="text-sm text-neutral-500">Unique Styles</p>
            </div>
          </div>
        </div>
        <div className="relative aspect-square lg:aspect-auto lg:h-[600px] rounded-3xl overflow-hidden shadow-2xl">
          <Image
            src="https://images.unsplash.com/photo-1600202280810-e0b3f6f1933e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
            alt="Premium Leather Boots"
            fill
            className="object-cover"
            priority
          />
        </div>
      </Container>
      <div className="absolute top-0 right-0 w-1/3 h-full bg-neutral-100 -z-0 hidden lg:block" />
    </section>
  );
}