import React, { useState } from 'react';
import { ShieldCheck, Tag, Truck, Star, ArrowRight, ShoppingCart, PackageCheck, Search } from 'lucide-react';

interface HeroDarkProps {
  onExploreClick?: () => void;
  onSearchSubmit?: (searchQuery: string) => void;
}

export const HeroDark: React.FC<HeroDarkProps> = ({ onExploreClick, onSearchSubmit }) => {
  const [heroSearchQuery, setHeroSearchQuery] = useState('');

  const handleHeroSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (heroSearchQuery.trim() && onSearchSubmit) {
      onSearchSubmit(heroSearchQuery.trim());
    } else if (onExploreClick) {
      onExploreClick();
    }
  };
  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-[#110F0D] via-[#1A1613] to-[#0D0B0A] text-white pt-10 pb-16 px-4 sm:px-6 lg:px-8 border-b border-amber-950/40">
      {/* Decorative Gold Arc Ambient Light */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-amber-600/10 rounded-full blur-[120px] pointer-events-none" />
      <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-rose-700/10 rounded-full blur-[100px] pointer-events-none" />

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
          
          {/* Left Text Content Column */}
          <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
            
            {/* Pill Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-amber-500/30 bg-amber-500/10 text-amber-200 text-xs font-semibold tracking-wider uppercase">
              <span className="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse" />
              WELCOME TO TIMENLIFE
            </div>

            {/* Main Title */}
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold font-playfair tracking-tight text-amber-50 leading-[1.15]">
              Your Search for{' '}
              <span className="text-[#E11D48] italic font-semibold drop-shadow-sm">Variety</span>{' '}
              Ends Here – Welcome to{' '}
              <span className="text-[#E11D48] font-extrabold">TimeNLife!</span>
            </h1>

            {/* Description Subtext */}
            <p className="text-amber-100/80 text-base sm:text-lg max-w-xl mx-auto lg:mx-0 font-sans leading-relaxed">
              Discover quality products, unbeatable prices and a seamless shopping experience – all in one place.
            </p>

            {/* Homepage Hero Live Search Bar */}
            <div className="pt-2 max-w-xl mx-auto lg:mx-0">
              <form
                onSubmit={handleHeroSearch}
                className="flex items-center gap-2 bg-[#1C1815]/90 p-2 rounded-2xl border border-amber-500/30 shadow-xl focus-within:border-amber-400/80 transition-all"
              >
                <Search className="w-5 h-5 text-amber-400 ml-2.5 shrink-0" />
                <input
                  type="text"
                  placeholder="Search 7,500+ products (e.g. Moringa, Shilajit, Trimmer)..."
                  value={heroSearchQuery}
                  onChange={(e) => setHeroSearchQuery(e.target.value)}
                  className="w-full bg-transparent text-amber-50 text-xs sm:text-sm focus:outline-none placeholder:text-amber-200/50"
                />
                <button
                  type="submit"
                  className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-[#D91B42] to-[#B91C3C] hover:from-[#E11D48] hover:to-[#C81E3D] text-white text-xs font-bold transition-all shrink-0 cursor-pointer shadow-md flex items-center gap-1.5"
                >
                  <span>SEARCH</span>
                  <ArrowRight className="w-4 h-4" />
                </button>
              </form>
            </div>

            {/* Trust Badges Row (as shown in Image 3) */}
            <div className="pt-8 border-t border-amber-900/30 grid grid-cols-2 sm:grid-cols-4 gap-3 text-left">
              {[
                { icon: ShieldCheck, title: 'Trusted Shopping' },
                { icon: Tag, title: 'Best Prices' },
                { icon: Truck, title: 'Fast & Reliable' },
                { icon: Star, title: '100% Secure' },
              ].map((badge, idx) => (
                <div key={idx} className="flex items-center gap-2.5 p-2 rounded-xl bg-amber-950/20 border border-amber-900/20 hover:border-amber-700/40 transition-colors">
                  <div className="w-8 h-8 rounded-full border border-amber-500/40 bg-amber-500/10 flex items-center justify-center shrink-0">
                    <badge.icon className="w-4 h-4 text-amber-300" />
                  </div>
                  <span className="text-xs font-semibold text-amber-100/90 leading-tight">
                    {badge.title}
                  </span>
                </div>
              ))}
            </div>

          </div>

          {/* Right Image / Graphic Container */}
          <div className="lg:col-span-5 relative flex justify-center">
            <div className="relative w-full max-w-md aspect-square rounded-3xl p-6 bg-gradient-to-tr from-amber-950/30 to-amber-900/10 border border-amber-800/30 flex items-center justify-center shadow-2xl overflow-hidden group">
              
              {/* Golden Ambient Circle */}
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-amber-500/15 via-transparent to-transparent" />
              
              {/* Product / Cart Illustration */}
              <div className="relative z-10 flex flex-col items-center justify-center space-y-4 text-center">
                <div className="relative">
                  <div className="w-48 h-48 sm:w-56 sm:h-56 rounded-full bg-gradient-to-br from-amber-900/40 to-black/80 p-1 border border-amber-500/30 flex items-center justify-center shadow-2xl shadow-black/80">
                    <div className="relative flex flex-col items-center justify-center text-amber-200">
                      <ShoppingCart className="w-24 h-24 stroke-[1.2] text-amber-300 drop-shadow-md" />
                      <div className="absolute -top-3 right-2 bg-[#D91B42] text-white p-2 rounded-xl shadow-lg border border-rose-300/30 transform rotate-12">
                        <PackageCheck className="w-6 h-6" />
                      </div>
                    </div>
                  </div>
                  {/* Floating Box Graphic */}
                  <div className="absolute -bottom-2 -left-2 bg-gradient-to-br from-amber-800 to-amber-950 text-amber-100 text-xs px-3 py-1.5 rounded-lg border border-amber-500/40 shadow-xl font-bold font-sans">
                    TimeNLife Parcels
                  </div>
                </div>

                <div className="space-y-1">
                  <p className="text-sm font-bold text-amber-200 font-playfair tracking-wide">
                    Curated Premium Collections
                  </p>
                  <p className="text-xs text-amber-300/70">
                    Fast & Safe Delivery Direct to Your Doorstep
                  </p>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
    </section>
  );
};