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, AlertTriangle, CheckCircle2
} from 'lucide-react';
import { pushToDataLayer } from '../utils/tagmanager';
import InlineOrderForm from './InlineOrderForm';

interface ProductLandingPage04Props {
  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,
  shieldcheck: ShieldCheck, rotatecw: RotateCcw,
  alerttriangle: AlertTriangle,
};

const ProductLandingPage04: React.FC<ProductLandingPage04Props> = ({
  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: 5, minutes: 47, seconds: 33 });

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

  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: 'হ্যাঁ, সারাদেশে কড (COD) সুবিধা আছে।' },
    { q: 'রিটার্ন পলিসি?', a: '৩০ দিনের মানিব্যাক গ্যারান্টি। সন্তুষ্ট না হলে পুরো টাকা ফেরত।' },
  ];

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

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

  /* Reusable Neo-Brutalist styles */
  const hardShadow = 'shadow-[8px_8px_0px_#000]';
  const hardShadowSm = 'shadow-[4px_4px_0px_#000]';
  const brutalistCard = `border-4 border-black ${hardShadow}`;

  return (
    <div className="min-h-screen text-gray-900 selection:bg-yellow-400 selection:text-black font-sans pb-20 md:pb-0" style={{ background: '#ffffff' }}>

      {/* ===== ১. HERO SECTION ===== */}
      <section className="bg-[linear-gradient(45deg,#facc15_50%,#fef08a_50%)] border-b-8 border-black">
        <div className="max-w-7xl mx-auto px-4 md:px-6 py-12 md:py-20">
          <div className="text-center mb-10">
            <span className={`inline-block bg-black text-white px-6 py-2 text-sm font-black uppercase tracking-widest border-2 border-white ${hardShadowSm} transform -rotate-1`}>
              🔥 স্টক সীমিত — আজই নিন!
            </span>
          </div>
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="space-y-8 relative z-10">
              <h1 className="text-4xl md:text-6xl lg:text-7xl font-black uppercase tracking-tighter leading-[0.9] text-black">
                {product.landingTitle || product.nameBangla || product.name}
              </h1>
              <p className={`text-base md:text-xl text-black font-bold leading-relaxed bg-white/70 p-4 border-2 border-black ${hardShadowSm}`}>
                {product.landingSubtitle || product.highlight || '১০০% প্রাকৃতিক উপাদান। শক্তি, স্বাস্থ্য ও সুস্থতার নির্ভরযোগ্য সঙ্গী।'}
              </p>

              {/* Price block */}
              <div className={`flex flex-wrap items-center gap-6 bg-black p-6 border-4 border-white ${hardShadow} -rotate-1`}>
                <div className="text-5xl font-black text-yellow-400">৳{product.price}</div>
                <div className="flex flex-col">
                  <div className="text-gray-400 line-through text-xl font-black">৳{Math.round(product.price * 1.4)}</div>
                  <div className="text-white font-black uppercase tracking-widest text-sm bg-red-600 px-3 py-1">৪০% ছাড়</div>
                </div>
              </div>

              {/* Countdown Timer */}
              <div className="flex items-center gap-4">
                {[
                  { val: timer.hours, label: 'ঘণ্টা', red: false },
                  { val: timer.minutes, label: 'মিনিট', red: false },
                  { val: timer.seconds, label: 'সেকেন্ড', red: true },
                ].map((t, i) => (
                  <React.Fragment key={i}>
                    <div className={`bg-white border-2 border-black p-3 text-center ${hardShadowSm}`}>
                      <div className={`text-2xl md:text-3xl font-black ${t.red ? 'text-red-600' : ''}`}>{String(t.val).padStart(2, '0')}</div>
                      <div className={`text-xs font-black uppercase ${t.red ? 'text-red-600' : ''}`}>{t.label}</div>
                    </div>
                    {i < 2 && <div className="text-2xl md:text-3xl font-black">:</div>}
                  </React.Fragment>
                ))}
              </div>

              {/* Trust badges */}
              <div className="flex flex-wrap gap-3">
                {['ক্যাশ অন ডেলিভারি', '৩০ দিন গ্যারান্টি', 'ফ্রি ডেলিভারি'].map((b, i) => (
                  <span key={i} className={`flex items-center gap-2 bg-white border-2 border-black px-4 py-2 font-black text-sm ${hardShadowSm}`}>
                    <Check size={16} className="text-black" /> {b}
                  </span>
                ))}
              </div>

              <a href="#order" className={`w-full sm:w-auto inline-flex items-center justify-center gap-4 bg-black text-white font-black text-base md:text-2xl px-6 md:px-12 py-4 md:py-6 uppercase tracking-wider border-2 border-white ${hardShadow} hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[4px_4px_0px_#fff] transition-all`}>
                {product.landingCtaTitle || 'অর্ডার করুন'} <ArrowRight size={28} />
              </a>
            </div>

            {/* Product Image */}
            <div className="relative">
              <div className="absolute inset-0 bg-black translate-x-6 translate-y-6 border-4 border-white"></div>
              <div className={`bg-white border-4 border-black p-8 relative z-10 hover:-translate-y-2 hover:-translate-x-2 transition-transform duration-300`}>
                <img src={product.image} alt={product.name} className="w-full max-h-[500px] object-contain drop-shadow-2xl" />
                <div className={`absolute -top-8 -right-8 bg-red-600 w-32 h-32 rounded-full flex items-center justify-center border-4 border-black ${hardShadowSm} rotate-12 animate-pulse`}>
                  <div className="text-center text-white">
                    <div className="text-sm font-black uppercase tracking-widest">সেইভ</div>
                    <div className="text-3xl font-black">40%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ২. PROBLEM SECTION ===== */}
      <section className="py-12 md:py-20 bg-black text-white">
        <div className="max-w-6xl mx-auto px-4 md:px-6">
          <div className="text-center mb-14">
            <span className="inline-block bg-red-600 text-white px-6 py-2 text-sm font-black uppercase tracking-widest border-2 border-white mb-6">
              ⚠️ এই সমস্যাগুলো কি আপনার?
            </span>
            <h2 className="text-3xl md:text-5xl lg:text-6xl font-black uppercase tracking-tighter text-yellow-400 drop-shadow-[4px_4px_0px_#ffffff]">
              {product.landingProblemTitle || 'আপনি কি এই কষ্টে ভুগছেন?'}
            </h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {problems.map((p: any, i: number) => {
              const Icon = IconMap[p.icon] || AlertTriangle;
              return (
                <div key={i} className={`bg-gray-900 border-4 border-red-600 p-8 ${hardShadow} hover:-translate-y-2 transition-transform`}>
                  <div className="bg-red-600 w-16 h-16 flex items-center justify-center border-4 border-white mb-6">
                    <Icon size={32} className="text-white" />
                  </div>
                  <h3 className="font-black text-2xl text-white uppercase mb-3">{p.text}</h3>
                  <p className="font-bold text-gray-400 text-lg">{p.subtext}</p>
                </div>
              );
            })}
          </div>
          <p className="text-center mt-12 text-2xl font-black text-white uppercase tracking-wide">
            😔 এই সমস্যাগুলো আপনার জীবন কঠিন করছে... কিন্তু <span className="text-yellow-400">সমাধান আছে!</span>
          </p>
        </div>
      </section>

      {/* ===== ৩. SOLUTION SECTION ===== */}
      <section className="py-12 md:py-20 bg-white border-y-8 md:border-y-8 border-black">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="grid lg:grid-cols-2 gap-16 items-start">
            <div>
              <span className={`inline-block bg-yellow-400 text-black px-6 py-2 text-sm font-black uppercase tracking-widest border-2 border-black ${hardShadowSm} mb-8`}>
                ✅ সমাধান এসে গেছে!
              </span>
              <h2 className="text-3xl md:text-5xl font-black uppercase tracking-tighter text-black mb-6 leading-tight">
                {product.landingSolutionName || <>পরিচয় করুন <span className="text-yellow-400 bg-black px-2">{product.nameBangla || product.name}</span> এর সাথে</>}
              </h2>
              <p className={`text-xl text-black font-bold leading-relaxed bg-yellow-100 p-6 border-2 border-black ${hardShadowSm} mb-10`}>
                {product.landingSolutionDesc || 'প্রকৃতির সেরা উপাদান থেকে তৈরি। কোনো কৃত্রিম উপাদান নেই, পার্শ্বপ্রতিক্রিয়া নেই — শুধু দ্রুত ও কার্যকর ফলাফল।'}
              </p>
              <div className="space-y-6">
                {solutions.map((s: any, i: number) => {
                  const Icon = IconMap[s.icon] || Check;
                  return (
                    <div key={i} className={`flex items-start gap-6 bg-white border-4 border-black p-6 ${hardShadow} hover:translate-x-2 transition-transform`}>
                      <div className={`bg-black text-white p-4 flex-shrink-0 shadow-[4px_4px_0px_#facc15]`}>
                        <Icon size={32} />
                      </div>
                      <div>
                        <p className="font-black text-2xl uppercase mb-2">{s.text || s.title}</p>
                        <p className="font-bold text-gray-600 text-lg">{s.subtext || s.desc}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Before/After Comparison */}
            <div className="space-y-6">
              <div className={`bg-gray-900 border-4 border-gray-700 p-6 ${hardShadow}`}>
                <h3 className="text-xl font-black uppercase text-gray-400 mb-6 flex items-center gap-4 border-b-2 border-gray-700 pb-4">
                  <div className="bg-gray-700 p-2"><X size={24} className="text-red-500" /></div> সাধারণ পণ্য
                </h3>
                <ul className="space-y-4">
                  {['কৃত্রিম রং ও প্রিজার্ভেটিভ', 'মান নিয়ন্ত্রণহীন উৎপাদন', 'কোনো গ্যারান্টি নেই'].map((item, i) => (
                    <li key={i} className="flex items-center gap-4 text-gray-400 font-bold text-lg">
                      <X size={20} className="text-red-500 flex-shrink-0" /> {item}
                    </li>
                  ))}
                </ul>
              </div>
              <div className={`bg-yellow-400 border-4 border-black p-6 ${hardShadow} text-black`}>
                <h3 className="text-2xl font-black uppercase mb-6 flex items-center gap-4 border-b-4 border-black pb-4">
                  <div className="bg-black p-2"><Check size={28} className="text-yellow-400" /></div> আমাদের পণ্য
                </h3>
                <ul className="space-y-4">
                  {['১০০% প্রাকৃতিক উপাদান', 'ISO সার্টিফাইড মান', '৩০ দিন মানিব্যাক গ্যারান্টি'].map((item, i) => (
                    <li key={i} className="flex items-center gap-4 font-black text-lg">
                      <Check size={24} className="text-black flex-shrink-0" /> {item}
                    </li>
                  ))}
                </ul>
              </div>

              {/* CTA inside solution */}
              <a href="#order" className={`flex items-center justify-center gap-4 bg-black text-white font-black text-xl px-8 py-5 uppercase tracking-wider border-4 border-black ${hardShadow} hover:bg-yellow-400 hover:text-black transition-colors`}>
                <ShoppingCart size={24} /> এখনই কিনুন
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ৪. KEY BENEFITS ===== */}
      <section id="benefits" className="py-12 md:py-20 bg-white border-b-8 border-black overflow-hidden relative">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="text-center mb-20 relative z-10">
            <h2 className="text-3xl md:text-5xl lg:text-6xl font-black uppercase tracking-tighter text-black drop-shadow-[2px_2px_0px_#facc15] md:drop-shadow-[4px_4px_0px_#facc15]">
              {product.landingBenefitsTitle || 'মূল উপকারিতা'}
            </h2>
            <p className="text-xl font-bold text-gray-600 mt-4">{product.landingBenefitsSubtitle || 'কেন এটি আপনার দরকার?'}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((b: any, idx: number) => {
              const Icon = IconMap[b.icon] || Sparkles;
              return (
                <div key={idx} className={`bg-gray-50 border-4 border-black p-8 hover:bg-yellow-400 group transition-colors ${hardShadow}`}>
                  <div className={`w-16 h-16 bg-white border-4 border-black flex items-center justify-center mb-6 ${hardShadowSm} group-hover:-translate-y-2 transition-transform`}>
                    <Icon size={32} className="text-black" />
                  </div>
                  <h3 className="font-black text-2xl text-black mb-4 uppercase">{b.title}</h3>
                  <p className="text-xl text-gray-800 font-bold">{b.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৫. PRODUCT DETAILS ===== */}
      <section className="py-12 md:py-12 md:py-20 bg-black text-white border-b-8 border-yellow-400">
        <div className="max-w-5xl mx-auto px-4 md:px-6">
          <h2 className="text-3xl md:text-5xl font-black uppercase tracking-tighter text-yellow-400 drop-shadow-[2px_2px_0px_#fff] md:drop-shadow-[4px_4px_0px_#fff] text-center mb-8 md:mb-14">
            পণ্যের বিস্তারিত
          </h2>
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="relative">
              <div className="absolute inset-0 bg-yellow-400 translate-x-6 translate-y-6 border-4 border-white"></div>
              <div className={`bg-white border-4 border-black p-8 relative z-10`}>
                <img src={product.image} alt={product.name} className="w-full h-64 object-contain drop-shadow-xl" />
              </div>
            </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-gray-800">
                  <span className="text-gray-400 font-bold uppercase tracking-wide text-sm">{item.label}</span>
                  <span className="font-black text-yellow-400">{item.value}</span>
                </div>
              ))}
              <a href="#order" className={`flex items-center justify-center gap-3 w-full mt-4 py-5 bg-yellow-400 text-black font-black text-xl uppercase tracking-wider border-4 border-white ${hardShadow} hover:bg-white transition-colors`}>
                <ShoppingCart size={22} /> এখনই কিনুন
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ৬. SOCIAL PROOF ===== */}
      <section id="reviews" className="py-20 bg-white border-b-8 border-black">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl lg:text-6xl font-black uppercase tracking-tighter text-black drop-shadow-[2px_2px_0px_#facc15] md:drop-shadow-[4px_4px_0px_#facc15]">
              গ্রাহকদের প্রতিক্রিয়া
            </h2>
            <p className="text-xl font-bold text-gray-600 mt-4">হাজারো সন্তুষ্ট গ্রাহকের আস্থার প্রতীক</p>
          </div>
          <div className="grid md:grid-cols-3 gap-10">
            {reviews.map((r, idx) => (
              <div key={idx} className={`bg-gray-50 border-4 border-black p-8 relative ${hardShadow} hover:-translate-y-2 transition-transform`}>
                <div className={`absolute -top-6 -right-6 bg-yellow-400 border-4 border-black w-14 h-14 flex items-center justify-center rotate-12 ${hardShadowSm}`}>
                  <Quote size={24} className="text-black" />
                </div>
                <div className="flex gap-2 mb-6">
                  {[...Array(r.rating || 5)].map((_, j) => <Star key={j} size={24} className="fill-black text-black" />)}
                </div>
                <p className="text-xl font-bold text-black mb-8 italic">"{r.text}"</p>
                <div className="flex items-center gap-4">
                  <img src={r.avatar} alt={r.name} className={`w-16 h-16 border-4 border-black ${hardShadowSm}`} />
                  <div>
                    <p className="font-black text-xl uppercase">{r.name}</p>
                    <p className="text-gray-500 font-bold uppercase tracking-wider text-sm">{(r as any).location || 'বাংলাদেশ'}</p>
                    <span className={`inline-flex items-center gap-1 text-xs font-black bg-yellow-400 border border-black px-2 py-0.5 mt-1`}>
                      <BadgeCheck size={12} /> যাচাইকৃত
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="text-center mt-12">
            <a href="#order" className={`inline-flex items-center gap-3 bg-black text-white font-black text-xl px-10 py-5 uppercase tracking-wider border-4 border-black ${hardShadow} hover:bg-yellow-400 hover:text-black transition-colors`}>
              <ShoppingCart size={22} /> আমিও অর্ডার করতে চাই
            </a>
          </div>
        </div>
      </section>

      {/* ===== ৭. OFFER / PRICING ===== */}
      <section className="py-16 bg-yellow-400 border-b-8 border-black">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <span className={`inline-block bg-red-600 text-white px-6 py-2 text-sm font-black uppercase tracking-widest border-2 border-black ${hardShadowSm} mb-8`}>
            ⚡ সীমিত সময়ের অফার!
          </span>
          <h2 className="text-5xl md:text-6xl font-black uppercase tracking-tighter text-black mb-8">
            অফার শেষ হওয়ার আগেই নিন!
          </h2>
          <div className="flex items-center justify-center gap-4 mb-10">
            {[
              { val: timer.hours, label: 'ঘণ্টা' },
              { val: timer.minutes, label: 'মিনিট' },
              { val: timer.seconds, label: 'সেকেন্ড', red: true },
            ].map((t: any, i) => (
              <React.Fragment key={i}>
                <div className={`bg-black text-white border-4 border-black p-4 text-center ${hardShadow}`}>
                  <div className={`text-5xl font-black font-mono ${t.red ? 'text-red-500' : 'text-yellow-400'}`}>{String(t.val).padStart(2, '0')}</div>
                  <div className="text-xs font-black uppercase text-gray-400 mt-1">{t.label}</div>
                </div>
                {i < 2 && <div className="text-5xl font-black text-black">:</div>}
              </React.Fragment>
            ))}
          </div>
          <div className="flex items-baseline justify-center gap-6 mb-8">
            <span className="text-6xl font-black text-black">৳{product.price}</span>
            <span className="text-2xl text-gray-700 line-through font-black">৳{Math.round(product.price * 1.4)}</span>
          </div>
          <a href="#packages" className={`inline-flex items-center gap-3 bg-black text-white font-black text-base md:text-2xl px-6 md:px-12 py-4 md:py-6 uppercase tracking-wider border-4 border-black ${hardShadow} hover:bg-white hover:text-black transition-colors`}>
            প্যাকেজ দেখুন <ArrowRight size={28} />
          </a>
        </div>
      </section>

      {/* ===== ৮. PACKAGE SELECTION ===== */}
      <section id="packages" className="py-20 bg-yellow-400 border-b-8 border-black">
        <div className="max-w-6xl mx-auto px-4 md:px-6">
          <div className="text-center mb-20">
            <h2 className="text-5xl md:text-6xl font-black uppercase tracking-tighter text-black drop-shadow-[4px_4px_0px_#ffffff]">
              আপনার প্যাকেজ বেছে নিন
            </h2>
            <p className="text-xl font-black text-gray-800 uppercase mt-4 tracking-widest">বেশি নিলে বেশি সাশ্রয়!</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {(Object.entries(pkgData) as [string, typeof pkgData.single][]).map(([key, pkg]) => {
              const isSelected = selectedPackage === key;
              return (
                <div
                  key={key}
                  onClick={() => setSelectedPackage(key)}
                  className={`cursor-pointer border-4 bg-white transition-transform ${isSelected ? `border-black ${hardShadow} -translate-y-4 z-10` : `border-black shadow-[6px_6px_0px_#000] hover:-translate-y-2`}`}
                >
                  {(pkg as any).popular && (
                    <div className="bg-red-600 text-white text-center py-2 text-sm font-black uppercase tracking-widest border-b-4 border-black">🔥 জনপ্রিয়</div>
                  )}
                  {(pkg as any).best && (
                    <div className="bg-black text-yellow-400 text-center py-2 text-sm font-black uppercase tracking-widest border-b-4 border-black">👑 সেরা ডিল</div>
                  )}
                  <div className="p-10 text-center">
                    <div className="flex justify-center mb-6 relative">
                      {product.image && <img src={product.image} alt={pkg.label} className="w-32 h-32 object-contain drop-shadow-md" />}
                      <div className="absolute -top-4 -right-4 text-4xl">{pkg.emoji}</div>
                    </div>
                    <h3 className="text-3xl font-black text-black uppercase tracking-tighter mb-2">{pkg.label}</h3>
                    <div className="text-5xl font-black text-black my-6 bg-yellow-400 py-2 border-y-4 border-black">৳{pkg.price}</div>
                    <div className="flex items-center justify-center gap-4 mb-8">
                      <span className="text-gray-500 line-through text-2xl font-bold">৳{pkg.original}</span>
                      <span className={`bg-black text-white font-black px-3 py-1 text-sm uppercase`}>৳{pkg.saving} সাশ্রয়</span>
                    </div>
                    <div className="space-y-4 text-left border-t-4 border-black pt-6">
                      <div className="flex items-center gap-4 font-bold text-lg"><div className="bg-yellow-400 p-1 border-2 border-black rounded-full"><Check size={16} className="text-black"/></div> অরিজিনাল</div>
                      <div className="flex items-center gap-4 font-bold text-lg"><div className="bg-yellow-400 p-1 border-2 border-black rounded-full"><Check size={16} className="text-black"/></div> ফ্রি ডেলিভারি</div>
                      {Object.keys(pkgData).indexOf(key) > 0 && <div className="flex items-center gap-4 font-bold text-lg animate-pulse"><div className="bg-black p-1 border-2 border-black rounded-full"><Gift size={16} className="text-yellow-400"/></div> ফ্রি গিফট</div>}
                    </div>
                    <button className={`w-full mt-10 py-5 font-black uppercase tracking-widest text-xl transition-all border-4 border-black ${isSelected ? `bg-black text-white shadow-[4px_4px_0px_#a0a0a0]` : `bg-white text-black hover:bg-gray-100 ${hardShadowSm}`}`}>
                      {isSelected ? '✓ সিলেক্টেড' : 'সিলেক্ট করুন'}
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৯. ORDER FORM ===== */}
      <section id="order" className="py-20 bg-white border-b-8 border-black">
        <div className="max-w-7xl mx-auto px-4 md:px-6 grid lg:grid-cols-12 gap-12">

          {/* ===== ১০. TRUST ELEMENTS ===== */}
          <div className="lg:col-span-4 space-y-6">
            <h3 className="text-3xl font-black uppercase text-black tracking-tighter">কেন নিশ্চিন্তে অর্ডার করবেন?</h3>
            {[
              { icon: Truck, label: 'ক্যাশ অন ডেলিভারি', desc: 'পণ্য পেয়ে টাকা দিন' },
              { icon: RotateCcw, label: '৩০ দিন মানিব্যাক', desc: 'সম্পূর্ণ টাকা ফেরত গ্যারান্টি' },
              { icon: ShieldCheck, label: '১০০% অরিজিনাল', desc: 'সরাসরি উৎপাদনকারী থেকে' },
              { icon: Headphones, label: '২৪/৭ সাপোর্ট', desc: 'যেকোনো সমস্যায় আমরা আছি' },
            ].map((t, i) => (
              <div key={i} className={`flex items-center gap-4 bg-gray-50 border-4 border-black p-5 ${hardShadowSm} hover:bg-yellow-50 transition-colors`}>
                <div className="bg-black p-3 flex-shrink-0">
                  <t.icon size={28} className="text-yellow-400" />
                </div>
                <div>
                  <h4 className="font-black text-lg uppercase">{t.label}</h4>
                  <p className="text-gray-600 font-bold">{t.desc}</p>
                </div>
              </div>
            ))}
            <div className={`bg-yellow-400 border-4 border-black p-6 ${hardShadow} text-center`}>
              <Phone size={32} className="mx-auto mb-3 text-black" />
              <p className="font-bold text-black mb-1 uppercase tracking-wide">সরাসরি কল করুন</p>
              <a href={`tel:${contactPhone}`} className="font-black text-2xl text-black hover:underline">{contactPhone}</a>
            </div>
          </div>

          {/* Order Form */}
          <div className="lg:col-span-8">
            <div className={`bg-black border-8 border-yellow-400 ${hardShadow}`}>
              <div className={`bg-yellow-400 p-8 border-b-8 border-black text-center flex flex-col sm:flex-row items-center justify-center gap-6`}>
                <ShoppingCart size={48} className="text-black" />
                <h2 className="text-4xl md:text-5xl font-black uppercase tracking-tighter text-black">অর্ডার কনফার্ম করুন</h2>
              </div>
              <div className="p-8 md:p-12">
                <div className={`bg-gray-900 border-4 border-gray-700 p-6 mb-10 text-center text-white`}>
                  <p className="font-bold text-gray-400 uppercase tracking-widest mb-2">আপনি সিলেক্ট করেছেন</p>
                  <div className="text-2xl font-black text-yellow-400 uppercase tracking-wider">{pkgData[selectedPackage]?.label}</div>
                  <div className="text-4xl font-black text-white mt-2">৳{pkgData[selectedPackage]?.price}</div>
                </div>
                <InlineOrderForm product={product} selectedSize={selectedPackage} addOrder={addOrder} settings={settings} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ১১. FAQ SECTION ===== */}
      <section className="py-20 bg-black border-b-8 border-yellow-400 text-white">
        <div className="max-w-3xl mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-5xl font-black uppercase tracking-tighter text-yellow-400 drop-shadow-[4px_4px_0px_#fff]">
              সাধারণ জিজ্ঞাসা
            </h2>
            <p className="text-gray-400 font-bold uppercase tracking-widest mt-4">আপনার প্রশ্নের উত্তর</p>
          </div>
          <div className="space-y-4">
            {faqs.map((faq: any, idx: number) => (
              <div key={idx} className={`bg-gray-900 border-4 border-gray-700 overflow-hidden hover:border-yellow-400 transition-colors ${hardShadowSm}`}>
                <button
                  onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                  className="w-full flex justify-between items-center p-6 text-left font-black text-lg uppercase"
                >
                  {faq.q}
                  <ChevronDown className={`transition-transform duration-300 shrink-0 ${openFaq === idx ? 'rotate-180 text-yellow-400' : 'text-gray-500'}`} />
                </button>
                {openFaq === idx && (
                  <div className="p-6 pt-0 text-gray-300 font-bold border-t border-gray-700">
                    {faq.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== ১২. FINAL CTA ===== */}
      <section className="py-20 bg-yellow-400 border-b-8 border-black">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <div className="text-8xl mb-8">🔥</div>
          <h2 className="text-5xl md:text-7xl font-black uppercase tracking-tighter text-black mb-6 leading-tight drop-shadow-[6px_6px_0px_#ffffff]">
            আর অপেক্ষা নয়! <br /> আজই অর্ডার করুন!
          </h2>
          <p className="text-2xl font-bold text-black mb-12 max-w-xl mx-auto">
            হাজারো মানুষ উপকৃত হয়েছেন। এখন আপনার পালা। স্টক শেষ হওয়ার আগেই নিন।
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
            <a href="#order" className={`inline-flex items-center gap-4 bg-black text-white font-black text-2xl px-14 py-7 uppercase tracking-wider border-4 border-black ${hardShadow} hover:bg-white hover:text-black transition-colors`}>
              <ShoppingCart size={28} /> {product.landingCtaTitle || 'এখনই অর্ডার করুন'}
            </a>
            <a href={`tel:${contactPhone}`} className={`inline-flex items-center gap-4 bg-white text-black font-black text-xl px-10 py-7 uppercase tracking-wider border-4 border-black ${hardShadowSm} hover:bg-black hover:text-white transition-colors`}>
              <Phone size={24} /> কল করুন
            </a>
          </div>
          <div className="flex flex-wrap justify-center gap-6 mt-10">
            {['ক্যাশ অন ডেলিভারি', '৩০ দিন গ্যারান্টি', 'ফ্রি ডেলিভারি', '১০০% অরিজিনাল'].map((b, i) => (
              <span key={i} className={`flex items-center gap-2 bg-black text-white border-2 border-black px-4 py-2 font-black text-sm ${hardShadowSm}`}>
                <Check size={16} className="text-yellow-400" /> {b}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FOOTER ===== */}
      <footer id="contact" className="bg-black border-t-8 border-yellow-400">
        <div className="max-w-7xl mx-auto px-4 md:px-6 py-12">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <h2 className="text-3xl font-black text-white uppercase tracking-tighter">{siteName}</h2>
            <div className="flex flex-wrap gap-6 text-gray-500 font-bold text-sm uppercase tracking-widest">
              <div className="flex items-center gap-2"><Truck size={16} className="text-yellow-400" /> ফাস্ট ডেলিভারি</div>
              <div className="flex items-center gap-2"><ShieldCheck size={16} className="text-yellow-400" /> নিরাপদ চেকআউট</div>
            </div>
            <div className={`bg-yellow-400 text-black px-6 py-3 font-black text-xl flex items-center gap-3 border-2 border-white ${hardShadowSm}`}>
              <Phone size={24} /> {contactPhone}
            </div>
          </div>
          <p className="text-gray-600 text-sm font-bold text-center mt-8 uppercase tracking-widest">
            © {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-black p-4 border-t-4 border-yellow-400 shadow-[0_-10px_20px_rgba(0,0,0,0.5)]">
        <a href="#order" className={`flex items-center justify-center gap-4 w-full bg-yellow-400 text-black font-black py-4 uppercase tracking-widest text-lg border-2 border-white ${hardShadowSm}`}>
          <ShoppingCart size={24} /> {product.landingCtaTitle || 'অর্ডার করুন'}
        </a>
      </div>

    </div>
  );
};

export default ProductLandingPage04;