import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Product, SiteSettings, Order, Testimonial } from '../types';
import {
  ShoppingCart, Sun, Heart, ThumbsUp, HelpCircle, ChevronDown,
  CheckCircle2, Shield, Leaf, Flame, Sparkles, Clock, Utensils,
  Award, Zap, Star, Check, ArrowRight, Package, TrendingDown,
  ShieldCheck, Quote, Lock, RotateCcw, Truck, User, Phone, MapPin,
  Loader2, X, Gift, BadgeCheck, TrendingUp, Coffee, ChefHat,
  MessageCircle, Share2, Bookmark, Eye, ThumbsUp as ThumbsUpIcon,
  Baby, Droplet, Salad, Apple, Wheat, Droplets, Flower2, Pill,
  Smile, BabyIcon, Sparkle, Gem, Play, Video, Camera, Users,
  Mail, PhoneCall, Headphones, BarChart3, Globe, RefreshCw,
  SunMedium, Cloud, Wind, Thermometer, Droplet as WaterDrop,
  Sparkles as SparklesIcon, Crown, Medal, Trophy, BadgePercent,
  Sprout, TreePine, Wheat as WheatIcon, Cherry, Grape, Citrus,
  Hexagon, Diamond, CircleDot, Flower, Leaf as LeafIcon,
  Ribbon, Award as AwardIcon, Target, Flag,
  Timer, TimerOff, AlarmClock, AlarmClockOff, Hourglass,
  Activity, Brain, HeartPulse, Bone, Eye as EyeIcon,
  FlaskConical, Beaker, Scale, Weight, Ruler,
  Calendar, CalendarCheck, CalendarDays, Clock as ClockIcon,
  TrendingUp as TrendingUpIcon, BarChart as BarChartIcon,
  Scroll, ScrollText, FileBadge, FileCheck, FileCog,
  FileSpreadsheet, FileText, FileSignature,
  Smartphone, MessageSquare, Send, Mail as MailIcon,
  MapPin as MapPinIcon, Clock8, Clock12, CheckCircle
} from 'lucide-react';
import { pushToDataLayer } from '../utils/tagmanager';
import InlineOrderForm from './InlineOrderForm';
import CheckoutPopup from './CheckoutPopup';
import { api } from '../lib/api';

interface ProductLandingPageProps {
  product: Product;
  settings: SiteSettings;
  testimonials?: Testimonial[];
  addOrder: (order: Order) => void;
  onNavigate: (view: any) => void;
}

// Icon mapping
const IconMap: Record<string, any> = {
  sun: Sun, heart: Heart, thumbsup: ThumbsUp, shield: Shield,
  leaf: Leaf, flame: Flame, sparkles: Sparkles, clock: Clock,
  award: Award, zap: Zap, utensils: Utensils, star: Star,
  check: Check, chef: ChefHat, baby: Baby, droplet: Droplet,
  salad: Salad, apple: Apple, wheat: Wheat, flower: Flower2,
  pill: Pill, smile: Smile, babyicon: BabyIcon, sparkle: Sparkle,
  gem: Gem, play: Play, video: Video, camera: Camera, users: Users,
  mail: Mail, phone: Phone, headphones: Headphones, barChart: BarChart3,
  globe: Globe, refresh: RefreshCw, gift: Gift, badge: BadgeCheck,
  coffee: Coffee, message: MessageCircle, share: Share2,
  bookmark: Bookmark, eye: Eye, thumbsupicon: ThumbsUpIcon,
  dropplet: Droplets, flower2: Flower2, sunmedium: SunMedium,
  cloud: Cloud, wind: Wind, thermometer: Thermometer, waterdrop: WaterDrop,
  sparklesicon: SparklesIcon, crown: Crown, medal: Medal,
  trophy: Trophy, badgepercent: BadgePercent,
  sprout: Sprout, treepine: TreePine, wheaticon: WheatIcon,
  cherry: Cherry, grape: Grape, citrus: Citrus,
  hexagon: Hexagon, diamond: Diamond, circledot: CircleDot,
  leaficon: LeafIcon, ribbon: Ribbon, awardicon: AwardIcon,
  target: Target, flag: Flag,
  timer: Timer, timeroff: TimerOff, alarmclock: AlarmClock,
  alarmclockoff: AlarmClockOff, hourglass: Hourglass,
  activity: Activity, brain: Brain, heartpulse: HeartPulse, bone: Bone,
  eyeicon: EyeIcon, flask: FlaskConical,
  beaker: Beaker, scale: Scale, weight: Weight,
  ruler: Ruler, calendar: Calendar, calendarchk: CalendarCheck,
  calendardays: CalendarDays, clockicon: ClockIcon,
  trendingupicon: TrendingUpIcon, barcharticon: BarChartIcon,
  scroll: Scroll, scrolltext: ScrollText, filebadge: FileBadge,
  filecheck: FileCheck, filecog: FileCog,
  filespreadsheet: FileSpreadsheet, filetext: FileText, filesignature: FileSignature,
  smartphone: Smartphone, messagesquare: MessageSquare, send: Send,
  mailicon: MailIcon, mappin: MapPinIcon, clock8: Clock8,
  clock12: Clock12, checkcircle: CheckCircle
};

const ProductLandingPage: React.FC<ProductLandingPageProps> = ({
  product,
  settings,
  testimonials = [],
  addOrder,
  onNavigate
}) => {
  const [selectedSize, setSelectedSize] = useState(() => {
    const sizes = product.sizes || [];
    const kgSizes = sizes.filter(s => s.includes('কেজি') || s.includes('kg') || s.includes('১') || s.includes('২'));
    if (kgSizes.length > 0) {
      return kgSizes[0];
    }
    return sizes[Math.floor(sizes.length / 2)] || sizes[0] || '';
  });

  const [openFaq, setOpenFaq] = useState<number | null>(0);

  // Timer state
  const [timer, setTimer] = useState({
    hours: 23,
    minutes: 59,
    seconds: 59
  });

  const isFreeDeliveryEligible = useMemo(() => {
    if (!selectedSize || !product.priceConfigs) return false;
    const config = product.priceConfigs[selectedSize];
    return config?.freeDelivery === true;
  }, [selectedSize, product.priceConfigs]);

  useEffect(() => {
    pushToDataLayer('view_item', {
      item_name: product.name,
      item_id: product.id,
      price: product.price,
      item_category: product.category
    });
  }, [product.id]);

  // Timer effect
  useEffect(() => {
    const interval = setInterval(() => {
      setTimer(prev => {
        if (prev.hours === 0 && prev.minutes === 0 && prev.seconds === 0) {
          clearInterval(interval);
          return prev;
        }

        let newSeconds = prev.seconds - 1;
        let newMinutes = prev.minutes;
        let newHours = prev.hours;

        if (newSeconds < 0) {
          newSeconds = 59;
          newMinutes -= 1;
        }

        if (newMinutes < 0) {
          newMinutes = 59;
          newHours -= 1;
        }

        return {
          hours: newHours,
          minutes: newMinutes,
          seconds: newSeconds
        };
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  // Section Title Component
  const SectionTitle = ({ title, subtitle }: { title: string; subtitle?: string }) => (
    <div className="text-center mb-8">
      <h2 className="text-3xl md:text-4xl font-black text-[#111111] mb-2">
        {title}
      </h2>
      {subtitle && <p className="text-[#111111]/60 text-lg">{subtitle}</p>}
      <div className="w-16 h-1 bg-[#DC2626] mx-auto mt-3"></div>
    </div>
  );

  // ========== SECTION 1: HERO ==========
  const heroTitle = product.landingTitle || "আপনার বাচ্চার প্রথম <span class='text-white font-black'>ঝাল হোক মিষ্টি স্মৃতি</span>";
  const heroSubtitle = product.landingSubtitle || "১০০% খাঁটি ও সেরা মানের পণ্য, সরাসরি আপনার ঘরে";
  const heroImage = product.landingProductImage || product.image;

  // ========== SECTION 2: PROBLEM ==========
  const problemTitle = product.landingProblemTitle || "আপনার সন্তানের খাবারে সমস্যা আছে?";
  const problems = product.landingProblems?.length ? product.landingProblems : [
    { icon: 'flame', text: 'সাধারণ পণ্যের কেমিক্যাল স্বাস্থ্যের জন্য ক্ষতিকর' },
    { icon: 'pill', text: 'বাজারের কৃত্রিম রং বা প্রিজারভেটিভ ক্ষতিকর' },
    { icon: 'baby', text: 'প্রাকৃতিক ও খাঁটি জিনিসের অভাব' }
  ];

  // ========== SECTION 3: SOLUTION ==========
  const solutionIntro = {
    name: product.landingSolutionName || "মিষ্টি মরিচ - ন্যাচারাল কালার বুস্টার",
    description: product.landingSolutionDesc || "এটি ঝালবিহীন বিশেষ প্রজাতির ক্যাপসিকাম থেকে তৈরি, যা খাবারে নিয়ে আসে টকটকে লাল রঙ কিন্তু কোনো ঝাল নেই। ভিটামিন A এবং C সমৃদ্ধ।",
    benefits: product.landingSolutionBenefits?.length ? product.landingSolutionBenefits : [
      "সবার জন্য নিরাপদ",
      "ইমিউনিটি বুস্ট করে",
      "কোনো পার্শ্বপ্রতিক্রিয়া নেই",
      "১০০% অরিজিনাল"
    ]
  };
  const solutionImage = product.landingSolutionImage || product.image;

  // ========== SECTION 4: BENEFITS ==========
  const benefitsTitle = product.landingBenefitsTitle || "উপকারিতা";
  const benefitsSubtitle = product.landingBenefitsSubtitle || "প্রতিটি দানা পুষ্টিতে ভরপুর";
  const benefitBreakdowns = product.features?.length ? product.features : [
    { icon: 'brain', title: 'মস্তিষ্কের বিকাশ', desc: 'ওমেগা-৩ ও আয়রন সমৃদ্ধ' },
    { icon: 'heartpulse', title: 'হৃদযন্ত্র সুস্থ রাখে', desc: 'প্রাকৃতিক অ্যান্টিঅক্সিডেন্ট' },
    { icon: 'bone', title: 'হাড় মজবুত করে', desc: 'ক্যালসিয়াম ও ভিটামিন ডি' },
    { icon: 'eyeicon', title: 'চোখের যত্নে', desc: 'ভিটামিন এ প্রচুর পরিমাণে' },
    { icon: 'activity', title: 'শক্তি যোগায়', desc: 'দৈনন্দিন কর্মক্ষমতা বাড়ায়' },
    { icon: 'weight', title: 'ওজন নিয়ন্ত্রণ', desc: 'স্বাস্থ্যকর মেটাবলিজম' },
    { icon: 'trendingupicon', title: 'রোগ প্রতিরোধ', desc: 'ইমিউনিটি বুস্টার' },
    { icon: 'smile', title: 'হজম সহজ', desc: 'প্রোবায়োটিক সমৃদ্ধ' }
  ];

  // ========== SECTION 5: PACKAGES ==========
  const packages = [
    {
      name: 'ট্রায়াল',
      size: '১০০ গ্রাম',
      price: 200,
      originalPrice: 250,
      badge: 'নতুন',
      badgeColor: 'blue',
      icon: 'sparkle',
      isBestSeller: false
    },
    {
      name: 'ফ্যামিলি',
      size: '২৫০ গ্রাম',
      price: 450,
      originalPrice: 550,
      badge: 'সেরা ভ্যালু',
      badgeColor: 'amber',
      icon: 'crown',
      freeDelivery: true,
      isBestSeller: true
    },
    {
      name: 'কম্বো',
      size: '২৫০ গ্রাম + ইবুক',
      price: 600,
      originalPrice: 750,
      badge: 'বোনাস',
      badgeColor: 'purple',
      icon: 'gift',
      isBestSeller: false
    }
  ];

  // ========== SECTION 6: WHY US ==========
  const whyChooseUs = [
    { icon: 'globe', text: 'সরাসরি হাই-কোয়ালিটি সোর্স থেকে সংগৃহীত' },
    { icon: 'badge', text: 'লেব টেস্টেড এবং বিএসটিআই মানসম্পন্ন' },
    { icon: 'refresh', text: 'কোনো প্রকার ধুলোবালি বা ভেজালমুক্ত প্রসেসিং' },
    { icon: 'shield', text: '১০০% খাঁটি ও নিরাপদ, বাচ্চাদের জন্য বিশেষভাবে তৈরি' }
  ];

  // ========== SECTION 7: TESTIMONIALS ==========
  const displayReviews = testimonials.length > 0 ? testimonials : [
    {
      name: 'সাদিয়া ইসলাম',
      text: 'আমি প্রথমে দ্বিধায় ছিলাম, তবে ব্যবহারের পর বুঝতে পেরেছি কোয়ালিটি আসলেই সেরা!',
      rating: 5,
      avatar: 'https://i.pravatar.cc/100?u=1',
      location: 'ঢাকা'
    },
    {
      name: 'নাজনীন আক্তার',
      text: 'খুবই ভালো মানের পণ্য। যেমনটা আশা করেছিলাম ঠিক তেমনই পেয়েছি।',
      rating: 5,
      avatar: 'https://i.pravatar.cc/100?u=2',
      location: 'চট্টগ্রাম'
    },
    {
      name: 'ফারহানা করিম',
      text: 'প্রথমে সন্দেহ ছিল, কিন্তু এখন তো আমার রান্নাঘরের অপরিহার্য উপাদান!',
      rating: 5,
      avatar: 'https://i.pravatar.cc/100?u=3',
      location: 'সিলেট'
    }
  ];

  // ========== SECTION 8: AUTHORITY ==========
  const authorityTitle = product.landingAuthorityTitle || "আমাদের স্বীকৃতি";
  const authorityPoints = product.landingAuthorityPoints?.length ? product.landingAuthorityPoints : [
    { icon: 'filebadge', text: 'বিএসটিআই সনদপ্রাপ্ত' },
    { icon: 'filecheck', text: 'আইএসও ২২০০০ সার্টিফাইড' },
    { icon: 'scroll', text: 'হালাল সার্টিফিকেট' },
    { icon: 'award', text: '৫+ বছর গবেষণার ফল' }
  ];

  // ========== SECTION 9: GUARANTEE ==========
  const guarantee = {
    title: product.landingGuaranteeTitle || "৩০-দিনের সন্তুষ্টির গ্যারান্টি",
    text: product.landingGuaranteeText || "পণ্য হাতে পাওয়ার পর কোয়ালিটি নিয়ে সন্তুষ্ট না হলে ৩০ দিনের মধ্যে ১০০% টাকা ফেরত পাবেন।"
  };

  // ========== SECTION 10: PROCESS ==========
  const processSteps = product.landingProcessSteps?.length ? product.landingProcessSteps : [
    { icon: 'calendar', title: 'অর্ডার করুন', desc: 'অনলাইনে অর্ডার করুন' },
    { icon: 'truck', title: 'ডেলিভারি', desc: '১-৩ দিনে হোম ডেলিভারি' },
    { icon: 'utensils', title: 'ব্যবহার', desc: 'রান্নায় ব্যবহার করুন' },
    { icon: 'smile', title: 'ফলাফল', desc: 'বাচ্চার হাসি দেখুন' }
  ];

  // ========== SECTION 11: CONTACT CTA ==========
  const ctaTitle = product.landingCtaTitle || "আজই অর্ডার করুন";
  const ctaSubtitle = product.landingCtaSubtitle || "ক্যাশ অন ডেলিভারি • ১-৩ দিনে ডেলিভারি পাবেন";
  const contactPhone = settings.contactPhone || '০১৭১২৩৪৫৬৭৮';
  const whatsappNumber = settings.whatsappNumber || '০১৭১২৩৪৫৬৭৮';

  // ========== SECTION 12: FAQ ==========
  const faqs = product.faqs?.length ? product.faqs : [
    { q: 'এটা কি আসলেই ১০০% অরিজিনাল?', a: 'জি, আমাদের প্রতিটি পণ্য আমাদের নিজস্ব তত্ত্বাবধানে প্রক্রিয়াজাত করা হয়।' },
    { q: 'কেমন বয়সীরা এটি ব্যবহার করতে পারবেন?', a: 'এটি সব বয়সী মানুষের জন্য নিরাপদ এবং স্বাস্থ্যসম্মত।' },
    { q: 'ডেলিভারি চার্জ কত?', a: 'ঢাকার ভেতরে ৬০ টাকা এবং সারা দেশজুড়ে ১২০ টাকা।' },
    { q: 'কতদিন ভালো থাকবে?', a: 'ঠান্ডা ও শুষ্ক স্থানে সংরক্ষণ করলে ১২ মাস ভালো থাকে।' }
  ];

  return (
    <div className="bg-white text-[#111111] font-bangla relative min-h-screen">

      {/* ===== SECTION 1: HERO ===== */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[#DC2626] to-[#B91C1C] text-white py-16 md:py-20">
        {/* Timer - Urgency Bar */}
        <div className="absolute top-2 left-2 right-2 md:left-1/2 md:right-auto md:transform md:-translate-x-1/2 md:w-auto bg-black/20 backdrop-blur-sm px-4 py-2 md:px-6 md:py-3 rounded-full border border-white/30 z-10">
          <div className="flex items-center justify-center gap-2 md:gap-4">
            <Hourglass className="text-white animate-pulse shrink-0" size={16} />
            <div className="flex items-center gap-1.5 md:gap-2">
              <span className="font-bold text-white text-xs md:text-sm">অফার শেষ হতে বাকি:</span>
              <div className="flex gap-1 bg-white/30 px-2 py-0.5 md:px-3 md:py-1 rounded-full">
                <span className="font-mono font-bold text-white text-xs md:text-sm">{String(timer.hours).padStart(2, '0')}</span>
                <span className="text-white text-xs md:text-sm">:</span>
                <span className="font-mono font-bold text-white text-xs md:text-sm">{String(timer.minutes).padStart(2, '0')}</span>
                <span className="text-white text-xs md:text-sm">:</span>
                <span className="font-mono font-bold text-white text-xs md:text-sm">{String(timer.seconds).padStart(2, '0')}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="container mx-auto px-4 pt-16">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            {/* Image for mobile - shows first on mobile */}
            <div className="lg:w-1/2 order-1 lg:order-2">
              <img
                src={heroImage}
                alt={product.name}
                className="rounded-3xl shadow-2xl w-full border-4 border-white/30"
              />
            </div>

            {/* Content for mobile - shows second on mobile */}
            <div className="lg:w-1/2 space-y-5 text-center lg:text-left order-2 lg:order-1">

              <h1
                className="text-4xl md:text-6xl font-black leading-tight text-white"
                dangerouslySetInnerHTML={{ __html: heroTitle }}
              />

              <p className="text-lg text-white/90">
                {heroSubtitle}
              </p>

              <a
                href="#order-now"
                className="inline-flex items-center gap-2 px-10 py-5 bg-white text-[#DC2626] hover:bg-gray-100 rounded-full font-black text-xl shadow-[0_10px_30px_rgba(0,0,0,0.2)] transition-all"
              >
                অর্ডার করুন
                <ArrowRight size={22} />
              </a>

            </div>
          </div>

          {/* Testimonial Images Row — shown if admin has uploaded images */}
          {product.landingTestimonialImages && product.landingTestimonialImages.length > 0 && (
            <div className="mt-12 max-w-6xl mx-auto overflow-x-auto">
              <div className="flex gap-4 pb-2" style={{ minWidth: 'min-content' }}>
                {product.landingTestimonialImages.map((imgUrl, idx) => (
                  <div key={idx} className="flex-shrink-0 w-64 sm:w-72 md:w-80">
                    <img
                      src={imgUrl}
                      alt={`গ্রাহকের মতামত ${idx + 1}`}
                      className="w-full h-64 object-cover rounded-2xl shadow-lg border-2 border-[#DC2626]/10"
                    />
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Minimal Spacer - Reduced from h-20 to h-12 */}
      <div className="h-12"></div>

      {/* ===== SECTION 2: PROBLEM ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <SectionTitle title={problemTitle} />

          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {problems.map((p, i) => {
              const Icon = IconMap[p.icon] || Flame;
              return (
                <div key={i} className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all border-l-8 border-[#DC2626]">
                  <div className="w-16 h-16 bg-[#DC2626]/10 rounded-full flex items-center justify-center mb-4">
                    <Icon className="text-[#DC2626]" size={32} />
                  </div>
                  <p className="font-bold text-[#111111] text-lg">{p.text}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Minimal Spacer - Reduced from h-20 to h-12 */}
      <div className="h-12"></div>

      {/* ===== SECTION 3: SOLUTION ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <SectionTitle title={solutionIntro.name} />

          <div className="grid md:grid-cols-2 gap-12 items-center max-w-5xl mx-auto">
            <img
              src={solutionImage}
              alt="Solution"
              className="rounded-2xl shadow-xl w-full border-4 border-[#DC2626]/20"
            />

            <div className="space-y-6">
              <p className="text-lg text-[#111111]/80 leading-relaxed">
                {solutionIntro.description}
              </p>

              <div className="space-y-3">
                {solutionIntro.benefits.map((b, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className="w-6 h-6 bg-[#DC2626] rounded-full flex items-center justify-center">
                      <Check className="text-white" size={14} />
                    </div>
                    <span className="font-medium text-lg">{b}</span>
                  </div>
                ))}
              </div>

              <div className="pt-4">
                <a
                  href="#package-section"
                  className="inline-flex items-center gap-2 px-8 py-4 bg-[#DC2626] text-white rounded-full font-bold hover:bg-[#B91C1C] transition-colors shadow-lg"
                >
                  প্যাকেজ দেখুন <ArrowRight size={18} />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 4: BENEFITS ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <SectionTitle title={benefitsTitle} subtitle={benefitsSubtitle} />

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {benefitBreakdowns.map((b, i) => {
              const Icon = IconMap[b.icon] || Sparkle;
              return (
                <div key={i} className="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all text-center border border-[#DC2626]/10">
                  <div className="w-20 h-20 bg-[#DC2626]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Icon className="text-[#DC2626]" size={40} />
                  </div>
                  <h4 className="font-bold text-[#111111] mb-2 text-lg">{b.title}</h4>
                  <p className="text-sm text-[#111111]/60">{b.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 5: PACKAGES ===== */}
      <section className="py-12 bg-white" id="package-section">
        <div className="container mx-auto px-4">
          <SectionTitle title="প্যাকেজগুলো" subtitle="আপনার প্রয়োজন অনুযায়ী বেছে নিন" />

          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {packages.map((pkg, i) => (
              <div
                key={i}
                className={`bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-all relative ${pkg.isBestSeller ? 'ring-4 ring-[#DC2626] ring-offset-4' : 'border border-[#DC2626]/20'
                  }`}
              >
                {pkg.isBestSeller && (
                  <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#DC2626] text-white text-sm font-black px-4 py-1 rounded-full">
                    ⭐ সেরা পছন্দ
                  </div>
                )}

                <div className="text-center">
                  {/* Per-package image: uses landingPackageImages[i] with fallback to product.image */}
                  <div className="w-72 h-72 mx-auto mb-4">
                    <img
                      src={(product.landingPackageImages && product.landingPackageImages[i]) || product.image}
                      alt={pkg.name}
                      className="w-full h-full object-contain"
                    />
                  </div>

                  <h3 className="text-2xl font-black mb-2">{pkg.name}</h3>
                  <p className="text-[#111111]/60 mb-4">{pkg.size}</p>

                  <div className="flex items-center justify-center gap-2 mb-4">
                    {pkg.originalPrice && (
                      <span className="text-[#111111]/40 line-through text-lg">৳{pkg.originalPrice}</span>
                    )}
                    <span className="text-4xl font-black text-[#DC2626]">৳{pkg.price}</span>
                  </div>

                  {pkg.freeDelivery && (
                    <div className="bg-green-100 text-green-600 text-sm font-bold px-3 py-1 rounded-full inline-block mb-4">
                      🚚 ফ্রি ডেলিভারি
                    </div>
                  )}

                  <button
                    onClick={() => setSelectedSize(pkg.size)}
                    className="w-full mt-4 py-4 bg-[#DC2626] hover:bg-[#B91C1C] text-white rounded-xl font-bold transition-all shadow-lg"
                  >
                    এখনই কিনুন
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 6: WHY US ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <SectionTitle title="কেন আমাদেরটি সেরা" />

          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {whyChooseUs.map((w, i) => {
              const Icon = IconMap[w.icon] || CheckCircle2;
              return (
                <div key={i} className="flex items-start gap-4 bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all border-l-8 border-[#DC2626]">
                  <div className="w-12 h-12 bg-[#DC2626]/10 rounded-full flex items-center justify-center flex-shrink-0">
                    <Icon className="text-[#DC2626]" size={24} />
                  </div>
                  <p className="font-medium text-[#111111] text-lg">{w.text}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 7: TESTIMONIALS ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <SectionTitle title="গ্রাহীদের মতামত" subtitle="হাজারো খুশি মায়ের অভিজ্ঞতা" />

          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {displayReviews.map((r, i) => (
              <div key={i} className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all border border-[#DC2626]/20">
                <Quote className="text-[#DC2626]/20 mb-4" size={40} />
                <p className="text-[#111111]/80 italic mb-6 text-lg">"{r.text}"</p>
                <div className="flex items-center gap-4">
                  <img
                    src={r.avatar}
                    alt={r.name}
                    className="w-14 h-14 rounded-full object-cover border-2 border-[#DC2626]"
                  />
                  <div>
                    <h4 className="font-bold text-[#111111] text-lg">{r.name}</h4>
                    <p className="text-sm text-[#111111]/60">{r.location}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 8: AUTHORITY ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <SectionTitle title={authorityTitle} subtitle="আন্তর্জাতিক মানের সনদপত্র" />

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
            {authorityPoints.map((item, i) => {
              const Icon = IconMap[item.icon] || Award;
              return (
                <div key={i} className="bg-white p-6 rounded-2xl shadow-lg text-center hover:shadow-xl transition-all border border-[#DC2626]/20">
                  <div className="w-16 h-16 bg-[#DC2626]/10 rounded-full flex items-center justify-center mx-auto mb-3">
                    <Icon size={32} className="text-[#DC2626]" />
                  </div>
                  <p className="font-bold text-[#111111] text-sm">{item.text}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 9: GUARANTEE ===== */}
      <section className="py-12 bg-[#DC2626] text-white">
        <div className="container mx-auto px-4 text-center max-w-3xl">
          <div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-6">
            <ShieldCheck size={48} className="text-white" />
          </div>
          <h2 className="text-3xl md:text-4xl font-black text-white mb-4">{guarantee.title}</h2>
          <p className="text-xl text-white/90 mb-8">{guarantee.text}</p>
          <a
            href="#order-now"
            className="inline-flex items-center gap-2 px-8 py-4 bg-white text-[#DC2626] rounded-full font-bold hover:bg-gray-100 transition-all shadow-lg text-lg"
          >
            ঝুঁকিমুক্ত অর্ডার করুন
            <ArrowRight size={20} />
          </a>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 10: PROCESS ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <SectionTitle title="কিভাবে কাজ করে" subtitle="৪টি সহজ ধাপে আপনার সন্তানের পুষ্টি নিশ্চিত করুন" />

          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
            {processSteps.map((step, i) => {
              const Icon = IconMap[step.icon] || Calendar;
              return (
                <div key={i} className="text-center relative">
                  {i < processSteps.length - 1 && (
                    <div className="hidden md:block absolute top-12 left-[60%] w-full h-0.5 bg-[#DC2626]/30"></div>
                  )}
                  <div className="relative z-10">
                    <div className="w-24 h-24 bg-[#DC2626] rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-black border-4 border-white shadow-xl">
                      {i + 1}
                    </div>
                    <div className="bg-white p-6 rounded-xl shadow-lg">
                      <Icon size={32} className="text-[#DC2626] mx-auto mb-3" />
                      <h3 className="font-black text-[#111111] mb-2">{step.title}</h3>
                      <p className="text-sm text-[#111111]/60">{step.desc}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 11: CONTACT CTA ===== */}
      <section className="py-16 bg-gradient-to-br from-[#DC2626] to-[#B91C1C] text-white" id="order-now">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl md:text-5xl font-black text-white mb-4">
            {ctaTitle}
          </h2>
          <p className="text-white/90 mb-8 text-xl">
            {ctaSubtitle}
          </p>

          {/* Timer Again for Urgency */}
          <div className="flex items-center justify-center gap-4 mb-8">
            <div className="bg-black/20 backdrop-blur-sm px-6 py-3 rounded-full">
              <div className="flex items-center gap-2">
                <Hourglass className="text-white animate-pulse" size={20} />
                <span className="font-bold text-white">অফার শেষ হতে:</span>
                <div className="flex gap-1 bg-white/30 px-3 py-1 rounded-full">
                  <span className="font-mono font-bold text-white">{String(timer.hours).padStart(2, '0')}</span>
                  <span className="text-white">:</span>
                  <span className="font-mono font-bold text-white">{String(timer.minutes).padStart(2, '0')}</span>
                  <span className="text-white">:</span>
                  <span className="font-mono font-bold text-white">{String(timer.seconds).padStart(2, '0')}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="max-w-md mx-auto">
            {/* Size Selector */}
            <div className="grid grid-cols-3 gap-3 mb-8">
              {(product.sizes || packages.map(p => p.size)).map((size, idx) => (
                <button
                  key={idx}
                  onClick={() => setSelectedSize(size)}
                  className={`p-4 rounded-xl font-bold transition-all ${selectedSize === size
                      ? 'bg-white text-[#DC2626] shadow-lg scale-105'
                      : 'bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm'
                    }`}
                >
                  {size}
                </button>
              ))}
            </div>

            {/* Order Form */}
            <div className="bg-white/10 backdrop-blur-sm p-8 rounded-2xl border-2 border-white/30">
              <InlineOrderForm
                product={product}
                selectedSize={selectedSize}
                addOrder={addOrder}
                settings={settings}
              />
            </div>
          </div>

          {/* Contact Info */}
          <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
            <a
              href={`tel:${contactPhone}`}
              className="flex items-center gap-2 bg-white/20 px-5 py-3 rounded-full hover:bg-white/30 transition-colors text-white"
            >
              <Phone size={18} className="text-white" />
              <span className="font-bold text-white">{contactPhone}</span>
            </a>
            <a
              href={`https://wa.me/${whatsappNumber}`}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 bg-white/20 px-5 py-3 rounded-full hover:bg-white/30 transition-colors text-white"
            >
              <MessageSquare size={18} className="text-white" />
              <span className="font-bold text-white">WhatsApp</span>
            </a>
          </div>
        </div>
      </section>

      {/* Minimal Spacer */}
      <div className="h-12"></div>

      {/* ===== SECTION 12: FAQ ===== */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4 max-w-3xl">
          <SectionTitle title="সাধারণ জিজ্ঞাসা" subtitle="আপনার মনে কিছু প্রশ্ন থাকলে তা এখানে দেখুন" />

          <div className="space-y-4">
            {faqs.map((f, i) => (
              <div key={i} className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all border border-[#DC2626]/20">
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="w-full flex items-center justify-between text-left"
                >
                  <span className="font-bold text-[#111111] text-lg">{f.q}</span>
                  <ChevronDown
                    className={`transition-transform duration-300 ${openFaq === i ? 'rotate-180 text-[#DC2626]' : 'text-[#111111]/40'
                      }`}
                    size={24}
                  />
                </button>
                {openFaq === i && (
                  <p className="mt-4 text-[#111111]/70 border-t border-[#DC2626]/20 pt-4 animate-fade-in-up">
                    {f.a}
                  </p>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mobile Sticky Bar with Timer */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 z-[999] bg-white border-t border-[#DC2626]/20 p-4 shadow-2xl">
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-bold text-[#DC2626]">অফার শেষ হতে:</span>
          <div className="flex gap-1 bg-[#DC2626] text-white px-2 py-1 rounded-full text-xs font-mono">
            <span>{String(timer.hours).padStart(2, '0')}</span>
            <span>:</span>
            <span>{String(timer.minutes).padStart(2, '0')}</span>
            <span>:</span>
            <span>{String(timer.seconds).padStart(2, '0')}</span>
          </div>
        </div>
        <div className="flex items-center justify-between gap-4">
          <div className="flex-1">
            <p className="text-xs text-[#111111]/60">শুধু আজই</p>
            <p className="font-black text-[#DC2626]">ফ্রি ডেলিভারি</p>
          </div>
          <a
            href="#order-now"
            className="flex-grow py-3 bg-[#DC2626] text-white rounded-full font-black text-lg flex items-center justify-center gap-2 shadow-lg active:scale-95 transition-transform"
          >
            অর্ডার করুন <ArrowRight size={18} />
          </a>
        </div>
      </div>

      {/* Animations */}
      <style>{`
        @keyframes fade-in-up {
          0% { opacity: 0; transform: translateY(10px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up {
          animation: fade-in-up 0.3s ease-out forwards;
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
        .animate-pulse {
          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
      `}</style>
    </div>
  );
};

export default ProductLandingPage;