💰 Become an Affiliate & Earn upto 20% commission

Creating a professional ecommerce landing page no longer requires expensive developers or premium page builders. With the power of AI and free tools like Blogger, TailwindCSS, and modern JavaScript libraries, anyone can build a premium high-converting landing page completely free.

Whether you sell gadgets, mangoes, clothing, digital products, or COD-based products in Bangladesh, a professional landing page can significantly increase your Facebook Ads conversion rate and customer trust.

In this article, you will learn how to create a modern ecommerce landing page using AI and Blogger — without spending money on hosting or monthly subscriptions.

Video Tutorial – Bangla

Connect Custom Domain Name

Why Use a Landing Page Instead of a Normal Website?

A landing page is designed specifically for conversions.

Unlike a traditional ecommerce website with many distractions, a landing page focuses on:

  • Showing the product beautifully
  • Building trust
  • Explaining features
  • Creating urgency
  • Collecting orders quickly

This is why Facebook Ads marketers prefer landing pages.

A good landing page can help you:

  • Increase sales
  • Reduce bounce rate
  • Improve trust
  • Get more COD orders
  • Increase ROAS (Return On Ad Spend)

Why Blogger is Perfect for Free Ecommerce Landing Pages

Blogger is still one of the best free hosting solutions for landing pages.

Benefits of Using Blogger

  • Completely free hosting
  • Free SSL certificate
  • Fast Google servers
  • Custom domain support
  • Easy deployment
  • Mobile responsive
  • SEO friendly
  • No monthly cost

You can create unlimited landing pages and connect your own domain easily.

How AI Makes Landing Page Creation Easier

Modern AI tools can generate:

  • Full HTML landing pages
  • Premium UI/UX design
  • Product sections
  • Order forms
  • JavaScript functionality
  • Facebook Pixel integration
  • Google Form integration
  • Telegram notification system

Instead of coding everything manually, you can use AI prompts to generate production-ready landing pages within minutes.

Copy the prompt below and paste it into any AI

Note: must be replace Language/Product Images/Primary Color/Fonts

Create a modern, premium, highly-converting Landing Page using HTML, CSS, JavaScript and TailwindCSS only. 
Business Type: Gadget Items/Mango Shop/Choting Shop/Digital Product
Language: English/Bangla
Product Images: 
Design Requirements:
* Use TailwindCSS CDN
* Use Font Awesome CDN
* Use Hind Siliguri font from Google Fonts
* Primary Color: #008bf5
* Premium ecommerce style UI
* Mobile-first responsive design
* Modern gradients and glassmorphism effects
* Smooth animations and hover effects
* Facebook Ads conversion optimized design
Header Requirements:
* Fixed Sticky Header
* Responsive Navbar with menu items:
  * Home
  * Features
  * Reviews
  * FAQ
  * Order Now
* Mobile hamburger menu
* Sticky Buy Now button in header
* Smooth scrolling navigation
Landing Page Sections:
1. Hero Section
   * Large product image
   * Product title
   * Catchy subtitle
   * Discount badge
   * Current price + old price
   * CTA buttons
2. Countdown Offer Section
   * Live countdown timer
   * Limited stock alert
3. Product Features Section
   * Icon based feature cards
   * Attractive hover animation
4. Product Gallery
   * Responsive image gallery
   * Lightbox preview effect
5. Product Specifications
   * Stylish specs table
6. Why Choose This Product
   * Benefits with icons
7. Delivery Information Section
   * Inside Dhaka delivery info
   * Outside Dhaka delivery info
   * COD availability
8. Trust Badges Section
   * Secure Payment
   * Cash on Delivery
   * Fast Delivery
   * Verified Product
9. Customer Reviews / Testimonials
   * Star ratings
   * Customer review cards
   * Customer image placeholders
10. FAQ Section
* Accordion style using JavaScript
11. Floating WhatsApp Button
12. Sticky Mobile Order Button
Order Popup Modal Requirements:
* Popup modal opens on clicking Buy Now / Order Now
* Modern animated modal
* Close button
* Responsive design
Order Form Fields:
* Product Name
* Product Price
* Quantity Selector
* Color Selector
* Size Selector
* Shipping Method:
  * Inside Dhaka
  * Outside Dhaka
* Auto Calculate Shipping Cost
* Auto Calculate Total Price
* Customer Name
* Phone Number
* Full Address
* Payment Method:
  * Cash On Delivery
  * Bkash (Admin Account Number, Transaction ID Field) 
  * Nagad (Admin Account Number, Transaction ID Field)  
Order Form Features:
* Beautiful modern form UI
* JavaScript validation
* Real-time total price calculation
* Loading button animation
* Success popup message
* Prevent duplicate submission
Google Form Integration:
* Send all order data directly to Google Form using fetch API
* Send these fields:
  * Product Name
  * Quantity
  * Color
  * Size
  * Shipping Method
  * Shipping Cost
  * Total Price
  * Customer Name
  * Phone
  * Address
  * Payment Method
* Submit without page reload
Telegram Bot Integration:
* Instantly send order notification to Telegram Bot
* Include complete order details:
  * Product Name
  * Quantity
  * Shipping Method
  * Total Price
  * Customer Info
  * Payment Method
* Use async fetch API
Facebook Pixel Integration:
* Add Facebook Pixel code support
* Track these events:
  * PageView
  * ViewContent
  * AddToCart
  * InitiateCheckout
  * Purchase
* Include placeholder Pixel ID
* Add event trigger on Buy Now click and successful order submit
Additional Features:
* SEO optimized HTML structure
* Semantic HTML5
* Fast loading optimized code
* Reusable clean components
* Well commented code
* Modern animations using AOS or custom JS
* Fully responsive for:
  * Mobile
  * Tablet
  * Desktop
* Bangla ecommerce optimized design
* Suitable for Bangladesh COD business
Technical Requirements:
* Single HTML file
* Internal CSS and JS allowed
* Use Tailwind utility classes
* No frameworks except TailwindCSS
* Production-ready clean code
* Organized code structure
* Use modern UI/UX practices
Generate a complete professional Landing Page suitable for Facebook Ads traffic and a high-conversion sales funnel.

My HTML Code (Gadgets Item)

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
  <title>Apple AirPods Pro 2nd Gen ANC | Dubai Version — বাংলাদেশ</title>
  <meta name="description" content="Apple AirPods Pro 2nd Generation ANC Dubai Version — Active Noise Cancellation, Spatial Audio, ৩০ ঘণ্টা ব্যাটারি। বাংলাদেশে ফ্রি ডেলিভারি, ক্যাশ অন ডেলিভারি।" />
  <meta property="og:title" content="Apple AirPods Pro 2nd Gen ANC | Dubai Version" />
  <meta property="og:description" content="৩০ ঘণ্টা ব্যাটারি, ANC, Spatial Audio — এখনই অর্ডার করুন!" />
  <!-- ফেসবুক পিক্সেল কোড এখানে বসান (আপনার পিক্সেল আইডি দিয়ে নিচের XXXXXXXX রিপ্লেস করুন) -->
  <!-- Meta Pixel Code -->
  <script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'XXXXXXXX');
  fbq('track', 'PageView');
  </script>
  
  <noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXX&ev=PageView&noscript=1"
  /></noscript>
  <!-- End Meta Pixel Code -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#008bf5',
            'primary-dark': '#0070d0',
            'primary-light': '#e0f2fe',
          },
          fontFamily: {
            siliguri: ['Hind Siliguri', 'sans-serif'],
          },
        }
      }
    }
  </script>
  <style>
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Hind Siliguri', sans-serif;
      background: #f8fafc;
      color: #1e293b;
      overflow-x: hidden;
    }
    .hero-gradient {
      background: linear-gradient(135deg, #060d1f 0%, #0a1a3a 35%, #0d2d6b 65%, #0060c7 85%, #008bf5 100%);
    }
    .section-gradient {
      background: linear-gradient(180deg, #f0f9ff 0%, #e8f4fd 100%);
    }
    .glass {
      background: rgba(255,255,255,0.13);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255,255,255,0.22);
    }
    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      33%       { transform: translateY(-14px) rotate(1deg); }
      66%       { transform: translateY(-8px) rotate(-1deg); }
    }
    @keyframes pulse-ring {
      0%   { box-shadow: 0 0 0 0 rgba(0,139,245,0.55); }
      70%  { box-shadow: 0 0 0 22px rgba(0,139,245,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,139,245,0); }
    }
    @keyframes shimmer {
      0%   { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes modalIn {
      from { opacity: 0; transform: scale(0.87) translateY(28px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes badge-pop {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.1); }
    }
    @keyframes glow-pulse {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50%      { opacity: 1;   transform: scale(1.08); }
    }
    .float-anim    { animation: float 4s ease-in-out infinite; }
    .pulse-btn     { animation: pulse-ring 2.2s ease-in-out infinite; }
    .badge-anim    { animation: badge-pop 2s ease-in-out infinite; }
    .modal-anim    { animation: modalIn 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    .glow-anim     { animation: glow-pulse 3s ease-in-out infinite; }
    .product-glow {
      filter:
        drop-shadow(0 0 35px rgba(0,139,245,0.55))
        drop-shadow(0 0 80px rgba(0,100,220,0.3))
        drop-shadow(0 30px 50px rgba(0,0,0,0.4));
    }
    .btn-primary {
      background: linear-gradient(135deg, #008bf5, #0068d0);
      color: white;
      font-weight: 700;
      padding: 15px 36px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 8px 32px rgba(0,139,245,0.42);
      font-family: 'Hind Siliguri', sans-serif;
      font-size: 1.05rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 44px rgba(0,139,245,0.58);
      background: linear-gradient(135deg, #0070d0, #0050b0);
    }
    .btn-primary:active { transform: translateY(-1px); }
    .btn-secondary {
      background: rgba(255,255,255,0.13);
      color: white;
      font-weight: 600;
      padding: 15px 36px;
      border-radius: 50px;
      border: 2px solid rgba(255,255,255,0.5);
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Hind Siliguri', sans-serif;
      font-size: 1.05rem;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn-secondary:hover {
      background: rgba(255,255,255,0.24);
      border-color: white;
      transform: translateY(-3px);
    }
    .thumb {
      cursor: pointer;
      border-radius: 14px;
      border: 3px solid transparent;
      overflow: hidden;
      transition: all 0.28s ease;
    }
    .thumb:hover, .thumb.active {
      border-color: #008bf5;
      box-shadow: 0 6px 24px rgba(0,139,245,0.3);
    }
    .thumb img { width: 100%; height: 70px; object-fit: cover; display: block; }
    .feature-card {
      background: white;
      border-radius: 22px;
      padding: 28px 22px;
      transition: all 0.36s cubic-bezier(0.34,1.56,0.64,1);
      border: 1.5px solid #e8eef4;
      position: relative;
      overflow: hidden;
    }
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #008bf5, #00d4ff, #0050c8);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }
    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 24px 60px rgba(0,139,245,0.16);
      border-color: rgba(0,139,245,0.4);
    }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-icon {
      width: 56px; height: 56px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
      font-size: 1.5rem;
    }
    .gallery-card {
      border-radius: 18px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }
    .gallery-card::after {
      content: '\f00e';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      inset: 0;
      background: rgba(0,139,245,0.0);
      color: white;
      font-size: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    .gallery-card:hover { transform: scale(1.03); box-shadow: 0 14px 45px rgba(0,139,245,0.28); }
    .gallery-card:hover::after { background: rgba(0,100,220,0.55); }
    .spec-row { transition: background 0.2s; }
    .spec-row:hover { background: #dbeafe; }
    .review-card {
      background: white;
      border-radius: 22px;
      padding: 26px;
      border: 1.5px solid #e8eef4;
      transition: all 0.3s ease;
      position: relative;
    }
    .review-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 20px 55px rgba(0,139,245,0.14);
      border-color: rgba(0,139,245,0.3);
    }
    .review-card .quote-icon {
      position: absolute;
      top: 18px; right: 22px;
      font-size: 3.5rem;
      color: #dbeafe;
      line-height: 1;
    }
    .faq-item { margin-bottom: 12px; }
    .faq-header {
      cursor: pointer;
      background: white;
      padding: 18px 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1.5px solid #e8eef4;
      border-radius: 14px;
      transition: all 0.3s ease;
      font-weight: 600;
      font-size: 1rem;
    }
    .faq-header:hover { background: #f0f9ff; border-color: #008bf5; color: #008bf5; }
    .faq-header.active {
      background: linear-gradient(135deg, #008bf5, #0068d0);
      color: white;
      border-color: transparent;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      box-shadow: 0 4px 20px rgba(0,139,245,0.35);
    }
    .faq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.42s ease, padding 0.3s ease;
      background: #f0f9ff;
      border: 1.5px solid #bfdbfe;
      border-top: none;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      font-size: 0.95rem;
      color: #374151;
      line-height: 1.7;
    }
    .faq-body.open { max-height: 320px; padding: 18px 22px; }
    .faq-icon { transition: transform 0.3s ease; flex-shrink: 0; }
    .faq-header.active .faq-icon { transform: rotate(180deg); }
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.68);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: 14px;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: white;
      border-radius: 26px;
      width: 100%;
      max-width: 550px;
      max-height: 93vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 40px 100px rgba(0,0,0,0.35);
    }
    .modal-header {
      background: linear-gradient(135deg, #008bf5, #0050b0);
      padding: 22px 28px 20px;
      border-radius: 26px 26px 0 0;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .form-input {
      width: 100%;
      padding: 13px 16px;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      font-family: 'Hind Siliguri', sans-serif;
      font-size: 0.95rem;
      transition: all 0.25s ease;
      outline: none;
      background: #f8fafc;
      color: #1e293b;
    }
    .form-input:focus { border-color: #008bf5; background: white; box-shadow: 0 0 0 4px rgba(0,139,245,0.12); }
    .form-label { font-weight: 600; font-size: 0.88rem; color: #374151; margin-bottom: 6px; display: block; }
    .form-group { margin-bottom: 15px; }
    .form-err { color: #ef4444; font-size: 0.8rem; margin-top: 4px; display: none; }
    .form-err.show { display: block; }
    .payment-option {
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 11px 14px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 600;
      font-size: 0.85rem;
    }
    .payment-option:hover { border-color: #008bf5; background: #f0f9ff; }
    .payment-option.selected { border-color: #008bf5; background: #dbeafe; color: #1d4ed8; }
    /* ===== MOBILE PAYMENT INFO BOX ===== */
    .mobile-pay-info {
      display: none;
      margin-top: 12px;
      background: #f0f9ff;
      border: 1.5px solid #bfdbfe;
      border-radius: 14px;
      padding: 14px;
    }
    .mobile-pay-info.show { display: block; }
    .pay-number-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: white;
      border: 2px solid #bfdbfe;
      border-radius: 10px;
      padding: 10px 14px;
      margin: 8px 0 10px;
    }
    .pay-number-text {
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 0.05em;
    }
    .copy-btn {
      background: #eff6ff;
      border: 1.5px solid #93c5fd;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 0.78rem;
      font-weight: 700;
      color: #1d4ed8;
      cursor: pointer;
      font-family: 'Hind Siliguri', sans-serif;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .copy-btn:hover { background: #dbeafe; }
    .copy-btn.copied { background: #dcfce7; border-color: #86efac; color: #166534; }
    /* ===== DELIVERY OPTION ===== */
    .delivery-option {
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 16px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      font-size: 0.88rem;
      background: #f8fafc;
      position: relative;
    }
    .delivery-option:hover { border-color: #008bf5; background: #f0f9ff; }
    .delivery-option.selected {
      border-color: #008bf5;
      background: linear-gradient(135deg, #dbeafe, #eff6ff);
      color: #1d4ed8;
    }
    .delivery-option .delivery-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .delivery-option .delivery-badge {
      position: absolute;
      top: -8px; right: 10px;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .delivery-option.selected .delivery-check {
      width: 20px; height: 20px;
      background: #008bf5;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-left: auto;
      flex-shrink: 0;
    }
    .delivery-option .delivery-check { display: none; }
    .delivery-option.selected .delivery-check { display: flex; }
    .countdown-box {
      background: linear-gradient(135deg, #dc2626, #991b1b);
      border-radius: 14px;
      padding: 10px 14px;
      text-align: center;
      min-width: 64px;
      box-shadow: 0 4px 18px rgba(220,38,38,0.4);
    }
    .countdown-num { font-size: 2rem; font-weight: 700; color: white; line-height: 1; }
    .countdown-label { font-size: 0.7rem; color: rgba(255,255,255,0.82); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
    .sticky-buy-btn {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 998;
      padding: 11px 16px 16px;
      background: white;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.12);
    }
    .whatsapp-float {
      position: fixed;
      bottom: 88px; right: 18px;
      z-index: 997;
      width: 58px; height: 58px;
      background: linear-gradient(135deg, #25d366, #128c7e);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.7rem;
      color: white;
      box-shadow: 0 6px 26px rgba(37,211,102,0.55);
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
    }
    .whatsapp-float:hover { transform: scale(1.14) rotate(-5deg); }
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.94);
      z-index: 10000;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .lightbox.open { display: flex; }
    .lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; }
    .lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 18px; object-fit: contain; display: block; }
    .trust-badge {
      display: flex; align-items: center; gap: 8px;
      background: white;
      border: 1.5px solid #e2e8f0;
      border-radius: 50px;
      padding: 9px 18px;
      font-size: 0.83rem;
      font-weight: 600;
      color: #374151;
      transition: all 0.25s ease;
      white-space: nowrap;
    }
    .trust-badge:hover { border-color: #008bf5; color: #008bf5; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,139,245,0.15); }
    .shimmer-text {
      background: linear-gradient(90deg, #60b8ff 0%, #ffffff 40%, #60b8ff 60%, #ffffff 100%);
      background-size: 250% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 3s linear infinite;
    }
    .section-tag {
      display: inline-block;
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
      color: #1d4ed8;
      font-weight: 700;
      padding: 6px 20px;
      border-radius: 50px;
      font-size: 0.82rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .spinner {
      width: 20px; height: 20px;
      border: 3px solid rgba(255,255,255,0.35);
      border-top-color: white;
      border-radius: 50%;
      animation: spin-slow 0.75s linear infinite;
      display: inline-block;
    }
    .success-box { display: none; text-align: center; padding: 44px 24px 36px; }
    .success-box.show { display: block; }
    .order-form.hidden { display: none; }
    .stars { color: #f59e0b; }
    #mainImg { transition: opacity 0.3s ease; }
    #mainImg.fade { opacity: 0; }
    .modal-box::-webkit-scrollbar { width: 5px; }
    .modal-box::-webkit-scrollbar-thumb { background: #008bf5; border-radius: 6px; }
    .apple-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50px;
      padding: 5px 14px;
      font-size: 0.78rem;
      font-weight: 600;
      color: rgba(255,255,255,0.85);
    }
    .old-price { text-decoration: line-through; color: #94a3b8; }
    .fa-star-half-alt { color: #f59e0b; }
    @media (max-width: 767px) {
      body { padding-bottom: 80px; }
      .sticky-buy-btn { display: block; }
    }
    @media (min-width: 768px) {
      .sticky-buy-btn { display: none; }
      .whatsapp-float { bottom: 28px; right: 28px; }
    }
  </style>
</head>
<body>
<!-- STICKY MOBILE BUY BUTTON -->
<div class="sticky-buy-btn md:hidden">
  <button onclick="openModal()" class="btn-primary w-full pulse-btn text-base py-4">
    <i class="fas fa-headphones"></i> এখনই অর্ডার করুন — মাত্র ৳৩,৪৯৯
  </button>
</div>
<!-- WHATSAPP FLOAT -->
<a href="https://wa.me/8801700000000" target="_blank" class="whatsapp-float" title="WhatsApp এ যোগাযোগ করুন">
  <i class="fab fa-whatsapp"></i>
</a>
<!-- LIGHTBOX -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
  <div class="lightbox-inner">
    <button onclick="closeLightbox()" style="position:absolute;top:-44px;right:0;color:white;font-size:2rem;background:none;border:none;cursor:pointer;line-height:1;"><i class="fas fa-times-circle"></i></button>
    <img id="lightboxImg" src="" alt="AirPods Pro Preview" />
  </div>
</div>
<!-- ===== ORDER MODAL ===== -->
<div id="orderModal" class="modal-overlay" onclick="closeModalOutside(event)">
  <div class="modal-box modal-anim" id="modalBox">
    <div class="modal-header">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-white font-bold text-xl leading-tight">🎧 অর্ডার করুন</h2>
          <p class="text-blue-100 text-sm mt-0.5">Apple AirPods Pro 2nd Gen — Dubai Version</p>
        </div>
        <button onclick="closeModal()" class="text-white hover:text-blue-200 text-2xl transition-colors ml-4 flex-shrink-0">
          <i class="fas fa-times-circle"></i>
        </button>
      </div>
      <div class="flex gap-2 flex-wrap mt-3">
        <span class="apple-badge"><i class="fas fa-shield-alt text-green-400"></i>১০০% অরিজিনাল</span>
        <span class="apple-badge"><i class="fas fa-truck text-blue-300"></i>ফ্রি ডেলিভারি</span>
        <span class="apple-badge"><i class="fas fa-undo text-yellow-300"></i>৭ দিন রিটার্ন</span>
      </div>
    </div>
    <div class="p-6" id="orderFormWrapper">
      <form id="orderForm" onsubmit="handleSubmit(event)" novalidate>
        <!-- Product & Qty -->
        <div class="grid grid-cols-2 gap-3 mb-1">
          <div class="form-group mb-0">
            <label class="form-label">পণ্যের নাম</label>
            <input type="text" class="form-input" value="AirPods Pro 2nd Gen" readonly style="background:#f1f5f9;color:#64748b;font-size:0.85rem;" />
          </div>
          <div class="form-group mb-0">
            <label class="form-label">পরিমাণ</label>
            <div class="flex items-center border-2 border-gray-200 rounded-xl overflow-hidden bg-gray-50">
              <button type="button" onclick="changeQty(-1)" class="px-3 py-3 text-primary font-bold text-lg hover:bg-blue-50 transition-colors">−</button>
              <input type="number" id="qtyInput" class="form-input text-center border-0 rounded-none bg-transparent py-2 px-1" value="1" min="1" max="10" readonly />
              <button type="button" onclick="changeQty(1)" class="px-3 py-3 text-primary font-bold text-lg hover:bg-blue-50 transition-colors">+</button>
            </div>
          </div>
        </div>
        <!-- Color & Ear Tip -->
        <div class="grid grid-cols-2 gap-3 mb-1 mt-4">
          <div class="form-group mb-0">
            <label class="form-label">রঙ বেছে নিন</label>
            <select id="colorSelect" class="form-input">
              <option value="">রঙ সিলেক্ট করুন</option>
              <option value="white">হোয়াইট (White)</option>
              <option value="black">ব্ল্যাক (Black)</option>
            </select>
          </div>
          <div class="form-group mb-0">
            <label class="form-label">ইয়ার টিপ সাইজ</label>
            <select id="sizeSelect" class="form-input">
              <option value="">সাইজ সিলেক্ট করুন</option>
              <option value="XS">XS (অতি ছোট)</option>
              <option value="S">S (ছোট)</option>
              <option value="M">M (মাঝারি)</option>
              <option value="L">L (বড়)</option>
            </select>
          </div>
        </div>
        <!-- Name -->
        <div class="form-group mt-4">
          <label class="form-label"><i class="fas fa-user mr-1 text-primary"></i>আপনার নাম *</label>
          <input type="text" id="custName" class="form-input" placeholder="আপনার পূর্ণ নাম লিখুন" />
          <div id="nameErr" class="form-err">নাম দেওয়া আবশ্যক</div>
        </div>
        <!-- Phone -->
        <div class="form-group">
          <label class="form-label"><i class="fas fa-phone mr-1 text-primary"></i>মোবাইল নম্বর *</label>
          <input type="tel" id="custPhone" class="form-input" placeholder="01XXXXXXXXX" maxlength="11" />
          <div id="phoneErr" class="form-err">সঠিক বাংলাদেশি নম্বর দিন (01X-XXXXXXXX)</div>
        </div>
        <!-- Address -->
        <div class="form-group">
          <label class="form-label"><i class="fas fa-map-marker-alt mr-1 text-primary"></i>সম্পূর্ণ ঠিকানা *</label>
          <textarea id="custAddress" class="form-input" rows="3" placeholder="বাড়ি নং, গ্রাম/মহল্লা, উপজেলা, জেলা, বিভাগ"></textarea>
          <div id="addrErr" class="form-err">সম্পূর্ণ ঠিকানা দিন</div>
        </div>
        <!-- ===== SHIPPING METHOD ===== -->
        <div class="form-group">
          <label class="form-label"><i class="fas fa-shipping-fast mr-1 text-primary"></i>শিপিং পদ্ধতি *</label>
          <div class="grid grid-cols-2 gap-3">
            <div class="delivery-option" id="del-dhaka" onclick="selectDelivery('dhaka')">
              <div class="delivery-icon bg-blue-50 text-blue-700"><i class="fas fa-city"></i></div>
              <div>
                <div class="font-bold">ঢাকার ভেতরে</div>
                <div class="text-xs text-gray-500">১ কার্যদিবস</div>
              </div>
              <div class="delivery-check"><i class="fas fa-check text-white text-xs"></i></div>
              <div class="delivery-badge bg-green-100 text-green-700">ফ্রি ডেলিভারি</div>
            </div>
            <div class="delivery-option" id="del-outside" onclick="selectDelivery('outside')">
              <div class="delivery-icon bg-amber-50 text-amber-700"><i class="fas fa-map-marked-alt"></i></div>
              <div>
                <div class="font-bold">ঢাকার বাহিরে</div>
                <div class="text-xs text-gray-500">২-৩ কার্যদিবস</div>
              </div>
              <div class="delivery-check"><i class="fas fa-check text-white text-xs"></i></div>
              <div class="delivery-badge bg-amber-100 text-amber-700">চার্জ প্রযোজ্য</div>
            </div>
          </div>
          <div id="delErr" class="form-err">শিপিং পদ্ধতি বেছে নিন</div>
          <input type="hidden" id="deliveryMethod" value="" />
        </div>
        <!-- ===== PAYMENT ===== -->
        <div class="form-group">
          <label class="form-label"><i class="fas fa-credit-card mr-1 text-primary"></i>পেমেন্ট পদ্ধতি *</label>
          <div class="grid grid-cols-3 gap-2">
            <div class="payment-option" id="pay-cod" onclick="selectPayment('cod')">
              <i class="fas fa-money-bill-wave text-green-600 text-xl"></i>
              <span>ক্যাশ অন<br/>ডেলিভারি</span>
            </div>
            <div class="payment-option" id="pay-bkash" onclick="selectPayment('bkash')">
              <i class="fas fa-mobile-alt text-orange-500 text-xl"></i>
              <span>বিকাশ</span>
            </div>
            <div class="payment-option" id="pay-nagad" onclick="selectPayment('nagad')">
              <i class="fas fa-mobile-alt text-orange-500 text-xl"></i>
              <span>নগদ</span>
            </div>
          </div>
          <div id="payErr" class="form-err">পেমেন্ট পদ্ধতি বেছে নিন</div>
          <input type="hidden" id="paymentMethod" value="" />
          <!-- বিকাশ / নগদ নম্বর ও Trx ID বক্স -->
          <div id="mobilePayInfo" class="mobile-pay-info">
            <p style="font-size:0.83rem;font-weight:700;color:#1e40af;margin:0 0 6px;">
              <i class="fas fa-info-circle mr-1"></i>
              নিচের নম্বরে <span id="payBrandName">বিকাশ</span> পেমেন্ট করুন:
            </p>
            <div class="pay-number-box">
              <span id="paymentNumberLabel" class="pay-number-text" style="color:#e91e7a;">01700000000</span>
              <button type="button" id="copyBtn" class="copy-btn" onclick="copyNumber()">
                <i class="fas fa-copy mr-1"></i>কপি
              </button>
            </div>
            <p style="font-size:0.78rem;color:#64748b;margin:0 0 6px;">
              <i class="fas fa-exclamation-circle mr-1 text-amber-500"></i>
              পেমেন্ট সম্পন্ন করার পর নিচে Transaction ID দিন:
            </p>
            <div>
              <input type="text" id="trxId" class="form-input" placeholder="Transaction ID লিখুন (যেমন: TRX1234567890)" />
              <div id="trxErr" class="form-err">Transaction ID দেওয়া আবশ্যক</div>
            </div>
          </div>
        </div>
        <!-- Price Summary -->
        <div class="bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-100 rounded-2xl p-4 mb-5">
          <div class="flex justify-between text-sm text-gray-500 mb-1.5">
            <span>পণ্যের মূল্য:</span>
            <span class="font-medium text-gray-700">৳<span id="basePrice">3499</span></span>
          </div>
          <div class="flex justify-between text-sm text-gray-500 mb-1.5">
            <span>পরিমাণ:</span>
            <span class="font-medium text-gray-700">× <span id="qtyDisplay">1</span></span>
          </div>
          <div class="flex justify-between text-sm text-gray-500 mb-1.5" id="deliveryChargeRow" style="display:none;">
            <span>ডেলিভারি চার্জ:</span>
            <span class="text-gray-700" id="deliveryChargeText">৳0</span>
          </div>
          <hr class="border-blue-200 mb-3" />
          <div class="flex justify-between font-bold text-primary text-xl">
            <span>মোট মূল্য:</span>
            <span>৳<span id="totalPrice">3499</span></span>
          </div>
        </div>
        <!-- Submit -->
        <button type="submit" id="submitBtn" class="btn-primary w-full text-lg py-4">
          <i class="fas fa-paper-plane"></i> অর্ডার নিশ্চিত করুন
        </button>
        <p class="text-center text-xs text-gray-400 mt-3">
          <i class="fas fa-lock mr-1 text-green-500"></i>আপনার তথ্য সম্পূর্ণ এনক্রিপ্টেড ও সুরক্ষিত
        </p>
      </form>
      <!-- Success -->
      <div class="success-box" id="successBox">
        <div style="font-size:4.5rem;" class="mb-3">🎉</div>
        <h3 class="text-2xl font-bold text-green-600 mb-2">অর্ডার সফল হয়েছে!</h3>
        <p class="text-gray-500 mb-5">আপনার অর্ডার নিশ্চিত করা হয়েছে। আমাদের টিম শীঘ্রই আপনার নম্বরে কল করবে।</p>
        <div class="bg-green-50 border border-green-200 rounded-2xl p-4 mb-6 text-sm text-green-700 text-left">
          <div class="flex items-start gap-2 mb-2"><i class="fas fa-check-circle mt-0.5"></i><span>ঢাকায় ডেলিভারি: ১ কার্যদিবস</span></div>
          <div class="flex items-start gap-2"><i class="fas fa-check-circle mt-0.5"></i><span>সারা দেশে: ২–৩ কার্যদিবস</span></div>
        </div>
        <button onclick="closeModal()" class="btn-primary px-10 py-3">বন্ধ করুন</button>
      </div>
    </div>
  </div>
</div>
<!-- ===== HERO ===== -->
<section class="hero-gradient min-h-screen flex items-center relative overflow-hidden pt-14 pb-20 md:pb-16">
  <div style="position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(0,139,245,0.14) 0%,transparent 70%);border-radius:50%;top:-200px;right:-200px;pointer-events:none;"></div>
  <div style="position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(0,80,200,0.10) 0%,transparent 70%);border-radius:50%;bottom:-180px;left:-150px;pointer-events:none;"></div>
  <div class="max-w-6xl mx-auto px-4 w-full">
    <div class="grid md:grid-cols-2 gap-10 items-center">
      <div class="text-white order-2 md:order-1" data-aos="fade-right" data-aos-duration="850">
        <div class="flex flex-wrap items-center gap-3 mb-5">
          <span class="glass text-white text-xs font-bold px-4 py-2 rounded-full tracking-widest uppercase"><i class="fab fa-apple mr-1.5"></i>Apple Official</span>
          <span class="bg-red-500 text-white text-xs font-bold px-4 py-2 rounded-full badge-anim shadow-lg">৩৫% ছাড়</span>
          <span class="glass text-white text-xs font-bold px-3 py-2 rounded-full"><i class="fas fa-globe mr-1 text-yellow-300"></i>Dubai Version</span>
        </div>
        <h1 class="text-4xl md:text-5xl lg:text-[3.4rem] font-bold leading-tight mb-2">Apple AirPods Pro</h1>
        <h2 class="text-3xl md:text-4xl font-bold mb-2"><span class="shimmer-text">2nd Generation ANC</span></h2>
        <p class="text-blue-100 text-base md:text-lg mb-7 leading-relaxed max-w-md">
          Advanced Active Noise Cancellation, Personalized Spatial Audio এবং MagSafe Charging — বাংলাদেশে সেরা দামে, ১০০% অরিজিনাল Dubai Version।
        </p>
        <div class="flex items-end gap-4 mb-8">
          <div>
            <div class="flex items-center gap-3 mb-1">
              <span class="text-4xl md:text-5xl font-bold">৳৩,৪৯৯</span>
              <span class="text-xl old-price">৳৫,৩৯৯</span>
            </div>
            <div class="flex items-center gap-3">
              <span class="bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full"><i class="fas fa-tag mr-1"></i>৳১,৯০০ সাশ্রয়</span>
              <span class="text-green-400 text-sm font-semibold">ফ্রি ডেলিভারি</span>
            </div>
          </div>
        </div>
        <div class="flex flex-wrap gap-4 mb-8">
          <button onclick="openModal()" class="btn-primary pulse-btn text-lg px-8 py-4">
            <i class="fas fa-shopping-cart"></i>এখনই কিনুন
          </button>
          <button onclick="document.getElementById('features').scrollIntoView({behavior:'smooth'})" class="btn-secondary text-lg px-8 py-4">
            <i class="fas fa-info-circle"></i>বিস্তারিত দেখুন
          </button>
        </div>
        <div class="flex flex-wrap gap-3">
          <span class="glass text-white text-xs px-3 py-2 rounded-full font-medium"><i class="fas fa-shield-alt mr-1 text-green-400"></i>১ বছরের ওয়ারেন্টি</span>
          <span class="glass text-white text-xs px-3 py-2 rounded-full font-medium"><i class="fas fa-truck mr-1 text-blue-300"></i>ফ্রি ডেলিভারি</span>
          <span class="glass text-white text-xs px-3 py-2 rounded-full font-medium"><i class="fas fa-undo mr-1 text-yellow-300"></i>৭ দিনের রিটার্ন</span>
          <span class="glass text-white text-xs px-3 py-2 rounded-full font-medium"><i class="fas fa-certificate mr-1 text-pink-300"></i>১০০% অরিজিনাল</span>
        </div>
      </div>
      <div class="flex flex-col items-center gap-5 order-1 md:order-2" data-aos="fade-left" data-aos-duration="850">
        <div class="relative flex items-center justify-center" style="min-height:280px;">
          <div class="glow-anim" style="position:absolute;width:260px;height:260px;background:radial-gradient(circle,rgba(0,139,245,0.28) 0%,transparent 70%);border-radius:50%;pointer-events:none;"></div>
          <img id="mainImg"
            src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_uQUt3mJbDSYMaV2o8IL9lgsLXDNfHjagpUxr6T0jhy3nfpLr60peGIgvPcgb5vSJS7aRQ84Ujov3sVSuxSqR3bQbR_UmfUrShXJdMiBpyUYBQtguPADrhAzzd1R5jsBObXVgLNrDcAyH677xigiPMzku_Wv3aB8OewMCMX_GZWRKmZmsQU-WMoOR6bMx/w640-h636/cof0MxW9RY6V5wbXng4WbxhJSlmlOyHDhSv5dAHd.png"
            alt="Apple AirPods Pro 2nd Gen"
            class="product-glow float-anim relative z-10"
            style="width:260px;height:260px;object-fit:contain;cursor:pointer;"
            onclick="openLightbox(this.src)" />
          <div class="glass absolute top-0 -left-2 px-3 py-2 rounded-xl text-white text-xs font-bold flex items-center gap-1.5" style="z-index:20;"><i class="fas fa-star text-yellow-300"></i>৪.৯/৫ রেটিং</div>
          <div class="glass absolute bottom-0 -right-2 px-3 py-2 rounded-xl text-white text-xs font-bold flex items-center gap-1.5" style="z-index:20;"><i class="fas fa-fire text-orange-300"></i>সীমিত স্টক</div>
        </div>
        <div class="flex gap-3 flex-wrap justify-center">
          <div class="thumb active" onclick="switchImg(this,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_uQUt3mJbDSYMaV2o8IL9lgsLXDNfHjagpUxr6T0jhy3nfpLr60peGIgvPcgb5vSJS7aRQ84Ujov3sVSuxSqR3bQbR_UmfUrShXJdMiBpyUYBQtguPADrhAzzd1R5jsBObXVgLNrDcAyH677xigiPMzku_Wv3aB8OewMCMX_GZWRKmZmsQU-WMoOR6bMx/w640-h636/cof0MxW9RY6V5wbXng4WbxhJSlmlOyHDhSv5dAHd.png')" style="width:68px;">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_uQUt3mJbDSYMaV2o8IL9lgsLXDNfHjagpUxr6T0jhy3nfpLr60peGIgvPcgb5vSJS7aRQ84Ujov3sVSuxSqR3bQbR_UmfUrShXJdMiBpyUYBQtguPADrhAzzd1R5jsBObXVgLNrDcAyH677xigiPMzku_Wv3aB8OewMCMX_GZWRKmZmsQU-WMoOR6bMx/w640-h636/cof0MxW9RY6V5wbXng4WbxhJSlmlOyHDhSv5dAHd.png" alt="t1" />
          </div>
          <div class="thumb" onclick="switchImg(this,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6dAFhLTGDrQrhtDo2bGqutM-m-AvWnJVkP3vYu11IIPEdsm4vtV7F92vs2zSFozS4Z5aWQnJMf1D36lJCJzeJbuunBGefrMJ-7a7m0v_GZ87Uh-dD3GEVPc8WuNGHpKoHPu3iTJcxdSJyeyqjios2C2TjBelGY6IeMXEb9cGs6P1cmj-AddgphfJMoBD/w640-h640/0BRV5OJkK5cNdQK83uDEYwUZyrihWlPNModO5tga.webp')" style="width:68px;">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6dAFhLTGDrQrhtDo2bGqutM-m-AvWnJVkP3vYu11IIPEdsm4vtV7F92vs2zSFozS4Z5aWQnJMf1D36lJCJzeJbuunBGefrMJ-7a7m0v_GZ87Uh-dD3GEVPc8WuNGHpKoHPu3iTJcxdSJyeyqjios2C2TjBelGY6IeMXEb9cGs6P1cmj-AddgphfJMoBD/w640-h640/0BRV5OJkK5cNdQK83uDEYwUZyrihWlPNModO5tga.webp" alt="t2" />
          </div>
          <div class="thumb" onclick="switchImg(this,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54xlezoSRuTARt5cUZJDQZBeP1T5-0k3SlDCZlHwucOSm-T1toxIC1_042qda3iKXMiypcefuHZ7BCaxTCAlJewWlV-NC3TFyI5lFMj6WsVcldH8LIKbiMip7Pw-aAxlZFAZhLWkDETTEGY92y8Yeqp929lE2WCj1sQWBJ5wDYNARA8DeGuR3RyaJVcjQ/w640-h546/lPG62w3PLXKLaIBHcqQUzy9saAlPFKEAGSsV7h2n.jpg')" style="width:68px;">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54xlezoSRuTARt5cUZJDQZBeP1T5-0k3SlDCZlHwucOSm-T1toxIC1_042qda3iKXMiypcefuHZ7BCaxTCAlJewWlV-NC3TFyI5lFMj6WsVcldH8LIKbiMip7Pw-aAxlZFAZhLWkDETTEGY92y8Yeqp929lE2WCj1sQWBJ5wDYNARA8DeGuR3RyaJVcjQ/w640-h546/lPG62w3PLXKLaIBHcqQUzy9saAlPFKEAGSsV7h2n.jpg" alt="t3" />
          </div>
          <div class="thumb" onclick="switchImg(this,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQnj89i9f8Jd7PYwQXJc012Jo20KkuxXU9BBtmMNykW5NQjeiZn-ka3Hlej5iZxkJkZDhIKGflY8xBGapnbONevYSvlCKmUlIQmcO1icT-ZuL-cXro4THIxApB8dekUj2ChN2NWtMDxXDmDxwhxHTaij_UOh3jwaAxcxnZ6AV-rxeD9Tg_fjas7XdotEyI/w640-h640/WZAF4rVvbZGf5aOtFT8avMdEtUEGfZVOeZxrfndV.jpg')" style="width:68px;">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQnj89i9f8Jd7PYwQXJc012Jo20KkuxXU9BBtmMNykW5NQjeiZn-ka3Hlej5iZxkJkZDhIKGflY8xBGapnbONevYSvlCKmUlIQmcO1icT-ZuL-cXro4THIxApB8dekUj2ChN2NWtMDxXDmDxwhxHTaij_UOh3jwaAxcxnZ6AV-rxeD9Tg_fjas7XdotEyI/w640-h640/WZAF4rVvbZGf5aOtFT8avMdEtUEGfZVOeZxrfndV.jpg" alt="t4" />
          </div>
          <div class="thumb" onclick="switchImg(this,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNqI9K6PT-03B_WnboRHoSJqxqqTOuTfOm-_mc-U59lCYfLjD_brdpLXk1f1wf47fOC-hfNPVf8T_iugPKMf6tb1fj7QshNtO4746Xf25tll3HZb2rXj2KMI1CoP31Ksoil33EoC2s3oczt84FlYmQnoD4P4TNDwblrf5lJbwS92734Heqxug8sHpHv7J/w640-h640/prod-6245613.w7Be1UCfVdWv3j5vDo9wjetRtaBZ7Ku6BPrCsHTi.jpg')" style="width:68px;">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNqI9K6PT-03B_WnboRHoSJqxqqTOuTfOm-_mc-U59lCYfLjD_brdpLXk1f1wf47fOC-hfNPVf8T_iugPKMf6tb1fj7QshNtO4746Xf25tll3HZb2rXj2KMI1CoP31Ksoil33EoC2s3oczt84FlYmQnoD4P4TNDwblrf5lJbwS92734Heqxug8sHpHv7J/w640-h640/prod-6245613.w7Be1UCfVdWv3j5vDo9wjetRtaBZ7Ku6BPrCsHTi.jpg" alt="t5" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- COUNTDOWN -->
<section class="bg-gradient-to-r from-red-600 via-rose-600 to-orange-500 py-6">
  <div class="max-w-4xl mx-auto px-4 text-center text-white">
    <p class="font-bold text-lg mb-4"><i class="fas fa-fire mr-2 text-yellow-300"></i>অফারের মেয়াদ শেষ হওয়ার আগেই অর্ডার করুন!</p>
    <div class="flex justify-center items-center gap-4">
      <div class="countdown-box"><div class="countdown-num" id="cdHours">00</div><div class="countdown-label">ঘণ্টা</div></div>
      <span class="text-3xl font-bold opacity-70">:</span>
      <div class="countdown-box"><div class="countdown-num" id="cdMins">00</div><div class="countdown-label">মিনিট</div></div>
      <span class="text-3xl font-bold opacity-70">:</span>
      <div class="countdown-box"><div class="countdown-num" id="cdSecs">00</div><div class="countdown-label">সেকেন্ড</div></div>
    </div>
    <p class="mt-4 text-sm text-red-100"><i class="fas fa-info-circle mr-1"></i>মাত্র সীমিত কপি বাকি আছে — দ্রুত অর্ডার করুন!</p>
  </div>
</section>
<!-- TRUST BADGES -->
<section class="bg-white py-8 border-b border-gray-100">
  <div class="max-w-5xl mx-auto px-4">
    <div class="flex flex-wrap justify-center gap-3">
      <div class="trust-badge"><i class="fas fa-certificate text-primary"></i><span>১০০% অরিজিনাল পণ্য</span></div>
      <div class="trust-badge"><i class="fab fa-apple text-primary"></i><span>Apple Authorized</span></div>
      <div class="trust-badge"><i class="fas fa-truck text-primary"></i><span>ফ্রি হোম ডেলিভারি</span></div>
      <div class="trust-badge"><i class="fas fa-money-bill-wave text-primary"></i><span>ক্যাশ অন ডেলিভারি</span></div>
      <div class="trust-badge"><i class="fas fa-undo text-primary"></i><span>৭ দিনের রিটার্ন</span></div>
      <div class="trust-badge"><i class="fas fa-award text-primary"></i><span>১ বছরের ওয়ারেন্টি</span></div>
      <div class="trust-badge"><i class="fas fa-headset text-primary"></i><span>২৪/৭ সাপোর্ট</span></div>
    </div>
  </div>
</section>
<!-- FEATURES -->
<section id="features" class="py-20 section-gradient">
  <div class="max-w-6xl mx-auto px-4">
    <div class="text-center mb-14" data-aos="fade-up">
      <div class="section-tag">মূল বৈশিষ্ট্য</div>
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">কেন AirPods Pro আলাদা?</h2>
      <p class="text-gray-500 mt-3 max-w-lg mx-auto">Apple-এর সর্বোচ্চ প্রযুক্তি — আপনার শ্রবণ অভিজ্ঞতাকে নিয়ে যাবে সম্পূর্ণ নতুন মাত্রায়।</p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="feature-card" data-aos="fade-up" data-aos-delay="0">
        <div class="feature-icon bg-gradient-to-br from-blue-400 to-primary"><i class="fas fa-volume-mute text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">Active Noise Cancellation</h3>
        <p class="text-gray-500 text-sm leading-relaxed">২য় প্রজন্মের উন্নত ANC প্রযুক্তি বাইরের শব্দকে প্রায় সম্পূর্ণ দূর করে — অফিস, বাস বা ট্রেনে পরিপূর্ণ শ্রবণ অভিজ্ঞতা।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="80">
        <div class="feature-icon bg-gradient-to-br from-violet-400 to-purple-600"><i class="fas fa-globe text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">Personalized Spatial Audio</h3>
        <p class="text-gray-500 text-sm leading-relaxed">Dynamic head tracking সহ Personalized Spatial Audio — শব্দ চারদিক থেকে আসছে মনে হবে, যেন সিনেমা হলে আছেন।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="160">
        <div class="feature-icon bg-gradient-to-br from-emerald-400 to-green-600"><i class="fas fa-eye text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">Adaptive Transparency</h3>
        <p class="text-gray-500 text-sm leading-relaxed">বাইরের জরুরি শব্দ শুনুন, কিন্তু ক্ষতিকর উচ্চ শব্দ স্বয়ংক্রিয়ভাবে কমে যাবে। রাস্তায় চলতে সম্পূর্ণ নিরাপদ।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="0">
        <div class="feature-icon bg-gradient-to-br from-amber-400 to-orange-500"><i class="fas fa-battery-full text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">৩০ ঘণ্টা ব্যাটারি লাইফ</h3>
        <p class="text-gray-500 text-sm leading-relaxed">ANC চালু থাকলে ৬ ঘণ্টা + MagSafe কেস সহ মোট ৩০ ঘণ্টার ব্যাটারি ব্যাকআপ — সারাদিনের জন্য যথেষ্ট।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="80">
        <div class="feature-icon bg-gradient-to-br from-pink-400 to-rose-600"><i class="fas fa-magnet text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">MagSafe & Wireless Charging</h3>
        <p class="text-gray-500 text-sm leading-relaxed">MagSafe, Apple Watch charger, Qi wireless এবং Lightning — যেকোনো উপায়ে চার্জ করুন। সর্বোচ্চ সুবিধা।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="160">
        <div class="feature-icon bg-gradient-to-br from-cyan-400 to-blue-500"><i class="fas fa-hand-point-up text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">Touch Control</h3>
        <p class="text-gray-500 text-sm leading-relaxed">ভলিউম অ্যাডজাস্ট, প্লেব্যাক কন্ট্রোল, কল ম্যানেজমেন্ট এবং ANC/Transparency মোড সুইচ — সব কিছু আঙুলের স্পর্শে।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="0">
        <div class="feature-icon bg-gradient-to-br from-teal-400 to-emerald-600"><i class="fas fa-running text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">৪ সাইজের ইয়ার টিপ</h3>
        <p class="text-gray-500 text-sm leading-relaxed">XS, S, M, L — চারটি সিলিকোন ইয়ার টিপ সাইজ সহ আসে। নিখুঁত ফিট, সর্বোচ্চ আরাম এবং সেরা আওয়াজ নিরোধক।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="80">
        <div class="feature-icon bg-gradient-to-br from-indigo-400 to-blue-700"><i class="fab fa-apple text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">Apple Ecosystem Integration</h3>
        <p class="text-gray-500 text-sm leading-relaxed">iPhone, iPad, Mac, Apple Watch — সব Apple ডিভাইসে নিরবচ্ছিন্ন সংযোগ। Siri সাপোর্ট সহ সম্পূর্ণ হ্যান্ডস-ফ্রি অভিজ্ঞতা।</p>
      </div>
      <div class="feature-card" data-aos="fade-up" data-aos-delay="160">
        <div class="feature-icon bg-gradient-to-br from-gray-500 to-gray-800"><i class="fas fa-globe-asia text-white"></i></div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">Dubai Version — Premium Quality</h3>
        <p class="text-gray-500 text-sm leading-relaxed">মধ্যপ্রাচ্যের অফিশিয়াল Dubai Version — বিশ্বমানের গুণগত মান, আন্তর্জাতিক ওয়ারেন্টি এবং প্রিমিয়াম প্যাকেজিং সহ।</p>
      </div>
    </div>
  </div>
</section>
<!-- GALLERY -->
<section class="py-20 bg-white">
  <div class="max-w-6xl mx-auto px-4">
    <div class="text-center mb-14" data-aos="fade-up">
      <div class="section-tag">পণ্যের ছবি</div>
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">সব দিক থেকে দেখুন</h2>
      <p class="text-gray-500 mt-2 text-sm">ছবিতে ক্লিক করে বড় করে দেখুন</p>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-3 gap-5">
      <div class="gallery-card md:col-span-1" data-aos="fade-up" data-aos-delay="0">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_uQUt3mJbDSYMaV2o8IL9lgsLXDNfHjagpUxr6T0jhy3nfpLr60peGIgvPcgb5vSJS7aRQ84Ujov3sVSuxSqR3bQbR_UmfUrShXJdMiBpyUYBQtguPADrhAzzd1R5jsBObXVgLNrDcAyH677xigiPMzku_Wv3aB8OewMCMX_GZWRKmZmsQU-WMoOR6bMx/w640-h636/cof0MxW9RY6V5wbXng4WbxhJSlmlOyHDhSv5dAHd.png" alt="AirPods Pro Front" class="w-full h-52 md:h-64 object-cover" onclick="openLightbox(this.src)" />
      </div>
      <div class="gallery-card" data-aos="fade-up" data-aos-delay="80">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6dAFhLTGDrQrhtDo2bGqutM-m-AvWnJVkP3vYu11IIPEdsm4vtV7F92vs2zSFozS4Z5aWQnJMf1D36lJCJzeJbuunBGefrMJ-7a7m0v_GZ87Uh-dD3GEVPc8WuNGHpKoHPu3iTJcxdSJyeyqjios2C2TjBelGY6IeMXEb9cGs6P1cmj-AddgphfJMoBD/w640-h640/0BRV5OJkK5cNdQK83uDEYwUZyrihWlPNModO5tga.webp" alt="AirPods Pro Case" class="w-full h-52 md:h-64 object-cover" onclick="openLightbox(this.src)" />
      </div>
      <div class="gallery-card" data-aos="fade-up" data-aos-delay="160">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54xlezoSRuTARt5cUZJDQZBeP1T5-0k3SlDCZlHwucOSm-T1toxIC1_042qda3iKXMiypcefuHZ7BCaxTCAlJewWlV-NC3TFyI5lFMj6WsVcldH8LIKbiMip7Pw-aAxlZFAZhLWkDETTEGY92y8Yeqp929lE2WCj1sQWBJ5wDYNARA8DeGuR3RyaJVcjQ/w640-h546/lPG62w3PLXKLaIBHcqQUzy9saAlPFKEAGSsV7h2n.jpg" alt="AirPods Pro Lifestyle" class="w-full h-52 md:h-64 object-cover" onclick="openLightbox(this.src)" />
      </div>
      <div class="gallery-card" data-aos="fade-up" data-aos-delay="0">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQnj89i9f8Jd7PYwQXJc012Jo20KkuxXU9BBtmMNykW5NQjeiZn-ka3Hlej5iZxkJkZDhIKGflY8xBGapnbONevYSvlCKmUlIQmcO1icT-ZuL-cXro4THIxApB8dekUj2ChN2NWtMDxXDmDxwhxHTaij_UOh3jwaAxcxnZ6AV-rxeD9Tg_fjas7XdotEyI/w640-h640/WZAF4rVvbZGf5aOtFT8avMdEtUEGfZVOeZxrfndV.jpg" alt="AirPods Pro Black" class="w-full h-48 object-cover" onclick="openLightbox(this.src)" />
      </div>
      <div class="gallery-card md:col-span-2" data-aos="fade-up" data-aos-delay="80">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNqI9K6PT-03B_WnboRHoSJqxqqTOuTfOm-_mc-U59lCYfLjD_brdpLXk1f1wf47fOC-hfNPVf8T_iugPKMf6tb1fj7QshNtO4746Xf25tll3HZb2rXj2KMI1CoP31Ksoil33EoC2s3oczt84FlYmQnoD4P4TNDwblrf5lJbwS92734Heqxug8sHpHv7J/w640-h640/prod-6245613.w7Be1UCfVdWv3j5vDo9wjetRtaBZ7Ku6BPrCsHTi.jpg" alt="AirPods Pro Product Shot" class="w-full h-48 object-cover" onclick="openLightbox(this.src)" />
      </div>
    </div>
  </div>
</section>
<!-- SPECIFICATIONS -->
<section class="py-20 section-gradient">
  <div class="max-w-4xl mx-auto px-4">
    <div class="text-center mb-14" data-aos="fade-up">
      <div class="section-tag">স্পেসিফিকেশন</div>
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">প্রযুক্তিগত বিবরণ</h2>
    </div>
    <div class="bg-white rounded-2xl overflow-hidden shadow-md border border-gray-100" data-aos="fade-up" data-aos-delay="100">
      <table class="w-full">
        <thead>
          <tr style="background:linear-gradient(135deg,#008bf5,#0060c7);">
            <th class="px-6 py-4 text-white text-left font-bold text-sm">বৈশিষ্ট্য</th>
            <th class="px-6 py-4 text-white text-left font-bold text-sm">বিবরণ</th>
          </tr>
        </thead>
        <tbody>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-microchip mr-2 text-primary"></i>চিপ</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">Apple H2 Chip</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-volume-mute mr-2 text-primary"></i>নয়েজ ক্যান্সেলেশন</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">Active Noise Cancellation (2nd Gen), Adaptive Transparency</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-music mr-2 text-primary"></i>অডিও</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">Personalized Spatial Audio with Dynamic Head Tracking</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-battery-full mr-2 text-primary"></i>ব্যাটারি (ইয়ারবাড)</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">৬ ঘণ্টা (ANC on) | ৩০ ঘণ্টা কেস সহ</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-charging-station mr-2 text-primary"></i>চার্জিং</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">MagSafe | Apple Watch Charger | Qi Wireless | Lightning</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-wifi mr-2 text-primary"></i>কানেক্টিভিটি</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">Bluetooth 5.3</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-tint mr-2 text-primary"></i>ওয়াটার রেজিস্ট্যান্স</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">IPX4 (Earbuds) | IPX4 (Case)</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-ear-listen mr-2 text-primary"></i>ইয়ার টিপ সাইজ</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">XS, S, M, L — ৪টি সিলিকোন ইয়ার টিপ অন্তর্ভুক্ত</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fab fa-apple mr-2 text-primary"></i>কমপ্যাটিবিলিটি</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">iOS 16+, iPadOS 16+, macOS 13+, watchOS 9+, tvOS 16+</td></tr>
          <tr class="spec-row border-b border-gray-100"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-palette mr-2 text-primary"></i>রঙ</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">White (হোয়াইট) | Black (ব্ল্যাক)</td></tr>
          <tr class="spec-row"><td class="px-6 py-4 font-semibold text-gray-600 bg-gray-50 text-sm"><i class="fas fa-box mr-2 text-primary"></i>বাক্সের বিষয়বস্তু</td><td class="px-6 py-4 text-gray-800 font-medium text-sm">AirPods Pro, MagSafe Charging Case, Lightning Cable, ৪ সাইজের ইয়ার টিপ, ডকুমেন্টেশন</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>
<!-- WHY CHOOSE -->
<section class="py-20 bg-white">
  <div class="max-w-5xl mx-auto px-4">
    <div class="grid md:grid-cols-2 gap-14 items-center">
      <div data-aos="fade-right">
        <div class="section-tag">কেন আমরা?</div>
        <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-8">AirPods Pro 2nd Gen কেন সেরা পছন্দ?</h2>
        <div class="space-y-5">
          <div class="flex items-start gap-4 p-4 rounded-xl border border-blue-50 hover:border-blue-200 hover:bg-blue-50 transition-all">
            <div class="w-10 h-10 rounded-xl bg-primary flex-shrink-0 flex items-center justify-center"><i class="fas fa-check text-white text-sm"></i></div>
            <div><h4 class="font-bold text-gray-800 mb-1">বিশ্বের সেরা ANC প্রযুক্তি</h4><p class="text-gray-500 text-sm">Apple H2 chip-powered ANC — যেকোনো পরিবেশে ক্রিস্টাল ক্লিয়ার সাউন্ড।</p></div>
          </div>
          <div class="flex items-start gap-4 p-4 rounded-xl border border-blue-50 hover:border-blue-200 hover:bg-blue-50 transition-all">
            <div class="w-10 h-10 rounded-xl bg-primary flex-shrink-0 flex items-center justify-center"><i class="fas fa-check text-white text-sm"></i></div>
            <div><h4 class="font-bold text-gray-800 mb-1">১০০% অরিজিনাল Dubai Version</h4><p class="text-gray-500 text-sm">সরাসরি Dubai থেকে আনা অফিশিয়াল প্যাকেজ — কোনো নকল নেই, কোনো আপোষ নেই।</p></div>
          </div>
          <div class="flex items-start gap-4 p-4 rounded-xl border border-blue-50 hover:border-blue-200 hover:bg-blue-50 transition-all">
            <div class="w-10 h-10 rounded-xl bg-primary flex-shrink-0 flex items-center justify-center"><i class="fas fa-check text-white text-sm"></i></div>
            <div><h4 class="font-bold text-gray-800 mb-1">সারা বাংলাদেশে দ্রুত ডেলিভারি</h4><p class="text-gray-500 text-sm">ঢাকায় ১ দিন, সারা দেশে ২-৩ কার্যদিবস। অর্ডার পরে কল করে নিশ্চিত করা হয়।</p></div>
          </div>
          <div class="flex items-start gap-4 p-4 rounded-xl border border-blue-50 hover:border-blue-200 hover:bg-blue-50 transition-all">
            <div class="w-10 h-10 rounded-xl bg-primary flex-shrink-0 flex items-center justify-center"><i class="fas fa-check text-white text-sm"></i></div>
            <div><h4 class="font-bold text-gray-800 mb-1">১ বছরের ওয়ারেন্টি + সহজ রিটার্ন</h4><p class="text-gray-500 text-sm">যেকোনো ম্যানুফ্যাকচারিং সমস্যায় বিনামূল্যে সেবা। ৭ দিনের মধ্যে ফেরত দেওয়া যাবে।</p></div>
          </div>
        </div>
        <div class="mt-8">
          <button onclick="openModal()" class="btn-primary text-lg"><i class="fas fa-shopping-cart"></i>এখনই অর্ডার করুন</button>
        </div>
      </div>
      <div class="flex justify-center" data-aos="fade-left">
        <div class="relative">
          <div style="position:absolute;inset:-24px;background:linear-gradient(135deg,rgba(0,139,245,0.07),rgba(0,80,200,0.04));border-radius:34px;"></div>
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6dAFhLTGDrQrhtDo2bGqutM-m-AvWnJVkP3vYu11IIPEdsm4vtV7F92vs2zSFozS4Z5aWQnJMf1D36lJCJzeJbuunBGefrMJ-7a7m0v_GZ87Uh-dD3GEVPc8WuNGHpKoHPu3iTJcxdSJyeyqjios2C2TjBelGY6IeMXEb9cGs6P1cmj-AddgphfJMoBD/w640-h640/0BRV5OJkK5cNdQK83uDEYwUZyrihWlPNModO5tga.webp"
            alt="AirPods Pro Case" class="w-72 md:w-80 h-auto object-contain relative z-10 float-anim rounded-3xl shadow-2xl" />
        </div>
      </div>
    </div>
  </div>
</section>
<!-- DELIVERY INFO -->
<section class="py-14" style="background:linear-gradient(135deg,#008bf5 0%,#0050b0 50%,#003080 100%);">
  <div class="max-w-5xl mx-auto px-4">
    <div class="text-center text-white mb-10" data-aos="fade-up">
      <h2 class="text-2xl md:text-3xl font-bold">ডেলিভারি তথ্য</h2>
      <p class="text-blue-100 mt-2">সারা বাংলাদেশে আমরা পৌঁছে যাই</p>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
      <div class="glass text-center p-6 rounded-2xl text-white" data-aos="zoom-in" data-aos-delay="0"><i class="fas fa-city text-3xl mb-3 text-yellow-300"></i><div class="font-bold text-lg">ঢাকায়</div><div class="text-blue-100 text-sm mt-1">১ কার্যদিবস</div></div>
      <div class="glass text-center p-6 rounded-2xl text-white" data-aos="zoom-in" data-aos-delay="80"><i class="fas fa-map-marked-alt text-3xl mb-3 text-yellow-300"></i><div class="font-bold text-lg">সারা দেশ</div><div class="text-blue-100 text-sm mt-1">২-৩ কার্যদিবস</div></div>
      <div class="glass text-center p-6 rounded-2xl text-white" data-aos="zoom-in" data-aos-delay="160"><i class="fas fa-truck text-3xl mb-3 text-yellow-300"></i><div class="font-bold text-lg">ডেলিভারি চার্জ</div><div class="text-green-300 text-sm font-bold mt-1">বিনামূল্যে!</div></div>
      <div class="glass text-center p-6 rounded-2xl text-white" data-aos="zoom-in" data-aos-delay="240"><i class="fas fa-money-bill-wave text-3xl mb-3 text-yellow-300"></i><div class="font-bold text-lg">পেমেন্ট</div><div class="text-blue-100 text-sm mt-1">ডেলিভারিতে পরিশোধ</div></div>
    </div>
  </div>
</section>
<!-- REVIEWS -->
<section class="py-20 section-gradient">
  <div class="max-w-6xl mx-auto px-4">
    <div class="text-center mb-14" data-aos="fade-up">
      <div class="section-tag">গ্রাহকের মতামত</div>
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">সন্তুষ্ট গ্রাহকরা কী বলছেন?</h2>
      <div class="flex justify-center items-center gap-2 mt-3">
        <div class="stars text-xl"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
        <span class="font-bold text-gray-700">৪.৯/৫</span>
        <span class="text-gray-400 text-sm">(২,৬৫৩ রিভিউ)</span>
      </div>
    </div>
    <div class="grid md:grid-cols-3 gap-6">
      <div class="review-card" data-aos="fade-up" data-aos-delay="0">
        <div class="quote-icon">"</div>
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-primary flex items-center justify-center text-white font-bold text-lg flex-shrink-0">স</div>
          <div><div class="font-bold text-gray-800">সাইফুল ইসলাম</div><div class="text-gray-400 text-xs">ঢাকা, গুলশান</div></div>
          <div class="ml-auto stars text-sm flex-shrink-0"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
        </div>
        <p class="text-gray-600 text-sm leading-relaxed mb-4">"ANC সত্যিই অসাধারণ! অফিসে পাশে সবাই কথা বলছে, আমি একদম নিজের দুনিয়ায়। Spatial Audio চালু করলে মনে হয় সিনেমা হলে বসে আছি। টাকা পুরোপুরি উসুল।"</p>
        <div class="flex items-center gap-2 text-xs text-green-600 font-semibold"><i class="fas fa-check-circle"></i>যাচাইকৃত ক্রেতা</div>
        <div class="mt-3 bg-gray-50 rounded-xl p-2 text-xs text-gray-400 text-center">📅 ৮ এপ্রিল, ২০২৫</div>
      </div>
      <div class="review-card" data-aos="fade-up" data-aos-delay="100">
        <div class="quote-icon">"</div>
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">ন</div>
          <div><div class="font-bold text-gray-800">নাদিয়া রহমান</div><div class="text-gray-400 text-xs">চট্টগ্রাম, নাসিরাবাদ</div></div>
          <div class="ml-auto stars text-sm flex-shrink-0"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
        </div>
        <p class="text-gray-600 text-sm leading-relaxed mb-4">"প্যাকেজিং দেখেই বুঝলাম ১০০% অরিজিনাল। ব্যাটারি সত্যিই অনেকক্ষণ টেকে। বৃষ্টিতে ভিজেও কোনো সমস্যা হয়নি। iPhone-এর সাথে সংযোগ মাত্র ৫ সেকেন্ডে।"</p>
        <div class="flex items-center gap-2 text-xs text-green-600 font-semibold"><i class="fas fa-check-circle"></i>যাচাইকৃত ক্রেতা</div>
        <div class="mt-3 bg-gray-50 rounded-xl p-2 text-xs text-gray-400 text-center">📅 ২১ মার্চ, ২০২৫</div>
      </div>
      <div class="review-card" data-aos="fade-up" data-aos-delay="200">
        <div class="quote-icon">"</div>
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-green-600 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">র</div>
          <div><div class="font-bold text-gray-800">রাফি হোসেন</div><div class="text-gray-400 text-xs">সিলেট</div></div>
          <div class="ml-auto stars text-sm flex-shrink-0"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
        </div>
        <p class="text-gray-600 text-sm leading-relaxed mb-4">"Dubai version মানেই আলাদা একটা ব্যাপার আছে। Call quality অনেক পরিষ্কার। Transparency mode-এ রাস্তায় চলা নিরাপদ। ২ দিনেই ডেলিভারি পেয়েছি।"</p>
        <div class="flex items-center gap-2 text-xs text-green-600 font-semibold"><i class="fas fa-check-circle"></i>যাচাইকৃত ক্রেতা</div>
        <div class="mt-3 bg-gray-50 rounded-xl p-2 text-xs text-gray-400 text-center">📅 ৫ ফেব্রুয়ারি, ২০২৫</div>
      </div>
    </div>
  </div>
</section>
<!-- FAQ -->
<section class="py-20 bg-white">
  <div class="max-w-3xl mx-auto px-4">
    <div class="text-center mb-14" data-aos="fade-up">
      <div class="section-tag">সাধারণ প্রশ্ন</div>
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী</h2>
    </div>
    <div id="faqContainer">
      <div class="faq-item" data-aos="fade-up" data-aos-delay="0">
        <div class="faq-header" onclick="toggleFaq(this)"><span>Dubai Version কি আসল Apple পণ্য?</span><i class="fas fa-chevron-down faq-icon"></i></div>
        <div class="faq-body">হ্যাঁ, একদম! Dubai Version হলো মধ্যপ্রাচ্যের অফিশিয়াল Apple পণ্য — আন্তর্জাতিক মানের, অরিজিনাল Apple প্যাকেজিং সহ। বাংলাদেশে সরাসরি Import করা হয়। Serial Number দিয়ে Apple-এর ওয়েবসাইটে যাচাই করতে পারবেন।</div>
      </div>
      <div class="faq-item" data-aos="fade-up" data-aos-delay="40">
        <div class="faq-header" onclick="toggleFaq(this)"><span>Android ফোনে কি ব্যবহার করা যাবে?</span><i class="fas fa-chevron-down faq-icon"></i></div>
        <div class="faq-body">হ্যাঁ, Bluetooth-এর মাধ্যমে Android ফোনে সংযোগ করা যাবে এবং সাউন্ড শুনতে পারবেন। তবে ANC, Spatial Audio, Siri, Automatic ear detection এবং অন্য Apple-exclusive ফিচারগুলো সম্পূর্ণরূপে কাজ করতে iOS 16+ বা অন্য Apple ডিভাইস প্রয়োজন।</div>
      </div>
      <div class="faq-item" data-aos="fade-up" data-aos-delay="80">
        <div class="faq-header" onclick="toggleFaq(this)"><span>ANC কতটা কার্যকর?</span><i class="fas fa-chevron-down faq-icon"></i></div>
        <div class="faq-body">AirPods Pro 2nd Gen-এর ANC বাজারের সেরা। Apple-এর নিজস্ব পরিসংখ্যান অনুযায়ী এটি ১ম প্রজন্মের তুলনায় দ্বিগুণ কার্যকর। অফিস, বাস, ট্রেন বা ক্যাফেতে — বাইরের শব্দ প্রায় সম্পূর্ণ বন্ধ হয়ে যায়।</div>
      </div>
      <div class="faq-item" data-aos="fade-up" data-aos-delay="120">
        <div class="faq-header" onclick="toggleFaq(this)"><span>ডেলিভারি কত দিনে পাব?</span><i class="fas fa-chevron-down faq-icon"></i></div>
        <div class="faq-body">ঢাকার ভেতরে সাধারণত ১ কার্যদিবস। সারা বাংলাদেশে ২-৩ কার্যদিবস। অর্ডার নিশ্চিত হওয়ার পরে আমাদের টিম আপনাকে ফোন করে ডেলিভারির সময় জানাবে।</div>
      </div>
      <div class="faq-item" data-aos="fade-up" data-aos-delay="160">
        <div class="faq-header" onclick="toggleFaq(this)"><span>পণ্য পছন্দ না হলে কি ফেরত দিতে পারব?</span><i class="fas fa-chevron-down faq-icon"></i></div>
        <div class="faq-body">অবশ্যই। পণ্য পাওয়ার ৭ দিনের মধ্যে অরিজিনাল প্যাকেজিং সহ ফেরত পাঠালে সম্পূর্ণ অর্থ ফেরত দেওয়া হবে। ডেলিভারিতে সমস্যা থাকলে বা পণ্য ক্ষতিগ্রস্ত অবস্থায় পেলে তাৎক্ষণিক প্রতিস্থাপন করা হবে।</div>
      </div>
      <div class="faq-item" data-aos="fade-up" data-aos-delay="200">
        <div class="faq-header" onclick="toggleFaq(this)"><span>বিকাশ/নগদে পেমেন্ট কীভাবে করব?</span><i class="fas fa-chevron-down faq-icon"></i></div>
        <div class="faq-body">অর্ডার ফর্মে বিকাশ বা নগদ সিলেক্ট করলে আমাদের নম্বর দেখাবে। সেই নম্বরে পেমেন্ট পাঠান, তারপর Transaction ID ফর্মে লিখুন। আমরা যাচাই করে আপনার অর্ডার কনফার্ম করব।</div>
      </div>
    </div>
  </div>
</section>
<!-- FINAL CTA -->
<section class="py-20 hero-gradient">
  <div class="max-w-3xl mx-auto px-4 text-center text-white" data-aos="zoom-in">
    <div style="font-size:4rem;" class="mb-4">🎧</div>
    <h2 class="text-3xl md:text-4xl font-bold mb-4">এখনই অভিজ্ঞতা নিন!</h2>
    <p class="text-blue-100 text-lg mb-3 max-w-xl mx-auto">Apple AirPods Pro 2nd Gen ANC Dubai Version — বাংলাদেশে সেরা দামে, ১০০% অরিজিনাল।</p>
    <div class="glass inline-block px-6 py-3 rounded-2xl mb-6 text-base">
      <span class="old-price mr-2">৳৫,৩৯৯</span>
      <span class="text-2xl font-bold">৳৩,৪৯৯</span>
      <span class="ml-2 text-xs bg-red-500 text-white px-2 py-0.5 rounded-full font-bold">৩৫% ছাড়</span>
    </div>
    <div class="flex flex-wrap justify-center gap-4">
      <button onclick="openModal()" class="btn-primary pulse-btn text-xl px-10 py-5"><i class="fas fa-shopping-cart"></i>এখনই অর্ডার করুন</button>
    </div>
    <div class="flex justify-center gap-6 mt-8 flex-wrap text-sm text-blue-100">
      <span><i class="fas fa-shield-alt mr-1.5"></i>নিরাপদ কেনাকাটা</span>
      <span><i class="fas fa-truck mr-1.5"></i>ফ্রি ডেলিভারি</span>
      <span><i class="fas fa-undo mr-1.5"></i>৭ দিনের রিটার্ন</span>
      <span><i class="fas fa-award mr-1.5"></i>১ বছর ওয়ারেন্টি</span>
    </div>
    <div class="glass inline-flex items-center gap-2 px-5 py-3 rounded-2xl mt-8 text-sm">
      <i class="fas fa-fire text-orange-400"></i>
      গত ২৪ ঘণ্টায় <strong class="mx-1">২৮৬ জন</strong> এই পণ্যটি অর্ডার করেছেন
    </div>
  </div>
</section>
<!-- FOOTER -->
<footer class="bg-gray-950 text-gray-400 py-10">
  <div class="max-w-5xl mx-auto px-4 text-center">
    <div class="flex items-center justify-center gap-2 mb-3">
      <i class="fab fa-apple text-white text-2xl"></i>
      <span class="text-xl font-bold text-white">AirPods Pro BD</span>
    </div>
    <p class="text-sm text-gray-500 mb-4">বাংলাদেশের বিশ্বস্ত Apple গ্যাজেট শপ — ১০০% অরিজিনাল পণ্য</p>
    <div class="flex justify-center gap-5 mb-5 flex-wrap text-sm">
      <a href="#" class="hover:text-white transition-colors">প্রাইভেসি পলিসি</a>
      <span class="text-gray-700">|</span>
      <a href="#" class="hover:text-white transition-colors">রিটার্ন পলিসি</a>
      <span class="text-gray-700">|</span>
      <a href="#" class="hover:text-white transition-colors">যোগাযোগ</a>
    </div>
    <p class="text-xs text-gray-600">© ২০২৫ AirPods Pro BD. সর্বস্বত্ব সংরক্ষিত। Apple এবং AirPods Pro তাদের নিজস্ব ট্রেডমার্ক।</p>
  </div>
</footer>
<!-- ===== JAVASCRIPT ===== -->
<script>
  AOS.init({ duration: 720, once: true, easing: 'ease-out-cubic', offset: 55 });
  /* ===== আপনার পেমেন্ট নম্বর এখানে বসান ===== */
  const BKASH_NUMBER = '01700000000';   /* ← আপনার বিকাশ নম্বর */
  const NAGAD_NUMBER = '01800000000';   /* ← আপনার নগদ নম্বর  */
  /* ===== CONFIG ===== */
  const BASE_PRICE = 3499;
  const OUTSIDE_DHAKA_CHARGE = 130; // ঢাকার বাহিরে ডেলিভারি চার্জ
  /* ===== COUNTDOWN ===== */
  (function() {
    const KEY = 'airpods_offer_end';
    const now = Date.now();
    let end = parseInt(localStorage.getItem(KEY) || '0');
    if (!end || end <= now) {
      end = now + (8 * 3600 + 27 * 60 + 44) * 1000;
      localStorage.setItem(KEY, end);
    }
    function tick() {
      const diff = Math.max(0, end - Date.now());
      const h = Math.floor(diff / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      document.getElementById('cdHours').textContent = String(h).padStart(2, '0');
      document.getElementById('cdMins').textContent  = String(m).padStart(2, '0');
      document.getElementById('cdSecs').textContent  = String(s).padStart(2, '0');
      if (diff === 0) { end = Date.now() + 8 * 3600 * 1000; localStorage.setItem(KEY, end); }
    }
    tick();
    setInterval(tick, 1000);
  })();
  /* ===== THUMBNAIL SWITCHER ===== */
  function switchImg(thumbEl, src) {
    document.querySelectorAll('.thumb').forEach(t => t.classList.remove('active'));
    thumbEl.classList.add('active');
    const img = document.getElementById('mainImg');
    img.classList.add('fade');
    setTimeout(() => { img.src = src; img.classList.remove('fade'); }, 280);
  }
  /* ===== FAQ ===== */
  function toggleFaq(header) {
    const body   = header.nextElementSibling;
    const isOpen = body.classList.contains('open');
    document.querySelectorAll('.faq-body').forEach(b => b.classList.remove('open'));
    document.querySelectorAll('.faq-header').forEach(h => h.classList.remove('active'));
    if (!isOpen) { body.classList.add('open'); header.classList.add('active'); }
  }
  /* ===== MODAL ===== */
  function openModal() {
    document.getElementById('orderModal').classList.add('open');
    document.body.style.overflow = 'hidden';
    // Facebook Pixel: ViewContent event
    if (typeof fbq !== 'undefined') {
      fbq('track', 'ViewContent', {
        content_name: 'AirPods Pro 2nd Gen',
        content_category: 'Electronics',
        value: BASE_PRICE,
        currency: 'BDT'
      });
    }
  }
  function closeModal() {
    document.getElementById('orderModal').classList.remove('open');
    document.body.style.overflow = '';
  }
  function closeModalOutside(e) {
    if (e.target === document.getElementById('orderModal')) closeModal();
  }
  /* ===== LIGHTBOX ===== */
  function openLightbox(src) {
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightbox').classList.add('open');
    document.body.style.overflow = 'hidden';
  }
  function closeLightbox() {
    document.getElementById('lightbox').classList.remove('open');
    document.body.style.overflow = '';
  }
  /* ===== QUANTITY & SHIPPING ===== */
  let selectedDelivery = '';
  function selectDelivery(method) {
    selectedDelivery = method;
    document.getElementById('deliveryMethod').value = method;
    ['dhaka', 'outside'].forEach(id => {
      document.getElementById('del-' + id).classList.remove('selected');
    });
    document.getElementById('del-' + method).classList.add('selected');
    document.getElementById('delErr').classList.remove('show');
    updateTotal();
  }
  function changeQty(delta) {
    const inp = document.getElementById('qtyInput');
    const v   = parseInt(inp.value) + delta;
    if (v < 1 || v > 10) return;
    inp.value = v;
    updateTotal();
  }
  function updateTotal() {
    const qty = parseInt(document.getElementById('qtyInput').value);
    let deliveryCharge = 0;
    if (selectedDelivery === 'outside') {
      deliveryCharge = OUTSIDE_DHAKA_CHARGE;
    }
    const total = (BASE_PRICE * qty) + deliveryCharge;
    document.getElementById('qtyDisplay').textContent = qty;
    document.getElementById('basePrice').textContent  = BASE_PRICE.toLocaleString('bn-BD');
    document.getElementById('totalPrice').textContent = total.toLocaleString('bn-BD');
    const chargeRow = document.getElementById('deliveryChargeRow');
    const chargeText = document.getElementById('deliveryChargeText');
    if (deliveryCharge > 0) {
      chargeRow.style.display = 'flex';
      chargeText.textContent = '৳' + deliveryCharge;
      chargeText.className = 'text-amber-600 font-medium';
    } else if (selectedDelivery === 'dhaka') {
      chargeRow.style.display = 'flex';
      chargeText.textContent = 'বিনামূল্যে';
      chargeText.className = 'text-green-600 font-medium';
    } else {
      chargeRow.style.display = 'none';
    }
  }
  /* ===== PAYMENT SELECTION ===== */
  let selectedPayment = '';
  function selectPayment(m) {
    selectedPayment = m;
    document.getElementById('paymentMethod').value = m;
    ['cod', 'bkash', 'nagad'].forEach(id =>
      document.getElementById('pay-' + id).classList.remove('selected')
    );
    document.getElementById('pay-' + m).classList.add('selected');
    document.getElementById('payErr').classList.remove('show');
    const infoBox   = document.getElementById('mobilePayInfo');
    const numLabel  = document.getElementById('paymentNumberLabel');
    const brandName = document.getElementById('payBrandName');
    if (m === 'bkash') {
      infoBox.classList.add('show');
      numLabel.textContent  = BKASH_NUMBER;
      numLabel.style.color  = '#e91e7a';
      brandName.textContent = 'বিকাশ';
      resetCopyBtn();
    } else if (m === 'nagad') {
      infoBox.classList.add('show');
      numLabel.textContent  = NAGAD_NUMBER;
      numLabel.style.color  = '#f47920';
      brandName.textContent = 'নগদ';
      resetCopyBtn();
    } else {
      infoBox.classList.remove('show');
      document.getElementById('trxId').value = '';
      document.getElementById('trxErr').classList.remove('show');
    }
  }
  /* ===== COPY NUMBER ===== */
  function copyNumber() {
    const num = document.getElementById('paymentNumberLabel').textContent;
    const btn = document.getElementById('copyBtn');
    navigator.clipboard.writeText(num).then(() => {
      btn.classList.add('copied');
      btn.innerHTML = '<i class="fas fa-check mr-1"></i>কপি হয়েছে!';
      setTimeout(() => resetCopyBtn(), 2500);
    }).catch(() => {
      const el = document.createElement('textarea');
      el.value = num;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      btn.classList.add('copied');
      btn.innerHTML = '<i class="fas fa-check mr-1"></i>কপি হয়েছে!';
      setTimeout(() => resetCopyBtn(), 2500);
    });
  }
  function resetCopyBtn() {
    const btn = document.getElementById('copyBtn');
    btn.classList.remove('copied');
    btn.innerHTML = '<i class="fas fa-copy mr-1"></i>কপি';
  }
  /* ===== VALIDATION ===== */
  function validateForm() {
    let ok = true;
    const name  = document.getElementById('custName').value.trim();
    const phone = document.getElementById('custPhone').value.trim();
    const addr  = document.getElementById('custAddress').value.trim();
    const toggle = (id, show) =>
      document.getElementById(id).classList[show ? 'add' : 'remove']('show');
    toggle('nameErr', !name);
    if (!name) ok = false;
    const phoneOk = /^01[3-9]\d{8}$/.test(phone);
    toggle('phoneErr', !phoneOk);
    if (!phoneOk) ok = false;
    toggle('addrErr', addr.length < 10);
    if (addr.length < 10) ok = false;
    toggle('delErr', !selectedDelivery);
    if (!selectedDelivery) ok = false;
    toggle('payErr', !selectedPayment);
    if (!selectedPayment) ok = false;
    if (selectedPayment === 'bkash' || selectedPayment === 'nagad') {
      const trx = document.getElementById('trxId').value.trim();
      toggle('trxErr', trx.length < 5);
      if (trx.length < 5) ok = false;
    }
    return ok;
  }
  /* ===== TELEGRAM ===== */
  async function sendToTelegram(d) {
    const BOT  = 'YOUR_TELEGRAM_BOT_TOKEN';
    const CHAT = 'YOUR_TELEGRAM_CHAT_ID';
    const msg  =
`🎧 *নতুন অর্ডার — Apple AirPods Pro 2nd Gen*
━━━━━━━━━━━━━━━━━━━━━
📦 *পণ্য:* AirPods Pro 2nd Gen ANC Dubai Version
🎨 *রঙ:* ${d.color || 'উল্লেখ নেই'}
📏 *ইয়ার টিপ:* ${d.size || 'উল্লেখ নেই'}
🔢 *পরিমাণ:* ${d.qty}
🚚 *শিপিং:* ${d.shipping}
━━━━━━━━━━━━━━━━━━━━━
👤 *নাম:* ${d.name}
📱 *ফোন:* ${d.phone}
📍 *ঠিকানা:* ${d.address}
💳 *পেমেন্ট:* ${d.payment}
🧾 *Trx ID:* ${d.trxId}
💰 *মোট:* ৳${d.total}
━━━━━━━━━━━━━━━━━━━━━
🕐 ${new Date().toLocaleString('bn-BD')}`;
    try {
      await fetch(`https://api.telegram.org/bot${BOT}/sendMessage`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ chat_id: CHAT, text: msg, parse_mode: 'Markdown' })
      });
    } catch(e) { console.warn('Telegram error:', e); }
  }
  /* ===== GOOGLE FORM ===== */
  async function sendToGoogleForm(d) {
    const URL = 'https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse';
    const fd  = new FormData();
    fd.append('entry.111111111', d.name);
    fd.append('entry.222222222', d.phone);
    fd.append('entry.333333333', d.address);
    fd.append('entry.444444444', d.payment);
    fd.append('entry.555555555', d.qty);
    fd.append('entry.666666666', d.color);
    fd.append('entry.777777777', d.size);
    fd.append('entry.888888888', d.trxId);
    fd.append('entry.999999999', d.shipping); // নতুন ফিল্ড: শিপিং পদ্ধতি
    try { await fetch(URL, { method: 'POST', mode: 'no-cors', body: fd }); }
    catch(e) { console.warn('Form error:', e); }
  }
  /* ===== HANDLE SUBMIT ===== */
  async function handleSubmit(e) {
    e.preventDefault();
    if (!validateForm()) return;
    const btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner"></span> প্রক্রিয়া হচ্ছে...';
    const qty  = parseInt(document.getElementById('qtyInput').value);
    const payLabel =
      selectedPayment === 'cod'    ? 'Cash on Delivery' :
      selectedPayment === 'bkash'  ? 'বিকাশ'            : 'নগদ';
    const shippingLabel =
      selectedDelivery === 'dhaka'   ? 'ঢাকার ভেতরে' :
      selectedDelivery === 'outside' ? 'ঢাকার বাহিরে' : '';
    let deliveryCharge = 0;
    if (selectedDelivery === 'outside') deliveryCharge = OUTSIDE_DHAKA_CHARGE;
    const totalAmount = (BASE_PRICE * qty) + deliveryCharge;
    const data = {
      name    : document.getElementById('custName').value.trim(),
      phone   : document.getElementById('custPhone').value.trim(),
      address : document.getElementById('custAddress').value.trim(),
      payment : payLabel,
      shipping: shippingLabel,
      color   : document.getElementById('colorSelect').value,
      size    : document.getElementById('sizeSelect').value,
      trxId   : document.getElementById('trxId').value.trim() || 'N/A',
      qty,
      total   : totalAmount.toLocaleString(),
    };
    await Promise.allSettled([sendToTelegram(data), sendToGoogleForm(data)]);
    // Facebook Pixel: Purchase event
    if (typeof fbq !== 'undefined') {
      fbq('track', 'Purchase', {
        content_name: 'AirPods Pro 2nd Gen',
        content_category: 'Electronics',
        value: totalAmount,
        currency: 'BDT',
        num_items: qty,
        shipping: shippingLabel
      });
    }
    document.getElementById('orderForm').classList.add('hidden');
    document.getElementById('successBox').classList.add('show');
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-paper-plane"></i> অর্ডার নিশ্চিত করুন';
  }
  /* ===== SCROLL SHADOW ===== */
  window.addEventListener('scroll', () => {
    const sb = document.querySelector('.sticky-buy-btn');
    if (sb) sb.style.boxShadow = window.scrollY > 80
      ? '0 -6px 30px rgba(0,139,245,0.22)'
      : '0 -4px 28px rgba(0,0,0,0.10)';
  });
  /* ===== ESC KEY ===== */
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') { closeModal(); closeLightbox(); }
  });
  updateTotal();
</script>
</body>
</html>

Final Thoughts

You no longer need expensive developers or Shopify subscriptions to start an ecommerce business.

Using AI and Blogger, you can create a premium professional landing page completely free.

With proper Facebook Ads optimization, modern UI/UX, Telegram integration, and Google Form order management, you can build a powerful sales funnel suitable for Bangladesh ecommerce businesses.

If you want to grow your online business in 2026, learning how to create AI-powered landing pages is one of the most valuable skills you can develop today.

Leave a Reply


Home
Search
Shop
Account
WhatsApp