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

export function Hero() {
  return (
    <section className="relative py-20 md:py-32 overflow-hidden">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="space-y-6">
            <Heading className="text-left">
              Transform Your Space with Premium Furniture
            </Heading>
            <Subheading className="text-left">
              Discover our curated collection of modern, stylish furniture designed to elevate every room in your home. Quality craftsmanship meets affordable luxury.
            </Subheading>
            <div className="flex gap-4">
              <Link href="/shop">
                <Button size="lg" className="text-base">
                  Shop Now
                </Button>
              </Link>
              <Link href="/categories">
                <Button size="lg" variant="outline" className="text-base">
                  Browse Categories
                </Button>
              </Link>
            </div>
            <div className="flex gap-8 pt-4">
              <div>
                <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">500+</p>
                <p className="text-sm text-neutral-600 dark:text-neutral-400">Products</p>
              </div>
              <div>
                <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">10k+</p>
                <p className="text-sm text-neutral-600 dark:text-neutral-400">Happy Customers</p>
              </div>
              <div>
                <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">Free</p>
                <p className="text-sm text-neutral-600 dark:text-neutral-400">Delivery</p>
              </div>
            </div>
          </div>
          <div className="relative h-[400px] lg:h-[500px] rounded-2xl overflow-hidden">
            <BlurImage
              src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80"
              alt="Modern living room with stylish furniture"
              fill
              className="object-cover"
            />
          </div>
        </div>
      </Container>
    </section>
  );
}