/**
 * Ecommer Landing Page with built-in booking backend.
 *
 * Endpoints:
 *   ?action=get_slots&date=YYYY-MM-DD  (GET)  → JSON list of booked slots
 *   ?action=book_demo                   (POST) → store booking, send email
 *
 * Bookings are stored in bookings.json (one JSON object per line).
 * Email is sent via PHP mail() – ensure your server is configured.
 */

define('BOOKINGS_FILE', __DIR__ . '/bookings.json');
define('ADMIN_EMAIL', 'info@ecommer.in');
define('SITE_TITLE', 'Ecommer Demo Booking');

// ---------------------------------------------------------------------
// Handle AJAX requests before any output
// ---------------------------------------------------------------------
$action = $_GET['action'] ?? null;
if ($action === 'get_slots') {
    header('Content-Type: application/json');
    $date = $_GET['date'] ?? '';
    if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $date)) {
        echo json_encode(['error' => 'Invalid date']);
        exit;
    }
    $bookedSlots = [];
    if (file_exists(BOOKINGS_FILE)) {
        $lines = file(BOOKINGS_FILE, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
        foreach ($lines as $line) {
            $booking = json_decode($line, true);
            if ($booking && ($booking['date'] ?? '') === $date) {
                $bookedSlots[] = $booking['slot'];
            }
        }
    }
    echo json_encode(['slots' => $bookedSlots]);
    exit;
}

if ($action === 'book_demo' && $_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    $input = json_decode(file_get_contents('php://input'), true);
    if (!$input) {
        http_response_code(400);
        echo json_encode(['error' => 'Invalid request']);
        exit;
    }

    $date = $input['date'] ?? '';
    $slot = $input['slot'] ?? '';
    $business = $input['business'] ?? '';
    $name = $input['name'] ?? '';
    $mobile = $input['mobile'] ?? '';
    $email = $input['email'] ?? '';

    if (!$date || !$slot || !$name || !$mobile) {
        http_response_code(400);
        echo json_encode(['error' => 'Missing required fields']);
        exit;
    }
    if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $date)) {
        http_response_code(400);
        echo json_encode(['error' => 'Invalid date']);
        exit;
    }

    $alreadyBooked = false;
    if (file_exists(BOOKINGS_FILE)) {
        $lines = file(BOOKINGS_FILE, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
        foreach ($lines as $line) {
            $b = json_decode($line, true);
            if ($b && ($b['date'] ?? '') === $date && ($b['slot'] ?? '') === $slot) {
                $alreadyBooked = true;
                break;
            }
        }
    }
    if ($alreadyBooked) {
        http_response_code(409);
        echo json_encode(['error' => 'This slot has just been booked. Please choose another time.']);
        exit;
    }

    $booking = [
        'business' => $business,
        'name'     => $name,
        'mobile'   => $mobile,
        'email'    => $email,
        'date'     => $date,
        'slot'     => $slot,
        'ip'       => $_SERVER['REMOTE_ADDR'] ?? 'unknown',
        'browser'  => $_SERVER['HTTP_USER_AGENT'] ?? 'unknown',
        'booked_at'=> date('c'),
    ];

    $line = json_encode($booking) . PHP_EOL;
    if (file_put_contents(BOOKINGS_FILE, $line, FILE_APPEND | LOCK_EX) === false) {
        http_response_code(500);
        echo json_encode(['error' => 'Could not save booking.']);
        exit;
    }

    $subject = "New Demo Booking - Ecommer Website";
    $message = "A new demo has been booked:\n\n"
        . "Business Type: {$business}\n"
        . "Name: {$name}\n"
        . "Mobile: {$mobile}\n"
        . "Email: {$email}\n"
        . "Date: {$date}\n"
        . "Time Slot: {$slot}\n"
        . "IP: {$_SERVER['REMOTE_ADDR']}\n"
        . "Browser: {$_SERVER['HTTP_USER_AGENT']}\n"
        . "Booked at: {$booking['booked_at']}\n";
    $headers = "From: Ecommer.in\r\n";
    $headers .= "Reply-To: {$email}\r\n";
    @mail(ADMIN_EMAIL, $subject, $message, $headers);

    echo json_encode(['success' => true]);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Ecommer — One‑Time Billing Software | Fast GST Billing & Inventory</title>
  <meta name="description" content="Best one‑time billing, POS & inventory software for Textile, Medical, Retail, Restaurant & Finance. Pay once ₹7,999, own forever. 500+ businesses." />
  <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=Inter:wght@400;500;600;700;800;900&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.2/css/all.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    :root {
      --brand-deep: #202788;
      --brand-ocean: #1B6FA2;
      --brand-aqua: #16C7C9;
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; background: #F7FDFF; overflow-x: hidden; padding-bottom: 80px; }
    .btn { transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; }
    .btn:active { transform: scale(0.97); }

    @keyframes floatUp { 0%,100% { transform: translateY(0) rotate(0deg); opacity:0.18; } 25% { transform: translateY(-30px) rotate(5deg); opacity:0.28; } 50% { transform: translateY(-15px) rotate(-3deg); opacity:0.15; } 75% { transform: translateY(-40px) rotate(2deg); opacity:0.25; } }
    @keyframes floatDown { 0%,100% { transform: translateY(0) rotate(0deg); opacity:0.18; } 25% { transform: translateY(30px) rotate(-5deg); opacity:0.28; } 50% { transform: translateY(15px) rotate(3deg); opacity:0.15; } 75% { transform: translateY(40px) rotate(-2deg); opacity:0.25; } }
    @keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(27,111,162,0.6); } 50% { box-shadow: 0 0 0 20px rgba(27,111,162,0); } }
    @keyframes scanLaser { 0% { top:0; } 50% { top:100%; } 100% { top:0; } }
    @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes countPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
    .float-element { animation: floatUp 18s ease-in-out infinite; }
    .float-element-delayed { animation: floatDown 20s ease-in-out infinite; }
    .scan-laser { animation: scanLaser 2.5s ease-in-out infinite; }
    .marquee-track { animation: marqueeScroll 30s linear infinite; }
    .pulse-glow { animation: pulseGlow 2.2s ease-out infinite; }
    .count-pulse { animation: countPulse 2s ease-in-out infinite; }

    .glass-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,0.6); box-shadow:0 8px 32px rgba(0,0,0,0.06); }
    .progress-step { transition: all 0.5s cubic-bezier(0.4,0,0.2,1); }
    .reveal { opacity:0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity:1; transform: translateY(0); }

    .sticky-wa-btn { position: fixed; bottom:100px; right:20px; z-index:999; }
    .sticky-demo-btn { position: fixed; bottom:170px; right:20px; z-index:999; }
    .sticky-fb-btn { position: fixed; bottom:240px; right:20px; z-index:999; }
    .sticky-ig-btn { position: fixed; bottom:310px; right:20px; z-index:999; }

    /* Original mobile sticky footer (full width) */
    .mobile-sticky-footer { 
      position: fixed; 
      bottom:0; 
      left:0; 
      right:0; 
      background:white; 
      border-top:1px solid #e2e8f0; 
      padding:10px 16px; 
      z-index:998; 
      transform: translateY(100%); 
      transition: transform 0.3s; 
    }
    .mobile-sticky-footer.visible { transform: translateY(0); }

    .live-notification { position: fixed; bottom:100px; left:16px; z-index:997; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:0 8px 25px rgba(0,0,0,0.1); font-size:13px; font-weight:600; opacity:0; transform: translateX(-120%); transition: all 0.5s cubic-bezier(0.4,0,0.2,1); pointer-events:none; max-width:280px; }
    .live-notification.show { opacity:1; transform: translateX(0); }
    .time-slot-btn { border:1px solid #d1d5db; border-radius:8px; padding:6px 10px; text-align:center; cursor:pointer; transition: all 0.2s; font-size:14px; }
    .time-slot-btn:not(.disabled):hover { border-color:var(--brand-ocean); background:#e6f3f9; }
    .time-slot-btn.selected { background:var(--brand-ocean); color:white; border-color:var(--brand-ocean); }
    .time-slot-btn.available { background: #ecfdf5; border-color: #10b981; color: #065f46; }
    .time-slot-btn.booked {
      background: #fee2e2;
      border-color: #ef4444;
      color: #991b1b;
      cursor: not-allowed;
      pointer-events: none;
      position: relative;
    }
    .time-slot-btn.booked::after {
      content: "Booked";
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ef4444;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      font-weight: 600;
    }

    .site-header { position: fixed; top:0; left:0; right:0; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); z-index:1000; border-bottom:1px solid rgba(0,0,0,0.05); transition: all 0.3s; }
    .header-container { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; height:64px; }
    .header-logo img { height:40px; width:auto; }
    .nav-links { display:flex; gap:2rem; align-items:center; }
    .nav-links a { color:#333; font-weight:500; font-size:0.9rem; text-decoration:none; transition:color 0.2s; }
    .nav-links a:hover { color:var(--brand-ocean); }
    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
    .hamburger span { width:25px; height:3px; background:#333; border-radius:2px; transition:all 0.3s; }
    @media (max-width:1024px) {
      .nav-links { display:none; }
      .hamburger { display:flex; }
      .nav-links.show { display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:white; padding:1rem; gap:1rem; border-bottom:1px solid #eee; }
    }
    @media (min-width:768px) {
      .mobile-sticky-footer { display: none; }
    }
    @media (max-width:640px) {
      table thead { display:none; }
      table tbody tr { display:flex; flex-direction:column; border-bottom:1px solid #e5e7eb; padding:1rem 0; }
      table tbody td { text-align:left !important; padding:0.3rem 0; display:flex; justify-content:space-between; word-break: break-word; }
      table tbody td::before { content:attr(data-label); font-weight:600; margin-right:0.5rem; white-space:nowrap; }
    }
    @media (max-width: 480px) {
      .header-container { padding: 0 0.75rem; }
      .header-logo img { height: 32px; }
      h1 { font-size: 1.75rem !important; }
      .btn { padding: 0.5rem 1rem !important; font-size: 0.875rem !important; }
    }
    .diagonal-strip-wrapper {
      position: relative;
      z-index: 10;
      margin: 2rem 0;
      overflow: visible;
      padding: 10px 0;
    }
    .diagonal-strip {
      position: relative;
      width: 110%;
      left: -5%;
      background: linear-gradient(135deg, var(--brand-deep), var(--brand-ocean));
      padding: 18px 0;
      transform: rotate(-7deg);
      box-shadow: 0 12px 28px rgba(0,0,0,0.15);
      cursor: pointer;
      overflow: hidden;
    }
    .diagonal-strip-inner {
      display: flex;
      width: max-content;
      animation: scrollTextDiagonal 28s linear infinite;
    }
    .diagonal-strip-text {
      display: flex;
      gap: 2rem;
      white-space: nowrap;
      font-size: 1.2rem;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 0 1rem;
    }
    .diagonal-strip-text span { display: flex; align-items: center; gap: 1.5rem; }
    .diagonal-strip-text i { color: var(--brand-aqua); font-size: 1.2rem; }
    @keyframes scrollTextDiagonal {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
  </style>
</head>
<body class="bg-white">

  <!-- HEADER -->
  <header class="site-header">
    <div class="header-container">
      <div class="header-logo">
        <img src="https://www.ecommer.in/assets/ecommer-brand2.png" alt="Ecommer Logo" />
      </div>
      <nav class="nav-links" id="mainNav">
        <a href="#features">Features</a>
        <a href="#industries">Industries</a>
        <a href="#savings">Savings</a>
        <a href="#testimonials">Reviews</a>
        <a href="#faq-demo">FAQ</a>
        <button onclick="scrollToForm()" class="btn bg-[#1B6FA2] text-white font-semibold px-4 py-2 rounded-lg">Book Demo</button>
      </nav>
      <div class="hamburger" id="hamburger" onclick="toggleMenu()">
        <span></span><span></span><span></span>
      </div>
    </div>
  </header>
  <div style="height:64px;"></div>

  <!-- FLOATING BACKGROUND ELEMENTS -->
  <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0" style="max-height:600px;">
    <i class="fas fa-file-invoice absolute text-5xl text-[#1B6FA2] float-element" style="top:10%;left:5%;opacity:0.15;"></i>
    <i class="fas fa-rupee-sign absolute text-4xl text-[#16C7C9] float-element-delayed" style="top:20%;left:85%;opacity:0.18;"></i>
    <i class="fas fa-boxes absolute text-4xl text-[#202788] float-element" style="top:50%;left:3%;opacity:0.12;animation-delay:-5s;"></i>
    <i class="fas fa-receipt absolute text-5xl text-[#1B6FA2] float-element-delayed" style="top:60%;left:90%;opacity:0.16;animation-delay:-8s;"></i>
    <i class="fas fa-chart-line absolute text-3xl text-[#16C7C9] float-element" style="top:80%;left:7%;opacity:0.14;animation-delay:-3s;"></i>
    <i class="fab fa-whatsapp absolute text-4xl text-green-500 float-element-delayed" style="top:30%;left:92%;opacity:0.13;animation-delay:-11s;"></i>
  </div>

  <!-- LIVE ACTIVITY NOTIFICATION -->
  <div class="live-notification" id="liveNotification"><span id="liveMsg">Textile Store from Salem installed Ecommer</span></div>

  <!-- FLOATING ACTION BUTTONS -->
  <a href="https://wa.me/919003552650?text=Hi%20Ecommer%2C%20I%20want%20a%20demo" target="_blank" class="sticky-wa-btn bg-green-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition z-50"><i class="fab fa-whatsapp text-2xl"></i></a>
  <button onclick="scrollToForm()" class="sticky-demo-btn bg-[#1B6FA2] text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition z-50 pulse-glow"><i class="fas fa-calendar-check text-xl"></i></button>
  <a href="https://www.facebook.com/profile.php?id=61581403581310" target="_blank" class="sticky-fb-btn bg-[#1877F2] text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition z-50"><i class="fab fa-facebook-f text-lg"></i></a>
  <a href="https://www.instagram.com/ecommer.in/" target="_blank" class="sticky-ig-btn bg-gradient-to-tr from-[#833AB4] to-[#F77737] text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition z-50"><i class="fab fa-instagram text-lg"></i></a>

  <!-- HERO SECTION with REEL video -->
  <section class="pt-6 pb-10 md:py-16 bg-gradient-to-br from-white via-[#f8fcff] to-[#eef7fc] relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-8 items-center relative z-10">
      <div>
        <div class="flex items-center gap-2 mb-3">
          <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-1 rounded-full">★ 4.9 · 800+ Reviews</span>
          <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-1 rounded-full count-pulse">Lifetime Ownership</span>
        </div>
        <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold leading-tight text-gray-900 reveal">
          <span class="text-red-600">Generate Bills In Seconds.</span><br/>
          <span class="text-[#1B6FA2]">Own Your Software Forever — Just ₹7,999</span>
        </h1>
        <p class="mt-3 text-gray-600 text-base sm:text-lg reveal">Instant GST invoicing, auto inventory updates, WhatsApp sharing, and lifetime access — trusted by 500+ Tamilnadu businesses.</p>
        <div class="mt-6 flex flex-wrap gap-3 reveal">
          <button onclick="scrollToForm()" class="btn bg-[#1B6FA2] hover:bg-[#202788] text-white font-bold px-6 py-4 rounded-xl text-base shadow-lg hover:shadow-xl transition pulse-glow">🎯 Get Free Demo</button>
          <button onclick="scrollToForm()" class="btn border-2 border-[#1B6FA2] text-[#1B6FA2] hover:bg-[#1B6FA2] hover:text-white font-bold px-6 py-4 rounded-xl text-base transition">▶ Watch Live Demo</button>
        </div>
        <div class="mt-5 grid grid-cols-3 sm:grid-cols-5 gap-2 text-xs text-gray-600 reveal">
          <div class="text-center"><span class="font-bold text-gray-900">500+</span><br/>Businesses</div>
          <div class="text-center"><span class="font-bold text-gray-900">4.9</span><br/>Rating</div>
          <div class="text-center"><span class="font-bold text-gray-900">தமிழ்</span><br/>Support</div>
          <div class="text-center"><span class="font-bold text-gray-900">Lifetime</span><br/>Usage</div>
          <div class="text-center"><span class="font-bold text-gray-900">₹7,999</span><br/>One‑Time</div>
        </div>
      </div>
      <div class="relative flex justify-center reveal" id="reelContainer">
        <div class="w-full max-w-[280px] mx-auto rounded-2xl overflow-hidden shadow-2xl bg-black cursor-pointer" style="aspect-ratio:9/16;">
          <video id="heroVideo" src="vid/billing.mp4" autoplay loop playsinline class="w-full h-full object-cover" muted></video>
        </div>
        <div class="absolute -bottom-2 right-2 bg-white/90 rounded-lg px-3 py-1 text-xs font-bold text-green-700 shadow z-10 pointer-events-none">✓ Lifetime Free Updates</div>
      </div>
    </div>
  </section>

  <!-- TRUST BAR -->
  <div class="border-y border-gray-100 bg-white py-4">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 flex flex-wrap justify-center gap-6 sm:gap-10 text-sm font-semibold text-gray-700 reveal">
      <span><i class="fas fa-check-circle text-[#16C7C9]"></i> 500+ Businesses</span>
      <span><i class="fas fa-star text-yellow-400"></i> 4.9 Rating</span>
      <span><i class="fas fa-language text-[#16C7C9]"></i> Tamil Support</span>
      <span><i class="fas fa-infinity text-[#16C7C9]"></i> Lifetime Ownership</span>
      <span><i class="fas fa-file-invoice text-[#16C7C9]"></i> GST Ready</span>
      <span><i class="fas fa-mobile-alt text-[#16C7C9]"></i> Mobile App</span>
    </div>
  </div>

  <!-- DIAGONAL SCROLLING CTA STRIP -->
  <div class="diagonal-strip-wrapper">
    <div class="diagonal-strip" onclick="scrollToForm()">
      <div class="diagonal-strip-inner">
        <div class="diagonal-strip-text">
          <span>🔥 Pay Once, Use Forever — Only ₹7,999 Lifetime</span>
          <i class="fas fa-star"></i>
          <span>🎯 Book Your Free Demo Today — 5 Slots Only, 1 Left!</span>
          <i class="fas fa-star"></i>
          <span>⚡ Save ₹2,32,001 Over 10 Years</span>
          <i class="fas fa-star"></i>
          <span>📱 Works on Mobile, Tablet & Desktop</span>
          <i class="fas fa-star"></i>
        </div>
        <div class="diagonal-strip-text">
          <span>🔥 Pay Once, Use Forever — Only ₹7,999 Lifetime</span>
          <i class="fas fa-star"></i>
          <span>🎯 Book Your Free Demo Today — 5 Slots Only, 1 Left!</span>
          <i class="fas fa-star"></i>
          <span>⚡ Save ₹2,32,001 Over 10 Years</span>
          <i class="fas fa-star"></i>
          <span>📱 Works on Mobile, Tablet & Desktop</span>
          <i class="fas fa-star"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- STATS SECTION -->
  <section class="py-12 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 mb-10 reveal">Ecommer by the Numbers</h2>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 reveal">
        <div class="bg-gray-50 rounded-2xl p-6 shadow-sm"><i class="fas fa-users text-3xl text-[#1B6FA2] mb-3"></i><div class="text-3xl font-extrabold text-gray-900 count-pulse" id="statCustomers">0+</div><p class="text-sm text-gray-600 mt-1">Onboarded Customers</p></div>
        <div class="bg-gray-50 rounded-2xl p-6 shadow-sm"><i class="fas fa-file-invoice text-3xl text-[#1B6FA2] mb-3"></i><div class="text-3xl font-extrabold text-gray-900 count-pulse" id="statInvoices">0+</div><p class="text-sm text-gray-600 mt-1">Invoices Generated</p></div>
        <div class="bg-gray-50 rounded-2xl p-6 shadow-sm"><i class="fas fa-quote-right text-3xl text-[#1B6FA2] mb-3"></i><div class="text-3xl font-extrabold text-gray-900 count-pulse" id="statQuotations">0+</div><p class="text-sm text-gray-600 mt-1">Quotations Given</p></div>
        <div class="bg-gray-50 rounded-2xl p-6 shadow-sm"><i class="fas fa-laptop text-3xl text-[#1B6FA2] mb-3"></i><div class="text-3xl font-extrabold text-gray-900 count-pulse" id="statActive">0+</div><p class="text-sm text-gray-600 mt-1">Active Users</p></div>
      </div>
    </div>
  </section>

  <!-- ANIMATED BILLING SHOWCASE -->
  <section id="features" class="py-12 bg-[#F7FDFF]">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4 reveal">See How Fast Billing Works</h2>
      <p class="text-gray-600 mb-8 reveal">Barcode scan → GST bill → WhatsApp share → Done.</p>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8 reveal">
        <div class="bg-gray-50 rounded-2xl p-5 text-center hover:shadow-lg transition cursor-pointer group"><div class="relative w-16 h-16 mx-auto mb-3 bg-blue-50 rounded-full flex items-center justify-center"><i class="fas fa-barcode text-2xl text-[#1B6FA2] group-hover:scale-110 transition"></i><div class="absolute top-0 left-0 w-full h-0.5 bg-red-400 scan-laser rounded-full"></div></div><p class="text-sm font-semibold">Barcode Scan</p></div>
        <div class="bg-gray-50 rounded-2xl p-5 text-center hover:shadow-lg transition cursor-pointer group"><div class="w-16 h-16 mx-auto mb-3 bg-green-50 rounded-full flex items-center justify-center overflow-hidden"><i class="fas fa-file-invoice text-2xl text-green-600 group-hover:scale-110 transition"></i></div><p class="text-sm font-semibold">GST & e-Way Bills</p></div>
        <div class="bg-gray-50 rounded-2xl p-5 text-center hover:shadow-lg transition cursor-pointer group"><div class="w-16 h-16 mx-auto mb-3 bg-purple-50 rounded-full flex items-center justify-center"><i class="fab fa-whatsapp text-2xl text-green-500 group-hover:scale-110 transition"></i></div><p class="text-sm font-semibold">WhatsApp Share</p></div>
        <div class="bg-gray-50 rounded-2xl p-5 text-center hover:shadow-lg transition cursor-pointer group"><div class="w-16 h-16 mx-auto mb-3 bg-amber-50 rounded-full flex items-center justify-center"><i class="fas fa-chart-line text-2xl text-amber-600 group-hover:scale-110 transition"></i></div><p class="text-sm font-semibold">Live Reports</p></div>
      </div>
      <div class="bg-gray-100 rounded-2xl p-4 shadow-inner reveal"><img src="img/Untitled%20design%20(1).png" alt="Ecommer Dashboard" class="rounded-xl w-full" loading="lazy" /></div>
    </div>
  </section>

  <!-- PAIN VS SOLUTION -->
  <section class="py-12 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6">
      <h2 class="text-3xl font-extrabold text-center text-gray-900 mb-10 reveal">Your Problem → Ecommer Solution</h2>
      <div class="grid sm:grid-cols-2 gap-6 reveal">
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-red-100"><h3 class="font-bold text-red-600 mb-4 text-lg">❌ Without Ecommer</h3><div class="space-y-3 text-sm text-gray-700"><div class="flex items-center gap-2"><span class="text-red-400">✕</span> Monthly Fees ₹2,000+</div><div class="flex items-center gap-2"><span class="text-red-400">✕</span> Inventory Errors</div><div class="flex items-center gap-2"><span class="text-red-400">✕</span> GST Filing Issues</div><div class="flex items-center gap-2"><span class="text-red-400">✕</span> Slow Manual Billing</div><div class="flex items-center gap-2"><span class="text-red-400">✕</span> No Business Reports</div></div></div>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-green-200"><h3 class="font-bold text-green-600 mb-4 text-lg">✅ With Ecommer</h3><div class="space-y-3 text-sm text-gray-700"><div class="flex items-center gap-2"><span class="text-green-500">✓</span> One-Time ₹7,999 Payment</div><div class="flex items-center gap-2"><span class="text-green-500">✓</span> GST & e-Way Bills</div><div class="flex items-center gap-2"><span class="text-green-500">✓</span> Live Inventory Reports</div><div class="flex items-center gap-2"><span class="text-green-500">✓</span> Fast WhatsApp Billing</div><div class="flex items-center gap-2"><span class="text-green-500">✓</span> Real-Time Stock Tracking</div></div></div>
      </div>
      <div class="text-center mt-8 reveal"><button onclick="scrollToForm()" class="btn bg-[#1B6FA2] hover:bg-[#202788] text-white font-bold px-8 py-4 rounded-xl text-base shadow-xl">See How Much You'll Save →</button></div>
    </div>
  </section>

  <!-- SAVINGS CALCULATOR -->
  <section id="savings" class="py-12 bg-[#F7FDFF]">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 mb-6 reveal">How Much Will You Save?</h2>
      <div class="grid sm:grid-cols-2 gap-6 items-center reveal">
        <div class="bg-red-50 rounded-2xl p-6 text-center"><p class="text-sm text-red-600 font-semibold mb-2">Competitor Software</p><p class="text-4xl font-extrabold text-red-600">₹2,000<span class="text-lg font-normal">/mo</span></p><div class="mt-3 space-y-1 text-sm text-red-700"><p>5 Years = <strong>₹1,20,000</strong></p><p>10 Years = <strong>₹2,40,000</strong></p></div></div>
        <div class="bg-green-50 rounded-2xl p-6 text-center border-2 border-green-300"><p class="text-sm text-green-600 font-semibold mb-2">Ecommer — One-Time</p><p class="text-4xl font-extrabold text-green-700">₹7,999</p><p class="text-xs text-green-600 mt-1">Lifetime</p><div class="mt-4 bg-green-100 rounded-xl py-3 px-4"><p class="text-2xl font-extrabold text-green-800 count-pulse">You Save ₹2,32,001</p><p class="text-xs text-green-600">That's 96.7% less!</p></div></div>
      </div>
      <button onclick="scrollToForm()" class="mt-8 btn bg-gradient-to-r from-[#202788] to-[#16C7C9] text-white font-bold px-8 py-4 rounded-xl text-base shadow-xl hover:scale-105 transition reveal">GET MY FREE DEMO NOW</button>
    </div>
  </section>

  <!-- WHY CHOOSE Ecommer -->
  <section class="py-12 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
      <div class="grid lg:grid-cols-2 gap-8 items-center">
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
          <h3 class="text-xl font-bold text-gray-900 mb-4"><i class="fas fa-building mr-2 text-[#1B6FA2]"></i>Why Businesses Choose Ecommer</h3>
          <ul class="space-y-3 text-sm text-gray-700">
            <li class="flex items-center gap-2"><i class="fas fa-check text-green-500"></i> Unlimited invoicing – no per‑bill charges</li>
            <li class="flex items-center gap-2"><i class="fas fa-check text-green-500"></i> Barcode printing & scanner support</li>
            <li class="flex items-center gap-2"><i class="fas fa-check text-green-500"></i> Multi-store & Warehouse Management</li>
            <li class="flex items-center gap-2"><i class="fas fa-check text-green-500"></i> WhatsApp API for automated reminders & sharing</li>
            <li class="flex items-center gap-2"><i class="fas fa-check text-green-500"></i> Auto payment reminders – never miss a collection</li>
            <li class="flex items-center gap-2"><i class="fas fa-check text-green-500"></i> Free data migration from Tally</li>
            <li class="flex items-center gap-2"><i class="fas fa-check text-green-500"></i> Lifetime free updates & dedicated Tamil support</li>
          </ul>
          <button onclick="scrollToForm()" class="mt-6 btn bg-[#1B6FA2] hover:bg-[#202788] text-white font-bold px-6 py-3 rounded-xl text-base w-full">Book Free Demo</button>
        </div>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
          <h3 class="text-xl font-bold text-gray-900 mb-4">One‑Time Payment = Lifetime Savings</h3>
          <div class="space-y-4 text-sm">
            <div class="flex justify-between"><span class="text-gray-600">Monthly software fee</span><span class="font-bold text-red-600">₹2,000</span></div>
            <div class="flex justify-between"><span class="text-gray-600">Yearly cost</span><span class="font-bold text-red-600">₹24,000</span></div>
            <div class="flex justify-between"><span class="text-gray-600">5 Years</span><span class="font-bold text-red-600">₹1,20,000</span></div>
            <div class="flex justify-between"><span class="text-gray-600">10 Years</span><span class="font-bold text-red-600">₹2,40,000</span></div>
            <div class="flex justify-between border-t pt-3"><span class="text-gray-600 font-semibold">Ecommer (lifetime)</span><span class="font-bold text-green-700">₹7,999</span></div>
            <div class="flex justify-between text-lg"><span class="text-gray-900 font-bold">You Save</span><span class="font-bold text-green-700">₹2,32,001</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- INDUSTRIES -->
  <section id="industries" class="py-12 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 mb-8 reveal">Built For Your Industry</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 reveal">
        <div onclick="scrollToForm()" class="glass-card rounded-2xl p-5 cursor-pointer hover:scale-105 hover:shadow-xl transition text-center group"><i class="fas fa-tshirt text-3xl text-[#1B6FA2] mb-3 group-hover:rotate-12 transition"></i><h3 class="font-bold text-sm">Textile</h3><p class="text-xs text-gray-500 mt-1">Barcode → Bill</p></div>
        <div onclick="scrollToForm()" class="glass-card rounded-2xl p-5 cursor-pointer hover:scale-105 hover:shadow-xl transition text-center group"><i class="fas fa-clinic-medical text-3xl text-[#1B6FA2] mb-3 group-hover:rotate-12 transition"></i><h3 class="font-bold text-sm">Medical</h3><p class="text-xs text-gray-500 mt-1">Scan → GST Invoice</p></div>
        <div onclick="scrollToForm()" class="glass-card rounded-2xl p-5 cursor-pointer hover:scale-105 hover:shadow-xl transition text-center group"><i class="fas fa-utensils text-3xl text-[#1B6FA2] mb-3 group-hover:rotate-12 transition"></i><h3 class="font-bold text-sm">Restaurant</h3><p class="text-xs text-gray-500 mt-1">Order → KOT → Bill</p></div>
        <div onclick="scrollToForm()" class="glass-card rounded-2xl p-5 cursor-pointer hover:scale-105 hover:shadow-xl transition text-center group"><i class="fas fa-building-columns text-3xl text-[#1B6FA2] mb-3 group-hover:rotate-12 transition"></i><h3 class="font-bold text-sm">Finance</h3><p class="text-xs text-gray-500 mt-1">EMI → Receipt</p></div>
        <div onclick="scrollToForm()" class="glass-card rounded-2xl p-5 cursor-pointer hover:scale-105 hover:shadow-xl transition text-center group"><i class="fas fa-coins text-3xl text-[#1B6FA2] mb-3 group-hover:rotate-12 transition"></i><h3 class="font-bold text-sm">Chit Fund</h3><p class="text-xs text-gray-500 mt-1">Payment → Printed</p></div>
        <div onclick="scrollToForm()" class="glass-card rounded-2xl p-5 cursor-pointer hover:scale-105 hover:shadow-xl transition text-center group"><i class="fas fa-store text-3xl text-[#1B6FA2] mb-3 group-hover:rotate-12 transition"></i><h3 class="font-bold text-sm">Retail</h3><p class="text-xs text-gray-500 mt-1">Scan → Invoice</p></div>
      </div>
    </div>
  </section>

  <!-- SURVEY TABLE -->
  <section class="py-12 bg-[#F7FDFF]">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
      <h2 class="text-3xl font-extrabold text-center text-gray-900 mb-4 reveal">What Other Tamilnadu Businesses Pay</h2>
      <p class="text-center text-gray-600 mb-8 max-w-2xl mx-auto reveal">Most charge <strong>₹1,500–₹3,000 per month</strong>. Ecommer = one‑time ₹7,999.</p>
      <div class="overflow-x-auto reveal">
        <table class="w-full text-sm bg-white rounded-xl shadow border border-gray-100">
          <thead class="bg-gray-50"><tr><th class="text-left p-3">Software</th><th class="text-right p-3">Monthly</th><th class="text-right p-3">5‑Year</th><th class="text-right p-3">10‑Year</th><th class="text-center p-3">Model</th></tr></thead>
          <tbody class="divide-y divide-gray-100">
            <tr><td class="p-3 font-medium" data-label="Software">Tally Prime</td><td class="p-3 text-right" data-label="Monthly">₹2,500</td><td class="p-3 text-right text-red-600" data-label="5‑Year">₹1,50,000</td><td class="p-3 text-right text-red-600" data-label="10‑Year">₹3,00,000</td><td class="p-3 text-center" data-label="Model">Yearly</td></tr>
            <tr class="bg-gray-50"><td class="p-3 font-medium" data-label="Software">Vyapar / Busy</td><td class="p-3 text-right" data-label="Monthly">₹1,800</td><td class="p-3 text-right text-red-600" data-label="5‑Year">₹1,08,000</td><td class="p-3 text-right text-red-600" data-label="10‑Year">₹2,16,000</td><td class="p-3 text-center" data-label="Model">Monthly</td></tr>
            <tr><td class="p-3 font-medium" data-label="Software">Marg / Reach</td><td class="p-3 text-right" data-label="Monthly">₹2,000</td><td class="p-3 text-right text-red-600" data-label="5‑Year">₹1,20,000</td><td class="p-3 text-right text-red-600" data-label="10‑Year">₹2,40,000</td><td class="p-3 text-center" data-label="Model">Monthly</td></tr>
            <tr class="bg-green-50 font-bold"><td class="p-3" data-label="Software">Ecommer (One‑Time)</td><td class="p-3 text-right text-green-700" data-label="Monthly">₹0/mo</td><td class="p-3 text-right text-green-700" data-label="5‑Year">₹7,999</td><td class="p-3 text-right text-green-700" data-label="10‑Year">₹7,999</td><td class="p-3 text-center" data-label="Model">Lifetime</td></tr>
          </tbody>
        </table>
      </div>
      <div class="mt-8 bg-green-50 rounded-2xl p-6 text-center reveal">
        <p class="text-2xl sm:text-3xl font-extrabold text-green-700">You Save up to ₹2,92,000</p>
        <button onclick="scrollToForm()" class="mt-5 btn bg-[#1B6FA2] hover:bg-[#202788] text-white font-bold px-8 py-3 rounded-xl text-base">Get Lifetime Access Now</button>
      </div>
    </div>
  </section>

  <!-- CLIENT LOGO TESTIMONIALS MARQUEE -->
  <section id="testimonials" class="py-10 bg-gray-50 overflow-hidden">
    <h2 class="text-2xl font-extrabold text-center text-gray-900 mb-6 reveal">Trusted by Business Owners</h2>
    <div class="marquee-track flex gap-6 whitespace-nowrap reveal" style="width:max-content;">
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3">
        <div class="w-10 h-10 bg-[#1B6FA2] rounded-full flex items-center justify-center text-white font-bold">MF</div>
        <div><span class="text-yellow-400">★★★★★</span> "Excellent billing software" <br/><span class="text-xs text-gray-500">Metro Furniture, Dharmapuri</span></div>
      </div>
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3">
        <div class="w-10 h-10 bg-[#16C7C9] rounded-full flex items-center justify-center text-white font-bold">AS</div>
        <div><span class="text-yellow-400">★★★★★</span> "Saved ₹1L+ in 3 years!" <br/><span class="text-xs text-gray-500">Arihant Enterprises, Coimbatore</span></div>
      </div>
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3">
        <div class="w-10 h-10 bg-[#202788] rounded-full flex items-center justify-center text-white font-bold">SC</div>
        <div><span class="text-yellow-400">★★★★★</span> "Expiry alerts saved my pharmacy!" <br/><span class="text-xs text-gray-500">Dr. Anitha, Coimbatore</span></div>
      </div>
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3">
        <div class="w-10 h-10 bg-[#1B6FA2] rounded-full flex items-center justify-center text-white font-bold">VR</div>
        <div><span class="text-yellow-400">★★★★★</span> "Restaurant POS works offline!" <br/><span class="text-xs text-gray-500">Venkatesh, Dharmapuri</span></div>
      </div>
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3">
        <div class="w-10 h-10 bg-[#16C7C9] rounded-full flex items-center justify-center text-white font-bold">SK</div>
        <div><span class="text-yellow-400">★★★★★</span> "Chit collections made easy!" <br/><span class="text-xs text-gray-500">Sundar, Salem</span></div>
      </div>
      <!-- duplicate for seamless loop -->
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3"><div class="w-10 h-10 bg-[#1B6FA2] rounded-full flex items-center justify-center text-white font-bold">MF</div><div><span class="text-yellow-400">★★★★★</span> "Excellent billing software" <br/><span class="text-xs text-gray-500">Metro Furniture, Dharmapuri</span></div></div>
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3"><div class="w-10 h-10 bg-[#16C7C9] rounded-full flex items-center justify-center text-white font-bold">AS</div><div><span class="text-yellow-400">★★★★★</span> "Saved ₹1L+ in 3 years!" <br/><span class="text-xs text-gray-500">Arihant Enterprises, Coimbatore</span></div></div>
      <div class="bg-white rounded-xl px-6 py-4 shadow-sm border inline-flex items-center gap-3"><div class="w-10 h-10 bg-[#202788] rounded-full flex items-center justify-center text-white font-bold">SC</div><div><span class="text-yellow-400">★★★★★</span> "Expiry alerts saved my pharmacy!" <br/><span class="text-xs text-gray-500">Dr. Anitha, Coimbatore</span></div></div>
    </div>
  </section>

  <!-- FAQ + DEMO FORM 2-COLUMN LAYOUT -->
  <section id="faq-demo" class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-10 items-start">
      <!-- DEMO FORM (LEFT) -->
      <div id="demo-form-section" class="order-1 lg:order-2">
        <div class="glass-card rounded-2xl p-6 sm:p-8 shadow-xl">
          <div class="text-center mb-6">
            <span class="inline-block bg-red-100 text-red-700 text-xs font-bold px-3 py-1 rounded-full mb-2 pulse-glow">🔥 Only 3 Demo Slots Left Today</span>
            <h2 class="text-3xl font-extrabold text-gray-900">Book Your Free Demo</h2>
            <p class="text-sm text-gray-500 mt-1">Select your industry, fill details, and pick a time — we'll call you instantly.</p>
          </div>
          <div class="flex gap-1 mb-6">
            <div class="flex-1 h-1.5 bg-[#1B6FA2] rounded-full progress-step" id="pBar1"></div>
            <div class="flex-1 h-1.5 bg-gray-200 rounded-full progress-step" id="pBar2"></div>
            <div class="flex-1 h-1.5 bg-gray-200 rounded-full progress-step" id="pBar3"></div>
            <div class="flex-1 h-1.5 bg-gray-200 rounded-full progress-step" id="pBar4"></div>
          </div>
          <div id="fStep1">
            <p class="text-sm font-semibold text-gray-700 mb-3">Step 1: Select Your Business</p>
            <div class="grid grid-cols-2 gap-3 mb-4">
              <button onclick="selectBusiness('Textile Shop')" class="border-2 border-gray-200 rounded-xl p-3 text-sm font-medium hover:border-[#1B6FA2] hover:bg-blue-50 transition biz-btn">👕 Textile Shop</button>
              <button onclick="selectBusiness('Medical Shop')" class="border-2 border-gray-200 rounded-xl p-3 text-sm font-medium hover:border-[#1B6FA2] hover:bg-blue-50 transition biz-btn">💊 Medical Shop</button>
              <button onclick="selectBusiness('Restaurant')" class="border-2 border-gray-200 rounded-xl p-3 text-sm font-medium hover:border-[#1B6FA2] hover:bg-blue-50 transition biz-btn">🍽️ Restaurant</button>
              <button onclick="selectBusiness('Retail Store')" class="border-2 border-gray-200 rounded-xl p-3 text-sm font-medium hover:border-[#1B6FA2] hover:bg-blue-50 transition biz-btn">🏪 Retail Store</button>
              <button onclick="selectBusiness('Finance Company')" class="border-2 border-gray-200 rounded-xl p-3 text-sm font-medium hover:border-[#1B6FA2] hover:bg-blue-50 transition biz-btn">🏦 Finance</button>
              <button onclick="selectBusiness('Chit Fund')" class="border-2 border-gray-200 rounded-xl p-3 text-sm font-medium hover:border-[#1B6FA2] hover:bg-blue-50 transition biz-btn">💰 Chit Fund</button>
              <button onclick="selectBusiness('Custom / Other')" class="border-2 border-gray-200 rounded-xl p-3 text-sm font-medium hover:border-[#1B6FA2] hover:bg-blue-50 transition biz-btn">📋 Custom / Other</button>
            </div>
            <p class="text-xs text-gray-400 text-center">Selected: <span id="selectedBiz" class="font-semibold text-gray-700">None</span></p>
          </div>
          <div id="fStep2" class="hidden">
            <p class="text-sm font-semibold text-gray-700 mb-3">Step 2: Your Details</p>
            <div class="space-y-3 mb-4">
              <input type="text" id="fName" placeholder="Full Name*" class="w-full px-3 py-2.5 border rounded-lg focus:ring-2 focus:ring-[#1B6FA2] outline-none" />
              <div class="flex"><span class="inline-flex items-center px-3 py-2.5 border border-r-0 rounded-l-lg bg-gray-50 text-sm">+91</span><input type="tel" id="fMobile" placeholder="Mobile Number*" class="w-full px-3 py-2.5 border rounded-r-lg focus:ring-2 focus:ring-[#1B6FA2] outline-none" /></div>
              <input type="email" id="fEmail" placeholder="Email Address" class="w-full px-3 py-2.5 border rounded-lg focus:ring-2 focus:ring-[#1B6FA2] outline-none" />
            </div>
          </div>
          <div id="fStep3" class="hidden">
            <p class="text-sm font-semibold text-gray-700 mb-3">Step 3: Pick Date & Time</p>
            <div class="space-y-3">
              <input type="date" id="fDate" min="" class="w-full px-3 py-2.5 border rounded-lg focus:ring-2 focus:ring-[#1B6FA2] outline-none" />
              <p class="text-xs text-gray-500 mt-1">Mon–Sat only.</p>
              <label class="block text-xs font-semibold text-gray-700 mb-1">Available Time Slots (real availability)</label>
              <div class="grid grid-cols-2 gap-2" id="fSlots"></div>
              <p class="text-xs text-gray-500 mt-1" id="slotAvailability"></p>
            </div>
          </div>
          <div id="fStep4" class="hidden">
            <p class="text-sm font-semibold text-gray-700 mb-3">Step 4: Confirm Booking</p>
            <div class="bg-green-50 rounded-xl p-4 mb-4 text-sm text-green-700">
              <p>✅ <span id="cBiz"></span></p>
              <p>✅ <span id="cName"></span> | <span id="cMobile"></span></p>
              <p>✅ Date & Slot: <span id="cSlot"></span></p>
            </div>
          </div>
          <div class="flex gap-3 mt-4">
            <button id="btnBack" onclick="prevStep()" class="flex-1 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-semibold hidden">Back</button>
            <button id="btnNext" onclick="nextStep()" class="flex-1 py-2.5 rounded-lg text-white font-bold bg-gradient-to-r from-[#1B6FA2] to-[#16C7C9] hover:from-[#202788] hover:to-[#1B6FA2] transition shadow-lg disabled:opacity-50 disabled:cursor-not-allowed" id="btnNext">Next</button>
          </div>
        </div>
      </div>
      <!-- FAQ (RIGHT) -->
      <div class="order-2 lg:order-1">
        <h2 class="text-3xl font-extrabold text-gray-900 mb-8 reveal text-center lg:text-left">Frequently Asked Questions</h2>
        <div class="space-y-3 reveal">
          <details class="bg-gray-50 rounded-xl p-4"><summary class="font-semibold cursor-pointer">Is it really one‑time payment?</summary><p class="mt-2 text-sm text-gray-600">Yes! Pay ₹7,999 once and use the software forever. No recurring fees.</p></details>
          <details class="bg-gray-50 rounded-xl p-4"><summary class="font-semibold cursor-pointer">Can I migrate from Tally?</summary><p class="mt-2 text-sm text-gray-600">Absolutely. Free data migration from Tally, Excel, and other software.</p></details>
          <details class="bg-gray-50 rounded-xl p-4"><summary class="font-semibold cursor-pointer">Is support available in Tamil?</summary><p class="mt-2 text-sm text-gray-600">ஆம்! Phone & WhatsApp support in Tamil & English.</p></details>
          <details class="bg-gray-50 rounded-xl p-4"><summary class="font-semibold cursor-pointer">Does Ecommer work offline?</summary><p class="mt-2 text-sm text-gray-600">Yes! You can bill offline; data syncs automatically when back online.</p></details>
          <details class="bg-gray-50 rounded-xl p-4"><summary class="font-semibold cursor-pointer">Is my data safe?</summary><p class="mt-2 text-sm text-gray-600">All data is encrypted with bank‑grade security and backed up daily.</p></details>
          <details class="bg-gray-50 rounded-xl p-4"><summary class="font-semibold cursor-pointer">Do you offer a mobile app?</summary><p class="mt-2 text-sm text-gray-600">Yes, Ecommer works on Android, iOS (mobile browser), and desktop.</p></details>
          <details class="bg-gray-50 rounded-xl p-4"><summary class="font-semibold cursor-pointer">What if I'm not satisfied?</summary><p class="mt-2 text-sm text-gray-600">We offer a 30‑day money‑back guarantee. No questions asked.</p></details>
        </div>
      </div>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="py-12 bg-gradient-to-r from-[#202788] to-[#16C7C9] text-white text-center">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-3 reveal">Ready to Own Your Software Forever?</h2>
    <p class="text-lg opacity-90 mb-6 reveal">Join 500+ Tamilnadu businesses. One payment. Lifetime usage.</p>
    <button onclick="scrollToForm()" class="btn bg-white text-[#202788] font-bold px-10 py-4 rounded-xl text-lg shadow-2xl hover:scale-105 transition reveal">🎯 Book My Free Demo</button>
  </section>

  <!-- FOOTER -->
  <footer class="border-t border-gray-200 py-8 bg-white pb-24 lg:pb-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 text-center">
      <div class="flex justify-center gap-6 mb-4">
        <a href="https://www.facebook.com/profile.php?id=61581403581310" target="_blank" class="text-gray-500 hover:text-[#1B6FA2] transition"><i class="fab fa-facebook-f text-xl"></i></a>
        <a href="https://www.instagram.com/ecommer.in/" target="_blank" class="text-gray-500 hover:text-[#1B6FA2] transition"><i class="fab fa-instagram text-xl"></i></a>
      </div>
      <p class="text-sm text-gray-500">© <span id="year"></span> Ecommer. Made with ❤️ in Tamilnadu</p>
    </div>
  </footer>

  <!-- Mobile sticky footer (original full-width style) -->
  <div class="mobile-sticky-footer flex gap-2" id="mobileStickyFooter">
    <button onclick="scrollToForm()" class="flex-1 bg-[#1B6FA2] text-white font-bold py-3 rounded-xl">Book Demo</button>
    <a href="https://wa.me/919003552650" target="_blank" class="flex-1 bg-green-500 text-white font-bold py-3 rounded-xl text-center">WhatsApp</a>
  </div>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();

    // GSAP animations
    gsap.registerPlugin(ScrollTrigger);
    document.querySelectorAll('.reveal').forEach(el => {
      gsap.fromTo(el, { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.7, scrollTrigger: { trigger: el, start: 'top 85%', toggleActions: 'play none none none' } });
    });

    // Live notification
    const messages = ["Textile Store from Salem installed Ecommer","Medical Shop from Coimbatore generated 120 invoices","Retail Store from Dharmapuri saved ₹25,000","Restaurant in Tirupur switched to Ecommer POS","Chit Fund company in Madurai enrolled"];
    const liveNotif = document.getElementById('liveNotification'), liveMsg = document.getElementById('liveMsg');
    let msgIdx = 0;
    setInterval(() => { liveMsg.textContent = messages[msgIdx%messages.length]; liveNotif.classList.add('show'); setTimeout(() => liveNotif.classList.remove('show'), 4000); msgIdx++; }, 8000);

    // Sticky footer scroll visibility
    const stickyFooter = document.getElementById('mobileStickyFooter');
    window.addEventListener('scroll', () => { stickyFooter.classList.toggle('visible', window.scrollY > 400); });

    // Multi-step form logic
    let currentStep = 1, selectedBusinessType = '';
    const fStep1 = document.getElementById('fStep1'), fStep2 = document.getElementById('fStep2'), fStep3 = document.getElementById('fStep3'), fStep4 = document.getElementById('fStep4');
    const btnBack = document.getElementById('btnBack'), btnNext = document.getElementById('btnNext');
    const dateInput = document.getElementById('fDate'), slotsContainer = document.getElementById('fSlots'), slotAvailText = document.getElementById('slotAvailability');
    let selectedSlot = null;
    const timeSlots = ['10:00-11:00','11:00-12:00','12:00-1:00','1:00-2:00','2:00-3:00'];

    function selectBusiness(type) {
      selectedBusinessType = type;
      document.getElementById('selectedBiz').textContent = type;
      document.querySelectorAll('.biz-btn').forEach(b => b.classList.remove('border-[#1B6FA2]','bg-blue-50'));
      event.target.classList.add('border-[#1B6FA2]','bg-blue-50');
    }

    // Fetch real booked slots from backend
    async function fetchBookedSlots(date) {
      try {
        const response = await fetch(`?action=get_slots&date=${date}`);
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        return data.slots || [];
      } catch (error) {
        console.error('Could not fetch booked slots', error);
        return [];
      }
    }

    async function updateSlots() {
      slotsContainer.innerHTML = '';
      const dateVal = dateInput.value;
      if (!dateVal) { slotAvailText.innerText = 'Select a date to see real-time slots.'; return; }
      const selectedDate = new Date(dateVal + 'T00:00:00');
      if (selectedDate.getDay() === 0) { slotAvailText.innerText = 'No demos on Sundays.'; return; }

      const bookedSlots = await fetchBookedSlots(dateVal);
      const today = new Date();
      let availableCount = 0;
      selectedSlot = null;

      timeSlots.forEach(slot => {
        const btn = document.createElement('div');
        btn.className = 'time-slot-btn';
        btn.innerText = slot;
        const startHour = parseInt(slot.split(':')[0]);
        const slotTime = new Date(selectedDate); slotTime.setHours(startHour,0,0,0);
        const isPast = (selectedDate.toDateString() === today.toDateString() && slotTime <= today);
        const isBooked = bookedSlots.includes(slot);

        if (isPast || isBooked) {
          btn.classList.add('booked');
          btn.style.pointerEvents = 'none';
        } else {
          btn.classList.add('available');
          availableCount++;
          btn.addEventListener('click', () => {
            slotsContainer.querySelectorAll('.time-slot-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
            selectedSlot = slot;
          });
        }
        slotsContainer.appendChild(btn);
      });

      const firstAvailable = slotsContainer.querySelector('.time-slot-btn.available');
      if (firstAvailable) {
        firstAvailable.classList.add('selected');
        selectedSlot = firstAvailable.innerText;
      } else {
        selectedSlot = null;
      }
      slotAvailText.innerText = availableCount ? `${availableCount} slot(s) available` : 'All slots are booked for this date.';
    }

    dateInput.addEventListener('change', () => { selectedSlot = null; updateSlots(); });

    async function nextStep() {
      if (currentStep === 1) {
        if (!selectedBusinessType) return alert('Please select your business type.');
        fStep1.classList.add('hidden'); fStep2.classList.remove('hidden');
        document.getElementById('pBar2').classList.replace('bg-gray-200','bg-[#1B6FA2]');
        btnBack.classList.remove('hidden'); currentStep = 2;
      } else if (currentStep === 2) {
        const name = document.getElementById('fName').value.trim();
        const mobile = document.getElementById('fMobile').value.trim();
        if (!name || !mobile) return alert('Please fill name and mobile.');
        fStep2.classList.add('hidden'); fStep3.classList.remove('hidden');
        document.getElementById('pBar3').classList.replace('bg-gray-200','bg-[#1B6FA2]');
        const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate()+1);
        dateInput.min = tomorrow.toISOString().split('T')[0];
        await updateSlots();
        currentStep = 3;
      } else if (currentStep === 3) {
        if (!selectedSlot || !dateInput.value) return alert('Please select a date and time slot.');
        document.getElementById('cBiz').innerText = selectedBusinessType;
        document.getElementById('cName').innerText = document.getElementById('fName').value;
        document.getElementById('cMobile').innerText = document.getElementById('fMobile').value;
        document.getElementById('cSlot').innerText = dateInput.value + ' ' + selectedSlot;
        fStep3.classList.add('hidden'); fStep4.classList.remove('hidden');
        document.getElementById('pBar4').classList.replace('bg-gray-200','bg-[#1B6FA2]');
        btnNext.textContent = 'Confirm Booking'; currentStep = 4;
      } else if (currentStep === 4) {
        btnNext.disabled = true;
        btnNext.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...';
        const bookingData = {
          business: selectedBusinessType,
          name: document.getElementById('fName').value,
          mobile: document.getElementById('fMobile').value,
          email: document.getElementById('fEmail').value,
          date: dateInput.value,
          slot: selectedSlot
        };
        try {
          const response = await fetch('?action=book_demo', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(bookingData)
          });
          const result = await response.json();
          if (!response.ok) {
            Swal.fire({ icon: 'error', title: 'Oops...', text: result.error || 'Booking failed. Try another slot.' });
          } else {
            const customerName = bookingData.name;
            Swal.fire({
              icon: 'success',
              title: '✅ Demo Booked Successfully',
              html: `<b>Hi ${customerName}</b><br>Your demo has been booked successfully.<br><br>Our team will call you shortly.`,
              confirmButtonText: 'OK',
              confirmButtonColor: '#1B6FA2'
            });
            // Reset form
            fStep4.classList.add('hidden'); fStep1.classList.remove('hidden');
            btnBack.classList.add('hidden'); btnNext.textContent = 'Next';
            ['pBar2','pBar3','pBar4'].forEach(id => { document.getElementById(id).classList.replace('bg-[#1B6FA2]','bg-gray-200'); });
            currentStep = 1; selectedBusinessType = '';
            document.getElementById('selectedBiz').textContent = 'None';
            document.getElementById('fName').value = ''; document.getElementById('fMobile').value = ''; document.getElementById('fEmail').value = '';
            dateInput.value = ''; slotsContainer.innerHTML = ''; selectedSlot = null;
            document.querySelectorAll('.biz-btn').forEach(b => b.classList.remove('border-[#1B6FA2]','bg-blue-50'));
          }
        } catch (err) {
          Swal.fire({ icon: 'error', title: 'Error', text: 'Network error. Please try again.' });
        } finally {
          btnNext.disabled = false;
          btnNext.innerHTML = 'Next';
        }
      }
    }

    function prevStep() {
      if (currentStep === 2) {
        fStep2.classList.add('hidden'); fStep1.classList.remove('hidden');
        document.getElementById('pBar2').classList.replace('bg-[#1B6FA2]','bg-gray-200');
        btnBack.classList.add('hidden'); currentStep = 1;
      } else if (currentStep === 3) {
        fStep3.classList.add('hidden'); fStep2.classList.remove('hidden');
        document.getElementById('pBar3').classList.replace('bg-[#1B6FA2]','bg-gray-200');
        currentStep = 2;
      } else if (currentStep === 4) {
        fStep4.classList.add('hidden'); fStep3.classList.remove('hidden');
        document.getElementById('pBar4').classList.replace('bg-[#1B6FA2]','bg-gray-200');
        btnNext.textContent = 'Next'; currentStep = 3;
      }
    }
    function scrollToForm() {
      document.getElementById('demo-form-section').scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    // Stats animation
    function animateCounter(id, target, duration) {
      const el = document.getElementById(id); if (!el) return;
      let start = 0, increment = target / (duration / 16);
      const timer = setInterval(() => {
        start += increment;
        if (start >= target) { el.textContent = target.toLocaleString()+'+'; clearInterval(timer); }
        else { el.textContent = Math.floor(start).toLocaleString()+'+'; }
      }, 16);
    }
    const statsSection = document.getElementById('statCustomers').closest('section');
    if (statsSection) {
      new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            animateCounter('statCustomers', 500, 2000);
            animateCounter('statInvoices', 69800, 2500);
            animateCounter('statQuotations', 86704, 1800);
            animateCounter('statActive', 480, 2000);
            obs.unobserve(entry.target);
          }
        });
      }, { threshold: 0.5 }).observe(statsSection);
    }

    // Video audio control
    const reelContainer = document.getElementById('reelContainer');
    const heroVideo = document.getElementById('heroVideo');
    reelContainer.addEventListener('click', () => {
      if (heroVideo.muted) {
        heroVideo.muted = false;
        heroVideo.play().catch(() => {});
      }
    });

    // Hamburger menu
    function toggleMenu() {
      document.getElementById('mainNav').classList.toggle('show');
    }
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.site-header')) {
        document.getElementById('mainNav')?.classList.remove('show');
      }
    });
  </script>
</body>
</html>