import React from 'react';
import { Star } from 'lucide-react';
import { SiteSettings } from '../types';

interface PromoProps {
  settings?: SiteSettings;
}

export const LargePromoBanner: React.FC<PromoProps> = ({ settings }) => {
  let homeConfig: any = {};
  if (settings?.homePageJson) {
    try { homeConfig = JSON.parse(settings.homePageJson); } catch(e) {}
  }

  const specialBanner = homeConfig.specialBanner || {
    title: 'Make your grocery shopping easy with us',
    subtitle: 'Free delivery on your first order. Don\'t miss it!',
    badge: 'Only this week',
    buttonText: 'Shop Now',
    image: '',
  };

  return (
    <section className="container mx-auto px-4 py-12">
      <div className="bg-[#f8f5eb] rounded-3xl overflow-hidden relative flex flex-col md:flex-row items-center justify-between px-8 md:px-16 py-12 md:py-20">
        <div className="md:w-1/2 relative z-10 text-center md:text-left mb-8 md:mb-0">
          <span className="text-orange-500 font-bold text-[10px] tracking-widest uppercase mb-3 block bg-white w-fit px-3 py-1 rounded-full mx-auto md:mx-0 shadow-sm border border-orange-100">
            {specialBanner.badge}
          </span>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-[#202342] leading-[1.15] mb-4" dangerouslySetInnerHTML={{ __html: specialBanner.title.replace(/\n|\\n/g, '<br/>') }}>
          </h2>
          <p className="text-gray-500 text-sm font-medium mb-6">{specialBanner.subtitle}</p>
          <button className="bg-white text-[#202342] border border-gray-200 hover:border-[#634C9F] px-8 py-3 rounded-full font-bold shadow-sm transition-all text-sm">
            {specialBanner.buttonText || 'Shop Now'} →
          </button>
        </div>
        <div className="md:w-1/2 flex justify-center relative min-h-[250px]">
           {specialBanner.image ? (
               <div className="absolute inset-0">
                 <img src={specialBanner.image} className="w-full h-full object-contain drop-shadow-xl" />
               </div>
           ) : (
             <>
               {/* Abstract shape to mimic food items background if no image */}
               <div className="w-[300px] h-[300px] bg-yellow-100 rounded-full blur-3xl absolute opacity-60"></div>
               <div className="w-[200px] h-[200px] bg-red-100 rounded-full blur-2xl absolute top-10 right-10 opacity-70"></div>
             </>
           )}
        </div>
      </div>
    </section>
  );
};

export const PopularCompanies = () => {
  const brands = [
    { name: 'Nestle', products: 145 },
    { name: 'Kissan', products: 37 },
    { name: 'Aashirvaad', products: 22 },
    { name: 'Britannia', products: 85 },
    { name: 'Haldirams', products: 26 },
  ];

  return (
    <section className="container mx-auto px-4 pb-16">
      <div className="border-t border-b border-gray-200 py-10">
        <div className="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
          <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4">
            <h2 className="text-xl font-bold text-[#202342]">Popular Companies</h2>
            <p className="text-xs text-gray-500 font-medium">Some highly trusted brands offering grocery.</p>
          </div>
          <button className="text-xs font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 px-4 py-1.5 rounded-full transition-colors">
            View All →
          </button>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
          {brands.map((brand, idx) => (
            <div key={idx} className="flex items-center gap-4 bg-white p-4 border border-gray-100 rounded-xl hover:border-[#634C9F] transition-colors cursor-pointer group shadow-sm">
              <div className="w-12 h-12 bg-gray-100 rounded flex items-center justify-center shrink-0 overflow-hidden">
                <span className="text-lg font-black text-gray-300 group-hover:text-[#634C9F] transition-colors">{brand.name[0]}</span>
              </div>
              <div className="flex flex-col gap-0.5">
                <h4 className="text-sm font-bold text-[#202342] leading-tight">{brand.name}</h4>
                <div className="flex items-center gap-0.5 mt-0.5">
                  <Star size={10} className="text-amber-400 fill-amber-400" />
                  <Star size={10} className="text-amber-400 fill-amber-400" />
                  <Star size={10} className="text-amber-400 fill-amber-400" />
                  <Star size={10} className="text-amber-400 fill-amber-400" />
                  <Star size={10} className="text-gray-300 fill-gray-300" />
                </div>
                <p className="text-[9px] text-gray-400 font-medium mt-1 uppercase tracking-wider">{brand.products} Items</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
