<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopIndia - Premium Indian Fashion Store</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #FFF8F0; color: #2D2D2D; overflow-x: hidden; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }
        
        :root {
            --primary: #FF6B35;
            --secondary: #1A1A2E;
            --accent: #FFD700;
            --bg: #FFF8F0;
            --success: #4CAF50;
            --highlight: #E94560;
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes logoReveal {
            0% { transform: scale(0) rotate(-180deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(10deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
        }
        
        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        @keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent); }
            50% { box-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent); }
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @keyframes ripple {
            to { transform: scale(4); opacity: 0; }
        }
        
        .animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
        .animate-logoReveal { animation: logoReveal 1.5s ease-out forwards; }
        .animate-pulse { animation: pulse 2s infinite; }
        .animate-bounce { animation: bounce 0.5s ease-out; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .animate-marquee { animation: marquee 20s linear infinite; }
        .animate-glow { animation: glow 2s ease-in-out infinite; }
        
        /* Scroll animations */
        .reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
        
        /* Header */
        .header {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            background: transparent; transition: all 0.3s ease;
        }
        .header.scrolled {
            background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        /* Hero Carousel */
        .hero-carousel { position: relative; overflow: hidden; height: 90vh; }
        .hero-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
        .hero-slide.active { opacity: 1; }
        .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
        .hero-overlay {
            position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,26,46,0.8) 0%, rgba(255,107,53,0.3) 100%);
            display: flex; align-items: center; justify-content: center;
        }
        
        /* Product Cards */
        .product-card {
            background: white; border-radius: 16px; overflow: hidden;
            transition: all 0.3s ease; cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(255,107,53,0.2);
        }
        .product-card .img-container { position: relative; overflow: hidden; aspect-ratio: 3/4; }
        .product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .product-card:hover img { transform: scale(1.1); }
        .product-card .quick-actions {
            position: absolute; bottom: -50px; left: 0; right: 0;
            display: flex; justify-content: center; gap: 10px; padding: 10px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7)); transition: bottom 0.3s ease;
        }
        .product-card:hover .quick-actions { bottom: 0; }
        
        /* Badge */
        .badge {
            position: absolute; top: 10px; left: 10px; padding: 5px 12px;
            background: var(--highlight); color: white; border-radius: 20px;
            font-size: 12px; font-weight: 600;
        }
        .strike-price {
            text-decoration: line-through; color: #999; font-size: 14px;
        }
        
        /* Buttons */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), #ff8c5a);
            color: white; border: none; padding: 12px 30px; border-radius: 30px;
            font-weight: 600; cursor: pointer; transition: all 0.3s ease;
            position: relative; overflow: hidden;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255,107,53,0.4);
        }
        .btn-primary:active { transform: scale(0.98); }
        
        .btn-secondary {
            background: var(--secondary); color: white; border: none;
            padding: 12px 30px; border-radius: 30px; font-weight: 600;
            cursor: pointer; transition: all 0.3s ease;
        }
        .btn-secondary:hover { background: #2a2a4e; }
        
        /* WhatsApp FAB */
        .whatsapp-fab {
            position: fixed; bottom: 30px; right: 30px; z-index: 999;
            width: 60px; height: 60px; background: #25D366; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 28px; cursor: pointer;
            animation: pulse 2s infinite; text-decoration: none;
        }
        .whatsapp-fab:hover { transform: scale(1.1); }
        
        /* Back to top */
        .back-to-top {
            position: fixed; bottom: 100px; right: 30px; z-index: 999;
            width: 50px; height: 50px; background: var(--secondary);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            color: white; cursor: pointer; opacity: 0; visibility: hidden;
            transition: all 0.3s ease;
        }
        .back-to-top.visible { opacity: 1; visibility: visible; }
        .back-to-top:hover { background: var(--primary); transform: translateY(-5px); }
        
        /* Toast */
        .toast-container {
            position: fixed; top: 100px; right: 20px; z-index: 9999;
            display: flex; flex-direction: column; gap: 10px;
        }
        .toast {
            padding: 15px 25px; border-radius: 10px; color: white;
            display: flex; align-items: center; gap: 10px;
            animation: slideIn 0.3s ease; min-width: 280px;
        }
        .toast.success { background: var(--success); }
        .toast.error { background: var(--highlight); }
        .toast.info { background: var(--primary); }
        .toast.removing { animation: slideOut 0.3s ease forwards; }
        
        /* Modal */
        .modal {
            position: fixed; inset: 0; z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .modal.active { opacity: 1; visibility: visible; }
        .modal-backdrop {
            position: absolute; inset: 0; background: rgba(0,0,0,0.7);
        }
        .modal-content {
            position: relative; background: white; border-radius: 20px;
            max-width: 900px; width: 95%; max-height: 90vh; overflow-y: auto;
            transform: scale(0.8); transition: transform 0.3s ease;
        }
        .modal.active .modal-content { transform: scale(1); }
        
        /* Marquee */
        .marquee-container {
            background: linear-gradient(90deg, var(--secondary), var(--primary), var(--secondary));
            padding: 15px 0; overflow: hidden; color: white;
        }
        .marquee-content {
            display: flex; animation: marquee 20s linear infinite;
            white-space: nowrap;
        }
        
        /* Banner Slider */
        .banner-slider {
            display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
            padding: 20px 0; scrollbar-width: none;
        }
        .banner-slider::-webkit-scrollbar { display: none; }
        .banner-card {
            min-width: 300px; height: 200px; border-radius: 15px; overflow: hidden;
            scroll-snap-align: start; position: relative; cursor: pointer;
        }
        .banner-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .banner-card:hover img { transform: scale(1.1); }
        .banner-overlay {
            position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,107,53,0.8), rgba(26,26,46,0.8));
            display: flex; align-items: center; justify-content: center; color: white; text-align: center;
        }
        
        /* Reviews */
        .review-card {
            background: white; padding: 30px; border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05); min-width: 350px;
        }
        .stars { color: #FFD700; }
        
        /* FAQ */
        .faq-item {
            background: white; border-radius: 10px; margin-bottom: 10px;
            overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .faq-question {
            padding: 20px; cursor: pointer; display: flex; justify-content: space-between;
            align-items: center; font-weight: 600; transition: background 0.3s;
        }
        .faq-question:hover { background: #f8f8f8; }
        .faq-answer {
            max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
            padding: 0 20px;
        }
        .faq-item.active .faq-answer { max-height: 200px; padding: 0 20px 20px; }
        .faq-item.active .faq-icon { transform: rotate(180deg); }
        .faq-icon { transition: transform 0.3s; }
        
        /* Cart Sidebar */
        .cart-sidebar {
            position: fixed; top: 0; right: -400px; width: 400px; height: 100%;
            background: white; z-index: 9999; transition: right 0.4s ease;
            box-shadow: -5px 0 30px rgba(0,0,0,0.1); display: flex; flex-direction: column;
        }
        .cart-sidebar.active { right: 0; }
        .cart-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998;
            opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .cart-overlay.active { opacity: 1; visibility: visible; }
        
        /* Form styles */
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
        .form-group input, .form-group textarea, .form-group select {
            width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0;
            border-radius: 10px; font-size: 15px; transition: all 0.3s ease;
        }
        .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
            outline: none; border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
        }
        .form-group input.error { border-color: var(--highlight); }
        .form-group input.valid { border-color: var(--success); }
        .error-message { color: var(--highlight); font-size: 12px; margin-top: 5px; }
        
        /* Payment Section */
        .qr-container {
            background: white; padding: 30px; border-radius: 15px;
            text-align: center; border: 3px dashed var(--primary);
        }
        .qr-placeholder {
            width: 200px; height: 200px; margin: 0 auto 20px;
            background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
                        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
                        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
            background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            border-radius: 10px; display: flex; align-items: center; justify-content: center;
            font-size: 100px; color: var(--primary);
        }
        
        /* Welcome Popup */
        .welcome-popup {
            position: fixed; inset: 0; z-index: 99999;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .welcome-popup.active { opacity: 1; visibility: visible; }
        .welcome-content {
            background: linear-gradient(135deg, var(--primary), #ff8c5a);
            padding: 50px; border-radius: 30px; text-align: center; color: white;
            max-width: 500px; width: 90%; transform: scale(0.8);
            transition: transform 0.3s ease; position: relative;
        }
        .welcome-popup.active .welcome-content { transform: scale(1); }
        .welcome-close {
            position: absolute; top: 15px; right: 20px; background: none;
            border: none; color: white; font-size: 24px; cursor: pointer;
        }
        
        /* Image Gallery */
        .gallery-thumbnails { display: flex; gap: 10px; margin-top: 15px; }
        .gallery-thumb {
            width: 80px; height: 80px; border-radius: 10px; overflow: hidden;
            cursor: pointer; border: 3px solid transparent; transition: all 0.3s;
        }
        .gallery-thumb.active, .gallery-thumb:hover { border-color: var(--primary); }
        .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
        
        /* Section Titles */
        .section-title {
            font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 50px;
            position: relative; display: inline-block; left: 50%; transform: translateX(-50%);
        }
        .section-title::after {
            content: ''; position: absolute; bottom: -10px; left: 50%;
            transform: translateX(-50%); width: 80px; height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 2px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .hero-carousel { height: 60vh; }
            .section-title { font-size: 1.8rem; }
            .cart-sidebar { width: 100%; right: -100%; }
            .modal-content { margin: 10px; }
            .banner-card { min-width: 250px; }
            .review-card { min-width: 280px; }
        }

        /* Ripple Effect */
        .ripple {
            position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3);
            transform: scale(0); animation: ripple 0.6s linear;
            pointer-events: none;
        }

        /* Loading Spinner */
        .spinner {
            width: 40px; height: 40px; border: 4px solid #f0f0f0;
            border-top-color: var(--primary); border-radius: 50%;
            animation: spin 1s linear infinite; margin: 50px auto;
        }

        /* Ad Banner Strip */
        .ad-banners {
            display: flex; gap: 15px; overflow-x: auto; padding: 20px;
            scroll-snap-type: x mandatory;
        }
        .ad-banner {
            min-width: 100%; height: 300px; position: relative;
            scroll-snap-align: start;
        }
        .ad-banner img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
        .ad-overlay {
            position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,26,46,0.7), rgba(255,107,53,0.5));
            border-radius: 20px; display: flex; align-items: center; justify-content: center;
        }

        /* Success Animation */
        @keyframes success-check {
            0% { transform: scale(0); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        .success-check { animation: success-check 0.5s ease-out; }

        /* Nav link active */
        .nav-link { position: relative; }
        .nav-link::after {
            content: ''; position: absolute; bottom: -5px; left: 0;
            width: 0; height: 3px; background: var(--primary);
            transition: width 0.3s ease; border-radius: 2px;
        }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }

        /* Quantity Controls */
        .qty-control {
            display: flex; align-items: center; gap: 10px;
            background: #f5f5f5; border-radius: 25px; padding: 5px;
        }
        .qty-btn {
            width: 30px; height: 30px; border-radius: 50%; border: none;
            background: var(--primary); color: white; cursor: pointer;
            transition: all 0.3s; display: flex; align-items: center; justify-content: center;
        }
        .qty-btn:hover { background: var(--secondary); transform: scale(1.1); }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header" id="header">
        <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
            <a href="#home" class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center text-white font-bold text-xl animate-logoReveal">
                    <i class="fas fa-store"></i>
                </div>
                <span class="text-2xl font-bold text-white">Shop<span class="text-orange-400">India</span></span>
            </a>
            
            <nav class="hidden md:flex items-center gap-8">
                <a href="#home" class="nav-link text-white hover:text-orange-400 transition">Home</a>
                <a href="#shop" class="nav-link text-white hover:text-orange-400 transition">Shop</a>
                <a href="#reviews" class="nav-link text-white hover:text-orange-400 transition">Reviews</a>
                <a href="#faq" class="nav-link text-white hover:text-orange-400 transition">FAQ</a>
                <a href="#contact" class="nav-link text-white hover:text-orange-400 transition">Contact</a>
            </nav>
            
            <div class="flex items-center gap-4">
                <button class="relative text-white text-xl" onclick="toggleCart()">
                    <i class="fas fa-shopping-cart"></i>
                    <span id="cartCount" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">0</span>
                </button>
                <button class="md:hidden text-white text-2xl" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Mobile Menu -->
    <div id="mobileMenu" class="fixed inset-0 bg-black/90 z-50 hidden flex-col items-center justify-center gap-8">
        <button class="absolute top-5 right-5 text-white text-3xl" onclick="toggleMobileMenu()">
            <i class="fas fa-times"></i>
        </button>
        <a href="#home" class="text-white text-2xl" onclick="toggleMobileMenu()">Home</a>
        <a href="#shop" class="text-white text-2xl" onclick="toggleMobileMenu()">Shop</a>
        <a href="#reviews" class="text-white text-2xl" onclick="toggleMobileMenu()">Reviews</a>
        <a href="#faq" class="text-white text-2xl" onclick="toggleMobileMenu()">FAQ</a>
        <a href="#contact" class="text-white text-2xl" onclick="toggleMobileMenu()">Contact</a>
    </div>

    <!-- Toast Container -->
    <div class="toast-container" id="toastContainer"></div>

    <!-- Hero Section -->
    <section id="home" class="hero-carousel">
        <div class="hero-slide active">
            <img src="https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=1920&q=80" alt="Indian Fashion">
            <div class="hero-overlay">
                <div class="text-center text-white px-4 animate-fadeInUp">
                    <h1 class="text-5xl md:text-7xl font-bold mb-6">Discover <span class="text-orange-400">Elegance</span></h1>
                    <p class="text-xl md:text-2xl mb-8 opacity-90">Premium Indian Fashion for Every Occasion</p>
                    <a href="#shop" class="btn-primary inline-block text-lg">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="hero-slide">
            <img src="https://images.unsplash.com/photo-1583391733956-3750e0ff4e8b?w=1920&q=80" alt="Saree Collection">
            <div class="hero-overlay">
                <div class="text-center text-white px-4">
                    <h1 class="text-5xl md:text-7xl font-bold mb-6">Silk <span class="text-yellow-400">Sarees</span></h1>
                    <p class="text-xl md:text-2xl mb-8 opacity-90">Timeless Elegance, Perfect Craftsmanship</p>
                    <a href="#shop" class="btn-primary inline-block text-lg">Explore Collection</a>
                </div>
            </div>
        </div>
        <div class="hero-slide">
            <img src="https://images.unsplash.com/photo-1590735213920-68192a487bc2?w=1920&q=80" alt="Festive Collection">
            <div class="hero-overlay">
                <div class="text-center text-white px-4">
                    <h1 class="text-5xl md:text-7xl font-bold mb-6">Festive <span class="text-yellow-400">Collection</span></h1>
                    <p class="text-xl md:text-2xl mb-8 opacity-90">50-70% Off on Selected Items</p>
                    <a href="#shop" class="btn-primary inline-block text-lg">Grab Deals</a>
                </div>
            </div>
        </div>
        
        <!-- Carousel Controls -->
        <button class="absolute left-5 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/20 backdrop-blur rounded-full text-white hover:bg-white/40 transition" onclick="changeSlide(-1)">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="absolute right-5 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/20 backdrop-blur rounded-full text-white hover:bg-white/40 transition" onclick="changeSlide(1)">
            <i class="fas fa-chevron-right"></i>
        </button>
        
        <!-- Carousel Indicators -->
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3">
            <button class="carousel-dot w-3 h-3 rounded-full bg-white/50 active" onclick="goToSlide(0)"></button>
            <button class="carousel-dot w-3 h-3 rounded-full bg-white/50" onclick="goToSlide(1)"></button>
            <button class="carousel-dot w-3 h-3 rounded-full bg-white/50" onclick="goToSlide(2)"></button>
        </div>
    </section>

    <!-- Marquee Offer Banner -->
    <div class="marquee-container">
        <div class="marquee-content">
            <span class="mx-8 font-semibold">🎉 GRAND FESTIVE SALE - Up to 70% OFF!</span>
            <span class="mx-8">🇮🇳 Free Delivery on Orders Above ₹999</span>
            <span class="mx-8">💳 Cash on Delivery Available</span>
            <span class="mx-8">🔄 Easy 7-Day Returns</span>
            <span class="mx-8">🎁 Special Discount for First 100 Customers!</span>
            <span class="mx-8 font-semibold">⚡ LIMITED TIME OFFER - Don't Miss!</span>
        </div>
    </div>

    <!-- Ad Banners Section -->
    <section class="py-10 px-4">
        <div class="ad-banners" id="adBanners">
            <div class="ad-banner">
                <img src="https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=1200&q=80" alt="Sale">
                <div class="ad-overlay">
                    <div class="text-center text-white">
                        <h3 class="text-3xl font-bold mb-2">Mega Sale!</h3>
                        <p class="text-xl">Up to 70% OFF</p>
                    </div>
                </div>
            </div>
            <div class="ad-banner">
                <img src="https://images.unsplash.com/photo-1590735213920-68192a487bc2?w=1200&q=80" alt="New Arrivals">
                <div class="ad-overlay">
                    <div class="text-center text-white">
                        <h3 class="text-3xl font-bold mb-2">New Arrivals!</h3>
                        <p class="text-xl">Fresh Festival Collection</p>
                    </div>
                </div>
            </div>
            <div class="ad-banner">
                <img src="https://images.unsplash.com/photo-1583391733956-3750e0ff4e8b?w=1200&q=80" alt="Sarees">
                <div class="ad-overlay">
                    <div class="text-center text-white">
                        <h3 class="text-3xl font-bold mb-2">Silk Sarees</h3>
                        <p class="text-xl">Premium Quality</p>
                    </div>
                </div>
            </div>
            <div class="ad-banner">
                <img src="https://images.unsplash.com/photo-1594560913095-8cf34bab8ad3?w=1200&q=80" alt="Accessories">
                <div class="ad-overlay">
                    <div class="text-center text-white">
                        <h3 class="text-3xl font-bold mb-2">Accessories</h3>
                        <p class="text-xl">Complete Your Look</p>
                    </div>
                </div>
            </div>
            <div class="ad-banner">
                <img src="https://images.unsplash.com/photo-1617627143750-d86bc21e42bb?w=1200&q=80" alt="Men">
                <div class="ad-overlay">
                    <div class="text-center text-white">
                        <h3 class="text-3xl font-bold mb-2">Men's Corner</h3>
                        <p class="text-xl">Traditional & Stylish</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Shop Section -->
    <section id="shop" class="py-20 px-4">
        <div class="max-w-7xl mx-auto">
            <h2 class="section-title reveal">Our <span class="text-orange-500">Products</span></h2>
            
            <!-- Filter Tabs -->
            <div class="flex flex-wrap justify-center gap-4 mb-12">
                <button class="filter-btn px-6 py-2 rounded-full bg-orange-500 text-white transition" onclick="filterProducts('all')">All</button>
                <button class="filter-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-orange-500 hover:text-white transition" onclick="filterProducts('saree')">Sarees</button>
                <button class="filter-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-orange-500 hover:text-white transition" onclick="filterProducts('kurta')">Kurtas</button>
                <button class="filter-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-orange-500 hover:text-white transition" onclick="filterProducts('lehenga')">Lehengas</button>
                <button class="filter-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-orange-500 hover:text-white transition" onclick="filterProducts('sherwani')">Sherwanis</button>
                <button class="filter-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-orange-500 hover:text-white transition" onclick="filterProducts('accessories')">Accessories</button>
            </div>
            
            <!-- Products Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8" id="productsGrid">
                <!-- Products will be injected here -->
            </div>
        </div>
    </section>

    <!-- Customer Reviews -->
    <section id="reviews" class="py-20 px-4 bg-gradient-to-br from-orange-500 to-orange-600">
        <div class="max-w-7xl mx-auto">
            <h2 class="section-title reveal text-white">Customer <span class="text-yellow-300">Reviews</span></h2>
            
            <div class="flex gap-6 overflow-x-auto pb-6 scroll-smooth" id="reviewsContainer">
                <!-- Reviews will be injected here -->
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section id="faq" class="py-20 px-4">
        <div class="max-w-3xl mx-auto">
            <h2 class="section-title reveal">Frequently Asked <span class="text-orange-500">Questions</span></h2>
            
            <div id="faqContainer">
                <!-- FAQs will be injected here -->
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-20 px-4 bg-gray-50">
        <div class="max-w-4xl mx-auto">
            <h2 class="section-title reveal">Contact <span class="text-orange-500">Us</span></h2>
            
            <div class="grid md:grid-cols-2 gap-10">
                <!-- WhatsApp Inquiry -->
                <div class="bg-white p-8 rounded-2xl shadow-lg reveal">
                    <h3 class="text-2xl font-bold mb-6 flex items-center gap-3">
                        <i class="fab fa-whatsapp text-green-500 text-3xl"></i>
                        WhatsApp Inquiry
                    </h3>
                    <form id="whatsappForm" onsubmit="submitWhatsAppForm(event)">
                        <div class="form-group">
                            <label>Your Name</label>
                            <input type="text" id="inquiryName" required placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label>Phone Number</label>
                            <input type="tel" id="inquiryPhone" required placeholder="Your phone number">
                        </div>
                        <div class="form-group">
                            <label>Message</label>
                            <textarea id="inquiryMessage" rows="4" required placeholder="How can we help you?"></textarea>
                        </div>
                        <button type="submit" class="btn-primary w-full flex items-center justify-center gap-2">
                            <i class="fab fa-whatsapp"></i> Send via WhatsApp
                        </button>
                    </form>
                </div>
                
                <!-- Feedback Form -->
                <div class="bg-white p-8 rounded-2xl shadow-lg reveal">
                    <h3 class="text-2xl font-bold mb-6 flex items-center gap-3">
                        <i class="fas fa-comments text-orange-500 text-3xl"></i>
                        Share Feedback
                    </h3>
                    <form id="feedbackForm" onsubmit="submitFeedback(event)">
                        <div class="form-group">
                            <label>Your Name</label>
                            <input type="text" id="feedbackName" required placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label>Rating</label>
                            <div class="flex gap-2 text-2xl" id="ratingStars">
                                <i class="fas fa-star cursor-pointer text-gray-300" data-rating="1"></i>
                                <i class="fas fa-star cursor-pointer text-gray-300" data-rating="2"></i>
                                <i class="fas fa-star cursor-pointer text-gray-300" data-rating="3"></i>
                                <i class="fas fa-star cursor-pointer text-gray-300" data-rating="4"></i>
                                <i class="fas fa-star cursor-pointer text-gray-300" data-rating="5"></i>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Your Feedback</label>
                            <textarea id="feedbackText" rows="4" required placeholder="Share your experience..."></textarea>
                        </div>
                        <button type="submit" class="btn-secondary w-full">Submit Feedback</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-16 px-4">
        <div class="max-w-7xl mx-auto">
            <div class="grid md:grid-cols-4 gap-10 mb-10">
                <div>
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center">
                            <i class="fas fa-store text-xl"></i>
                        </div>
                        <span class="text-2xl font-bold">Shop<span class="text-orange-400">India</span></span>
                    </div>
                    <p class="text-gray-400">Premium Indian Fashion Store. Quality products, authentic designs, and excellent service since 2020.</p>
                </div>
                <div>
                    <h4 class="font-bold text-lg mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#home" class="hover:text-orange-400 transition">Home</a></li>
                        <li><a href="#shop" class="hover:text-orange-400 transition">Shop</a></li>
                        <li><a href="#reviews" class="hover:text-orange-400 transition">Reviews</a></li>
                        <li><a href="#contact" class="hover:text-orange-400 transition">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold text-lg mb-4">Contact Info</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fas fa-phone mr-2"></i> +91 9496822222</li>
                        <li><i class="fas fa-envelope mr-2"></i> support@shopindia.com</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i> Mumbai, Maharashtra, India</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold text-lg mb-4">Payment Partners</h4>
                    <div class="flex gap-3 text-3xl text-gray-400">
                        <i class="fab fa-cc-visa"></i>
                        <i class="fab fa-cc-mastercard"></i>
                        <i class="fab fa-google-pay"></i>
                        <i class="fab fa-amazon-pay"></i>
                    </div>
                    <div class="mt-4">
                        <p class="text-gray-400 text-sm">Bank: State Bank of India</p>
                        <p class="text-gray-400 text-sm">A/C: XXXX XXXX 1234</p>
                        <p class="text-gray-400 text-sm">IFSC: SBIN0001234</p>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
                <p>&copy; 2024 ShopIndia. All Rights Reserved. Made with ❤️ in India</p>
            </div>
        </div>
    </footer>

    <!-- Cart Sidebar -->
    <div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div>
    <div class="cart-sidebar" id="cartSidebar">
        <div class="p-6 border-b flex items-center justify-between">
            <h3 class="text-xl font-bold">Your Cart</h3>
            <button class="text-2xl hover:text-orange-500" onclick="toggleCart()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="flex-1 overflow-y-auto p-6" id="cartItems">
            <!-- Cart items will be injected here -->
        </div>
        <div class="p-6 border-t bg-gray-50">
            <div class="flex justify-between mb-4">
                <span class="font-semibold">Subtotal:</span>
                <span class="font-bold text-xl" id="cartSubtotal">₹0</span>
            </div>
            <button class="btn-primary w-full" onclick="proceedToCheckout()">
                Proceed to Checkout
            </button>
        </div>
    </div>

    <!-- Product Modal -->
    <div class="modal" id="productModal">
        <div class="modal-backdrop" onclick="closeProductModal()"></div>
        <div class="modal-content p-6">
            <button class="absolute top-4 right-4 text-2xl hover:text-orange-500" onclick="closeProductModal()">
                <i class="fas fa-times"></i>
            </button>
            <div class="grid md:grid-cols-2 gap-8" id="modalContent">
                <!-- Product details will be injected here -->
            </div>
        </div>
    </div>

    <!-- Checkout Modal -->
    <div class="modal" id="checkoutModal">
        <div class="modal-backdrop" onclick="closeCheckout()"></div>
        <div class="modal-content p-6 max-w-2xl">
            <button class="absolute top-4 right-4 text-2xl hover:text-orange-500" onclick="closeCheckout()">
                <i class="fas fa-times"></i>
            </button>
            
            <div id="checkoutContent">
                <!-- Step 1: Address Form -->
                <div id="checkoutStep1">
                    <h3 class="text-2xl font-bold mb-6 text-center">Complete Your Order</h3>
                    <form id="checkoutForm" onsubmit="submitOrder(event)">
                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="form-group">
                                <label>Full Name *</label>
                                <input type="text" id="custName" required placeholder="Enter full name">
                            </div>
                            <div class="form-group">
                                <label>Phone Number *</label>
                                <input type="tel" id="custPhone" required placeholder="10-digit mobile number" pattern="[0-9]{10}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Email Address *</label>
                            <input type="email" id="custEmail" required placeholder="your@email.com">
                        </div>
                        <div class="form-group">
                            <label>Address Line 1 *</label>
                            <input type="text" id="custAddr1" required placeholder="House/Flat No., Street">
                        </div>
                        <div class="form-group">
                            <label>Address Line 2</label>
                            <input type="text" id="custAddr2" placeholder="Landmark, Area (Optional)">
                        </div>
                        <div class="grid md:grid-cols-3 gap-4">
                            <div class="form-group">
                                <label>City *</label>
                                <input type="text" id="custCity" required placeholder="City">
                            </div>
                            <div class="form-group">
                                <label>State *</label>
                                <select id="custState" required>
                                    <option value="">Select State</option>
                                    <option value="Andhra Pradesh">Andhra Pradesh</option>
                                    <option value="Delhi">Delhi</option>
                                    <option value="Gujarat">Gujarat</option>
                                    <option value="Karnataka">Karnataka</option>
                                    <option value="Kerala">Kerala</option>
                                    <option value="Madhya Pradesh">Madhya Pradesh</option>
                                    <option value="Maharashtra">Maharashtra</option>
                                    <option value="Punjab">Punjab</option>
                                    <option value="Rajasthan">Rajasthan</option>
                                    <option value="Tamil Nadu">Tamil Nadu</option>
                                    <option value="Telangana">Telangana</option>
                                    <option value="Uttar Pradesh">Uttar Pradesh</option>
                                    <option value="West Bengal">West Bengal</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Pincode *</label>
                                <input type="text" id="custPincode" required placeholder="6-digit pincode" pattern="[0-9]{6}">
                            </div>
                        </div>
                        
                        <!-- Order Summary -->
                        <div class="bg-gray-50 p-4 rounded-xl mt-6">
                            <h4 class="font-bold mb-3">Order Summary</h4>
                            <div id="checkoutItems"></div>
                            <div class="flex justify-between mt-4 pt-4 border-t">
                                <span class="font-semibold">Total Amount:</span>
                                <span class="font-bold text-xl text-orange-500" id="checkoutTotal">₹0</span>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn-primary w-full mt-6 text-lg">
                            <i class="fab fa-whatsapp mr-2"></i> Send Order via WhatsApp
                        </button>
                    </form>
                </div>
                
                <!-- Step 2: Payment -->
                <div id="checkoutStep2" class="hidden">
                    <h3 class="text-2xl font-bold mb-6 text-center">Make Payment</h3>
                    <div class="text-center">
                        <p class="text-gray-600 mb-4">Please pay using the QR code or bank details below:</p>
                        
                        <div class="qr-container mb-6">
                            <div class="qr-placeholder">
                                <i class="fas fa-qrcode"></i>
                            </div>
                            <p class="font-semibold">Scan QR Code to Pay</p>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-xl mb-6 text-left">
                            <h4 class="font-bold mb-2">Bank Transfer Details:</h4>
                            <p><strong>Bank:</strong> State Bank of India</p>
                            <p><strong>A/C No.:</strong> XXXX XXXX 1234</p>
                            <p><strong>IFSC:</strong> SBIN0001234</p>
                            <p><strong>Account Name:</strong> ShopIndia Fashion Pvt. Ltd.</p>
                        </div>
                        
                        <div class="flex items-center gap-3 justify-center mb-4">
                            <input type="checkbox" id="paymentConfirm" class="w-5 h-5">
                            <label for="paymentConfirm">I have completed the payment</label>
                        </div>
                        
                        <button class="btn-secondary w-full" onclick="confirmPayment()" id="confirmPayBtn" disabled>
                            <i class="fas fa-check-circle mr-2"></i> Confirm Payment
                        </button>
                    </div>
                </div>
                
                <!-- Step 3: Confirmation -->
                <div id="checkoutStep3" class="hidden text-center py-10">
                    <div class="success-check text-8xl text-green-500 mb-6">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 class="text-3xl font-bold text-green-500 mb-4">Order Confirmed!</h3>
                    <p class="text-gray-600 mb-6">Thank you for your purchase. Your order will be processed shortly after payment verification.</p>
                    
                    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white p-6 rounded-2xl mb-6">
                        <p class="text-lg font-semibold mb-2">🙏 Thank You for Shopping with Us!</p>
                        <p class="text-sm opacity-90">"Your support helps us bring authentic Indian fashion to your doorstep. Keep shining!"</p>
                    </div>
                    
                    <div class="bg-yellow-50 border-2 border-yellow-400 p-4 rounded-xl mb-6">
                        <p class="text-yellow-800 font-semibold">🎉 Congratulations! You're among our valued customers.</p>
                        <p class="text-yellow-700 text-sm mt-1">Visit again for exclusive offers and new arrivals!</p>
                    </div>
                    
                    <p class="text-gray-500 text-sm mb-4">Order confirmation sent to your WhatsApp and email.</p>
                    
                    <button class="btn-primary" onclick="closeCheckout()">
                        Continue Shopping
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Welcome Popup -->
    <div class="welcome-popup" id="welcomePopup">
        <div class="welcome-content">
            <button class="welcome-close" onclick="closeWelcome()">
                <i class="fas fa-times"></i>
            </button>
            <div class="text-6xl mb-4">👋</div>
            <h2 class="text-3xl font-bold mb-4">Welcome to ShopIndia!</h2>
            <p class="text-lg mb-6 opacity-90" id="welcomeMessage">
                Add your essential favourite items from our store and get ready to shine with traditional Indian fashion!
            </p>
            <p class="text-yellow-200 font-semibold mb-6">
                "Elegance is when the inside is as beautiful as the outside"
            </p>
            <button class="bg-white text-orange-500 px-8 py-3 rounded-full font-bold hover:bg-yellow-100 transition" onclick="closeWelcome()">
                Start Shopping
            </button>
        </div>
    </div>

    <!-- WhatsApp FAB -->
    <a href="https://wa.me/919496822222?text=Hi! I have a query about ShopIndia products." target="_blank" class="whatsapp-fab">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Back to Top -->
    <button class="back-to-top" id="backToTop" onclick="scrollToTop()">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Cookie Consent -->
    <div id="cookieConsent" class="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-4 z-40 hidden">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
            <p class="text-sm">We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.</p>
            <button class="bg-orange-500 px-6 py-2 rounded-full text-white font-semibold hover:bg-orange-600 transition" onclick="acceptCookies()">
                Accept
            </button>
        </div>
    </div>

    <script>
        // Product Data
        const products = [
            { id: 1, name: "Silk Saree Collection", originalPrice: 4999, salePrice: 2499, category: "saree", images: ["https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=500", "https://images.unsplash.com/photo-1583391733956-3750e0ff4e8b?w=500", "https://images.unsplash.com/photo-1590735213920-68192a487bc2?w=500"], description: "Beautiful handwoven silk saree with intricate zari work. Perfect for weddings and special occasions." },
            { id: 2, name: "Cotton Kurti Set", originalPrice: 1999, salePrice: 999, category: "kurta", images: ["https://images.unsplash.com/photo-1594560913095-8cf34bab8ad3?w=500", "https://images.unsplash.com/photo-1590889938467-2b9a8e3ceaa3?w=500", "https://images.unsplash.com/photo-1590548784585-643d2b9f2925?w=500"], description: "Comfortable cotton kurti with matching bottom. Ideal for daily wear and casual outings." },
            { id: 3, name: "Designer Lehenga", originalPrice: 9999, salePrice: 5999, category: "lehenga", images: ["https://images.unsplash.com/photo-1617627143750-d86bc21e42bb?w=500", "https://images.unsplash.com/photo-1594476664367-27b66c1f0696?w=500", "https://images.unsplash.com/photo-1589310243389-96a5483213a8?w=500"], description: "Stunning designer lehenga with heavy embroidery. Perfect for bridal and party wear." },
            { id: 4, name: "Royal Sherwani", originalPrice: 7999, salePrice: 4999, category: "sherwani", images: ["https://images.unsplash.com/photo-1593030761757-71fae45fa0e7?w=500", "https://images.unsplash.com/photo-1578932750294-f5075e85f44a?w=500", "https://images.unsplash.com/photo-1598808503491-b7c0d34c2afc?w=500"], description: "Royal sherwani with delicate stonework. Make a statement at any wedding." },
            { id: 5, name: "Banarasi Dupatta", originalPrice: 2499, salePrice: 1299, category: "accessories", images: ["https://images.unsplash.com/photo-1583391733956-3750e0ff4e8b?w=500", "https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=500", "https://images.unsplash.com/photo-1590735213920-68192a487bc2?w=500"], description: "Authentic Banarasi dupatta with golden zari work. Adds elegance to any outfit." },
            { id: 6, name: "Anarkali Suit", originalPrice: 3499, salePrice: 1999, category: "kurta", images: ["https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=500", "https://images.unsplash.com/photo-1590561820740-4e1a51f4e4c6?w=500", "https://images.unsplash.com/photo-1596545906906-deb3773a2a92?w=500"], description: "Flowing Anarkali suit with beautiful print. Perfect for festivals and celebrations." },
            { id: 7, name: "Men's Kurta Pajama", originalPrice: 2199, salePrice: 1199, category: "kurta", images: ["https://images.unsplash.com/photo-1593030761757-71fae45fa0e7?w=500", "https://images.unsplash.com/photo-1578932750294-f5075e85f44a?w=500", "https://images.unsplash.com/photo-1598808503491-b7c0d34c2afc?w=500"], description: "Classic men's kurta pajama set. Traditional yet stylish for all occasions." },
            { id: 8, name: "Women's Palazzo Set", originalPrice: 1799, salePrice: 899, category: "kurta", images: ["https://images.unsplash.com/photo-1592885118377-6790de280f44?w=500", "https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=500", "https://images.unsplash.com/photo-1596545906906-deb3773a2a92?w=500"], description: "Trendy palazzo set with top. Modern comfort with traditional charm." },
            { id: 9, name: "Traditional Jewellery Set", originalPrice: 3999, salePrice: 2199, category: "accessories", images: ["https://images.unsplash.com/photo-1611085583191-a3b181a88401?w=500", "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?w=500", "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=500"], description: "Complete traditional jewellery set with necklace, earrings and bangles." },
            { id: 10, name: "Embroidered Blouse", originalPrice: 1299, salePrice: 699, category: "accessories", images: ["https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=500", "https://images.unsplash.com/photo-1592885118377-6790de280f44?w=500", "https://images.unsplash.com/photo-1596545906906-deb3773a2a92?w=500"], description: "Beautifully embroidered blouse piece. Enhance your saree look." },
            { id: 11, name: "Churidar Set", originalPrice: 2799, salePrice: 1499, category: "kurta", images: ["https://images.unsplash.com/photo-1590561820740-4e1a51f4e4c6?w=500", "https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=500", "https://images.unsplash.com/photo-1596545906906-deb3773a2a92?w=500"], description: "Elegant churidar suit set. Perfect for office and casual wear." },
            { id: 12, name: "Men's Waistcoat", originalPrice: 1999, salePrice: 1099, category: "sherwani", images: ["https://images.unsplash.com/photo-1593030761757-71fae45fa0e7?w=500", "https://images.unsplash.com/photo-1578932750294-f5075e85f44a?w=500", "https://images.unsplash.com/photo-1598808503491-b7c0d34c2afc?w=500"], description: "Stylish men's waistcoat. Layer it over any outfit for a dapper look." },
            { id: 13, name: "Silk Scarf", originalPrice: 999, salePrice: 499, category: "accessories", images: ["https://images.unsplash.com/photo-1583391733956-3750e0ff4e8b?w=500", "https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=500", "https://images.unsplash.com/photo-1590735213920-68192a487bc2?w=500"], description: "Premium silk scarf. Versatile accessory for any outfit." },
            { id: 14, name: "Dhoti Set", originalPrice: 1599, salePrice: 899, category: "sherwani", images: ["https://images.unsplash.com/photo-1593030761757-71fae45fa0e7?w=500", "https://images.unsplash.com/photo-1578932750294-f5075e85f44a?w=500", "https://images.unsplash.com/photo-1598808503491-b7c0d34c2afc?w=500"], description: "Traditional dhoti set for men. Essential for festivals and ceremonies." },
            { id: 15, name: "Dupatta Set (Pair)", originalPrice: 1499, salePrice: 799, category: "accessories", images: ["https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=500", "https://images.unsplash.com/photo-1583391733956-3750e0ff4e8b?w=500", "https://images.unsplash.com/photo-1590735213920-68192a487bc2?w=500"], description: "Matching dupatta pair. Complete your ethnic look with style." },
            { id: 16, name: "Men's Bandhgala", originalPrice: 4499, salePrice: 2799, category: "sherwani", images: ["https://images.unsplash.com/photo-1593030761757-71fae45fa0e7?w=500", "https://images.unsplash.com/photo-1578932750294-f5075e85f44a?w=500", "https://images.unsplash.com/photo-1598808503491-b7c0d34c2afc?w=500"], description: "Royal Bandhgala jacket. Perfect for weddings and formal events." },
            { id: 17, name: "Women's Cape Top", originalPrice: 1299, salePrice: 749, category: "kurta", images: ["https://images.unsplash.com/photo-1592885118377-6790de280f44?w=500", "https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=500", "https://images.unsplash.com/photo-1596545906906-deb3773a2a92?w=500"], description: "Trendy cape top for women. Modern fusion wear for parties." },
            { id: 18, name: "Traditional Mojaris", originalPrice: 2199, salePrice: 1299, category: "accessories", images: ["https://images.unsplash.com/photo-1592885118377-6790de280f44?w=500", "https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=500", "https://images.unsplash.com/photo-1596545906906-deb3773a2a92?w=500"], description: "Handcrafted traditional mojaris. Ethnic footwear for men and women." },
            { id: 19, name: "Clutches Set", originalPrice: 899, salePrice: 499, category: "accessories", images: ["https://images.unsplash.com/photo-1592885118377-6790de280f44?w=500", "https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=500", "https://images.unsplash.com/photo-1596545906906-deb3773a2a92?w=500"], description: "Set of 3 clutches. Various sizes for different occasions." },
            { id: 20, name: "Stoles Collection", originalPrice: 1199, salePrice: 649, category: "accessories", images: ["https://images.unsplash.com/photo-1583391733956-3750e0ff4e8b?w=500", "https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=500", "https://images.unsplash.com/photo-1590735213920-68192a487bc2?w=500"], description: "Collection of 2 premium stoles. Stay warm in style." }
        ];

        // Reviews Data
        const reviews = [
            { name: "Priya Sharma", location: "Mumbai", rating: 5, text: "Absolutely love the quality! The silk saree I ordered was exactly as shown. Will definitely order again!", avatar: "PS" },
            { name: "Rahul Verma", location: "Delhi", rating: 5, text: "Best online shopping experience for ethnic wear. Fast delivery and excellent packaging. Highly recommended!", avatar: "RV" },
            { name: "Sneha Patel", location: "Ahmedabad", rating: 5, text: "The lehenga was stunning! My family loved it. Perfect for my sister's wedding. Thank you ShopIndia!", avatar: "SP" },
            { name: "Amit Kumar", location: "Bangalore", rating: 4, text: "Great collection and reasonable prices. The sherwani fit perfectly. Minor delay in delivery but overall satisfied.", avatar: "AK" },
            { name: "Kavitha Reddy", location: "Hyderabad", rating: 5, text: "I'm a repeat customer now! The quality of kurtas and the customer service is exceptional. Keep it up!", avatar: "KR" }
        ];

        // FAQ Data
        const faqs = [
            { question: "What is your return policy?", answer: "We offer a 7-day easy return policy. If you're not satisfied with the product, you can return it in its original condition with tags attached for a full refund or exchange." },
            { question: "How long does delivery take?", answer: "Standard delivery takes 5-7 business days. Express delivery (2-3 days) is available for select locations at an additional cost. All orders above ₹999 qualify for free shipping." },
            { question: "What payment methods do you accept?", answer: "We accept all major credit/debit cards, UPI, net banking, and cash on delivery (COD). Online payments via QR code are also available." },
            { question: "How can I track my order?", answer: "Once your order is shipped, you'll receive a tracking link via SMS and WhatsApp. You can also track your order by logging into your account on our website." },
            { question: "Do you offer custom stitching?", answer: "Yes, we offer custom stitching for an additional ₹200-500 depending on the garment. Please contact us via WhatsApp for stitching requirements." },
            { question: "Are the colors exactly as shown?", answer: "We try our best to show accurate colors. However, slight variations may occur due to lighting and display settings. All our products are of premium quality." }
        ];

        // State
        let cart = [];
        let selectedRating = 0;
        let currentSlide = 0;
        let slideInterval;

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            renderProducts();
            renderReviews();
            renderFAQs();
            initCarousel();
            initScrollAnimations();
            checkWelcomePopup();
            checkCookieConsent();
            checkReturnVisitor();
            autoScrollAdBanners();
        });

        // Render Products
        function renderProducts(filter = 'all') {
            const grid = document.getElementById('productsGrid');
            const filtered = filter === 'all' ? products : products.filter(p => p.category === filter);
            
            grid.innerHTML = filtered.map((product, index) => {
                const discount = Math.round((1 - product.salePrice / product.originalPrice) * 100);
                return `
                    <div class="product-card reveal" style="animation-delay: ${index * 0.1}s" onclick="openProductModal(${product.id})">
                        <div class="img-container">
                            <img src="${product.images[0]}" alt="${product.name}" loading="lazy">
                            <span class="badge">${discount}% OFF</span>
                            <div class="quick-actions">
                                <button class="bg-orange-500 text-white px-4 py-2 rounded-full text-sm hover:bg-orange-600 transition" onclick="event.stopPropagation(); addToCart(${product.id})">
                                    <i class="fas fa-cart-plus mr-1"></i> Add
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-lg mb-2 truncate">${product.name}</h3>
                            <div class="flex items-center gap-3">
                                <span class="text-xl font-bold text-orange-500">₹${product.salePrice.toLocaleString()}</span>
                                <span class="strike-price">₹${product.originalPrice.toLocaleString()}</span>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
            
            // Re-init scroll animations for new elements
            setTimeout(initScrollAnimations, 100);
        }

        // Filter Products
        function filterProducts(category) {
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('bg-orange-500', 'text-white');
                btn.classList.add('bg-gray-200', 'text-gray-700');
            });
            event.target.classList.remove('bg-gray-200', 'text-gray-700');
            event.target.classList.add('bg-orange-500', 'text-white');
            renderProducts(category);
        }

        // Render Reviews
        function renderReviews() {
            const container = document.getElementById('reviewsContainer');
            container.innerHTML = reviews.map((review, index) => `
                <div class="review-card reveal" style="animation-delay: ${index * 0.2}s">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
                            ${review.avatar}
                        </div>
                        <div>
                            <h4 class="font-semibold">${review.name}</h4>
                            <p class="text-gray-500 text-sm">${review.location}</p>
                        </div>
                    </div>
                    <div class="stars mb-3">
                        ${'<i class="fas fa-star"></i>'.repeat(review.rating)}${'<i class="far fa-star"></i>'.repeat(5 - review.rating)}
                    </div>
                    <p class="text-gray-600">"${review.text}"</p>
                </div>
            `).join('');
        }

        // Render FAQs
        function renderFAQs() {
            const container = document.getElementById('faqContainer');
            container.innerHTML = faqs.map((faq, index) => `
                <div class="faq-item reveal" style="animation-delay: ${index * 0.1}s">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <span>${faq.question}</span>
                        <i class="fas fa-chevron-down faq-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p class="text-gray-600">${faq.answer}</p>
                    </div>
                </div>
            `).join('');
        }

        function toggleFAQ(element) {
            const item = element.parentElement;
            item.classList.toggle('active');
        }

        // Product Modal
        function openProductModal(id) {
            const product = products.find(p => p.id === id);
            if (!product) return;
            
            const modal = document.getElementById('productModal');
            const content = document.getElementById('modalContent');
            const discount = Math.round((1 - product.salePrice / product.originalPrice) * 100);
            
            content.innerHTML = `
                <div>
                    <div class="aspect-square rounded-xl overflow-hidden mb-4">
                        <img id="mainProductImage" src="${product.images[0]}" alt="${product.name}" class="w-full h-full object-cover">
                    </div>
                    <div class="gallery-thumbnails">
                        ${product.images.map((img, i) => `
                            <div class="gallery-thumb ${i === 0 ? 'active' : ''}" onclick="changeMainImage('${img}', this)">
                                <img src="${img}" alt="Thumbnail ${i + 1}">
                            </div>
                        `).join('')}
                    </div>
                </div>
                <div>
                    <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">${discount}% OFF</span>
                    <h2 class="text-2xl font-bold mt-3 mb-2">${product.name}</h2>
                    <div class="flex items-center gap-3 mb-4">
                        <span class="text-3xl font-bold text-orange-500">₹${product.salePrice.toLocaleString()}</span>
                        <span class="strike-price text-lg">₹${product.originalPrice.toLocaleString()}</span>
                    </div>
                    <p class="text-gray-600 mb-6">${product.description}</p>
                    
                    <div class="mb-6">
                        <label class="block font-semibold mb-2">Select Size:</label>
                        <div class="flex gap-3">
                            <button class="px-4 py-2 border-2 border-gray-300 rounded-lg hover:border-orange-500 transition size-btn" onclick="selectSize(this)">S</button>
                            <button class="px-4 py-2 border-2 border-orange-500 bg-orange-50 rounded-lg size-btn" onclick="selectSize(this)">M</button>
                            <button class="px-4 py-2 border-2 border-gray-300 rounded-lg hover:border-orange-500 transition size-btn" onclick="selectSize(this)">L</button>
                            <button class="px-4 py-2 border-2 border-gray-300 rounded-lg hover:border-orange-500 transition size-btn" onclick="selectSize(this)">XL</button>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block font-semibold mb-2">Quantity:</label>
                        <div class="qty-control">
                            <button class="qty-btn" onclick="changeQty(-1)">-</button>
                            <span id="productQty" class="w-12 text-center font-semibold">1</span>
                            <button class="qty-btn" onclick="changeQty(1)">+</button>
                        </div>
                    </div>
                    
                    <div class="flex gap-4">
                        <button class="btn-primary flex-1" onclick="addToCart(${product.id}); closeProductModal();">
                            <i class="fas fa-cart-plus mr-2"></i> Add to Cart
                        </button>
                        <button class="btn-secondary flex-1">
                            <i class="fas fa-bolt mr-2"></i> Buy Now
                        </button>
                    </div>
                </div>
            `;
            
            modal.classList.add('active');
        }

        function closeProductModal() {
            document.getElementById('productModal').classList.remove('active');
        }

        function changeMainImage(src, thumb) {
            document.getElementById('mainProductImage').src = src;
            document.querySelectorAll('.gallery-thumb').forEach(t => t.classList.remove('active'));
            thumb.classList.add('active');
        }

        function selectSize(btn) {
            document.querySelectorAll('.size-btn').forEach(b => {
                b.classList.remove('border-orange-500', 'bg-orange-50');
                b.classList.add('border-gray-300');
            });
            btn.classList.add('border-orange-500', 'bg-orange-50');
            btn.classList.remove('border-gray-300');
        }

        let productQty = 1;
        function changeQty(delta) {
            productQty = Math.max(1, productQty + delta);
            document.getElementById('productQty').textContent = productQty;
        }

        // Cart Functions
        function addToCart(id) {
            const product = products.find(p => p.id === id);
            if (!product) return;
            
            const existing = cart.find(item => item.id === id);
            if (existing) {
                existing.quantity++;
            } else {
                cart.push({ ...product, quantity: productQty || 1 });
            }
            
            productQty = 1; // Reset
            updateCartUI();
            showToast(`${product.name} added to cart!`, 'success');
            
            // Bounce animation on cart icon
            const cartIcon = document.querySelector('[onclick="toggleCart()"]');
            cartIcon.classList.add('animate-bounce');
            setTimeout(() => cartIcon.classList.remove('animate-bounce'), 500);
        }

        function removeFromCart(id) {
            cart = cart.filter(item => item.id !== id);
            updateCartUI();
            showToast('Item removed from cart', 'info');
        }

        function updateQuantity(id, delta) {
            const item = cart.find(i => i.id === id);
            if (item) {
                item.quantity += delta;
                if (item.quantity <= 0) {
                    removeFromCart(id);
                    return;
                }
            }
            updateCartUI();
        }

        function updateCartUI() {
            const cartItems = document.getElementById('cartItems');
            const cartCount = document.getElementById('cartCount');
            const cartSubtotal = document.getElementById('cartSubtotal');
            
            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
            const subtotal = cart.reduce((sum, item) => sum + (item.salePrice * item.quantity), 0);
            
            cartCount.textContent = totalItems;
            cartSubtotal.textContent = `₹${subtotal.toLocaleString()}`;
            
            if (cart.length === 0) {
                cartItems.innerHTML = `
                    <div class="text-center py-10">
                        <i class="fas fa-shopping-cart text-6xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">Your cart is empty</p>
                        <a href="#shop" class="btn-primary inline-block mt-4" onclick="toggleCart()">Start Shopping</a>
                    </div>
                `;
                return;
            }
            
            cartItems.innerHTML = cart.map(item => `
                <div class="flex gap-4 mb-4 pb-4 border-b">
                    <img src="${item.images[0]}" alt="${item.name}" class="w-20 h-20 object-cover rounded-lg">
                    <div class="flex-1">
                        <h4 class="font-semibold">${item.name}</h4>
                        <p class="text-orange-500 font-bold">₹${item.salePrice.toLocaleString()}</p>
                        <div class="flex items-center gap-3 mt-2">
                            <div class="qty-control text-sm">
                                <button class="qty-btn w-6 h-6 text-xs" onclick="updateQuantity(${item.id}, -1)">-</button>
                                <span class="w-8 text-center text-sm">${item.quantity}</span>
                                <button class="qty-btn w-6 h-6 text-xs" onclick="updateQuantity(${item.id}, 1)">+</button>
                            </div>
                            <button class="text-red-500 hover:text-red-700" onclick="removeFromCart(${item.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function toggleCart() {
            document.getElementById('cartSidebar').classList.toggle('active');
            document.getElementById('cartOverlay').classList.toggle('active');
        }

        function proceedToCheckout() {
            if (cart.length === 0) {
                showToast('Your cart is empty!', 'error');
                return;
            }
            toggleCart();
            
            // Populate checkout items
            const checkoutItems = document.getElementById('checkoutItems');
            const subtotal = cart.reduce((sum, item) => sum + (item.salePrice * item.quantity), 0);
            
            checkoutItems.innerHTML = cart.map(item => `
                <div class="flex justify-between py-2">
                    <span>${item.name} x${item.quantity}</span>
                    <span>₹${(item.salePrice * item.quantity).toLocaleString()}</span>
                </div>
            `).join('');
            
            document.getElementById('checkoutTotal').textContent = `₹${subtotal.toLocaleString()}`;
            
            // Auto-fill saved details
            const savedDetails = getSavedDetails();
            if (savedDetails) {
                document.getElementById('custName').value = savedDetails.name || '';
                document.getElementById('custPhone').value = savedDetails.phone || '';
                document.getElementById('custEmail').value = savedDetails.email || '';
                document.getElementById('custAddr1').value = savedDetails.address1 || '';
                document.getElementById('custAddr2').value = savedDetails.address2 || '';
                document.getElementById('custCity').value = savedDetails.city || '';
                document.getElementById('custState').value = savedDetails.state || '';
                document.getElementById('custPincode').value = savedDetails.pincode || '';
            }
            
            document.getElementById('checkoutStep1').classList.remove('hidden');
            document.getElementById('checkoutStep2').classList.add('hidden');
            document.getElementById('checkoutStep3').classList.add('hidden');
            document.getElementById('checkoutModal').classList.add('active');
        }

        function closeCheckout() {
            document.getElementById('checkoutModal').classList.remove('active');
        }

        function submitOrder(e) {
            e.preventDefault();
            
            const form = e.target;
            const name = document.getElementById('custName').value;
            const phone = document.getElementById('custPhone').value;
            const email = document.getElementById('custEmail').value;
            const addr1 = document.getElementById('custAddr1').value;
            const addr2 = document.getElementById('custAddr2').value;
            const city = document.getElementById('custCity').value;
            const state = document.getElementById('custState').value;
            const pincode = document.getElementById('custPincode').value;
            
            // Validate
            if (!name || !phone || !email || !addr1 || !city || !state || !pincode) {
                showToast('Please fill all required fields', 'error');
                return;
            }
            
            if (!/^\d{10}$/.test(phone)) {
                showToast('Please enter a valid 10-digit phone number', 'error');
                return;
            }
            
            if (!/^\d{6}$/.test(pincode)) {
                showToast('Please enter a valid 6-digit pincode', 'error');
                return;
            }
            
            // Save details
            saveDetails({ name, phone, email, address1: addr1, address2: addr2, city, state, pincode });
            
            // Build WhatsApp message
            const subtotal = cart.reduce((sum, item) => sum + (item.salePrice * item.quantity), 0);
            let message = `🛒 *New Order from ShopIndia*\n\n`;
            message += `*Customer Details:*\n`;
            message += `Name: ${name}\n`;
            message += `Phone: ${phone}\n`;
            message += `Email: ${email}\n\n`;
            message += `*Delivery Address:*\n`;
            message += `${addr1}${addr2 ? ', ' + addr2 : ''}\n`;
            message += `${city}, ${state} - ${pincode}\n\n`;
            message += `*Order Items:*\n`;
            cart.forEach(item => {
                message += `${item.name} x${item.quantity} = ₹${(item.salePrice * item.quantity).toLocaleString()}\n`;
            });
            message += `\n*Total Amount: ₹${subtotal.toLocaleString()}*\n\n`;
            message += `Please find payment details attached. Kindly confirm the order after payment verification.`;
            
            // Open WhatsApp
            const whatsappUrl = `https://wa.me/919496822222?text=${encodeURIComponent(message)}`;
            window.open(whatsappUrl, '_blank');
            
            // Show payment step
            document.getElementById('checkoutStep1').classList.add('hidden');
            document.getElementById('checkoutStep2').classList.remove('hidden');
        }

        function confirmPayment() {
            if (!document.getElementById('paymentConfirm').checked) {
                showToast('Please confirm that you have made the payment', 'error');
                return;
            }
            
            // Show success
            document.getElementById('checkoutStep2').classList.add('hidden');
            document.getElementById('checkoutStep3').classList.remove('hidden');
            
            // Clear cart
            cart = [];
            updateCartUI();
        }

        // Local Storage Functions
        function saveDetails(details) {
            localStorage.setItem('shopindia_customer', JSON.stringify(details));
            localStorage.setItem('shopindia_lastvisit', Date.now().toString());
        }

        function getSavedDetails() {
            const saved = localStorage.getItem('shopindia_customer');
            return saved ? JSON.parse(saved) : null;
        }

        function checkWelcomePopup() {
            const lastVisit = localStorage.getItem('shopindia_lastvisit');
            if (!lastVisit) {
                // First time visitor
                setTimeout(() => {
                    document.getElementById('welcomePopup').classList.add('active');
                }, 2000);
            }
        }

        function closeWelcome() {
            document.getElementById('welcomePopup').classList.remove('active');
        }

        function checkReturnVisitor() {
            const lastVisit = localStorage.getItem('shopindia_lastvisit');
            if (lastVisit) {
                const daysSinceVisit = (Date.now() - parseInt(lastVisit)) / (1000 * 60 * 60 * 24);
                if (daysSinceVisit > 10) {
                    // More than 10 days - show welcome back message
                    setTimeout(() => {
                        document.getElementById('welcomeMessage').innerHTML = `
                            Welcome back! 👋<br>
                            We miss you! It's been ${Math.floor(daysSinceVisit)} days since your last visit.<br>
                            Check out our new arrivals and exclusive offers!
                        `;
                        document.getElementById('welcomePopup').classList.add('active');
                    }, 3000);
                    // Update last visit
                    localStorage.setItem('shopindia_lastvisit', Date.now().toString());
                }
            }
        }

        function checkCookieConsent() {
            if (!localStorage.getItem('shopindia_cookies')) {
                setTimeout(() => {
                    document.getElementById('cookieConsent').style.display = 'block';
                }, 3000);
            }
        }

        function acceptCookies() {
            localStorage.setItem('shopindia_cookies', 'true');
            document.getElementById('cookieConsent').style.display = 'none';
            showToast('Great! Cookies accepted. Happy shopping! 🍪', 'success');
        }

        // WhatsApp Form
        function submitWhatsAppForm(e) {
            e.preventDefault();
            const name = document.getElementById('inquiryName').value;
            const phone = document.getElementById('inquiryPhone').value;
            const message = document.getElementById('inquiryMessage').value;
            
            const whatsappMsg = `Hi! I'm ${name}.\n\n${message}\n\nPhone: ${phone}`;
            window.open(`https://wa.me/919496822222?text=${encodeURIComponent(whatsappMsg)}`, '_blank');
            
            showToast('Opening WhatsApp...', 'success');
            e.target.reset();
        }

        // Feedback Form
        function submitFeedback(e) {
            e.preventDefault();
            const name = document.getElementById('feedbackName').value;
            const feedback = document.getElementById('feedbackText').value;
            
            if (selectedRating === 0) {
                showToast('Please select a rating', 'error');
                return;
            }
            
            const whatsappMsg = `⭐ *New Feedback*\n\nName: ${name}\nRating: ${'⭐'.repeat(selectedRating)}\n\n${feedback}`;
            window.open(`https://wa.me/919496822222?text=${encodeURIComponent(whatsappMsg)}`, '_blank');
            
            showToast('Thank you for your feedback!', 'success');
            e.target.reset();
            resetRating();
        }

        // Rating Stars
        document.querySelectorAll('#ratingStars i').forEach(star => {
            star.addEventListener('click', function() {
                selectedRating = parseInt(this.dataset.rating);
                updateRatingStars();
            });
            
            star.addEventListener('mouseenter', function() {
                const rating = parseInt(this.dataset.rating);
                highlightStars(rating);
            });
        });

        document.getElementById('ratingStars').addEventListener('mouseleave', () => {
            updateRatingStars();
        });

        function highlightStars(rating) {
            document.querySelectorAll('#ratingStars i').forEach((star, index) => {
                star.style.color = index < rating ? '#FFD700' : '#d1d5db';
            });
        }

        function updateRatingStars() {
            highlightStars(selectedRating);
        }

        function resetRating() {
            selectedRating = 0;
            document.querySelectorAll('#ratingStars i').forEach(star => {
                star.style.color = '#d1d5db';
            });
        }

        // Carousel
        function initCarousel() {
            slideInterval = setInterval(() => changeSlide(1), 4000);
        }

        function changeSlide(delta) {
            const slides = document.querySelectorAll('.hero-slide');
            const dots = document.querySelectorAll('.carousel-dot');
            
            currentSlide = (currentSlide + delta + slides.length) % slides.length;
            
            slides.forEach((slide, i) => {
                slide.classList.toggle('active', i === currentSlide);
            });
            
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === currentSlide);
                dot.classList.toggle('bg-white', i === currentSlide);
                dot.classList.toggle('bg-white/50', i !== currentSlide);
            });
        }

        function goToSlide(index) {
            clearInterval(slideInterval);
            currentSlide = index;
            changeSlide(0);
            slideInterval = setInterval(() => changeSlide(1), 4000);
        }

        // Auto scroll ad banners
        function autoScrollAdBanners() {
            const container = document.getElementById('adBanners');
            let scrollPos = 0;
            
            setInterval(() => {
                scrollPos += 315; // card width + gap
                if (scrollPos >= container.scrollWidth) {
                    scrollPos = 0;
                }
                container.scrollTo({ left: scrollPos, behavior: 'smooth' });
            }, 4000);
        }

        // Scroll Animations
        function initScrollAnimations() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                    }
                });
            }, { threshold: 0.1 });
            
            document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
        }

        // Header Scroll Effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            const backToTop = document.getElementById('backToTop');
            
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
                backToTop.classList.add('visible');
            } else {
                header.classList.remove('scrolled');
                backToTop.classList.remove('visible');
            }
        });

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function toggleMobileMenu() {
            const menu = document.getElementById('mobileMenu');
            menu.classList.toggle('hidden');
            menu.classList.toggle('flex');
        }

        // Toast Notifications
        function showToast(message, type = 'info') {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            
            const icons = { success: 'fa-check-circle', error: 'fa-exclamation-circle', info: 'fa-info-circle' };
            toast.innerHTML = `
                <i class="fas ${icons[type]}"></i>
                <span>${message}</span>
            `;
            
            container.appendChild(toast);
            
            setTimeout(() => {
                toast.classList.add('removing');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        // Payment confirmation checkbox
        document.getElementById('paymentConfirm').addEventListener('change', function() {
            document.getElementById('confirmPayBtn').disabled = !this.checked;
        });
    </script>
</body>
</html>