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, Users, Phone,
  Award, BadgeCheck, Brain, Activity, Pill, Sprout,
  ChevronDown, Zap, Sparkles, Gift, Crown, Timer,
  X, Headphones, CheckCircle2, AlertTriangle
} from 'lucide-react';
import { pushToDataLayer } from '../utils/tagmanager';
import InlineOrderForm from './InlineOrderForm';

interface ProductLandingPage05Props {
  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, gift: Gift,
  crown: Crown, timer: Timer, users: Users, headphones: Headphones,
  alerttriangle: AlertTriangle,
};

const ProductLandingPage05: React.FC<ProductLandingPage05Props> = ({
  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: 7, minutes: 23, seconds: 11 });

  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,
          qty: i === 0 ? '১টি' : i === 1 ? '২টি' : '৩টি'
        }
      ]))
    : {
        single: { price: 950, original: 1500, saving: 550, label: 'স্টার্টার প্যাক (১ পিস)', qty: '১টি' },
        combo:  { price: 1750, original: 3000, saving: 1250, label: 'পপুলার প্যাক (২ পিস)', qty: '২টি', popular: true },
        bundle: { price: 2500, original: 4500, saving: 2000, label: 'ফ্যামিলি প্যাক (৩ পিস)', qty: '৩টি' },
      };

  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 features = product.features?.length ? product.features : [
    { icon: 'brain', title: 'মস্তিষ্কের বিকাশ', desc: 'স্মৃতিশক্তি ও মনোযোগ বাড়ায়' },
    { icon: 'heart', title: 'হৃদযন্ত্র সুস্থ', desc: 'রক্তচাপ নিয়ন্ত্রণে সহায়তা করে' },
    { icon: 'activity', title: 'শক্তি ও কর্মক্ষমতা', desc: 'সারাদিন প্রাণবন্ত ও সক্রিয় রাখে' },
    { icon: 'shield', title: 'রোগ প্রতিরোধ', desc: 'ইমিউন সিস্টেম শক্তিশালী করে' },
    { icon: 'leaf', title: '১০০% প্রাকৃতিক', desc: 'কোনো কৃত্রিম উপাদান বা কেমিক্যাল নেই' },
    { icon: 'zap', 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';

  const GlassCard = ({ children, className = '' }: any) => (
    <div className={`bg-white/5 backdrop-blur-xl border border-white/10 rounded-[2rem] ${className}`}>
      {children}
    </div>
  );

  return (
    <div className="min-h-screen relative font-sans pb-20 md:pb-0" style={{ background: '#030712', color: '#f8fafc' }}>

      {/* GLOBAL BACKGROUND GLOW */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full opacity-20 blur-[150px]" style={{ background: 'linear-gradient(to right, #38bdf8, #818cf8)' }}></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full opacity-10 blur-[150px]" style={{ background: 'linear-gradient(to right, #4ade80, #38bdf8)' }}></div>
        <div className="absolute top-[40%] left-[20%] w-[30%] h-[30%] rounded-full opacity-[0.05] blur-[100px]" style={{ background: '#f472b6' }}></div>
      </div>

      {/* ===== ১. HERO SECTION ===== */}
      <section className="pt-20 pb-16 px-4 md:px-8 relative z-10">
        <div className="max-w-6xl mx-auto">
          <GlassCard className="p-5 md:p-12 lg:p-16 flex flex-col lg:flex-row items-center gap-8 md:gap-12 shadow-[0_0_50px_rgba(56,189,248,0.1)] relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>

            {/* Hero Content */}
            <div className="flex-1 space-y-8 z-10 text-center lg:text-left">
              <div className="inline-block px-4 py-2 rounded-full border border-sky-400/30 bg-sky-400/10 text-sky-400 text-sm font-bold shadow-[0_0_15px_rgba(56,189,248,0.3)]">
                🚀 ভবিষ্যতের স্বাস্থ্য-সুরক্ষা এখন
              </div>
              <h1 className="text-5xl md:text-7xl font-bold leading-tight">
                {product.landingTitle || product.nameBangla || product.name}
              </h1>
              <p className="text-xl text-slate-400 font-light leading-relaxed">
                {product.landingSubtitle || product.highlight || 'বিজ্ঞান ও প্রকৃতির নিখুঁত সংমিশ্রণ। আপনার ইমিউন সিস্টেমকে শক্তিশালী করতে পরীক্ষিত সমাধান।'}
              </p>

              {/* Price */}
              <div className="flex justify-center lg:justify-start items-center gap-6">
                <div className="flex flex-col items-center lg:items-start">
                  <span className="text-sm text-slate-500 uppercase tracking-widest">আজকের দাম</span>
                  <span className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-indigo-400">৳{product.price}</span>
                </div>
                <div className="h-16 w-px bg-white/20"></div>
                <div className="flex flex-col items-center lg:items-start">
                  <span className="text-sm text-slate-500 uppercase tracking-widest">রেগুলার দাম</span>
                  <span className="text-2xl text-slate-500 line-through">৳{Math.round(product.price * 1.4)}</span>
                </div>
              </div>

              {/* CTA + Timer */}
              <div className="flex flex-col sm:flex-row gap-6 justify-center lg:justify-start">
                <a href="#order" className="group relative px-8 py-4 rounded-2xl bg-sky-500 hover:bg-sky-400 text-slate-900 font-black text-lg overflow-hidden transition-all text-center">
                  <span className="relative z-10 flex items-center justify-center gap-2">
                    <ShoppingCart size={20} /> {product.landingCtaTitle || 'অর্ডার করুন'} <ArrowRight className="group-hover:translate-x-1 transition-transform" />
                  </span>
                  <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out"></div>
                </a>
                <div className="flex items-center justify-center gap-3 bg-slate-800/50 rounded-2xl px-6 py-4 border border-white/10">
                  <Timer className="text-sky-400" />
                  <div className="text-sm">
                    <span className="text-slate-400 block mb-1">অফার শেষ হবে:</span>
                    <span className="font-mono text-lg font-bold">{String(timer.hours).padStart(2, '0')}:{String(timer.minutes).padStart(2, '0')}:{String(timer.seconds).padStart(2, '0')}</span>
                  </div>
                </div>
              </div>

              <div className="flex items-center justify-center lg:justify-start gap-6 flex-wrap">
                <span className="flex items-center gap-2 text-sm text-slate-400"><CheckCircle2 size={16} className="text-sky-400" /> ক্যাশ অন ডেলিভারি</span>
                <span className="flex items-center gap-2 text-sm text-slate-400"><CheckCircle2 size={16} className="text-sky-400" /> ৩০ দিন গ্যারান্টি</span>
                <span className="flex items-center gap-2 text-sm text-slate-400"><CheckCircle2 size={16} className="text-sky-400" /> ফ্রি ডেলিভারি</span>
              </div>
            </div>

            {/* Glowing Product Image */}
            <div className="flex-1 relative w-full max-w-[400px]">
              <div className="absolute inset-0 bg-gradient-to-r from-sky-400 to-indigo-500 blur-3xl opacity-30 rounded-full animate-pulse"></div>
              <img src={product.image} alt={product.name} className="relative z-10 w-full drop-shadow-[0_20px_40px_rgba(0,0,0,0.8)]" />
            </div>
          </GlassCard>
        </div>
      </section>

      {/* ===== ২. PROBLEM SECTION ===== */}
      <section className="py-12 md:py-20 relative z-10">
        <div className="max-w-6xl mx-auto px-4 md:px-6">
          <div className="text-center mb-14">
            <span className="inline-block px-4 py-2 rounded-full border border-red-500/30 bg-red-500/10 text-red-400 text-sm font-bold mb-6">
              ⚠️ এই সমস্যাগুলো কি আপনার পরিচিত?
            </span>
            <h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-slate-500">
              {product.landingProblemTitle || 'আপনি কি এই কষ্টে ভুগছেন?'}
            </h2>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {problems.map((p: any, i: number) => {
              const Icon = IconMap[p.icon] || AlertTriangle;
              return (
                <GlassCard key={i} className="p-6 border-red-500/20 hover:border-red-500/40 transition-all">
                  <div className="w-14 h-14 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center mb-5">
                    <Icon size={28} className="text-red-400" />
                  </div>
                  <h3 className="font-bold text-xl mb-2">{p.text}</h3>
                  <p className="text-slate-400 text-sm font-light leading-relaxed">{p.subtext}</p>
                </GlassCard>
              );
            })}
          </div>
          <p className="text-center mt-10 text-slate-400 text-lg">
            😔 এই সমস্যাগুলো আপনাকে পিছিয়ে রাখছে... কিন্তু এর <span className="text-sky-400 font-bold">সমাধান আছে।</span>
          </p>
        </div>
      </section>

      {/* ===== ৩. SOLUTION SECTION ===== */}
      <section className="py-12 md:py-12 md:py-20 relative z-10 border-y border-white/5 bg-slate-900/30 backdrop-blur-3xl">
        <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 px-4 py-2 rounded-full border border-sky-500/30 bg-sky-500/10 text-sky-400 text-sm font-bold mb-8">
                ✅ সমাধান এসে গেছে!
              </span>
              <h2 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                {product.landingSolutionName || <>পরিচয় করুন <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-indigo-400">{product.nameBangla || product.name}</span> এর সাথে</>}
              </h2>
              <p className="text-slate-400 text-lg font-light leading-relaxed mb-10">
                {product.landingSolutionDesc || 'বিজ্ঞানসম্মতভাবে প্রমাণিত, প্রকৃতির সেরা উপাদান থেকে তৈরি। কোনো পার্শ্বপ্রতিক্রিয়া নেই, দ্রুত ফলাফল।'}
              </p>
              <div className="space-y-4">
                {solutions.map((s: any, i: number) => {
                  const Icon = IconMap[s.icon] || Check;
                  return (
                    <div key={i} className="flex items-center gap-4 bg-sky-900/20 rounded-2xl p-4 border border-sky-500/20">
                      <div className="w-12 h-12 rounded-xl bg-sky-500/20 flex items-center justify-center shrink-0 border border-sky-500/20">
                        <Icon size={22} className="text-sky-400" />
                      </div>
                      <div>
                        <p className="font-bold text-white">{s.text || s.title}</p>
                        <p className="text-slate-400 text-sm font-light">{s.subtext || s.desc}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Before/After Comparison */}
            <GlassCard className="p-8">
              <h3 className="text-2xl font-bold mb-8 flex items-center gap-3">
                <Shield className="text-sky-400" /> পার্থক্য কোথায়?
              </h3>
              <div className="space-y-6">
                <div className="bg-red-500/5 border border-red-500/20 rounded-xl p-5">
                  <p className="text-red-400 font-bold mb-3 uppercase tracking-widest text-sm">অন্যান্য প্রোডাক্ট</p>
                  <ul className="space-y-2 text-slate-400">
                    {['কৃত্রিম উপাদান ও কেমিক্যাল ব্যবহার', 'স্বল্পস্থায়ী ফলাফল', 'কোনো গ্যারান্টি নেই'].map((item, i) => (
                      <li key={i} className="flex gap-2 items-center"><X size={16} className="text-red-500/50 shrink-0" /> {item}</li>
                    ))}
                  </ul>
                </div>
                <div className="bg-sky-500/5 border border-sky-500/30 rounded-xl p-5 relative overflow-hidden">
                  <div className="absolute top-0 right-0 w-32 h-32 bg-sky-500/10 blur-2xl rounded-full"></div>
                  <p className="text-sky-400 font-bold mb-3 uppercase tracking-widest text-sm">আমাদের প্রোডাক্ট</p>
                  <ul className="space-y-2 text-slate-200">
                    {['১০০% সার্টিফাইড প্রাকৃতিক উপাদান', 'দীর্ঘস্থায়ী স্বাস্থ্য সুবিধা', '৩০ দিনের মানিব্যাক গ্যারান্টি'].map((item, i) => (
                      <li key={i} className="flex gap-2 items-center"><Check size={16} className="text-sky-400 shrink-0" /> {item}</li>
                    ))}
                  </ul>
                </div>
              </div>
            </GlassCard>
          </div>
        </div>
      </section>

      {/* ===== ৪. KEY BENEFITS ===== */}
      <section id="benefits" className="py-14 md:py-24 relative z-10">
        <div className="max-w-6xl mx-auto px-4 md:px-6">
          <div className="text-center mb-20">
            <h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-slate-500">
              {product.landingBenefitsTitle || 'মূল উপকারিতা'}
            </h2>
            <p className="text-slate-400 mt-4 text-lg font-light">{product.landingBenefitsSubtitle || 'প্রকৃতি ও বিজ্ঞানের অনন্য সমন্বয়'}</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
            {features.map((f: any, i: number) => {
              const Icon = IconMap[f.icon] || Sparkles;
              return (
                <GlassCard key={i} className="p-6 hover:border-sky-500/30 hover:shadow-[0_0_20px_rgba(56,189,248,0.1)] transition-all group text-center">
                  <div className="w-14 h-14 rounded-2xl bg-white/5 border border-sky-500/20 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform group-hover:bg-sky-500/10">
                    <Icon size={28} className="text-sky-400" />
                  </div>
                  <div className="text-sky-400 font-mono text-xs tracking-widest mb-2">0{i + 1}</div>
                  <h3 className="font-bold text-lg mb-2">{f.title}</h3>
                  <p className="text-slate-400 text-sm font-light">{f.desc}</p>
                </GlassCard>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৫. PRODUCT DETAILS ===== */}
      <section className="py-12 md:py-12 md:py-20 relative z-10 border-y border-white/5 bg-slate-900/20 backdrop-blur-3xl">
        <div className="max-w-5xl mx-auto px-4 md:px-6">
          <div className="text-center mb-14">
            <h2 className="text-4xl font-bold">পণ্যের বিস্তারিত তথ্য</h2>
            <p className="text-slate-400 mt-3 font-light">জানুন কেন আমাদের পণ্য সেরা</p>
          </div>
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="relative flex justify-center">
              <div className="absolute inset-0 bg-gradient-to-r from-sky-400/20 to-indigo-500/20 blur-3xl opacity-30 rounded-full"></div>
              <img src={product.image} alt={product.name} className="relative z-10 w-64 h-64 object-contain drop-shadow-[0_20px_40px_rgba(0,0,0,0.9)]" />
            </div>
            <div className="space-y-4">
              {[
                { 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-white/5">
                  <span className="text-slate-500 font-medium">{item.label}</span>
                  <span className="font-bold text-sky-400">{item.value}</span>
                </div>
              ))}
              <a href="#order" className="w-full mt-4 py-4 bg-sky-500 text-slate-900 font-black text-lg rounded-2xl flex items-center justify-center gap-3 hover:bg-sky-400 transition-all">
                <ShoppingCart size={20} /> এখনই কিনুন
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ৬. SOCIAL PROOF ===== */}
      <section id="reviews" className="py-14 md:py-24 relative z-10">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="flex flex-col md:flex-row justify-between items-end mb-12 border-b border-white/10 pb-6 gap-6">
            <div>
              <h2 className="text-4xl font-bold mb-2">গ্রাহকের মন্তব্য</h2>
              <p className="text-slate-400 font-light">হাজারো মানুষ পরিবর্তন অনুভব করেছেন</p>
            </div>
            <div className="flex items-center gap-2">
              {[...Array(5)].map((_, i) => <Star key={i} className="text-yellow-400 fill-yellow-400" size={20} />)}
              <span className="ml-2 font-bold text-white text-lg">4.9/5</span>
            </div>
          </div>

          <div className="flex overflow-x-auto gap-6 pb-8 snap-x" style={{ scrollbarWidth: 'none' }}>
            {reviews.map((r, i) => (
              <GlassCard key={i} className="min-w-[300px] md:min-w-[380px] flex-shrink-0 p-8 snap-start">
                <Quote className="text-sky-400/40 mb-6 w-10 h-10" />
                <p className="text-lg text-slate-300 font-light mb-8 italic">"{r.text}"</p>
                <div className="flex items-center justify-between mt-auto">
                  <div className="flex items-center gap-4">
                    <img src={r.avatar} className="w-14 h-14 rounded-full border-2 border-white/20" alt="avatar" />
                    <div>
                      <h4 className="font-bold text-white">{r.name}</h4>
                      <span className="text-xs tracking-widest text-sky-400 uppercase">{(r as any).location}</span>
                    </div>
                  </div>
                  <div className="flex gap-1">
                    {[...Array(r.rating || 5)].map((_, j) => <Star key={j} className="text-yellow-400 fill-yellow-400" size={14} />)}
                  </div>
                </div>
                <div className="mt-4 flex items-center gap-2 text-xs font-bold text-sky-400/70 border-t border-white/5 pt-4">
                  <BadgeCheck size={14} /> যাচাইকৃত ক্রেতা
                </div>
              </GlassCard>
            ))}
          </div>

          <div className="text-center mt-8">
            <a href="#order" className="inline-flex items-center gap-3 px-10 py-4 rounded-2xl bg-sky-500/20 border border-sky-500/30 text-sky-400 font-bold hover:bg-sky-500 hover:text-slate-900 transition-all">
              <ShoppingCart size={18} /> আমিও অর্ডার করতে চাই
            </a>
          </div>
        </div>
      </section>

      {/* ===== ৭. OFFER / PRICING ===== */}
      <section className="py-10 md:py-16 relative z-10 border-y border-white/5 bg-gradient-to-r from-sky-900/20 to-indigo-900/20 backdrop-blur-3xl">
        <div className="max-w-4xl mx-auto px-4 md:px-6 text-center">
          <div className="inline-block px-6 py-3 rounded-full border border-red-500/30 bg-red-500/10 text-red-400 font-bold mb-8">
            ⚡ সীমিত সময়ের অফার!
          </div>
          <h2 className="text-3xl md:text-5xl font-bold mb-6">অফার শেষ হওয়ার আগেই নিন!</h2>
          {/* Countdown */}
          <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}>
                <GlassCard className="px-6 py-4 text-center rounded-2xl">
                  <div className="text-4xl font-mono font-black text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-indigo-400">
                    {String(t.val).padStart(2, '0')}
                  </div>
                  <div className="text-xs font-bold text-slate-500 tracking-widest uppercase mt-1">{t.label}</div>
                </GlassCard>
                {i < 2 && <span className="text-3xl font-black text-sky-400/50">:</span>}
              </React.Fragment>
            ))}
          </div>
          <div className="flex items-baseline justify-center gap-6 mb-8">
            <span className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-indigo-400">৳{product.price}</span>
            <span className="text-2xl text-slate-500 line-through font-bold">৳{Math.round(product.price * 1.4)}</span>
          </div>
          <a href="#packages" className="inline-flex items-center gap-3 px-12 py-5 bg-sky-500 text-slate-900 font-black text-xl rounded-2xl hover:bg-sky-400 transition-all shadow-[0_10px_30px_rgba(56,189,248,0.3)]">
            প্যাকেজ দেখুন <ArrowRight size={24} />
          </a>
        </div>
      </section>

      {/* ===== ৮. PACKAGE SELECTION ===== */}
      <section id="packages" className="py-14 md:py-24 relative z-10">
        <div className="max-w-5xl mx-auto px-4 md:px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-indigo-400">
              প্যাকেজ নির্বাচন
            </h2>
            <p className="text-slate-400 mt-4 font-light">বেশি নিলে বেশি সাশ্রয়!</p>
          </div>
          <div className="space-y-6">
            {(Object.entries(pkgData) as [string, typeof pkgData.single][]).map(([key, pkg]) => {
              const isSelected = selectedPackage === key;
              return (
                <div
                  key={key}
                  onClick={() => setSelectedPackage(key)}
                  className={`relative overflow-hidden cursor-pointer backdrop-blur-xl rounded-[2rem] border transition-all duration-300 ${isSelected ? 'bg-sky-900/20 border-sky-400/50 shadow-[0_0_30px_rgba(56,189,248,0.2)]' : 'bg-white/5 border-white/10 hover:bg-white/10'}`}
                >
                  {isSelected && <div className="absolute left-0 top-0 bottom-0 w-1.5 bg-sky-400 rounded-l-full"></div>}
                  <div className="p-6 md:p-8 flex flex-col md:flex-row items-center justify-between gap-8">
                    <div className="flex items-center gap-6 text-center md:text-left w-full md:w-auto">
                      <div className="w-20 h-20 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center shrink-0 overflow-hidden">
                        {product.image
                          ? <img src={product.image} alt={pkg.label} className="w-full h-full object-contain" />
                          : <span className="text-3xl">{key === 'single' ? '📦' : key === 'combo' ? '🎁' : '💎'}</span>
                        }
                      </div>
                      <div>
                        <div className="flex items-center gap-3 mb-1">
                          <h3 className="text-2xl font-bold text-white">{pkg.label}</h3>
                          {(pkg as any).popular && <span className="bg-sky-500/20 text-sky-400 border border-sky-500/30 text-xs px-2 py-1 rounded font-bold">POPULAR</span>}
                        </div>
                        <div className="text-slate-400 text-sm">{pkg.qty} প্রোডাক্ট • সাশ্রয় ৳{pkg.saving}</div>
                      </div>
                    </div>

                    <div className="flex flex-col md:flex-row items-center gap-8 w-full md:w-auto">
                      <div className="text-center">
                        <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-indigo-400">৳{pkg.price}</div>
                        <div className="text-slate-500 line-through text-sm">৳{pkg.original}</div>
                      </div>
                      <button className={`w-full md:w-36 py-3 rounded-xl font-bold transition-colors ${isSelected ? 'bg-sky-500 text-slate-900' : 'bg-white/10 text-white hover:bg-sky-500/20 hover:text-sky-400'}`}>
                        {isSelected ? '✓ সিলেক্টেড' : 'সিলেক্ট করুন'}
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৯. ORDER FORM ===== */}
      <section id="order" className="py-14 md:py-24 relative z-10 border-t border-white/10 bg-black/40">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="grid lg:grid-cols-12 gap-12">

            {/* ===== ১০. TRUST ELEMENTS (Left) ===== */}
            <div className="lg:col-span-5 space-y-5">
              <h2 className="text-3xl font-bold mb-6">কেন নিশ্চিন্তে অর্ডার করবেন?</h2>
              {[
                { icon: Truck, title: 'ক্যাশ অন ডেলিভারি', desc: 'পণ্য পেয়ে টাকা দিন। কোনো অগ্রিম পেমেন্ট নেই।', color: 'sky' },
                { icon: RotateCcw, title: '৩০ দিনের মানিব্যাক', desc: 'সন্তুষ্ট না হলে পুরো টাকা ফেরত — কোনো প্রশ্ন ছাড়া।', color: 'indigo' },
                { icon: Shield, title: '১০০% অরিজিনাল', desc: 'সরাসরি উৎপাদনকারী থেকে আপনার দরজায়।', color: 'green' },
                { icon: Headphones, title: '২৪/৭ সাপোর্ট', desc: 'যেকোনো সমস্যায় আমাদের টিম সবসময় পাশে আছে।', color: 'purple' },
              ].map((t, i) => (
                <GlassCard key={i} className={`p-5 flex items-start gap-4 hover:border-sky-500/30 transition-all`}>
                  <div className="w-12 h-12 rounded-xl bg-sky-500/10 border border-sky-500/20 flex items-center justify-center shrink-0">
                    <t.icon size={22} className="text-sky-400" />
                  </div>
                  <div>
                    <h4 className="font-bold text-white mb-1">{t.title}</h4>
                    <p className="text-slate-400 text-sm font-light">{t.desc}</p>
                  </div>
                </GlassCard>
              ))}
              <GlassCard className="p-6 flex items-center gap-4 border-indigo-500/20">
                <div className="bg-indigo-500/20 p-3 rounded-full">
                  <Phone className="text-indigo-400" />
                </div>
                <div>
                  <p className="text-sm text-slate-400 font-light">সরাসরি কথা বলুন</p>
                  <a href={`tel:${contactPhone}`} className="text-xl font-bold text-white hover:text-sky-400 transition-colors">{contactPhone}</a>
                </div>
              </GlassCard>
            </div>

            {/* Order Form (Right) */}
            <div className="lg:col-span-7">
              <GlassCard className="p-8 md:p-12 shadow-2xl relative overflow-hidden">
                <div className="absolute top-0 right-0 w-64 h-64 bg-sky-500/10 blur-[100px] rounded-full pointer-events-none"></div>
                <h2 className="text-3xl font-bold mb-2">অর্ডার কনফার্ম করুন</h2>
                <p className="text-slate-400 mb-8 font-light">ফর্মটি পূরণ করুন এবং আমাদের প্রতিনিধি যোগাযোগ করবে।</p>
                <InlineOrderForm product={product} selectedSize={selectedPackage} addOrder={addOrder} settings={settings} />
              </GlassCard>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ১১. FAQ SECTION ===== */}
      <section className="py-12 md:py-20 relative z-10">
        <div className="max-w-3xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-4xl font-bold">সাধারণ জিজ্ঞাসা</h2>
            <p className="text-slate-400 mt-4 font-light">আপনার মনের প্রশ্নের উত্তর জেনে নিন</p>
          </div>
          <div className="space-y-4">
            {faqs.map((faq: any, idx: number) => (
              <GlassCard key={idx} className="overflow-hidden hover:border-sky-500/30 transition-all">
                <button
                  onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                  className="w-full flex justify-between items-center p-6 text-left font-bold text-lg"
                >
                  {faq.q}
                  <ChevronDown className={`transition-transform duration-300 shrink-0 ${openFaq === idx ? 'rotate-180 text-sky-400' : 'text-slate-500'}`} />
                </button>
                {openFaq === idx && (
                  <div className="p-6 pt-0 text-slate-400 font-light border-t border-white/5">
                    {faq.a}
                  </div>
                )}
              </GlassCard>
            ))}
          </div>
        </div>
      </section>

      {/* ===== ১২. FINAL CTA ===== */}
      <section className="py-12 md:py-20 relative z-10 border-t border-white/5">
        <div className="max-w-4xl mx-auto px-4 md:px-6 text-center">
          <div className="absolute inset-0 pointer-events-none">
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-96 bg-sky-500/10 blur-[120px] rounded-full"></div>
          </div>
          <div className="relative z-10">
            <div className="text-6xl mb-8">🚀</div>
            <h2 className="text-3xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
              আর অপেক্ষা নয়! <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-indigo-400">আজই শুরু করুন</span>
            </h2>
            <p className="text-slate-400 text-xl font-light mb-12 leading-relaxed">
              হাজারো মানুষ উপকৃত হয়েছেন। এখন আপনার পালা।<br />
              সীমিত সময়ের এই অফার হাতছাড়া করবেন না।
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
              <a href="#order" className="group relative px-14 py-5 rounded-2xl bg-sky-500 hover:bg-sky-400 text-slate-900 font-black text-xl overflow-hidden transition-all shadow-[0_10px_40px_rgba(56,189,248,0.4)] flex items-center gap-3">
                <ShoppingCart size={24} /> {product.landingCtaTitle || 'এখনই অর্ডার করুন'}
                <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out"></div>
              </a>
              <a href={`tel:${contactPhone}`} className="px-10 py-5 border border-white/20 text-white font-bold text-lg rounded-2xl hover:bg-white/5 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-slate-500 text-sm"><CheckCircle2 size={16} className="text-sky-400" /> ক্যাশ অন ডেলিভারি</span>
              <span className="flex items-center gap-2 text-slate-500 text-sm"><CheckCircle2 size={16} className="text-sky-400" /> ৩০ দিন গ্যারান্টি</span>
              <span className="flex items-center gap-2 text-slate-500 text-sm"><CheckCircle2 size={16} className="text-sky-400" /> ফ্রি ডেলিভারি</span>
            </div>
          </div>
        </div>
      </section>

      {/* ===== FOOTER ===== */}
      <footer className="border-t border-white/5 py-12 relative z-10 bg-black/60">
        <div className="max-w-7xl mx-auto px-4 md:px-6 flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="flex items-center gap-3">
            <Zap className="text-slate-600" />
            <span className="font-bold text-xl tracking-widest text-slate-400">{siteName}</span>
          </div>
          <div className="flex gap-8 text-slate-500 text-sm">
            <div className="flex items-center gap-2"><Truck size={16} /> ফাস্ট ডেলিভারি</div>
            <div className="flex items-center gap-2"><ShieldCheck size={16} /> নিরাপদ চেকআউট</div>
          </div>
          <p className="text-slate-600 text-sm">© {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-[#0a1628] border-t border-sky-500/20 px-4 pt-2 pb-5">
        <a href="#order" className="w-full bg-sky-500 text-slate-900 py-4 rounded-2xl flex items-center justify-center gap-3 font-black text-lg shadow-[0_10px_30px_rgba(56,189,248,0.4)] backdrop-blur-md">
          <ShoppingCart size={20} /> {product.landingCtaTitle || 'অর্ডার করতে ক্লিক করুন'}
        </a>
      </div>

    </div>
  );
};

export default ProductLandingPage05;