import React from 'react';
import { ArrowRight, ChevronRight } from 'lucide-react';
import { SiteSettings } from '../types';

interface HeroProps {
  onNavigate: (view: any) => void;
  settings: SiteSettings;
}

const categories = [
  { name: 'Fruits & Vegetables', icon: '🍎' },
  { name: 'Meats & Seafood', icon: '🥩' },
  { name: 'Breakfast & Dairy', icon: '🥚' },
  { name: 'Breads & Bakery', icon: '🍞' },
  { name: 'Beverages', icon: '🥤' },
  { name: 'Frozen Foods', icon: '❄️' },
  { name: 'Biscuits & Snacks', icon: '🍪' },
  { name: 'Grocery & Staples', icon: '🛒' },
  { name: 'Household Needs', icon: '🧴' },
  { name: 'Healthcare', icon: '💊' },
  { name: 'Baby & Pregnancy', icon: '🍼' },
];

const Hero: React.FC<HeroProps> = ({ onNavigate, settings }) => {
  return (
    <section className="bg-white">
      <div className="container mx-auto px-4 flex flex-col md:flex-row gap-6">
        
        {/* Left Sidebar (Categories) - Desktop Only */}
        <div className="hidden md:block w-[240px] flex-shrink-0 border border-gray-200 border-t-0 rounded-b-xl bg-white shadow-sm overflow-hidden z-10 box-border">
          <ul className="py-2">
            {categories.map((cat, idx) => (
              <li key={idx} className="group">
                <a 
                  href="#" 
                  className="flex items-center justify-between px-5 py-2.5 text-gray-700 hover:text-red-600 hover:bg-red-50/50 transition-colors text-[13px] font-semibold"
                >
                  <span className="flex items-center gap-3">
                    <span className="text-base">{cat.icon}</span>
                    {cat.name}
                  </span>
                  <ChevronRight size={14} className="text-gray-400 group-hover:text-red-600" />
                </a>
              </li>
            ))}
          </ul>
        </div>

        {/* Right Slider / Banner */}
        <div className="flex-1 mt-6 md:mt-6 mb-6">
          <div className="relative w-full h-[250px] sm:h-[350px] md:h-[420px] rounded-2xl overflow-hidden bg-[#e8efe8]">
            <img
              src={settings.heroImage || 'https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&q=80&w=2000'}
              alt="Hero Background"
              className="absolute inset-0 w-full h-full object-cover"
            />
            
            {/* Banner Content Container */}
            <div className="absolute inset-0 bg-gradient-to-r from-white/90 via-white/60 to-transparent flex flex-col justify-center px-6 sm:px-12 md:px-16 w-full md:w-[80%]">
              
              <span className="inline-block bg-green-100 text-green-800 text-[10px] font-black uppercase tracking-wider px-2 py-1 rounded w-max mb-3">
                Weekend Discount
              </span>

              <h1 className="text-3xl md:text-5xl lg:text-7xl font-black text-gray-900 leading-[1.1] mb-4">
                {settings.heroTitle || 'Get the best quality products at the lowest prices'}
              </h1>

              <p className="text-sm sm:text-base text-gray-700 font-medium leading-relaxed max-w-md mb-6">
                {settings.heroSubtitle || 'We have prepared special discounts for you on grocery products. Don\'t miss these opportunities...'}
              </p>

              <div className="flex items-center gap-4">
                <button
                  onClick={() => onNavigate('shop')}
                  className="inline-flex items-center justify-center bg-[#634C9F] text-white hover:bg-[#584188] active:scale-95 font-bold text-sm px-6 py-3 rounded-lg transition-all"
                >
                  Shop Now
                </button>
                <div className="flex flex-col">
                  <span className="text-[#634C9F] font-black text-xl">৳ ২৭৯</span>
                  <span className="text-gray-400 text-sm line-through font-bold decoration-2">৳ ৪৯৯</span>
                </div>
              </div>

            </div>
          </div>
        </div>

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

export default Hero;