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

interface ProductLandingPage02Props {
  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, flame: Flame, star: Star,
  check: Check, package: Package, truck: Truck, award: Award,
  badge: BadgeCheck, brain: Brain, activity: Activity, pill: Pill,
  sprout: Sprout, zap: Zap, sparkles: Sparkles, crown: Crown,
  timer: Timer, headphones: Headphones, alerttriangle: AlertTriangle,
};

const ProductLandingPage02: React.FC<ProductLandingPage02Props> = ({
  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: 23, minutes: 59, seconds: 59 });

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

  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,
        }
      ]))
    : {
        single: { price: 950, original: 1500, saving: 550, label: '১ পিস' },
        combo: { price: 1750, original: 3000, saving: 1250, label: '২ পিস + গিফট', popular: true },
        bundle: { price: 2500, original: 4500, saving: 2000, label: '৩ পিস + স্পেশাল গিফট' },
      };

  const problems = product.landingProblems?.length ? product.landingProblems : [
    { icon: 'flame', text: 'কৃত্রিম খাদ্যাভ্যাস', subtext: 'প্রক্রিয়াজাত খাবার স্বাস্থ্যের জন্য ক্ষতিকর' },
    { icon: 'pill', text: 'পুষ্টির অভাব', subtext: 'প্রয়োজনীয় ভিটামিন ও মিনারেলের ঘাটতি' },
    { icon: 'activity', text: 'শক্তির ঘাটতি', subtext: 'ক্লান্তি ও দুর্বলতা অনুভব করা' },
  ];

  const solutions = product.landingWhyChooseUs?.length ? product.landingWhyChooseUs : [
    { icon: 'sprout', text: 'প্রাকৃতিক উপাদান', subtext: 'সম্পূর্ণ প্রকৃতির সেরা উপহার থেকে তৈরি' },
    { icon: 'check', text: 'সম্পূর্ণ পুষ্টি', subtext: 'ভারসাম্যপূর্ণ পুষ্টিগুণ নিশ্চিত' },
    { icon: 'zap', text: 'দ্রুত শক্তি সঞ্চার', subtext: 'মাত্র ৭ দিনে পার্থক্য অনুভব করুন' },
  ];

  const benefits = product.features?.length ? product.features : [
    { icon: 'heart', title: 'হৃদযন্ত্রের জন্য ভালো', desc: 'রক্তচাপ নিয়ন্ত্রণে সহায়তা করে' },
    { icon: 'brain', title: 'মস্তিষ্কের বিকাশ', desc: 'স্মৃতিশক্তি ও মনোযোগ বাড়ায়' },
    { icon: 'activity', title: 'শক্তি বৃদ্ধি', desc: 'সারাদিন সতেজ রাখে' },
    { icon: 'badge', title: 'সব বয়সের জন্য', desc: 'শিশু থেকে বয়স্ক সবার উপযোগী' },
    { icon: 'leaf', 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) : [
    { name: 'নুসরাত জাহান', text: 'আমার পরিবার এখন খুব আনন্দে ব্যবহার করছে। পুষ্টিগুণে ভরপুর!', rating: 5, avatar: 'https://randomuser.me/api/portraits/women/1.jpg', location: 'ঢাকা' },
    { name: 'তানভীর হাসান', text: 'পরিবারের সবাই এখন এটি খায়। হজমের সমস্যা অনেক কমে গেছে।', rating: 5, avatar: 'https://randomuser.me/api/portraits/men/1.jpg', location: 'চট্টগ্রাম' },
    { name: 'ফারজানা ইয়াসমিন', text: 'গুণমান অসাধারণ! একবার ব্যবহার করেই বুঝতে পারবেন পার্থক্য।', rating: 5, avatar: 'https://randomuser.me/api/portraits/women/2.jpg', location: 'রাজশাহী' },
  ];

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

  const TimerBox = ({ val, label }: { val: number; label: string }) => (
    <div className="bg-[#0f172a] border border-cyan-500/30 rounded-xl px-4 py-2 text-center min-w-[64px]">
      <div className="text-2xl font-mono font-black text-cyan-400">{String(val).padStart(2, '0')}</div>
      <div className="text-xs text-gray-500 font-medium">{label}</div>
    </div>
  );

  return (
    <div className="bg-[#0b0f19] text-gray-200 min-h-screen font-sans selection:bg-cyan-500 selection:text-white pb-20 md:pb-0">

      {/* ===== ১. HERO SECTION ===== */}
      <section className="relative overflow-hidden pt-20 pb-24">
        <div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] bg-cyan-600/15 rounded-full blur-[120px] pointer-events-none" />
        <div className="absolute bottom-0 right-1/4 w-[350px] h-[350px] bg-purple-600/15 rounded-full blur-[100px] pointer-events-none" />

        {/* Urgency Timer Bar */}
        <div className="absolute top-3 left-4 right-4 z-20 flex justify-center">
          <div className="bg-black/40 backdrop-blur-sm border border-cyan-500/20 rounded-full px-4 py-2 flex items-center gap-3 text-sm">
            <Timer size={14} className="text-cyan-400 animate-pulse" />
            <span className="text-gray-400 font-medium">অফার শেষ হতে বাকি:</span>
            <span className="font-mono font-black text-cyan-400">
              {String(timer.hours).padStart(2, '0')}:{String(timer.minutes).padStart(2, '0')}:{String(timer.seconds).padStart(2, '0')}
            </span>
          </div>
        </div>

        <div className="container mx-auto px-5 relative z-10">
          <div className="flex flex-col items-center text-center max-w-4xl mx-auto gap-8">

            {/* Premium Badge */}
            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-500/20 to-transparent border border-cyan-500/30 rounded-lg px-4 py-2 text-sm text-cyan-300 font-bold justify-center">
              <Crown size={16} /> প্রিমিয়াম কোয়ালিটি
            </div>

            {/* Title */}
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-tight">
              {product.landingTitle || product.nameBangla || product.name}
            </h1>

            {/* Product Image */}
            <div className="w-full max-w-[360px] mx-auto my-4 lg:max-w-[450px]">
              <div className="relative group">
                <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-700" />
                <div className="relative bg-[#0f172a] border border-white/10 rounded-2xl p-6 flex justify-center">
                  <img src={product.image} alt={product.name} className="w-full max-h-[340px] lg:max-h-[420px] object-contain drop-shadow-[0_15px_25px_rgba(0,0,0,1)]" />
                  <div className="absolute top-4 right-4 bg-cyan-500 text-gray-900 font-black px-3 py-1 rounded-lg text-xs shadow-[0_0_15px_rgba(6,182,212,0.5)] rotate-2">
                    সীমিত অফার
                  </div>
                </div>
              </div>
            </div>

            {/* Content under image */}
            <div className="space-y-6 flex flex-col items-center">
              {/* Subtitle */}
              <p className="text-lg text-gray-400 font-light leading-relaxed max-w-2xl mx-auto">
                {product.landingSubtitle || product.highlight || '১০০% প্রাকৃতিক উপাদানে তৈরি, আপনার পরিবারের সুস্থতার চাবিকাঠি।'}
              </p>

              {/* Price */}
              <div className="flex items-center gap-4 justify-center mt-2">
                <div className="text-4xl lg:text-5xl font-black text-white underline decoration-cyan-500 decoration-4 underline-offset-8">৳{product.price}</div>
                <div className="text-left">
                  <div className="text-gray-500 line-through font-bold">৳{Math.round(product.price * 1.35)}</div>
                  <div className="text-cyan-400 font-bold text-sm">সুপার সেভিংস!</div>
                </div>
              </div>

              {/* Trust badges */}
              <div className="flex flex-wrap gap-2 justify-center mt-2">
                {['ক্যাশ অন ডেলিভারি', '৩০ দিন গ্যারান্টি', 'ফ্রি ডেলিভারি'].map((b, i) => (
                  <span key={i} className="inline-flex items-center gap-1.5 bg-white/5 border border-white/10 text-gray-300 text-xs md:text-sm font-semibold px-4 py-2 rounded-full">
                    <Check size={14} className="text-cyan-400" /> {b}
                  </span>
                ))}
              </div>

              {/* CTAs */}
              <div className="flex flex-col sm:flex-row gap-4 justify-center w-full mt-4">
                <a href="#order" className="flex items-center justify-center gap-2 px-10 py-5 bg-cyan-500 text-gray-900 font-black text-lg md:text-xl rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_30px_rgba(6,182,212,0.35)] hover:shadow-[0_0_40px_rgba(6,182,212,0.5)]">
                  <ShoppingCart size={24} /> {product.landingCtaTitle || 'অর্ডার করুন'} <ArrowRight size={20} />
                </a>
                <a href={`tel:${contactPhone}`} className="flex items-center justify-center gap-2 px-8 py-5 border border-white/20 text-gray-300 font-bold text-lg md:text-xl rounded-xl hover:bg-white/5 transition-all">
                  <Phone size={20} /> কল করুন
                </a>
              </div>
            </div>

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

      {/* ===== ২. PROBLEM SECTION ===== */}
      <section className="py-16 bg-[#090c14] border-y border-white/5">
        <div className="container mx-auto px-5">
          <div className="text-center mb-10">
            <span className="inline-flex items-center gap-2 bg-red-500/10 border border-red-500/20 text-red-400 text-sm font-bold px-4 py-2 rounded-full mb-5">
              <AlertTriangle size={14} /> এই সমস্যাগুলো কি আপনার পরিচিত?
            </span>
            <h2 className="text-3xl md:text-4xl font-black text-white">
              {product.landingProblemTitle || 'আপনি কি এই কষ্টে ভুগছেন?'}
            </h2>
            <div className="w-14 h-0.5 bg-cyan-500 mx-auto mt-4" />
          </div>
          <div className="grid md:grid-cols-3 gap-5 max-w-5xl mx-auto">
            {problems.map((p: any, i: number) => {
              const Icon = IconMap[p.icon] || AlertTriangle;
              return (
                <div key={i} className="bg-[#0b0f19] border border-red-500/20 rounded-2xl p-6 flex items-start gap-4 hover:border-red-500/40 transition-all">
                  <div className="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center shrink-0">
                    <Icon size={24} className="text-red-400" />
                  </div>
                  <div>
                    <h3 className="font-bold text-white text-base mb-1">{p.text}</h3>
                    <p className="text-gray-500 text-sm leading-relaxed">{p.subtext}</p>
                  </div>
                </div>
              );
            })}
          </div>
          <p className="text-center mt-8 text-gray-400">
            💡 এই সমস্যা থেকে <span className="text-cyan-400 font-bold">বের হওয়ার উপায় আছে।</span>
          </p>
        </div>
      </section>

      {/* ===== ৩. SOLUTION SECTION ===== */}
      <section className="py-16 bg-[#0b0f19]">
        <div className="container mx-auto px-5">
          <div className="max-w-5xl mx-auto bg-[#0f172a] border border-white/10 rounded-3xl overflow-hidden shadow-2xl">
            <div className="grid md:grid-cols-2">
              {/* Problems side */}
              <div className="p-8 border-b md:border-b-0 md:border-r border-white/10">
                <h3 className="text-xl font-black text-gray-500 mb-6 flex items-center gap-3 pb-4 border-b border-white/5">
                  <X size={20} className="text-red-500" /> সাধারণ পণ্য
                </h3>
                <ul className="space-y-4">
                  {['কৃত্রিম উপাদান ব্যবহার', 'প্রিজার্ভেটিভ যুক্ত', 'মান নিয়ন্ত্রণের অভাব', 'কোনো গ্যারান্টি নেই'].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 text-gray-400 text-sm">
                      <div className="bg-red-500/10 p-1 rounded-md shrink-0"><X size={14} className="text-red-500" /></div> {item}
                    </li>
                  ))}
                </ul>
              </div>
              {/* Solutions side */}
              <div className="p-8 bg-cyan-900/10 relative">
                <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent pointer-events-none" />
                <h3 className="text-xl font-black text-cyan-400 mb-6 flex items-center gap-3 pb-4 border-b border-cyan-500/10 relative z-10">
                  <Check size={20} className="text-cyan-400" /> {product.nameBangla || product.name}
                </h3>
                <ul className="space-y-4 relative z-10">
                  {solutions.map((s: any, i: number) => {
                    const Icon = IconMap[s.icon] || Check;
                    return (
                      <li key={i} className="flex items-start gap-3 text-sm">
                        <div className="bg-cyan-500/15 p-1 rounded-md shrink-0 mt-0.5 shadow-[0_0_8px_rgba(6,182,212,0.15)]">
                          <Check size={14} className="text-cyan-400" />
                        </div>
                        <div>
                          <span className="font-bold text-white block">{s.text || s.title}</span>
                          <span className="text-gray-500">{s.subtext || s.desc}</span>
                        </div>
                      </li>
                    );
                  })}
                </ul>
                <a href="#order" className="mt-8 flex items-center gap-2 px-6 py-3 bg-cyan-500 text-gray-900 font-black rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_20px_rgba(6,182,212,0.25)] text-sm relative z-10 w-fit">
                  <ShoppingCart size={16} /> এখনই কিনুন
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ৪. KEY BENEFITS ===== */}
      <section id="benefits" className="py-16 border-t border-white/5 bg-[#0f172a]/50">
        <div className="container mx-auto px-5">
          <div className="mb-10">
            <h2 className="text-3xl md:text-4xl font-black text-white">{product.landingBenefitsTitle || 'মূল উপকারিতা'}</h2>
            <p className="text-gray-500 mt-2">{product.landingBenefitsSubtitle || 'কেন আমাদের পণ্য আলাদা'}</p>
            <div className="w-14 h-0.5 bg-cyan-500 mt-4" />
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-5">
            {benefits.map((b: any, idx: number) => {
              const Icon = IconMap[b.icon] || Sparkles;
              return (
                <div key={idx} className="bg-[#0b0f19] border border-white/10 rounded-2xl p-6 hover:border-cyan-500/50 transition-all group relative overflow-hidden">
                  <div className="absolute top-0 left-0 w-0.5 h-full bg-cyan-500 opacity-0 group-hover:opacity-100 transition-opacity" />
                  <div className="w-12 h-12 bg-cyan-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:shadow-[0_0_15px_rgba(6,182,212,0.2)] transition-shadow">
                    <Icon className="text-cyan-400" size={24} />
                  </div>
                  <h3 className="font-bold text-base text-white mb-2">{b.title}</h3>
                  <p className="text-gray-500 text-sm leading-relaxed">{b.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৫. PRODUCT DETAILS ===== */}
      <section className="py-16 bg-[#0b0f19] border-y border-white/5">
        <div className="container mx-auto px-5 max-w-4xl">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-black text-white">পণ্যের বিস্তারিত</h2>
            <div className="w-14 h-0.5 bg-cyan-500 mx-auto mt-3" />
          </div>
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div className="flex justify-center">
              <div className="relative group">
                <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500/30 to-purple-600/20 rounded-2xl blur opacity-20 group-hover:opacity-30 transition duration-700" />
                <div className="relative bg-[#0f172a] border border-white/10 rounded-2xl p-6">
                  <img src={product.image} alt={product.name} className="w-48 h-48 object-contain drop-shadow-[0_10px_20px_rgba(0,0,0,1)]" />
                </div>
              </div>
            </div>
            <div className="bg-[#0f172a] border border-white/10 rounded-2xl overflow-hidden">
              {[
                { 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 px-6 py-3.5 ${i % 2 === 0 ? 'bg-white/[0.02]' : ''} border-b border-white/5 last:border-0`}>
                  <span className="text-gray-500 text-sm font-medium">{item.label}</span>
                  <span className="font-bold text-cyan-400 text-sm">{item.value}</span>
                </div>
              ))}
              <div className="p-4">
                <a href="#order" className="flex items-center justify-center gap-2 w-full py-3 bg-cyan-500 text-gray-900 font-black rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_15px_rgba(6,182,212,0.25)] text-sm">
                  <ShoppingCart size={16} /> এখনই কিনুন
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ৬. SOCIAL PROOF ===== */}
      <section id="reviews" className="py-16 bg-[#0b0f19]">
        <div className="container mx-auto px-5">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-black text-white">সন্তুষ্ট গ্রাহক</h2>
            <div className="flex items-center justify-center gap-1 mt-4">
              {[...Array(5)].map((_, i) => <Star key={i} size={20} className="fill-cyan-500 text-cyan-500 drop-shadow-[0_0_8px_rgba(6,182,212,0.7)]" />)}
              <span className="ml-2 text-white font-bold">4.9/5</span>
            </div>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {reviews.map((r: any, idx: number) => (
              <div key={idx} className="bg-[#0f172a] border border-white/10 rounded-2xl p-6 relative hover:-translate-y-1 transition-transform duration-300 shadow-xl">
                <Quote className="text-cyan-500/15 absolute top-4 right-4" size={36} />
                <div className="flex gap-1 mb-4">
                  {[...Array(r.rating || 5)].map((_, i) => <Star key={i} size={14} className="fill-cyan-500 text-cyan-500" />)}
                </div>
                <p className="text-gray-300 italic mb-5 leading-relaxed text-sm">"{r.text}"</p>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <img src={r.avatar} alt={r.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-cyan-500/40" />
                    <div>
                      <h4 className="font-bold text-white text-sm">{r.name}</h4>
                      <p className="text-cyan-500/70 text-xs font-bold uppercase tracking-widest">{r.location}</p>
                    </div>
                  </div>
                  <BadgeCheck size={18} className="text-cyan-400" />
                </div>
              </div>
            ))}
          </div>
          <div className="text-center mt-10">
            <a href="#order" className="inline-flex items-center gap-2 px-8 py-4 bg-cyan-500 text-gray-900 font-black rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_20px_rgba(6,182,212,0.3)]">
              <ShoppingCart size={18} /> আমিও অর্ডার করতে চাই
            </a>
          </div>
        </div>
      </section>

      {/* ===== ৭. OFFER / PRICING ===== */}
      <section className="py-14 bg-gradient-to-b from-[#0f172a] to-[#0b0f19] border-y border-white/5">
        <div className="container mx-auto px-5 text-center max-w-3xl">
          <span className="inline-flex items-center gap-2 bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 text-sm font-bold px-5 py-2 rounded-full mb-6">
            ⚡ সীমিত সময়ের অফার!
          </span>
          <h2 className="text-3xl md:text-4xl font-black text-white mb-6">অফার শেষ হওয়ার আগেই নিন!</h2>
          <div className="flex items-center justify-center gap-3 mb-8">
            <TimerBox val={timer.hours} label="ঘণ্টা" />
            <span className="text-2xl font-black text-cyan-400/50">:</span>
            <TimerBox val={timer.minutes} label="মিনিট" />
            <span className="text-2xl font-black text-cyan-400/50">:</span>
            <TimerBox val={timer.seconds} label="সেকেন্ড" />
          </div>
          <div className="flex items-baseline justify-center gap-5 mb-6">
            <span className="text-5xl font-black text-white underline decoration-cyan-500 decoration-4 underline-offset-8">৳{product.price}</span>
            <span className="text-2xl text-gray-600 line-through font-bold">৳{Math.round(product.price * 1.35)}</span>
          </div>
          <a href="#packages" className="inline-flex items-center gap-2 px-10 py-4 bg-cyan-500 text-gray-900 font-black rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_25px_rgba(6,182,212,0.3)]">
            প্যাকেজ দেখুন <ArrowRight size={20} />
          </a>
        </div>
      </section>

      {/* ===== ৮. PACKAGE SELECTION ===== */}
      <section id="packages" className="py-16 bg-[#0f172a] border-b border-white/5">
        <div className="container mx-auto px-5">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-black text-white">প্যাকেজ নির্বাচন করুন</h2>
            <p className="text-gray-500 mt-2">বেশি নিলে বেশি সাশ্রয়!</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {Object.entries(pkgData).map(([key, pkg]: any) => {
              const isSelected = selectedPackage === key;
              return (
                <div
                  key={key}
                  onClick={() => setSelectedPackage(key)}
                  className={`flex flex-col rounded-2xl overflow-hidden transition-all duration-300 border bg-[#0b0f19] cursor-pointer ${
                    isSelected
                      ? 'border-cyan-500 ring-1 ring-cyan-500 shadow-[0_0_25px_rgba(6,182,212,0.15)] scale-105 z-10'
                      : 'border-white/10 hover:border-cyan-500/40'
                  }`}
                >
                  {pkg.popular && (
                    <div className="bg-cyan-500 text-gray-900 text-center py-2 text-xs font-black uppercase tracking-widest">সবচেয়ে জনপ্রিয়</div>
                  )}
                  <div className="p-6 text-center flex-grow flex flex-col">
                    {product.image && (
                      <div className="flex justify-center mb-4">
                        <img src={product.image} alt={pkg.label} className="w-20 h-20 object-contain" />
                      </div>
                    )}
                    <h3 className="text-xl font-bold mb-3 text-white">{pkg.label}</h3>
                    <div className="text-4xl font-black text-cyan-400 mb-1">৳{pkg.price}</div>
                    <div className="text-sm text-gray-600 line-through mb-3">৳{pkg.original}</div>
                    <div className="bg-cyan-500/10 text-cyan-400 text-xs font-bold py-1 px-3 rounded inline-block mx-auto mb-6 border border-cyan-500/20">সঞ্চয় ৳{pkg.saving}</div>
                    <div className="w-full h-px bg-white/5 mb-5" />
                    <ul className="space-y-3 text-left flex-grow text-sm">
                      {['অরিজিনাল পণ্য', 'ফ্রি হোম ডেলিভারি', Object.keys(pkgData).indexOf(key) > 0 ? 'স্পেশাল গিফট' : null].filter(Boolean).map((item, i) => (
                        <li key={i} className="flex items-center gap-2 text-gray-400">
                          <Check size={15} className="text-cyan-500 shrink-0" /> {item}
                        </li>
                      ))}
                    </ul>
                    <button className={`w-full py-3.5 mt-6 rounded-xl font-black tracking-wide uppercase text-sm transition-all ${
                      isSelected
                        ? 'bg-cyan-500 text-gray-900 shadow-[0_0_15px_rgba(6,182,212,0.3)]'
                        : 'bg-transparent border border-white/20 text-white hover:bg-white/5'
                    }`}>
                      {isSelected ? '✓ নির্বাচিত' : 'নির্বাচন করুন'}
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৯. ORDER FORM ===== */}
      <section id="order" className="py-16 bg-[#0b0f19]">
        <div className="container mx-auto px-5">
          <div className="grid lg:grid-cols-12 gap-8 max-w-6xl mx-auto">

            {/* ===== ১০. TRUST ELEMENTS ===== */}
            <div className="lg:col-span-4 space-y-4">
              <h3 className="text-2xl font-black text-white mb-5">কেন নিশ্চিন্তে অর্ডার করবেন?</h3>
              {[
                { icon: Truck, title: 'ক্যাশ অন ডেলিভারি', desc: 'পণ্য পেয়ে টাকা দিন। আগাম কিছু নয়।' },
                { icon: RotateCcw, title: '৩০ দিন মানিব্যাক', desc: 'সন্তুষ্ট না হলে পুরো টাকা ফেরত।' },
                { icon: ShieldCheck, title: '১০০% অরিজিনাল', desc: 'সরাসরি কারখানা থেকে আপনার দরজায়।' },
                { icon: Headphones, title: '২৪/৭ সাপোর্ট', desc: 'যেকোনো সমস্যায় আমরা পাশে আছি।' },
              ].map((t, i) => (
                <div key={i} className="flex items-start gap-4 bg-[#0f172a] border border-white/10 rounded-xl p-4 hover:border-cyan-500/30 transition-all">
                  <div className="w-11 h-11 bg-cyan-500/10 rounded-xl flex items-center justify-center shrink-0">
                    <t.icon size={20} className="text-cyan-400" />
                  </div>
                  <div>
                    <h4 className="font-bold text-white text-sm mb-0.5">{t.title}</h4>
                    <p className="text-gray-500 text-xs leading-relaxed">{t.desc}</p>
                  </div>
                </div>
              ))}
              <a href={`tel:${contactPhone}`} className="flex items-center gap-3 bg-[#0f172a] border border-cyan-500/20 rounded-xl p-4 hover:border-cyan-500/40 transition-all mt-2">
                <div className="w-11 h-11 bg-cyan-500/10 rounded-xl flex items-center justify-center shrink-0">
                  <Phone size={20} className="text-cyan-400" />
                </div>
                <div>
                  <div className="text-gray-500 text-xs font-medium">সরাসরি কল করুন</div>
                  <div className="font-black text-cyan-400">{contactPhone}</div>
                </div>
              </a>
            </div>

            {/* Order Form */}
            <div className="lg:col-span-8">
              <div className="bg-[#0f172a] rounded-2xl border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] overflow-hidden">
                <div className="bg-gradient-to-r from-cyan-900/40 to-[#0f172a] p-6 border-b border-white/10 flex items-center justify-between gap-4">
                  <div className="flex items-center gap-3">
                    <ShoppingCart size={26} className="text-cyan-400" />
                    <h3 className="text-2xl font-black text-white">অর্ডার কনফার্ম করুন</h3>
                  </div>
                  <div className="text-right">
                    <div className="text-xs text-gray-500">নির্বাচিত প্যাকেজ</div>
                    <div className="font-black text-cyan-400">৳{pkgData[selectedPackage]?.price}</div>
                  </div>
                </div>
                <div className="p-6 md:p-8">
                  <InlineOrderForm product={product} selectedSize={selectedPackage} addOrder={addOrder} settings={settings} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ১১. FAQ SECTION ===== */}
      <section className="py-16 bg-[#0f172a] border-t border-white/5">
        <div className="container mx-auto px-5 max-w-2xl">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-black text-white">সাধারণ জিজ্ঞাসা</h2>
            <div className="w-14 h-0.5 bg-cyan-500 mx-auto mt-3" />
          </div>
          <div className="space-y-3">
            {faqs.map((faq: any, idx: number) => (
              <div key={idx} className="border border-white/10 rounded-xl bg-[#0b0f19] hover:border-cyan-500/20 transition-all">
                <button
                  onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                  className="w-full flex items-center justify-between p-5 text-left"
                >
                  <span className="font-bold text-gray-200 text-sm pr-4">{faq.q}</span>
                  <ChevronDown className={`transition-transform duration-300 text-cyan-500 shrink-0 ${openFaq === idx ? 'rotate-180' : ''}`} size={20} />
                </button>
                {openFaq === idx && (
                  <div className="px-5 pb-5 text-gray-400 text-sm border-t border-white/5 pt-3 leading-relaxed">
                    {faq.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== ১২. FINAL CTA ===== */}
      <section className="py-16 bg-gradient-to-br from-[#0f172a] to-[#0b0f19] border-t border-white/5">
        <div className="container mx-auto px-5 text-center max-w-2xl">
          <div className="text-5xl mb-6">🚀</div>
          <h2 className="text-3xl md:text-4xl font-black text-white mb-4 leading-tight">
            আর অপেক্ষা নয়! <br />
            <span className="text-cyan-400">আজই অর্ডার করুন</span>
          </h2>
          <p className="text-gray-400 mb-8 leading-relaxed">
            হাজারো মানুষ উপকৃত হয়েছেন। স্টক সীমিত — এই সুযোগ হাতছাড়া করবেন না।
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="#order" className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-10 py-4 bg-cyan-500 text-gray-900 font-black text-lg rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_30px_rgba(6,182,212,0.35)]">
              <ShoppingCart size={20} /> {product.landingCtaTitle || 'এখনই অর্ডার করুন'}
            </a>
            <a href={`tel:${contactPhone}`} className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 border border-white/20 text-gray-300 font-bold rounded-xl hover:bg-white/5 transition-all">
              <Phone size={18} /> কল করুন
            </a>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-6 mt-8">
            {['ক্যাশ অন ডেলিভারি', '৩০ দিন গ্যারান্টি', 'ফ্রি ডেলিভারি'].map((b, i) => (
              <span key={i} className="flex items-center gap-2 text-gray-500 text-sm">
                <CheckCircle2 size={14} className="text-cyan-500" /> {b}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FOOTER ===== */}
      <footer className="bg-[#05070a] pt-12 pb-8 border-t border-white/10">
        <div className="container mx-auto px-5">
          <div className="grid grid-cols-3 gap-6 text-center max-w-3xl mx-auto mb-10">
            {[
              { icon: Truck, title: 'ক্যাশ অন ডেলিভারি', desc: 'সারাদেশে' },
              { icon: RotateCcw, title: '৩০ দিন রিটার্ন', desc: 'টাকা ফেরত গ্যারান্টি' },
              { icon: ShieldCheck, title: '১০০% নিরাপদ', desc: 'গুণগত মান নিশ্চিত' },
            ].map((item, i) => (
              <div key={i} className="text-center">
                <item.icon size={28} className="mx-auto mb-2 text-cyan-500" />
                <h4 className="font-bold text-white text-xs mb-1">{item.title}</h4>
                <p className="text-gray-600 text-xs">{item.desc}</p>
              </div>
            ))}
          </div>
          <div className="border-t border-white/5 pt-6 text-center text-gray-600 text-xs flex flex-col md:flex-row items-center justify-between gap-3">
            <p>© {new Date().getFullYear()} {siteName} - সর্বস্বত্ব সংরক্ষিত</p>
            <div className="flex items-center gap-2">
              <Phone size={12} className="text-cyan-500" />
              <span className="text-gray-400 font-bold">{contactPhone}</span>
            </div>
          </div>
        </div>
      </footer>

      {/* ===== STICKY MOBILE CTA ===== */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-[#0b0f19] shadow-[0_-8px_25px_rgba(0,0,0,0.8)] border-t border-white/10 p-3 pb-5 z-50">
        <div className="flex gap-3">
          <a href={`tel:${contactPhone}`} className="w-14 h-12 bg-[#0f172a] border border-white/10 rounded-xl flex items-center justify-center text-cyan-400 shrink-0 active:scale-95 transition-transform">
            <Phone size={20} />
          </a>
          <a href="#order" className="flex-1 flex items-center justify-center gap-2 bg-cyan-500 text-gray-900 font-black py-3 rounded-xl shadow-[0_0_15px_rgba(6,182,212,0.3)] active:scale-95 transition-transform hover:bg-cyan-400 text-sm">
            <ShoppingCart size={16} /> {product.landingCtaTitle || 'অর্ডার করুন'}
          </a>
        </div>

        {/* Mini timer */}
        <div className="flex items-center justify-between mt-2 px-1">
          <span className="text-xs text-gray-500">অফার শেষ:</span>
          <span className="font-mono font-black text-cyan-400 text-xs">
            {String(timer.hours).padStart(2, '0')}:{String(timer.minutes).padStart(2, '0')}:{String(timer.seconds).padStart(2, '0')}
          </span>
        </div>
      </div>

    </div>
  );
};

export default ProductLandingPage02;