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

interface PromoProps {
  settings?: SiteSettings;
}

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

  const banners = homeConfig.promoRow1 || [
    {
      title: 'Everyday Fresh Meat',
      subtitle: 'Eat fresh, Eat healthy',
      badge: 'Weekend Discount',
      image: '',
      bg: 'bg-[#ffd3bd]',
      btnConfig: 'hover:text-red-700 hover:border-red-700',
    },
    {
      title: 'Morning Breakfast',
      subtitle: 'Fresh Bakery items',
      badge: 'New Products',
      image: '',
      bg: 'bg-[#f0e8d5]',
      btnConfig: 'hover:text-[#634C9F] hover:border-[#634C9F]',
    },
    {
      title: 'Daily Fresh Vegetables',
      subtitle: '100% Organic Products',
      badge: 'Weekend Discount',
      image: '',
      bg: 'bg-[#e3f0d3]',
      btnConfig: 'hover:text-green-700 hover:border-green-700',
    }
  ];

  return (
    <section className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {banners.map((item, idx) => (
          <div key={idx} className={`relative rounded-2xl overflow-hidden p-8 min-h-[220px] ${item.bg} flex flex-col justify-center`}>
            {/* Background image if provided */}
            {item.image ? (
               <div className="absolute inset-0 z-0">
                 <img src={item.image} className="w-full h-full object-cover opacity-50 mix-blend-multiply" />
               </div>
            ) : (
               <div className="absolute right-[-20%] bottom-[-20%] w-[60%] h-[120%] bg-black/5 rounded-full blur-xl"></div>
            )}
            
            <div className="relative z-10 w-[80%] drop-shadow-md">
              <span className="text-xs font-bold uppercase tracking-wider mb-2 block opacity-70 border border-current px-2 py-0.5 rounded-sm w-fit bg-white/20 backdrop-blur-sm">{item.badge || item.subtitle}</span>
              <h3 className="text-xl lg:text-2xl font-black text-gray-900 leading-tight mb-4">{item.title}</h3>
              <a href="#" className={`inline-flex items-center gap-1 font-bold text-sm border-b-2 border-transparent transition-all w-fit ${item.btnConfig}`}>
                Shop Now <ArrowRight size={14} />
              </a>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

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

  const banners = homeConfig.promoRow2 || [
    { title: '100% Organic Products', subtitle: 'Fresh Food', badge: 'Top Offers' },
    { title: 'Eat Healthy Every Day', subtitle: 'Always Fresh', badge: '100% Organic' },
    { title: 'Fresh Taste With Real Fruit', subtitle: 'Cold Drinks', badge: 'Super Sale' },
    { title: 'Find Your Cravings Easily', subtitle: 'Fast Food', badge: 'Express Delivery' },
  ];

  return (
    <section className="container mx-auto px-4 pb-12">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {banners.map((item, idx) => (
          <div key={idx} className="bg-gray-100 rounded-xl p-5 border border-gray-200 flex items-center justify-between group hover:border-[#634C9F] transition-colors cursor-pointer">
            {item.image && <div className="absolute inset-0 z-0 opacity-10"><img src={item.image} className="w-full h-full object-cover" /></div>}
            <div className="relative z-10 drop-shadow-md">
              <span className="text-[10px] font-bold text-white bg-[#634C9F] px-1.5 py-0.5 rounded shadow-sm mb-2 block w-fit">{item.badge || item.label}</span>
              <h4 className="font-bold text-sm text-[#202342]">{item.title}</h4>
              <p className="text-[11px] text-gray-800 font-bold group-hover:text-[#634C9F] transition-colors">{item.subtitle}</p>
            </div>
            <div className="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center shrink-0">
              <ArrowRight size={16} className="text-gray-400 group-hover:text-[#634C9F] transition-colors group-hover:translate-x-1" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};
