import React, { useState, useEffect } from 'react';
import { Product, SiteSettings, Order, Testimonial } from '../types';
import {
   ShoppingCart, Heart, Shield, Leaf, Star, Check, ArrowRight,
   Package, Truck, Phone, Award, Brain, Activity, Pill, Sprout,
   ChevronDown, Zap, Sparkles, Plus, Minus, Headphones, CheckCircle2,
   AlertTriangle, RotateCcw, X, BadgeCheck, Timer
} from 'lucide-react';
import { pushToDataLayer } from '../utils/tagmanager';
import InlineOrderForm from './InlineOrderForm';

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

const IconMap: Record<string, any> = {
   heart: Heart, shield: Shield, leaf: Leaf, star: Star,
   check: Check, package: Package, truck: Truck, award: Award,
   brain: Brain, activity: Activity, pill: Pill,
   sprout: Sprout, zap: Zap, sparkles: Sparkles,
   alerttriangle: AlertTriangle, timer: Timer,
};

const ProductLandingPage06: React.FC<ProductLandingPage06Props> = ({
   product, settings, testimonials = [], addOrder, onNavigate
}) => {
   const [selectedPackage, setSelectedPackage] = useState<string>(Object.keys(product.priceConfigs || {}).length > 0 ? Object.keys(product.priceConfigs!)[0] : 'combo');
   const [openFaq, setOpenFaq] = useState<number | null>(null);
   const [timer, setTimer] = useState({ hours: 3, minutes: 47, seconds: 22 });

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

   useEffect(() => {
      const interval = setInterval(() => {
         setTimer(prev => {
            if (prev.hours === 0 && prev.minutes === 0 && prev.seconds === 0) return prev;
            let s = prev.seconds - 1, m = prev.minutes, h = prev.hours;
            if (s < 0) { s = 59; m--; }
            if (m < 0) { m = 59; h--; }
            return { hours: h, minutes: m, seconds: s };
         });
      }, 1000);
      return () => clearInterval(interval);
   }, []);

   const pkgData: Record<string, any> = Object.keys(product.priceConfigs || {}).length > 0
      ? Object.fromEntries(Object.entries(product.priceConfigs!).map(([size, config]: [string, any], i) => [
          size,
          {
            price: config.salePrice,
            original: config.originalPrice,
            saving: config.originalPrice - config.salePrice,
            label: size,
            popular: i === 1,
            desc: i === 0 ? 'ব্যক্তিগত ব্যবহারের জন্য' : i === 1 ? 'পরিবারের সেরা ডিল' : 'সর্বোচ্চ সাশ্রয়'
          }
        ]))
      : {
         single: { price: 950, original: 1500, saving: 550, label: '১ পিস প্যাক', desc: 'ব্যক্তিগত ব্যবহারের জন্য' },
         combo:  { price: 1750, original: 3000, saving: 1250, label: '২ পিস প্যাক', desc: 'পরিবারের সেরা ডিল', popular: true },
         bundle: { price: 2500, original: 4500, saving: 2000, label: '৩ পিস প্যাক', desc: 'সর্বোচ্চ সাশ্রয়' },
      };

   const problems = product.landingProblems?.length ? product.landingProblems : [
      { icon: 'alerttriangle', text: 'প্রতিদিনের ক্লান্তি ও দুর্বলতা', subtext: 'সকালেই শক্তিহীন লাগে, কাজে মনোযোগ দেওয়া কঠিন' },
      { icon: 'pill', text: 'পুষ্টির ঘাটতি', subtext: 'শরীরে প্রয়োজনীয় ভিটামিন ও মিনারেল পাচ্ছেন না' },
      { icon: 'activity', text: 'রোগ প্রতিরোধ ক্ষমতা কম', subtext: 'ঘন ঘন অসুস্থ হয়ে পড়েন, সামান্য আবহাওয়া বদলেই সমস্যা' },
   ];

   const solutions = product.landingWhyChooseUs?.length ? product.landingWhyChooseUs : [
      { icon: 'sprout', text: '১০০% প্রাকৃতিক উপাদান', subtext: 'কোনো কৃত্রিম রং, স্বাদ বা প্রিজার্ভেটিভ নেই' },
      { icon: 'zap', text: 'দ্রুত ও কার্যকর ফলাফল', subtext: 'মাত্র ৭ দিনেই পার্থক্য অনুভব করবেন' },
      { icon: 'shield', text: 'বিশেষজ্ঞদের পরীক্ষিত ও অনুমোদিত', subtext: 'আন্তর্জাতিক মান নিয়ন্ত্রণ পরীক্ষায় উত্তীর্ণ' },
   ];

   const features = product.features?.length ? product.features : [
      { icon: 'brain', title: 'মস্তিষ্কের বিকাশ', desc: 'স্মৃতিশক্তি ও মনোযোগের উন্নতি করে।' },
      { icon: 'heart', title: 'হৃদযন্ত্রের যত্ন', desc: 'রক্তচাপ নিয়ন্ত্রণে সাহায্য করে।' },
      { icon: 'activity', title: 'অফুরন্ত শক্তি', desc: 'সারাদিন সতেজ ও প্রাণবন্ত রাখে।' },
      { icon: 'shield', title: 'রোগ প্রতিরোধ', desc: 'ইমিউন সিস্টেম শক্তিশালী করে।' },
   ];

   const faqs = product.faqs?.length ? product.faqs : [
      { q: 'কীভাবে ব্যবহার করবো?', a: 'প্রতিদিন সকালে ও রাতে ১টি করে ক্যাপসুল হালকা গরম পানির সাথে খান।' },
      { q: 'কোনো পার্শ্বপ্রতিক্রিয়া আছে?', a: 'সম্পূর্ণ প্রাকৃতিক উপাদান দিয়ে তৈরি, কোনো ক্ষতিকর পার্শ্বপ্রতিক্রিয়া নেই।' },
      { q: 'ডেলিভারি কতদিনে পাবো?', a: 'ঢাকায় ২৪ ঘণ্টায়, সারাদেশে ২-৩ কর্মদিবসে ডেলিভারি।' },
      { q: 'ক্যাশ অন ডেলিভারি আছে?', a: 'হ্যাঁ, সারাদেশে ক্যাশ অন ডেলিভারি সুবিধা পাওয়া যায়।' },
      { q: 'রিটার্ন করতে পারবো?', a: '৩০ দিনের মধ্যে সন্তুষ্ট না হলে সম্পূর্ণ টাকা ফেরত দেওয়া হবে।' },
   ];

   const reviews = testimonials.length > 0 ? testimonials.slice(0, 3) : [
      { id: '1', name: 'সালমা খাতুন', text: 'প্রথম সপ্তাহেই শক্তি ফিরে পেয়েছি। এত ভালো পণ্য আগে পাইনি!', rating: 5, avatar: 'https://randomuser.me/api/portraits/women/52.jpg', location: 'ঢাকা' },
      { id: '2', name: 'রফিক উদ্দিন', text: 'সত্যিই অসাধারণ! পরিবারের সবার জন্য নিয়মিত নিচ্ছি।', rating: 5, avatar: 'https://randomuser.me/api/portraits/men/64.jpg', location: 'রাজশাহী' },
      { id: '3', name: 'মেহেরুন নিসা', text: 'মান দেখে অবাক হয়ে গেলাম। ডেলিভারিও খুব দ্রুত ছিল।', rating: 5, avatar: 'https://randomuser.me/api/portraits/women/76.jpg', location: 'সিলেট' },
   ];

   const siteName = settings?.siteName || 'shophyfast';
   const contactPhone = settings.contactPhone || settings.phone || '01700000000';

   return (
      <div className="min-h-screen text-gray-800 font-sans selection:bg-[#D4A017] selection:text-white pb-20 md:pb-0" style={{ fontFamily: "'Hind Siliguri', 'Noto Sans Bengali', sans-serif" }}>

         {/* ===== ১. HERO SECTION ===== */}
         <section className="bg-[#1B4332] text-white pt-12 pb-20 md:pt-20 md:pb-28 rounded-b-[50px] relative z-10 px-6">
            <div className="max-w-5xl mx-auto flex flex-col items-center text-center gap-8">
               <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-[#D4A017]/20 border border-[#D4A017]/50 text-[#D4A017] font-bold text-sm justify-center">
                  <Sprout size={16} /> ১০০% প্রাকৃতিক ও স্বাস্থ্যকর
               </div>

               {/* Title */}
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-black leading-tight">
                  {product.landingTitle || <>{product.nameBangla || product.name}<br /><span className="text-[#D4A017]">স্বাস্থ্যের সেরা</span> সমাধান</>}
               </h1>

               {/* Product Image */}
               <div className="w-full relative flex justify-center mt-4">
                  <div className="relative w-full max-w-sm lg:max-w-md aspect-square bg-[#FDF8EE]/10 rounded-[40px] p-8 backdrop-blur-sm border border-white/10 shadow-2xl flex items-center justify-center">
                     <img src={product.image} alt={product.name} className="w-full h-full object-contain filter drop-shadow-2xl z-10" />
                     <div className="absolute -bottom-6 -right-6 bg-white text-[#1B4332] rounded-full w-28 h-28 flex flex-col items-center justify-center shadow-lg border-4 border-[#D4A017] rotate-12 z-20">
                        <Award size={32} className="text-[#D4A017] mb-1" />
                        <span className="font-black text-sm text-center leading-tight mt-1">১০০% <br/> অরিজিনাল</span>
                     </div>
                  </div>
               </div>

               {/* Content under image */}
               <div className="flex flex-col items-center w-full mt-6 space-y-6">
                  {/* Subtitle */}
                  <p className="text-lg md:text-xl text-white/80 leading-relaxed max-w-2xl font-medium">
                     {product.landingSubtitle || product.highlight || 'বিশুদ্ধ ও পুষ্টিকর উপাদান দিয়ে তৈরি যা আপনার প্রতিদিনের শক্তি ও সুস্থতা নিশ্চিত করে।'}
                  </p>

                  {/* Price in Hero */}
                  <div className="flex items-baseline justify-center gap-4 mt-2">
                     <span className="text-5xl font-black text-[#D4A017]">৳{product.price}</span>
                     <span className="text-2xl text-white/40 line-through font-bold">৳{Math.round(product.price * 1.5)}</span>
                     <span className="bg-red-500 text-white text-sm font-black px-3 py-1 rounded-full">৩৩% ছাড়</span>
                  </div>

                  {/* Trust badges */}
                  <div className="flex items-center justify-center gap-6 mt-4 flex-wrap">
                     <span className="flex items-center gap-2 text-sm font-semibold text-white/80"><CheckCircle2 className="text-[#D4A017]" size={16} /> কেমিক্যাল মুক্ত</span>
                     <span className="flex items-center gap-2 text-sm font-semibold text-white/80"><CheckCircle2 className="text-[#D4A017]" size={16} /> ক্যাশ অন ডেলিভারি</span>
                     <span className="flex items-center gap-2 text-sm font-semibold text-white/80"><CheckCircle2 className="text-[#D4A017]" size={16} /> ৩০ দিনের গ্যারান্টি</span>
                  </div>

                  {/* CTA */}
                  <a href="#order" className="w-full sm:w-auto px-12 py-5 mt-4 bg-[#D4A017] text-[#1B4332] font-black text-lg md:text-xl rounded-full shadow-lg active:scale-95 transition-transform flex items-center justify-center gap-4 hover:bg-[#c49210]">
                     <ShoppingCart size={24} /> {product.landingCtaTitle || 'এখনই অর্ডার করুন'}
                  </a>
               </div>
            </div>
         </section>

         {/* ===== ২. PROBLEM SECTION ===== */}
         <section className="py-12 md:py-20 bg-[#FDF8EE] -mt-8 pt-24">
            <div className="max-w-5xl mx-auto px-4 md:px-6">
               <div className="text-center mb-14">
                  <span className="inline-block bg-red-100 text-red-600 font-bold text-sm px-4 py-2 rounded-full mb-4">⚠️ আপনি কি এই সমস্যায় ভুগছেন?</span>
                  <h2 className="text-3xl md:text-4xl font-black text-[#1B4332]">
                     {product.landingProblemTitle || 'এই সমস্যাগুলো কি আপনার পরিচিত?'}
                  </h2>
               </div>
               <div className="grid md:grid-cols-3 gap-6">
                  {problems.map((p: any, i) => {
                     const Icon = IconMap[p.icon] || AlertTriangle;
                     return (
                        <div key={i} className="bg-white border-l-4 border-red-400 rounded-2xl p-6 shadow-sm flex items-start gap-4">
                           <div className="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center shrink-0">
                              <Icon size={24} className="text-red-500" />
                           </div>
                           <div>
                              <h3 className="font-black text-lg text-gray-800 mb-1">{p.text}</h3>
                              <p className="text-gray-500 text-sm font-medium leading-relaxed">{p.subtext}</p>
                           </div>
                        </div>
                     );
                  })}
               </div>
               <p className="text-center mt-10 text-lg font-bold text-gray-600">
                  😔 এই সমস্যাগুলো আপনার জীবনকে কঠিন করে তুলছে... কিন্তু <span className="text-[#1B4332] font-black">সমাধান আছে!</span>
               </p>
            </div>
         </section>

         {/* ===== ৩. SOLUTION SECTION ===== */}
         <section className="py-12 md:py-20 bg-[#1B4332] text-white">
            <div className="max-w-6xl mx-auto px-4 md:px-6">
               <div className="grid lg:grid-cols-2 gap-16 items-center">
                  <div>
                     <span className="inline-block bg-[#D4A017]/20 text-[#D4A017] font-bold text-sm px-4 py-2 rounded-full mb-6 border border-[#D4A017]/30">✅ সমাধান এসে গেছে!</span>
                     <h2 className="text-3xl md:text-4xl font-black mb-6 leading-tight">
                        {product.landingSolutionName || <>পরিচয় করুন <span className="text-[#D4A017]">{product.nameBangla || product.name}</span> এর সাথে</>}
                     </h2>
                     <p className="text-white/80 text-lg leading-relaxed mb-10 font-medium">
                        {product.landingSolutionDesc || 'প্রকৃতির সেরা উপাদান দিয়ে তৈরি আমাদের পণ্য আপনার শরীরকে ভেতর থেকে সুস্থ করে তোলে। কোনো পার্শ্বপ্রতিক্রিয়া নেই, ফলাফল দ্রুত।'}
                     </p>
                     <div className="space-y-5">
                        {solutions.map((s: any, i) => {
                           const Icon = IconMap[s.icon] || Check;
                           return (
                              <div key={i} className="flex items-center gap-4 bg-white/10 rounded-2xl p-4 border border-white/10">
                                 <div className="w-12 h-12 rounded-xl bg-[#D4A017]/20 flex items-center justify-center shrink-0 border border-[#D4A017]/30">
                                    <Icon size={24} className="text-[#D4A017]" />
                                 </div>
                                 <div>
                                    <p className="font-black text-white text-lg">{s.text || s.title}</p>
                                    <p className="text-white/60 text-sm font-medium">{s.subtext || s.desc}</p>
                                 </div>
                              </div>
                           );
                        })}
                     </div>
                  </div>
                  <div className="flex justify-center">
                     <div className="relative bg-[#FDF8EE]/10 rounded-[40px] p-8 border border-white/10 shadow-xl">
                        <img src={product.image} alt={product.name} className="w-72 h-72 object-contain drop-shadow-2xl" />
                        <div className="absolute -top-6 -left-6 bg-[#D4A017] text-[#1B4332] rounded-2xl px-5 py-3 font-black shadow-lg text-sm">
                           🌿 ১০০% প্রাকৃতিক
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>

         {/* ===== ৪. KEY BENEFITS ===== */}
         <section id="benefits" className="py-12 md:py-20 bg-[#FDF8EE]">
            <div className="max-w-6xl mx-auto px-4 md:px-6">
               <div className="text-center mb-14">
                  <h2 className="text-3xl md:text-4xl font-black text-[#1B4332] mb-4">{product.landingBenefitsTitle || 'মূল উপকারিতাসমূহ'}</h2>
                  <p className="text-gray-600 font-medium text-lg">{product.landingBenefitsSubtitle || 'প্রকৃতির সেরা উপাদানের অনন্য মিশ্রণ'}</p>
               </div>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                  {features.map((f: any, i: number) => {
                     const Icon = IconMap[f.icon] || Sparkles;
                     return (
                        <div key={i} className="flex flex-col items-center text-center group bg-white rounded-3xl p-6 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all border border-gray-50">
                           <div className="w-20 h-20 rounded-full bg-[#EAE0D1] flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                              <Icon size={36} className="text-[#1B4332]" />
                           </div>
                           <h3 className="font-black text-lg text-[#1B4332] mb-2">{f.title}</h3>
                           <p className="text-sm text-gray-500 font-medium leading-relaxed">{f.desc}</p>
                        </div>
                     );
                  })}
               </div>
            </div>
         </section>

         {/* ===== ৫. PRODUCT DETAILS / FEATURES ===== */}
         <section className="py-20 bg-white">
            <div className="max-w-5xl mx-auto px-4 md:px-6">
               <div className="text-center mb-14">
                  <h2 className="text-3xl md:text-4xl font-black text-[#1B4332] mb-4">পণ্যের বিস্তারিত তথ্য</h2>
                  <p className="text-gray-500 font-medium">জানুন আমাদের পণ্য কেন সেরা</p>
               </div>
               <div className="grid md:grid-cols-2 gap-8 items-center">
                  <div className="bg-[#FDF8EE] rounded-[40px] p-10 flex items-center justify-center">
                     <img src={product.image} alt={product.name} className="w-64 h-64 object-contain drop-shadow-xl" />
                  </div>
                  <div className="space-y-5">
                     {[
                        { label: 'পণ্যের নাম', value: product.name },
                        { label: 'বিভাগ', value: product.category || 'স্বাস্থ্য পণ্য' },
                        { label: 'উপাদান', value: '১০০% প্রাকৃতিক ভেষজ' },
                        { label: 'উৎপত্তি', value: 'দেশীয় কারখানায় তৈরি' },
                        { label: 'মেয়াদ', value: '২ বছর' },
                        { label: 'ডেলিভারি', value: 'ঢাকায় ২৪ ঘণ্টা, সারাদেশে ২-৩ দিন' },
                     ].map((item, i) => (
                        <div key={i} className="flex justify-between items-center py-4 border-b border-gray-100">
                           <span className="font-bold text-gray-500">{item.label}</span>
                           <span className="font-black text-[#1B4332]">{item.value}</span>
                        </div>
                     ))}
                     <a href="#order" className="w-full mt-4 py-4 bg-[#1B4332] text-white font-black text-lg rounded-full flex items-center justify-center gap-3 hover:bg-[#D4A017] hover:text-[#1B4332] transition-all shadow-lg">
                        <ShoppingCart size={20} /> এখনই কিনুন
                     </a>
                  </div>
               </div>
            </div>
         </section>

         {/* ===== ৬. SOCIAL PROOF ===== */}
         <section id="reviews" className="py-12 md:py-20 bg-[#FDF8EE]">
            <div className="max-w-6xl mx-auto px-4 md:px-6">
               <div className="text-center mb-14">
                  <div className="flex justify-center gap-1 mb-4">
                     {[...Array(5)].map((_, i) => <Star key={i} size={28} className="text-[#D4A017] fill-current" />)}
                  </div>
                  <h2 className="text-3xl md:text-4xl font-black text-[#1B4332] mb-4">আমাদের গ্রাহকরা কী বলেন</h2>
                  <p className="text-gray-600 font-medium text-lg">হাজারো সন্তুষ্ট গ্রাহকের আস্থার প্রতীক</p>
               </div>
               <div className="grid md:grid-cols-3 gap-10 mt-14">
                  {reviews.map((r, i) => (
                     <div key={i} className="bg-white p-8 rounded-[32px] shadow-sm hover:shadow-lg transition-all relative mt-10 border border-gray-50">
                        <div className="absolute -top-10 left-1/2 -translate-x-1/2 w-20 h-20 rounded-full border-4 border-white shadow-md overflow-hidden bg-gray-100">
                           <img src={r.avatar} alt={r.name} className="w-full h-full object-cover" />
                        </div>
                        <div className="pt-10 flex flex-col items-center text-center">
                           <div className="flex gap-1 text-[#D4A017] mb-4">
                              {[...Array(r.rating || 5)].map((_, idx) => <Star key={idx} size={18} className="fill-current" />)}
                           </div>
                           <p className="font-medium italic text-gray-700 leading-relaxed mb-6">"{r.text}"</p>
                           <h4 className="font-black text-[#1B4332] text-lg">{r.name}</h4>
                           <span className="text-sm text-gray-400 font-medium">{(r as any).location}</span>
                           <div className="mt-3 flex items-center gap-2 text-xs font-bold text-green-600 bg-green-50 px-3 py-1 rounded-full">
                              <BadgeCheck size={14} /> যাচাইকৃত ক্রেতা
                           </div>
                        </div>
                     </div>
                  ))}
               </div>
               <div className="text-center mt-12">
                  <a href="#order" className="inline-flex items-center gap-3 px-10 py-5 bg-[#1B4332] text-white font-black text-lg rounded-full hover:bg-[#D4A017] hover:text-[#1B4332] transition-all shadow-lg">
                     <ShoppingCart size={20} /> আমিও অর্ডার করতে চাই
                  </a>
               </div>
            </div>
         </section>

         {/* ===== ৭. OFFER / PRICING ===== */}
         <section className="py-10 md:py-16 bg-[#1B4332] text-white">
            <div className="max-w-4xl mx-auto px-4 md:px-6 text-center">
               <div className="inline-block bg-red-500/20 border border-red-500/30 px-6 py-3 rounded-full mb-8">
                  <p className="text-red-300 font-black text-lg">⚡ সীমিত সময়ের বিশেষ অফার!</p>
               </div>
               <h2 className="text-3xl md:text-5xl font-black mb-6">এই অফার শেষ হওয়ার আগেই নিন!</h2>
               {/* Countdown Timer */}
               <div className="flex items-center justify-center gap-4 mb-10">
                  {[
                     { val: timer.hours, label: 'ঘণ্টা' },
                     { val: timer.minutes, label: 'মিনিট' },
                     { val: timer.seconds, label: 'সেকেন্ড' },
                  ].map((t, i) => (
                     <React.Fragment key={i}>
                        <div className="bg-white/10 border border-white/20 rounded-2xl px-6 py-4 text-center">
                           <div className="text-4xl font-black text-[#D4A017]">{String(t.val).padStart(2, '0')}</div>
                           <div className="text-xs font-bold text-white/60 tracking-widest uppercase mt-1">{t.label}</div>
                        </div>
                        {i < 2 && <span className="text-3xl font-black text-[#D4A017]">:</span>}
                     </React.Fragment>
                  ))}
               </div>
               <div className="flex items-baseline justify-center gap-6 mb-8">
                  <span className="text-5xl font-black text-[#D4A017]">৳{product.price}</span>
                  <span className="text-2xl text-white/40 line-through font-bold">৳{Math.round(product.price * 1.5)}</span>
               </div>
               <a href="#packages" className="inline-flex items-center gap-3 px-12 py-5 bg-[#D4A017] text-[#1B4332] font-black text-xl rounded-full hover:bg-white transition-all shadow-xl">
                  প্যাকেজ দেখুন <ArrowRight size={24} />
               </a>
            </div>
         </section>

         {/* ===== ৮. BUNDLE / PACKAGE SELECTION ===== */}
         <section id="packages" className="py-12 md:py-20 bg-[#FDF8EE]">
            <div className="max-w-7xl mx-auto px-4 md:px-6">
               <div className="text-center mb-14">
                  <h2 className="text-3xl md:text-4xl font-black text-[#1B4332] mb-4">প্যাকেজ নির্বাচন করুন</h2>
                  <p className="text-gray-600 font-medium text-lg">বেশি নিলে বেশি সাশ্রয়!</p>
               </div>
               <div className="grid md:grid-cols-3 gap-8 lg:gap-10 items-center max-w-5xl mx-auto">
                  {(Object.entries(pkgData) as [string, typeof pkgData.single][]).map(([key, pkg]) => {
                     const isSelected = selectedPackage === key;
                     const isPopular = (pkg as any).popular;
                     return (
                        <div
                           key={key}
                           onClick={() => setSelectedPackage(key)}
                           className={`cursor-pointer bg-white rounded-[40px] p-8 lg:p-10 transition-all duration-300 relative ${isSelected ? 'border-4 border-[#1B4332] shadow-2xl scale-105 z-10' : 'border border-gray-100 shadow-lg hover:border-[#1B4332]/30'}`}
                        >
                           {isPopular && (
                              <div className="absolute -top-5 left-1/2 -translate-x-1/2 bg-[#D4A017] text-[#1B4332] font-black px-6 py-2 rounded-full shadow-lg text-sm whitespace-nowrap">
                                 🏆 সেরা ডিল
                              </div>
                           )}
                           <div className="text-center border-b border-gray-100 pb-8 mb-8 mt-2">
                              <div className="flex justify-center mb-4">
                                 {product.image && <img src={product.image} alt={pkg.label} className="w-28 h-28 object-contain drop-shadow-xl" />}
                              </div>
                              <h3 className="font-black text-3xl text-[#1B4332] mb-2">{pkg.label}</h3>
                              <p className="text-sm text-gray-500 font-medium">{pkg.desc}</p>
                           </div>
                           <div className="flex flex-col items-center justify-center mb-8 gap-1">
                              <span className="text-lg text-red-400 line-through font-semibold">৳{pkg.original}</span>
                              <span className="font-black text-4xl text-[#1B4332]">৳{pkg.price}</span>
                              <span className="bg-green-100 text-[#1B4332] text-xs font-bold px-3 py-1 rounded-full mt-3 inline-block">
                                 সাশ্রয় ৳{pkg.saving}
                              </span>
                           </div>
                           <ul className="space-y-4 mb-10 text-sm font-semibold text-gray-600">
                              <li className="flex items-center gap-3"><Check size={20} className="text-[#D4A017] shrink-0" /> ১০০% অরিজিনাল প্রোডাক্ট</li>
                              <li className="flex items-center gap-3"><Check size={20} className="text-[#D4A017] shrink-0" /> ক্যাশ অন ডেলিভারি</li>
                              {Object.keys(pkgData).indexOf(key) > 0 && <li className="flex items-center gap-3"><Check size={20} className="text-[#D4A017] shrink-0" /> ফ্রি ডেলিভারি</li>}
                           </ul>
                           <button className={`w-full py-4 rounded-[30px] font-black text-lg transition-all active:scale-95 shadow-md flex items-center justify-center gap-2 ${isSelected ? 'bg-[#1B4332] text-white' : 'bg-gray-100 text-[#1B4332] hover:bg-[#D4A017]'}`}>
                              {isSelected ? '✓ নির্বাচিত' : 'নির্বাচন করুন'}
                           </button>
                        </div>
                     );
                  })}
               </div>
            </div>
         </section>

         {/* ===== ৯. ORDER FORM ===== */}
         <section id="order" className="py-20 bg-white">
            <div className="max-w-7xl mx-auto px-4 md:px-6 grid lg:grid-cols-12 gap-12 lg:gap-20">
               <div className="lg:col-span-7 bg-[#FDF8EE] p-8 md:p-12 rounded-[40px] shadow-lg border border-gray-100">
                  <div className="flex justify-between items-center mb-8 pb-8 border-b border-gray-200">
                     <h2 className="font-black text-3xl text-[#1B4332]">অর্ডার কনফার্ম করুন</h2>
                     <div className="text-right">
                        <span className="text-xs text-gray-500 font-bold uppercase block mb-1">মোট বিল</span>
                        <span className="font-black text-2xl text-[#1B4332]">৳{pkgData[selectedPackage]?.price}</span>
                     </div>
                  </div>
                  <div className="max-w-full overflow-hidden [&_input]:rounded-[20px] [&_input]:border-gray-200 [&_select]:rounded-[20px] [&_select]:border-gray-200 [&_textarea]:rounded-[20px] [&_textarea]:border-gray-200 [&_button]:rounded-full [&_button]:font-black [&_button]:text-lg [&_button]:shadow-lg [&_button]:bg-[#1B4332]">
                     <InlineOrderForm product={product} selectedSize={selectedPackage} addOrder={addOrder} settings={settings} />
                  </div>
               </div>

               {/* ===== ১০. TRUST ELEMENTS ===== */}
               <div className="lg:col-span-5 flex flex-col justify-center gap-6">
                  <h3 className="font-black text-2xl text-[#1B4332]">কেন নিশ্চিন্তে অর্ডার করবেন?</h3>
                  {[
                     { icon: Truck, title: 'ক্যাশ অন ডেলিভারি', desc: 'পণ্য পেয়ে টাকা দিন। কোনো অগ্রিম পেমেন্ট নেই।' },
                     { icon: RotateCcw, title: '৩০ দিনের মানিব্যাক', desc: 'সন্তুষ্ট না হলে পুরো টাকা ফেরত — কোনো প্রশ্ন নেই।' },
                     { icon: Shield, title: '১০০% অরিজিনাল', desc: 'সরাসরি উৎপাদনকারী থেকে আপনার দরজায়।' },
                     { icon: Headphones, title: '২৪/৭ কাস্টমার সার্ভিস', desc: 'যেকোনো সমস্যায় আমরা সাথে আছি।' },
                  ].map((t, i) => (
                     <div key={i} className="flex items-start gap-4 bg-[#FDF8EE] rounded-2xl p-5 border border-gray-100">
                        <div className="w-12 h-12 rounded-xl bg-[#1B4332]/10 flex items-center justify-center shrink-0">
                           <t.icon size={22} className="text-[#1B4332]" />
                        </div>
                        <div>
                           <h4 className="font-black text-[#1B4332] text-base mb-1">{t.title}</h4>
                           <p className="text-gray-500 text-sm font-medium">{t.desc}</p>
                        </div>
                     </div>
                  ))}
                  <div className="text-center bg-[#1B4332] text-white p-6 rounded-2xl">
                     <Headphones size={28} className="mx-auto mb-3 text-[#D4A017]" />
                     <p className="font-bold text-white/80 mb-1">সরাসরি কথা বলুন</p>
                     <a href={`tel:${contactPhone}`} className="font-black text-2xl text-[#D4A017] hover:text-white transition-colors">
                        {contactPhone}
                     </a>
                  </div>
               </div>
            </div>
         </section>

         {/* ===== ১১. FAQ SECTION ===== */}
         <section className="py-12 md:py-20 bg-[#FDF8EE]">
            <div className="max-w-3xl mx-auto px-6">
               <div className="text-center mb-14">
                  <h2 className="text-3xl md:text-4xl font-black text-[#1B4332] mb-4">সাধারণ জিজ্ঞাসা</h2>
                  <p className="text-gray-500 font-medium">আপনার মনের প্রশ্নের উত্তর জেনে নিন</p>
               </div>
               <div className="space-y-4">
                  {faqs.map((faq: any, idx: number) => (
                     <div key={idx} className="border border-gray-200 rounded-[24px] overflow-hidden bg-white hover:border-[#D4A017] transition-colors shadow-sm">
                        <button
                           onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                           className="w-full flex items-center justify-between p-6 text-left font-bold text-lg text-[#1B4332]"
                        >
                           {faq.q}
                           {openFaq === idx ? <Minus size={22} className="text-[#D4A017] shrink-0" /> : <Plus size={22} className="text-[#D4A017] shrink-0" />}
                        </button>
                        <div className={`overflow-hidden transition-all duration-300 ${openFaq === idx ? 'max-h-64' : 'max-h-0'}`}>
                           <p className="px-6 pb-6 text-gray-600 leading-relaxed font-medium">{faq.a}</p>
                        </div>
                     </div>
                  ))}
               </div>
            </div>
         </section>

         {/* ===== ১২. FINAL CTA ===== */}
         <section className="py-12 md:py-20 bg-[#1B4332] text-white text-center px-6 relative overflow-hidden">
            <div className="absolute inset-0 opacity-5" style={{ backgroundImage: 'radial-gradient(circle at 20% 50%, #D4A017 0%, transparent 50%), radial-gradient(circle at 80% 50%, #D4A017 0%, transparent 50%)' }}></div>
            <div className="max-w-3xl mx-auto relative z-10">
               <div className="text-6xl mb-6">🌿</div>
               <h2 className="text-3xl md:text-5xl font-black mb-6 leading-tight">
                  আর দেরি নয়! আপনার <span className="text-[#D4A017]">সুস্বাস্থ্যের</span> যাত্রা শুরু করুন আজই
               </h2>
               <p className="text-white/70 text-lg font-medium mb-10 leading-relaxed">
                  হাজারো মানুষ ইতিমধ্যে উপকৃত হয়েছেন। এখন আপনার পালা।
               </p>
               <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
                  <a href="#order" className="px-12 py-5 bg-[#D4A017] text-[#1B4332] font-black text-xl rounded-full shadow-xl hover:bg-white transition-all flex items-center gap-3">
                     <ShoppingCart size={24} /> {product.landingCtaTitle || 'এখনই অর্ডার করুন'}
                  </a>
                  <a href={`tel:${contactPhone}`} className="px-10 py-5 border-2 border-white/30 text-white font-black text-lg rounded-full hover:bg-white/10 transition-all flex items-center gap-3">
                     <Phone size={20} /> কল করুন
                  </a>
               </div>
               <div className="flex items-center justify-center gap-8 mt-12 flex-wrap">
                  <span className="flex items-center gap-2 text-white/60 text-sm font-semibold"><CheckCircle2 size={16} className="text-[#D4A017]" /> ক্যাশ অন ডেলিভারি</span>
                  <span className="flex items-center gap-2 text-white/60 text-sm font-semibold"><CheckCircle2 size={16} className="text-[#D4A017]" /> ৩০ দিন গ্যারান্টি</span>
                  <span className="flex items-center gap-2 text-white/60 text-sm font-semibold"><CheckCircle2 size={16} className="text-[#D4A017]" /> ফ্রি ডেলিভারি</span>
               </div>
            </div>
         </section>

         {/* ===== FOOTER ===== */}
         <footer className="bg-[#12302a] pt-16 pb-36 md:pb-16 px-6 text-center">
            <div className="max-w-4xl mx-auto flex flex-col items-center">
               <span className="font-black text-2xl text-white mb-4 tracking-wide flex items-center gap-2">
                  <Leaf className="text-[#D4A017]" /> {siteName}
               </span>
               <p className="text-white/50 font-medium mb-8 max-w-md leading-relaxed text-sm">
                  সবচেয়ে খাঁটি মানের স্বাস্থ্য পণ্য আপনার দোরগোড়ায় পৌঁছে দিতে আমরা প্রতিশ্রুতিবদ্ধ।
               </p>
               <div className="flex flex-wrap justify-center gap-6 text-white/30 text-sm font-medium">
                  <a href="#" className="hover:text-white transition-colors">Terms</a>
                  <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
                  <a href="#" className="hover:text-white transition-colors">Refund Policy</a>
               </div>
               <p className="text-white/20 text-xs mt-8 font-medium">
                  © {new Date().getFullYear()} {siteName}. All Rights Reserved.
               </p>
            </div>
         </footer>

         {/* ===== STICKY MOBILE CTA ===== */}
         <div className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white shadow-[0_-10px_30px_rgba(0,0,0,0.1)] border-t border-gray-100 p-4 flex gap-4 pb-8">
            <a href={`tel:${contactPhone}`} className="w-14 h-14 bg-[#FDF8EE] border border-[#1B4332]/10 rounded-[20px] flex items-center justify-center text-[#1B4332] shrink-0 active:scale-95 transition-transform shadow-sm">
               <Phone size={24} fill="currentColor" className="text-[#1B4332]" />
            </a>
            <a href="#order" className="flex-1 h-14 bg-[#1B4332] text-white font-black text-lg flex items-center justify-center rounded-[20px] shadow-lg active:scale-95 transition-transform hover:bg-[#D4A017] hover:text-[#1B4332]">
               <ShoppingCart size={20} className="mr-2" /> {product.landingCtaTitle || 'অর্ডার করুন'}
            </a>
         </div>

      </div>
   );
};

export default ProductLandingPage06;