"use client";

import React from "react";
import {
  ShoppingBag,
  Truck,
  ShieldCheck,
  Award,
  ArrowRight,
  Sparkles,
  GraduationCap,
  Building2,
  CheckCircle2,
  FileCheck2,
} from "lucide-react";

interface HeroProps {
  onShopNowClick: () => void;
  onSelectCategory: (categoryId: string) => void;
  onRequestQuoteClick: () => void;
}

export const Hero: React.FC<HeroProps> = ({
  onShopNowClick,
  onSelectCategory,
  onRequestQuoteClick,
}) => {
  return (
    <div className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-blue-950 to-indigo-950 text-white">
      {/* Decorative gradient overlay */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(245,158,11,0.15),transparent_50%)]" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(30,58,138,0.3),transparent_50%)]" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20 relative z-10">
        <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">
          {/* Left Column Text Content */}
          <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300 text-xs sm:text-sm font-semibold tracking-wide">
              <Sparkles className="w-4 h-4 text-amber-400" />
              <span>South Africa&apos;s Trusted Stationery Supplier</span>
            </div>

            <h1 className="text-3xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-[1.1]">
              Stationery Made Simple. <br className="hidden sm:inline" />
              <span className="bg-gradient-to-r from-amber-400 via-amber-300 to-yellow-200 bg-clip-text text-transparent">
                Shopping Made Easy.
              </span>
            </h1>

            <p className="text-slate-300 text-base sm:text-lg max-w-2xl mx-auto lg:mx-0 font-normal leading-relaxed">
              Quality stationery and supplies for school, home, office and business. Discover top brands like Typek, BIC, Pilot, Casio, and Croxley with fast door-to-door courier delivery nationwide across South Africa.
            </p>

            {/* CTAs */}
            <div className="flex flex-wrap items-center justify-center lg:justify-start gap-3 sm:gap-4 pt-2">
              <button
                onClick={onShopNowClick}
                className="px-6 py-3.5 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 font-extrabold rounded-2xl shadow-lg hover:shadow-amber-500/2 font-sans flex items-center gap-2 transition-all transform hover:-translate-y-0.5 cursor-pointer text-sm sm:text-base"
              >
                <ShoppingBag className="w-5 h-5" />
                <span>SHOP NOW</span>
                <ArrowRight className="w-4 h-4" />
              </button>

              <button
                onClick={() => onSelectCategory("school-stationery")}
                className="px-5 py-3.5 bg-white/10 hover:bg-white/20 text-white font-bold rounded-2xl border border-white/20 backdrop-blur-sm transition-all flex items-center gap-2 cursor-pointer text-sm sm:text-base"
              >
                <GraduationCap className="w-5 h-5 text-amber-400" />
                <span>Back to School Packs</span>
              </button>

              <button
                onClick={onRequestQuoteClick}
                className="px-5 py-3.5 bg-indigo-900/60 hover:bg-indigo-800/80 text-amber-300 hover:text-amber-200 font-bold rounded-2xl border border-indigo-500/30 transition-all flex items-center gap-2 cursor-pointer text-sm sm:text-base"
              >
                <FileCheck2 className="w-5 h-5" />
                <span>Request Bulk Quote</span>
              </button>
            </div>

            {/* Highlights summary tags */}
            <div className="pt-4 flex flex-wrap justify-center lg:justify-start gap-y-2 gap-x-6 text-xs sm:text-sm text-slate-300 font-medium">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                <span>CAPS & DBE Approved Supplies</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                <span>Same Day Dispatch in JHB & CPT</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                <span>Tax Invoice for VAT Registered Businesses</span>
              </div>
            </div>
          </div>

          {/* Right Column Banner Visual */}
          <div className="lg:col-span-5 relative">
            <div className="relative mx-auto max-w-md lg:max-w-none">
              {/* Glassmorphism Card Stack */}
              <div className="relative rounded-3xl overflow-hidden border border-white/20 shadow-2xl bg-slate-900/40 backdrop-blur-md p-2">
                <img
                  src="https://images.pexels.com/photos/7054754/pexels-photo-7054754.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
                  alt="Stationery Made Simple - Diverse Stationery South Africa"
                  className="w-full h-80 sm:h-96 object-cover rounded-2xl"
                />

                {/* Floating Badge 1 */}
                <div className="absolute top-6 left-6 bg-slate-900/90 backdrop-blur-md border border-white/10 p-3 rounded-2xl shadow-xl flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400">
                    <Truck className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="text-xs font-bold text-white">Free SA Shipping</div>
                    <div className="text-[11px] text-slate-300">On orders R750+</div>
                  </div>
                </div>

                {/* Floating Badge 2 */}
                <div className="absolute bottom-6 right-6 bg-slate-900/90 backdrop-blur-md border border-white/10 p-3.5 rounded-2xl shadow-xl flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
                    <ShieldCheck className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="text-xs font-bold text-white">100% Guaranteed</div>
                    <div className="text-[11px] text-emerald-300 font-medium">Genuine Brand Products</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Why Shop With Us Bar */}
      <div className="bg-slate-950/80 border-t border-slate-800/80 py-5 px-4">
        <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center md:text-left">
          <div className="flex flex-col md:flex-row items-center gap-3 p-2">
            <div className="w-10 h-10 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400 shrink-0">
              <Truck className="w-5 h-5" />
            </div>
            <div>
              <h4 className="text-xs font-bold text-white">Fast Nationwide Delivery</h4>
              <p className="text-[11px] text-slate-400">Door-to-door across all 9 provinces</p>
            </div>
          </div>

          <div className="flex flex-col md:flex-row items-center gap-3 p-2">
            <div className="w-10 h-10 rounded-full bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-400 shrink-0">
              <ShieldCheck className="w-5 h-5" />
            </div>
            <div>
              <h4 className="text-xs font-bold text-white">100% Secure Payments</h4>
              <p className="text-[11px] text-slate-400">Ozow EFT, Visa, Mastercard, PayFast</p>
            </div>
          </div>

          <div className="flex flex-col md:flex-row items-center gap-3 p-2">
            <div className="w-10 h-10 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 shrink-0">
              <Award className="w-5 h-5" />
            </div>
            <div>
              <h4 className="text-xs font-bold text-white">Bulk Discount Quotes</h4>
              <p className="text-[11px] text-slate-400">Custom pricing for schools & corporates</p>
            </div>
          </div>

          <div className="flex flex-col md:flex-row items-center gap-3 p-2">
            <div className="w-10 h-10 rounded-full bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400 shrink-0">
              <Building2 className="w-5 h-5" />
            </div>
            <div>
              <h4 className="text-xs font-bold text-white">South African Local Support</h4>
              <p className="text-[11px] text-slate-400">WhatsApp & Phone customer desk</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};