"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";

export function Hero() {
  return (
    <section className="relative w-full py-20 md:py-32 overflow-hidden bg-stone-50">
      <Container className="relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <Heading className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
              The Essence of <span className="text-amber-700">Colombian Coffee</span>
            </Heading>
            <Subheading className="mt-6 text-lg text-stone-600 max-w-xl">
              Directly from the heart of Quindío. Experience 30 years of tradition, 
              sustainability, and the finest hand-selected beans delivered to your doorstep in the USA.
            </Subheading>
            <div className="flex flex-wrap gap-4 mt-10">
              <Button size="lg" className="bg-amber-800 hover:bg-amber-900 text-white px-8">
                Shop Now
              </Button>
              <Button size="lg" variant="outline" className="border-stone-300 text-stone-700">
                Our Heritage
              </Button>
            </div>
          </div>
          <div className="relative h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-2xl">
            <Image 
              src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070&auto=format&fit=crop"
              alt="Fresh Colombian Coffee"
              fill
              className="object-cover"
              priority
            />
          </div>
        </div>
      </Container>
      <div className="absolute top-0 right-0 -z-0 opacity-10">
        <svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <path fill="#78350f" d="M44.7,-76.4C58.1,-69.2,69.2,-58.1,76.4,-44.7C83.7,-31.3,87.1,-15.7,85.8,-0.7C84.5,14.2,78.6,28.5,69.8,40.8C61,53.1,49.3,63.5,35.8,70.8C22.3,78.1,7,82.3,-8.5,80.8C-24,79.3,-39.7,72.1,-52.8,61.4C-65.9,50.7,-76.4,36.5,-81.4,20.7C-86.4,4.9,-85.9,-12.5,-79.8,-27.9C-73.7,-43.3,-62,-56.7,-48.2,-64.1C-34.4,-71.5,-18.5,-72.9,-1.9,-69.6C14.7,-66.3,29.4,-58.3,44.7,-76.4Z" transform="translate(100 100)" />
        </svg>
      </div>
    </section>
  );
}