<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopEasy - Premium Products for Modern Living</title>
    <meta name="description"
        content="Discover premium products for modern living. Shop electronics, lifestyle, clothing and more with fast shipping and great prices.">

    <script src="https://cdn.eu.amplitude.com/script/4d3b8717d7d819854e0582910d0f9ef5.experiment.js"></script>
    <!-- Contentsquare Analytics -->
    <script src="https://t.contentsquare.net/uxa/35e356b4187d9.js"></script>
    <script src="https://t.contentsquare.net/experiment/35e356b4187d9.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/components.css">

    <script src="https://cdn.amplitude.com/script/db3683c4bc2e13a84e0dd873d6a6aad0.js"></script>
    <script>window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 })); window.amplitude.init('db3683c4bc2e13a84e0dd873d6a6aad0', { "fetchRemoteConfig": true, "autocapture": { "attribution": true, "fileDownloads": true, "formInteractions": true, "pageViews": true, "sessions": true, "elementInteractions": true, "networkTracking": true, "webVitals": true, "frustrationInteractions": { "errorClicks": true, "deadClicks": true, "rageClicks": true } } });</script>
    <!-- GrowthBook A/B Testing -->
    <script async data-api-host="https://cdn.growthbook.io" data-client-key="sdk-DJijiIPPodqoB892"
        src="https://cdn.jsdelivr.net/npm/@growthbook/growthbook/dist/bundles/auto.min.js"></script>

    <!-- Favicon -->
    <link rel="icon"
        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛍️</text></svg>">
</head>

<body>
    <!-- Navigation Header -->
    <header class="header">
        <div class="container">
            <nav class="nav">
                <a href="index.html" class="nav__logo">
                    <span class="nav__logo-icon">🛍️</span>
                    ShopEasy
                </a>

                <ul class="nav__links">
                    <li><a href="index.html" class="nav__link nav__link--active">Home</a></li>
                    <li><a href="#products" class="nav__link">Products</a></li>
                    <li><a href="#about" class="nav__link">About</a></li>
                    <li><a href="#contact" class="nav__link">Contact</a></li>
                </ul>

                <div class="nav__actions">
                    <button class="btn btn--icon" id="search-btn" aria-label="Search">
                        🔍
                    </button>
                    <a href="cart.html" class="btn btn--icon cart-link" aria-label="Shopping cart">
                        🛒
                        <span class="cart-count" id="cart-count">0</span>
                    </a>
                </div>

                <!-- Mobile menu toggle -->
                <button class="nav__toggle" id="nav-toggle" aria-label="Toggle menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero__content">
                <div class="hero__text">
                    <h1 class="hero__title">
                        Premium Products for
                        <span class="hero__title-highlight">Modern Living</span>
                    </h1>
                    <p class="hero__description">
                        Discover curated collections of high-quality products designed to enhance your lifestyle. From
                        cutting-edge electronics to sustainable essentials.
                    </p>
                    <div class="hero__actions">
                        <a href="#products" class="btn btn--primary btn--large">
                            Shop Now
                        </a>
                        <a href="#featured" class="btn btn--secondary btn--large">
                            View Collections
                        </a>
                    </div>
                </div>
                <div class="hero__image">
                    <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80"
                        alt="Premium shopping experience" class="hero__img">
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features">
        <div class="container">
            <div class="features__grid">
                <div class="feature">
                    <div class="feature__icon">🚚</div>
                    <h3 class="feature__title">Free Shipping</h3>
                    <p class="feature__description">Free delivery on orders over $50</p>
                </div>
                <div class="feature">
                    <div class="feature__icon">🔒</div>
                    <h3 class="feature__title">Secure Payment</h3>
                    <p class="feature__description">Your transactions are safe and secure</p>
                </div>
                <div class="feature">
                    <div class="feature__icon">↩️</div>
                    <h3 class="feature__title">Easy Returns</h3>
                    <p class="feature__description">30-day hassle-free returns</p>
                </div>
                <div class="feature">
                    <div class="feature__icon">⭐</div>
                    <h3 class="feature__title">Quality Guaranteed</h3>
                    <p class="feature__description">Premium quality products only</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Products Section -->
    <section class="featured-products" id="featured">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Featured Products</h2>
                <p class="section-subtitle">Handpicked favorites from our collection</p>
            </div>

            <div class="products-grid" id="featured-products-grid">
                <!-- Products will be loaded dynamically -->
            </div>
        </div>
    </section>

    <!-- All Products Section -->
    <section class="all-products" id="products">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">All Products</h2>
                <p class="section-subtitle">Explore our complete collection</p>
            </div>

            <!-- Category Filter -->
            <div class="filters">
                <div class="filters__group">
                    <label class="filters__label">Category:</label>
                    <select class="filters__select" id="category-filter">
                        <option value="">All Categories</option>
                    </select>
                </div>
                <div class="filters__group">
                    <label class="filters__label">Sort by:</label>
                    <select class="filters__select" id="sort-filter">
                        <option value="name">Name</option>
                        <option value="price-low">Price: Low to High</option>
                        <option value="price-high">Price: High to Low</option>
                        <option value="rating">Highest Rated</option>
                    </select>
                </div>
            </div>

            <div class="products-grid" id="products-grid">
                <!-- Products will be loaded dynamically -->
            </div>

            <div class="load-more">
                <button class="btn btn--secondary" id="load-more-btn">Load More Products</button>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section class="newsletter">
        <div class="container">
            <div class="newsletter__content">
                <h2 class="newsletter__title">Stay Updated</h2>
                <p class="newsletter__description">Get the latest products and exclusive offers delivered to your inbox
                </p>
                <form class="newsletter__form" id="newsletter-form">
                    <input type="email" class="newsletter__input" placeholder="Enter your email" required>
                    <button type="submit" class="btn btn--primary">Subscribe</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer__content">
                <div class="footer__section">
                    <h3 class="footer__title">ShopEasy</h3>
                    <p class="footer__description">Premium products for modern living</p>
                    <div class="footer__social">
                        <a href="#" class="footer__social-link">📘</a>
                        <a href="#" class="footer__social-link">📷</a>
                        <a href="#" class="footer__social-link">🐦</a>
                    </div>
                </div>

                <div class="footer__section">
                    <h4 class="footer__subtitle">Quick Links</h4>
                    <ul class="footer__links">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#products">Products</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>

                <div class="footer__section">
                    <h4 class="footer__subtitle">Customer Service</h4>
                    <ul class="footer__links">
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Shipping Info</a></li>
                        <li><a href="#">Returns</a></li>
                        <li><a href="#">Size Guide</a></li>
                    </ul>
                </div>

                <div class="footer__section">
                    <h4 class="footer__subtitle">Legal</h4>
                    <ul class="footer__links">
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Service</a></li>
                        <li><a href="#">Cookie Policy</a></li>
                    </ul>
                </div>
            </div>

            <div class="footer__bottom">
                <p class="footer__copyright">© 2024 ShopEasy. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/ab-integration.js"></script>
    <script src="js/promo-banner.js"></script>
</body>

</html>