import { Link } from "react-router-dom";
import { ChevronDown } from "lucide-react";

const HERO_IMAGE = "https://mgx-backend-cdn.metadl.com/generate/images/478555/2026-03-31/78803361-fa9b-4a24-a07d-769e681aba59.png";

const HeroSection = () => {
  return (
    <section className="relative w-full h-screen min-h-[600px] flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <img
          src={HERO_IMAGE}
          alt="Premium grill with glowing coals and perfectly seared steak"
          className="w-full h-full object-cover"
          loading="eager"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#1a1a1a]/90 via-[#1a1a1a]/60 to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-t from-[#1a1a1a] via-transparent to-[#1a1a1a]/30" />
      </div>

      {/* Content */}
      <div className="relative z-10 max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
        <div className="max-w-3xl">
          <p className="font-oswald text-[#d35400] text-sm sm:text-base uppercase tracking-[0.4em] mb-4 animate-in fade-in slide-in-from-bottom-4 duration-700">
            Premium Outdoor Cooking Equipment
          </p>

          <h1 className="font-playfair text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.1] mb-6 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-150">
            GrillMaster Pro —{" "}
            <span className="text-[#d35400]">The Ultimate</span> Outdoor Cooking
            Experience
          </h1>

          <p className="font-inter text-[#b0b0b0] text-base sm:text-lg md:text-xl max-w-xl mb-8 leading-relaxed animate-in fade-in slide-in-from-bottom-8 duration-700 delay-300">
            Discover our curated collection of ceramic grills, smokers, and
            premium BBQ accessories trusted by pitmasters worldwide.
          </p>

          <div className="flex flex-wrap gap-4 animate-in fade-in slide-in-from-bottom-10 duration-700 delay-500">
            <Link
              to="/products"
              className="font-oswald inline-flex items-center gap-2 bg-[#d35400] hover:bg-[#e67e22] text-white text-base sm:text-lg font-semibold uppercase tracking-wider px-8 py-4 rounded transition-all duration-300 hover:shadow-[0_0_30px_rgba(211,84,0,0.4)] hover:-translate-y-0.5"
            >
              View Collection
            </Link>
            <Link
              to="/products?category=ceramic-grills"
              className="font-oswald inline-flex items-center gap-2 border-2 border-[#d35400] text-[#d35400] hover:bg-[#d35400] hover:text-white text-base sm:text-lg font-semibold uppercase tracking-wider px-8 py-4 rounded transition-all duration-300 !bg-transparent hover:!bg-[#d35400]"
            >
              Top Rated 2024
            </Link>
          </div>
        </div>
      </div>

      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce">
        <a href="#categories" className="text-[#b0b0b0] hover:text-[#d35400] transition-colors">
          <ChevronDown className="w-8 h-8" />
        </a>
      </div>
    </section>
  );
};

export default HeroSection;