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

interface ProductLandingPage03Props {
  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, flower: Flower2,
  timer: Timer, headphones: Headphones, alerttriangle: AlertTriangle,
};

const ProductLandingPage03: React.FC<ProductLandingPage03Props> = ({
  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>(0);
  const [timer, setTimer] = useState({ hours: 4, minutes: 55, seconds: 0 });

  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: 'activity', text: 'প্রাণবন্ত প্রতিটি দিন', subtext: 'কর্মক্ষম ও সতেজ জীবন যাপনে সহায়ক' },
  ];

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

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

  return (
    <div className="bg-[#FAF9F6] text-[#4A4A48] min-h-screen font-sans selection:bg-[#E2E8D5] selection:text-[#3A402D] pb-20 md:pb-0">

      {/* ===== ১. HERO SECTION ===== */}
      <section className="relative overflow-hidden pt-16 pb-20 md:pt-24 md:pb-28 bg-[#F3F6EB]">
        {/* Organic background orbs */}
        <div className="absolute top-0 right-0 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] bg-[#E2E8D5] rounded-full blur-[80px] -translate-y-1/3 translate-x-1/3 opacity-70 pointer-events-none" />
        <div className="absolute bottom-0 left-0 w-[50vw] h-[50vw] max-w-[500px] max-h-[500px] bg-[#F7EEDE] rounded-full blur-[60px] translate-y-1/3 -translate-x-1/4 opacity-60 pointer-events-none" />

        <div className="container mx-auto px-5 relative z-10">
          <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">

            {/* Content */}
            <div className="lg:w-1/2 text-center lg:text-left space-y-6 w-full">
              <div className="inline-flex items-center gap-2 bg-[#FAF9F6] text-[#899D63] px-5 py-2 rounded-full font-medium shadow-sm border border-[#E2E8D5] text-sm">
                <Leaf size={15} /> ১০০% প্রাকৃতিক ও অর্গানিক
              </div>

              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold font-serif text-[#3A402D] leading-[1.2]">
                {product.landingTitle || product.nameBangla || product.name}
              </h1>

              <p className="text-lg text-[#6D6C65] leading-relaxed max-w-xl mx-auto lg:mx-0">
                {product.landingSubtitle || product.highlight || 'প্রকৃতির বিশুদ্ধতা নিয়ে তৈরি। রাসায়নিক মুক্ত নিরাপদ উপাদান যা আপনার সুস্বাস্থ্য নিশ্চিত করে।'}
              </p>

              {/* Price */}
              <div className="flex items-baseline gap-4 justify-center lg:justify-start">
                <span className="text-4xl font-bold text-[#899D63]">৳{product.price}</span>
                <span className="text-xl text-[#A7A6A0] line-through">৳{Math.round(product.price * 1.35)}</span>
                <span className="bg-amber-100 text-amber-700 text-xs font-bold px-3 py-1 rounded-full">সেভ করুন</span>
              </div>

              {/* Trust mini badges */}
              <div className="flex flex-wrap gap-3 justify-center lg:justify-start">
                {['ক্যাশ অন ডেলিভারি', '৩০ দিন গ্যারান্টি', 'ফ্রি ডেলিভারি'].map((b, i) => (
                  <span key={i} className="inline-flex items-center gap-1.5 bg-white border border-[#E2E8D5] text-[#899D63] text-sm font-semibold px-4 py-1.5 rounded-full shadow-sm">
                    <Check size={13} /> {b}
                  </span>
                ))}
              </div>

              {/* CTA */}
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-2">
                <a href="#order" className="inline-flex items-center justify-center gap-3 px-10 py-4 bg-[#899D63] text-[#FAF9F6] font-bold text-lg rounded-full hover:bg-[#72854E] hover:shadow-lg hover:-translate-y-1 transition-all duration-300 shadow-md">
                  <ShoppingCart size={20} /> {product.landingCtaTitle || 'এখনই কিনুন'}
                </a>
                <a href={`tel:${contactPhone}`} className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white border-2 border-[#E2E8D5] text-[#899D63] font-bold rounded-full hover:bg-[#F3F6EB] transition-all">
                  <Phone size={18} /> কল করুন
                </a>
              </div>
            </div>

            {/* Product Image */}
            <div className="lg:w-1/2 relative w-full flex justify-center">
              <div className="relative w-full max-w-[420px] aspect-square rounded-[6rem] bg-[#FAF9F6] shadow-[0_20px_50px_rgba(137,157,99,0.15)] flex items-center justify-center p-8 border-4 border-[#E2E8D5] overflow-hidden">
                <img src={product.image} alt={product.name} className="w-[85%] h-[85%] object-contain" />
              </div>
              <div className="absolute bottom-6 right-4 bg-white px-5 py-2.5 rounded-full shadow-lg border border-[#E2E8D5] flex items-center gap-2.5 rotate-[-4deg]">
                <span className="flex h-3 w-3 relative">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                </span>
                <span className="text-[#5A6844] font-bold text-sm">স্টকে আছে</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ২. PROBLEM SECTION ===== */}
      <section className="py-16 bg-[#FFF5F5]">
        <div className="container mx-auto px-5">
          <div className="text-center mb-10">
            <span className="inline-block bg-red-100 text-red-600 font-bold text-sm px-4 py-1.5 rounded-full mb-4">
              ⚠️ এই সমস্যাগুলো কি আপনার পরিচিত?
            </span>
            <h2 className="text-3xl md:text-4xl font-serif font-bold text-[#3A402D]">
              {product.landingProblemTitle || 'আপনি কি এই কষ্টে ভুগছেন?'}
            </h2>
          </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-white border border-red-100 rounded-3xl p-6 flex items-start gap-4 shadow-sm hover:shadow-md transition-all">
                  <div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center shrink-0">
                    <Icon size={24} className="text-red-500" />
                  </div>
                  <div>
                    <h3 className="font-bold text-[#3A402D] text-lg mb-1">{p.text}</h3>
                    <p className="text-[#84827E] text-sm leading-relaxed">{p.subtext}</p>
                  </div>
                </div>
              );
            })}
          </div>
          <p className="text-center mt-8 text-[#6D6C65] text-lg">
            😔 এই সমস্যা আপনার একার নয়... কিন্তু <span className="text-[#899D63] font-bold">প্রকৃতিক সমাধান আছে।</span>
          </p>
        </div>
      </section>

      {/* ===== ৩. SOLUTION SECTION ===== */}
      <section className="py-16 bg-[#F7EEDE]">
        <div className="container mx-auto px-5">
          <div className="bg-white rounded-[3rem] p-8 md:p-12 shadow-sm border border-[#E2E8D5] max-w-5xl mx-auto">
            <div className="grid md:grid-cols-2 gap-10 items-start">
              <div>
                <span className="inline-flex items-center gap-2 bg-[#F3F6EB] text-[#899D63] font-semibold text-sm px-4 py-2 rounded-full mb-6">
                  ✅ সমাধান এসে গেছে!
                </span>
                <h2 className="text-3xl md:text-4xl font-serif font-bold text-[#3A402D] mb-4 leading-tight">
                  {product.landingSolutionName || <>পরিচয় করুন <span className="text-[#899D63]">{product.nameBangla || product.name}</span> এর সাথে</>}
                </h2>
                <p className="text-[#6D6C65] leading-relaxed mb-8">
                  {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-[#F3F6EB] rounded-2xl p-4">
                        <div className="w-10 h-10 rounded-full bg-[#E2E8D5] flex items-center justify-center shrink-0">
                          <Icon size={20} className="text-[#5A6844]" />
                        </div>
                        <div>
                          <p className="font-bold text-[#3A402D]">{s.text || s.title}</p>
                          <p className="text-[#6D6C65] text-sm">{s.subtext || s.desc}</p>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Before/After compare */}
              <div className="space-y-5">
                <div className="bg-[#FFF5F5] border border-red-100 rounded-3xl p-6">
                  <h3 className="font-serif font-bold text-[#A56B6B] text-lg flex items-center gap-2 mb-4 pb-3 border-b border-red-100">
                    <X size={20} /> সাধারণ পণ্য
                  </h3>
                  <ul className="space-y-3">
                    {['কৃত্রিম রং ও প্রিজার্ভেটিভ', 'স্বল্পস্থায়ী ফলাফল', 'কোনো গ্যারান্টি নেই'].map((item, i) => (
                      <li key={i} className="flex items-center gap-3 text-[#84827E] text-sm">
                        <X size={16} className="text-red-400 shrink-0" /> {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="bg-[#F3F6EB] border border-[#E2E8D5] rounded-3xl p-6">
                  <h3 className="font-serif font-bold text-[#899D63] text-lg flex items-center gap-2 mb-4 pb-3 border-b border-[#E2E8D5]">
                    <Check size={20} /> আমাদের পণ্য
                  </h3>
                  <ul className="space-y-3">
                    {['১০০% প্রাকৃতিক উপাদান', 'দীর্ঘস্থায়ী সুস্বাস্থ্য', '৩০ দিন মানিব্যাক গ্যারান্টি'].map((item, i) => (
                      <li key={i} className="flex items-center gap-3 text-[#3A402D] text-sm font-medium">
                        <Check size={16} className="text-[#899D63] shrink-0" /> {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <a href="#order" className="flex items-center justify-center gap-3 w-full py-4 bg-[#899D63] text-white font-bold rounded-full hover:bg-[#72854E] transition-all shadow-md">
                  <ShoppingCart size={18} /> এখনই কিনুন
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ৪. KEY BENEFITS ===== */}
      <section id="benefits" className="py-16 bg-[#FAF9F6]">
        <div className="container mx-auto px-5">
          <div className="text-center mb-12 max-w-2xl mx-auto">
            <span className="text-[#899D63] font-bold tracking-wider uppercase text-sm mb-3 block">প্রাকৃতিক সমাধান</span>
            <h2 className="text-3xl md:text-4xl font-serif font-bold text-[#3A402D] mb-4">
              {product.landingBenefitsTitle || 'মূল উপকারিতাসমূহ'}
            </h2>
            <p className="text-[#6D6C65]">{product.landingBenefitsSubtitle || 'প্রকৃতির সর্বোত্তম নির্যাস এই পণ্যে ব্যবহার করা হয়েছে।'}</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-5 max-w-5xl mx-auto">
            {benefits.map((b: any, idx: number) => {
              const Icon = IconMap[b.icon] || Leaf;
              return (
                <div key={idx} className="bg-white rounded-3xl p-6 shadow-sm border border-[#F0EFEB] hover:shadow-lg hover:border-[#E2E8D5] hover:-translate-y-1 transition-all duration-300 group text-center">
                  <div className="w-14 h-14 rounded-2xl bg-[#F7EEDE] group-hover:bg-[#E2E8D5] transition-colors flex items-center justify-center mb-4 mx-auto">
                    <Icon className="text-[#5A6844]" size={28} />
                  </div>
                  <h3 className="font-bold text-[#3A402D] text-base mb-2">{b.title}</h3>
                  <p className="text-[#6D6C65] text-sm leading-relaxed">{b.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৫. PRODUCT DETAILS ===== */}
      <section className="py-16 bg-[#F7EEDE]">
        <div className="container mx-auto px-5 max-w-4xl">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-serif font-bold text-[#3A402D]">পণ্যের বিস্তারিত তথ্য</h2>
            <p className="text-[#6D6C65] mt-2">জানুন কেন আমাদের পণ্য আলাদা</p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div className="flex justify-center">
              <div className="w-64 h-64 rounded-[5rem] bg-[#FAF9F6] border-4 border-[#E2E8D5] shadow-[0_10px_30px_rgba(137,157,99,0.12)] flex items-center justify-center p-6">
                <img src={product.image} alt={product.name} className="w-full h-full object-contain" />
              </div>
            </div>
            <div className="bg-white rounded-3xl p-6 border border-[#F0EFEB] shadow-sm">
              {[
                { 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-3.5 border-b border-[#F0EFEB] last:border-0">
                  <span className="text-[#84827E] font-medium text-sm">{item.label}</span>
                  <span className="font-bold text-[#3A402D] text-sm">{item.value}</span>
                </div>
              ))}
              <a href="#order" className="flex items-center justify-center gap-2 w-full mt-5 py-4 bg-[#899D63] text-white font-bold rounded-full hover:bg-[#72854E] transition-all shadow-md">
                <ShoppingCart size={18} /> এখনই কিনুন
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ৬. SOCIAL PROOF ===== */}
      <section id="reviews" className="py-16 bg-[#F3F6EB] mx-3 my-4 rounded-[3rem] relative overflow-hidden">
        <div className="container mx-auto px-5 relative z-10">
          <div className="text-center mb-12">
            <div className="flex justify-center gap-1 mb-4">
              {[...Array(5)].map((_, i) => <Star key={i} size={24} className="fill-amber-400 text-amber-400" />)}
            </div>
            <h2 className="text-3xl md:text-4xl font-serif font-bold text-[#3A402D]">সন্তুষ্ট গ্রাহকদের কথা</h2>
            <p className="text-[#6D6C65] mt-2">হাজারো মানুষের আস্থার প্রতীক</p>
          </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-white rounded-3xl p-7 shadow-sm border border-[#E2E8D5] hover:shadow-md transition-all">
                <Quote size={36} className="text-[#E2E8D5] mb-3" />
                <p className="text-[#6D6C65] leading-relaxed italic mb-5 text-sm">"{r.text}"</p>
                <div className="flex items-center gap-3">
                  <img src={r.avatar} alt="Avatar" className="w-12 h-12 rounded-full object-cover border-2 border-[#E2E8D5]" />
                  <div>
                    <h4 className="font-bold text-[#3A402D]">{r.name}</h4>
                    <div className="flex text-amber-400 mt-0.5">
                      {[...Array(r.rating || 5)].map((_, i) => <Star key={i} size={12} className="fill-current" />)}
                    </div>
                    <span className="text-xs text-[#84827E] font-medium">{r.location}</span>
                  </div>
                  <div className="ml-auto">
                    <BadgeCheck size={20} className="text-[#899D63]" />
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="text-center mt-10">
            <a href="#order" className="inline-flex items-center gap-3 px-10 py-4 bg-[#899D63] text-white font-bold rounded-full hover:bg-[#72854E] shadow-md transition-all">
              <ShoppingCart size={18} /> আমিও অর্ডার করতে চাই
            </a>
          </div>
        </div>
      </section>

      {/* ===== ৭. OFFER / PRICING ===== */}
      <section className="py-14 bg-[#3A402D] text-white">
        <div className="container mx-auto px-5 text-center max-w-3xl">
          <span className="inline-block bg-amber-400/20 border border-amber-400/30 text-amber-300 font-bold text-sm px-5 py-2 rounded-full mb-6">
            ⚡ সীমিত সময়ের অফার!
          </span>
          <h2 className="text-3xl md:text-4xl font-serif font-bold mb-6">অফার শেষ হওয়ার আগেই নিন!</h2>

          {/* Countdown */}
          <div className="flex items-center justify-center gap-3 mb-8">
            {[
              { val: timer.hours, label: 'ঘণ্টা' },
              { val: timer.minutes, label: 'মিনিট' },
              { val: timer.seconds, label: 'সেকেন্ড' },
            ].map((t, i) => (
              <React.Fragment key={i}>
                <div className="bg-[#4A503C] border border-[#5A6844] rounded-2xl px-5 py-3 text-center min-w-[70px]">
                  <div className="text-3xl font-bold font-mono text-[#C8D6A4]">{String(t.val).padStart(2, '0')}</div>
                  <div className="text-xs text-[#899D63] font-medium mt-1">{t.label}</div>
                </div>
                {i < 2 && <span className="text-2xl font-bold text-[#899D63]">:</span>}
              </React.Fragment>
            ))}
          </div>

          <div className="flex items-baseline justify-center gap-4 mb-6">
            <span className="text-5xl font-bold text-[#C8D6A4]">৳{product.price}</span>
            <span className="text-2xl text-white/40 line-through">৳{Math.round(product.price * 1.35)}</span>
          </div>
          <a href="#packages" className="inline-flex items-center gap-3 px-10 py-4 bg-[#899D63] text-white font-bold rounded-full hover:bg-[#72854E] shadow-md transition-all">
            প্যাকেজ দেখুন <ArrowRight size={20} />
          </a>
        </div>
      </section>

      {/* ===== ৮. PACKAGE SELECTION ===== */}
      <section id="packages" className="py-16 bg-[#FAF9F6]">
        <div className="container mx-auto px-5">
          <div className="text-center mb-12 max-w-2xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-serif font-bold text-[#3A402D] mb-3">আপনার পছন্দ বেছে নিন</h2>
            <p className="text-[#6D6C65]">পরিবারের সদস্য অনুযায়ী সঠিক প্যাকেজটি অর্ডার করুন</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {Object.entries(pkgData).map(([key, pkg]: any) => {
              const isSelected = selectedPackage === key;
              return (
                <div
                  key={key}
                  className={`bg-white rounded-[2.5rem] p-7 border-2 transition-all cursor-pointer ${
                    isSelected
                      ? 'border-[#899D63] shadow-[0_15px_40px_rgba(137,157,99,0.18)] scale-105'
                      : 'border-[#F0EFEB] hover:border-[#E2E8D5] shadow-sm hover:-translate-y-1'
                  }`}
                  onClick={() => setSelectedPackage(key)}
                >
                  {pkg.popular && (
                    <div className="bg-amber-100 text-amber-700 text-center py-1.5 text-xs font-bold w-28 mx-auto rounded-full mb-5">🌿 জনপ্রিয়</div>
                  )}
                  <div className="flex justify-center mb-4">
                    {product.image && <img src={product.image} alt={pkg.label} className="w-24 h-24 object-contain bg-[#FAF9F6] p-2 rounded-2xl" />}
                  </div>
                  <h3 className="text-xl font-serif font-bold text-center text-[#3A402D] mb-3">{pkg.label}</h3>
                  <div className="text-center mb-5">
                    <span className="text-4xl font-bold text-[#899D63]">৳{pkg.price}</span>
                    <div className="text-[#A7A6A0] line-through text-sm mt-1">৳{pkg.original}</div>
                    <div className="inline-block bg-green-100 text-green-700 text-xs font-bold px-3 py-1 rounded-full mt-2">সাশ্রয় ৳{pkg.saving}</div>
                  </div>
                  <ul className="space-y-3 mb-6">
                    {['১০০% অরিজিনাল', 'ফ্রি ডেলিভারি', 'মানি-ব্যাক পলিসি'].map((item, i) => (
                      <li key={i} className="flex items-center gap-2 text-[#6D6C65] text-sm">
                        <Check className="text-[#899D63] shrink-0" size={16} /> {item}
                      </li>
                    ))}
                  </ul>
                  <button className={`w-full py-3.5 rounded-full font-bold text-sm transition-colors ${
                    isSelected ? 'bg-[#899D63] text-white shadow-md' : 'bg-[#F3F6EB] text-[#5A6844] hover:bg-[#E2E8D5]'
                  }`}>
                    {isSelected ? 'নির্বাচিত ✓' : 'নির্বাচন করুন'}
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== ৯. ORDER FORM ===== */}
      <section id="order" className="py-16 bg-[#F7EEDE]">
        <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-serif font-bold text-[#3A402D] 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-white rounded-2xl p-5 border border-[#E2E8D5] shadow-sm hover:shadow-md transition-all">
                  <div className="w-11 h-11 rounded-xl bg-[#F3F6EB] flex items-center justify-center shrink-0">
                    <t.icon size={22} className="text-[#899D63]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-[#3A402D] mb-0.5">{t.title}</h4>
                    <p className="text-[#6D6C65] text-sm">{t.desc}</p>
                  </div>
                </div>
              ))}
              <a href={`tel:${contactPhone}`} className="flex items-center gap-3 bg-[#3A402D] text-white rounded-2xl p-5 hover:bg-[#4A503C] transition-all mt-2">
                <div className="w-11 h-11 rounded-xl bg-[#899D63]/20 flex items-center justify-center shrink-0">
                  <Phone size={22} className="text-[#C8D6A4]" />
                </div>
                <div>
                  <div className="text-white/60 text-xs font-medium">সরাসরি কল করুন</div>
                  <div className="font-bold text-lg text-[#C8D6A4]">{contactPhone}</div>
                </div>
              </a>
            </div>

            {/* Order Form */}
            <div className="lg:col-span-8">
              <div className="bg-white rounded-[2.5rem] p-7 md:p-10 shadow-sm border border-[#F0EFEB]">
                <div className="flex justify-between items-center mb-7 pb-6 border-b border-[#F0EFEB]">
                  <h2 className="text-2xl font-serif font-bold text-[#3A402D]">অর্ডার কনফার্ম করুন</h2>
                  <div className="text-right">
                    <span className="text-xs text-[#84827E] font-medium block">মোট বিল</span>
                    <span className="text-2xl font-bold text-[#899D63]">৳{pkgData[selectedPackage]?.price}</span>
                  </div>
                </div>
                <InlineOrderForm product={product} selectedSize={selectedPackage} addOrder={addOrder} settings={settings} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== ১১. FAQ SECTION ===== */}
      <section className="py-16 bg-[#FAF9F6]">
        <div className="container mx-auto px-5 max-w-2xl">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-serif font-bold text-[#3A402D]">সাধারণ জিজ্ঞাসা</h2>
            <p className="text-[#6D6C65] mt-2">আপনার মনের প্রশ্নের উত্তর জেনে নিন</p>
          </div>
          <div className="space-y-3">
            {faqs.map((faq: any, idx: number) => (
              <div key={idx} className="bg-white rounded-2xl overflow-hidden border border-[#F0EFEB] shadow-sm">
                <button
                  onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                  className="w-full flex items-center justify-between p-5 text-left"
                >
                  <span className="font-bold text-[#3A402D] text-sm">{faq.q}</span>
                  <ChevronDown className={`text-[#899D63] transition-transform shrink-0 ml-3 ${openFaq === idx ? 'rotate-180' : ''}`} size={20} />
                </button>
                {openFaq === idx && (
                  <div className="px-5 pb-5 text-[#6D6C65] text-sm border-t border-[#F0EFEB] pt-3 leading-relaxed">
                    {faq.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== ১২. FINAL CTA ===== */}
      <section className="py-16 bg-[#3A402D] text-white text-center px-5 relative overflow-hidden">
        <div className="absolute inset-0 opacity-5 pointer-events-none"
             style={{ background: 'radial-gradient(circle at 30% 50%, #899D63 0%, transparent 60%), radial-gradient(circle at 70% 50%, #899D63 0%, transparent 60%)' }} />
        <div className="container mx-auto max-w-2xl relative z-10">
          <div className="text-5xl mb-6">🌿</div>
          <h2 className="text-3xl md:text-4xl font-serif font-bold mb-4 leading-snug">
            আর দেরি নয়! আপনার <span className="text-[#C8D6A4]">সুস্বাস্থ্যের</span> যাত্রা শুরু করুন আজই
          </h2>
          <p className="text-white/70 mb-10 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-3 px-10 py-4 bg-[#899D63] text-white font-bold text-lg rounded-full hover:bg-[#72854E] transition-all shadow-lg">
              <ShoppingCart size={22} /> {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/30 text-white font-bold rounded-full hover:bg-white/10 transition-all">
              <Phone size={18} /> কল করুন
            </a>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-5 mt-10">
            {['ক্যাশ অন ডেলিভারি', '৩০ দিন গ্যারান্টি', 'ফ্রি ডেলিভারি'].map((b, i) => (
              <span key={i} className="flex items-center gap-2 text-white/60 text-sm">
                <CheckCircle2 size={16} className="text-[#899D63]" /> {b}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FOOTER ===== */}
      <footer className="bg-[#2F3525] text-[#E2E8D5] py-12 text-center">
        <div className="container mx-auto px-5">
          <Flower2 size={36} className="mx-auto mb-4 text-[#899D63]" />
          <h3 className="text-xl font-serif mb-5">{siteName}</h3>
          <div className="flex justify-center gap-8 mb-8">
            <div className="text-center">
              <Truck className="mx-auto mb-1.5 text-[#899D63]" size={22} />
              <p className="text-sm text-white/60">ক্যাশ অন ডেলিভারি</p>
            </div>
            <div className="text-center">
              <ShieldCheck className="mx-auto mb-1.5 text-[#899D63]" size={22} />
              <p className="text-sm text-white/60">নিরাপদ পণ্য</p>
            </div>
            <div className="text-center">
              <RotateCcw className="mx-auto mb-1.5 text-[#899D63]" size={22} />
              <p className="text-sm text-white/60">মানিব্যাক</p>
            </div>
          </div>
          <p className="text-sm text-white/40 border-t border-white/10 pt-5 max-w-md mx-auto">
            © {new Date().getFullYear()} {siteName} - সর্বস্বত্ব সংরক্ষিত
          </p>
        </div>
      </footer>

      {/* ===== STICKY MOBILE CTA ===== */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white p-3 pb-5 shadow-[0_-8px_20px_rgba(0,0,0,0.06)] border-t border-[#E2E8D5] z-50">
        <div className="flex gap-3">
          <a href={`tel:${contactPhone}`} className="w-14 h-13 bg-[#F3F6EB] border border-[#E2E8D5] rounded-2xl flex items-center justify-center text-[#899D63] shrink-0 active:scale-95 transition-transform">
            <Phone size={22} />
          </a>
          <a href="#order" className="flex-1 bg-[#899D63] text-white flex items-center justify-center gap-2 py-3.5 rounded-2xl font-bold shadow-md active:scale-95 transition-transform hover:bg-[#72854E]">
            <ShoppingCart size={18} /> {product.landingCtaTitle || 'অর্ডার প্লেস করুন'}
          </a>
        </div>
      </div>

    </div>
  );
};

export default ProductLandingPage03;