<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Celestial - Faith Inspired Fashion</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-dark: #1a1a1a;
            --secondary-dark: #2a2a2a;
            --accent-gold: #d4af37;
            --text-light: #ffffff;
            --text-gray: #b0b0b0;
            --background: #0f0f0f;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: var(--background);
            color: var(--text-light);
            overflow-x: hidden;
        }

        /* Animated Background */
        .background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            z-index: -1;
            animation: backgroundMove 20s ease-in-out infinite;
        }

        @keyframes backgroundMove {
            0%, 100% { transform: translateX(0) translateY(0); }
            33% { transform: translateX(-20px) translateY(-10px); }
            66% { transform: translateX(20px) translateY(10px); }
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1rem 5%;
            background: rgba(15, 15, 15, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--accent-gold);
            text-decoration: none;
            position: relative;
        }

        .logo::after {
            content: '✟';
            position: absolute;
            top: -5px;
            right: -20px;
            font-size: 1.2rem;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 5px var(--accent-gold); }
            to { text-shadow: 0 0 20px var(--accent-gold), 0 0 30px var(--accent-gold); }
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-links a:hover {
            color: var(--accent-gold);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-gold);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .btn {
            padding: 0.8rem 1.5rem;
            background: var(--accent-gold);
            color: var(--primary-dark);
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn:hover {
            background: var(--text-light);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
        }

        .cart-icon {
            position: relative;
            color: var(--text-light);
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .cart-icon:hover {
            color: var(--accent-gold);
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent-gold);
            color: var(--primary-dark);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: bold;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            background: linear-gradient(135deg, rgba(15, 15, 15, 0.8), rgba(42, 42, 42, 0.8));
        }

        .hero-content {
            max-width: 800px;
            animation: fadeInUp 1s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, var(--accent-gold), var(--text-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        @keyframes titleGlow {
            from { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)); }
            to { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8)); }
        }

        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            color: var(--text-gray);
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Products Section */
        .products {
            padding: 5rem 5%;
            background: var(--primary-dark);
        }

        .section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 3rem;
            color: var(--accent-gold);
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: var(--accent-gold);
            border-radius: 2px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .product-card {
            background: var(--secondary-dark);
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        }

        .product-image {
            width: 100%;
            height: 300px;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        .product-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .product-card:hover .product-overlay {
            opacity: 1;
        }

        .product-info {
            padding: 1.5rem;
        }

        .product-name {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: var(--text-light);
        }

        .product-price {
            font-size: 1.1rem;
            color: var(--accent-gold);
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .add-to-cart {
            width: 100%;
            padding: 0.8rem;
            background: var(--accent-gold);
            color: var(--primary-dark);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .add-to-cart:hover {
            background: var(--text-light);
            transform: translateY(-2px);
        }

        /* About Section */
        .about {
            padding: 5rem 5%;
            background: var(--background);
            text-align: center;
        }

        .about-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .about p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-gray);
            margin-bottom: 1.5rem;
        }

        /* Footer */
        footer {
            background: var(--primary-dark);
            padding: 3rem 5% 1rem;
            border-top: 1px solid var(--secondary-dark);
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h3 {
            color: var(--accent-gold);
            margin-bottom: 1rem;
        }

        .footer-section a {
            color: var(--text-gray);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-section a:hover {
            color: var(--accent-gold);
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-icons a {
            width: 40px;
            height: 40px;
            background: var(--secondary-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .social-icons a:hover {
            background: var(--accent-gold);
            color: var(--primary-dark);
            transform: translateY(-3px);
        }

        /* Admin Panel */
        .admin-panel {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            padding: 2rem;
        }

        .admin-content {
            background: var(--secondary-dark);
            border-radius: 15px;
            padding: 2rem;
            max-width: 800px;
            margin: 2rem auto;
            max-height: 90vh;
            overflow-y: auto;
        }

        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .close-admin {
            background: none;
            border: none;
            color: var(--text-light);
            font-size: 2rem;
            cursor: pointer;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--accent-gold);
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 0.8rem;
            background: var(--primary-dark);
            border: 1px solid var(--accent-gold);
            border-radius: 8px;
            color: var(--text-light);
        }

        /* Cart Sidebar */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100%;
            background: var(--secondary-dark);
            z-index: 1500;
            transition: right 0.3s ease;
            padding: 2rem;
            overflow-y: auto;
        }

        .cart-sidebar.open {
            right: 0;
        }

        .cart-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1400;
            display: none;
        }

        .cart-overlay.open {
            display: block;
        }

        .cart-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--primary-dark);
        }

        .cart-item img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero p {
                font-size: 1.1rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .product-grid {
                grid-template-columns: 1fr;
            }

            .cart-sidebar {
                width: 100%;
                right: -100%;
            }
        }

        /* Loading Animation */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid var(--secondary-dark);
            border-top: 5px solid var(--accent-gold);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Notification Toast */
        .toast {
            position: fixed;
            top: 100px;
            right: -300px;
            background: var(--accent-gold);
            color: var(--primary-dark);
            padding: 1rem 2rem;
            border-radius: 8px;
            transition: right 0.3s ease;
            z-index: 1600;
            font-weight: bold;
        }

        .toast.show {
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="background-animation"></div>

    <!-- Header -->
    <header>
        <nav>
            <a href="#" class="logo">celestial</a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#products">Shop</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <div class="nav-actions">
                <div class="cart-icon" onclick="toggleCart()">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-count">0</span>
                </div>
                <button class="btn" onclick="toggleAdmin()">Admin</button>
            </div>
        </nav>
    </header>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>CELESTIAL</h1>
            <p>Faith Inspired Fashion for the Modern Believer</p>
            <div class="cta-buttons">
                <a href="#products" class="btn">Shop Collection</a>
                <a href="#about" class="btn" style="background: transparent; border: 2px solid var(--accent-gold); color: var(--accent-gold);">Our Story</a>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="products">
        <h2 class="section-title">Featured Collection</h2>
        <div class="product-grid" id="productGrid">
            <!-- Products will be dynamically loaded here -->
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
        <div class="about-content">
            <h2 class="section-title">Our Mission</h2>
            <p>At Celestial, we believe fashion is more than just clothing—it's a statement of faith, hope, and purpose. Our designs blend contemporary streetwear aesthetics with timeless Christian values, creating pieces that speak to the modern believer's heart.</p>
            <p>Every garment tells a story of redemption, every design carries a message of hope, and every piece is crafted with love for those who dare to wear their faith boldly.</p>
            <p>Join our community of faith-inspired individuals who choose to make a statement through their style, spreading light wherever they go.</p>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>Quick Links</h3>
                <p><a href="#home">Home</a></p>
                <p><a href="#products">Shop</a></p>
                <p><a href="#about">About Us</a></p>
                <p><a href="#contact">Contact</a></p>
            </div>
            <div class="footer-section">
                <h3>Customer Service</h3>
                <p><a href="#">Size Guide</a></p>
                <p><a href="#">Shipping Info</a></p>
                <p><a href="#">Returns</a></p>
                <p><a href="#">FAQ</a></p>
            </div>
            <div class="footer-section">
                <h3>Connect</h3>
                <p>Follow us for daily inspiration</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>Newsletter</h3>
                <p>Subscribe for exclusive drops and faith-based content</p>
                <input type="email" placeholder="Your email" style="width: 100%; padding: 0.5rem; margin-top: 1rem; border-radius: 5px; border: none;">
                <button class="btn" style="margin-top: 1rem; width: 100%;">Subscribe</button>
            </div>
        </div>
        <div style="text-align: center; padding-top: 2rem; border-top: 1px solid var(--secondary-dark); color: var(--text-gray);">
            <p>&copy; 2025 Celestial. All rights reserved. | Designed with ♥ for the faithful</p>
        </div>
    </footer>

    <!-- Admin Panel -->
    <div class="admin-panel" id="adminPanel">
        <div class="admin-content">
            <div class="admin-header">
                <h2 style="color: var(--accent-gold);">Admin Dashboard</h2>
                <button class="close-admin" onclick="toggleAdmin()">&times;</button>
            </div>
            
            <div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
                <button class="btn" onclick="showAddProduct()">Add Product</button>
                <button class="btn" onclick="showProductList()">Manage Products</button>
                <button class="btn" onclick="showOrders()">Orders</button>
                <button class="btn" onclick="showAnalytics()">Analytics</button>
            </div>

            <div id="adminContent">
                <!-- Admin content will be loaded here -->
            </div>
        </div>
    </div>

    <!-- Cart Sidebar -->
    <div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div>
    <div class="cart-sidebar" id="cartSidebar">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h3 style="color: var(--accent-gold);">Shopping Cart</h3>
            <button onclick="toggleCart()" style="background: none; border: none; color: var(--text-light); font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <div id="cartItems">
            <!-- Cart items will be loaded here -->
        </div>
        <div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--primary-dark);">
            <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                <strong>Total: $<span id="cartTotal">0.00</span></strong>
            </div>
            <button class="btn" style="width: 100%;" onclick="checkout()">Checkout</button>
        </div>
    </div>

    <!-- Toast Notification -->
    <div class="toast" id="toast"></div>

    <script>
        // Global variables
        let products = [
            {
                id: 1,
                name: "Celestial Basic Tee",
                price: 29.99,
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNmZmYiLz4KPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNiIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkNlbGVzdGlhbCBUZWU8L3RleHQ+Cjwvc3ZnPg==",
                category: "t-shirts",
                description: "Classic white tee with subtle celestial branding"
            },
            {
                id: 2,
                name: "Hope & Future Tee",
                price: 34.99,
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMzMzMiLz4KPHRleHQgeD0iNTAlIiB5PSI0NSUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkhvcGUgJmFtcDs8L3RleHQ+Cjx0ZXh0IHg9IjUwJSIgeT0iNTUlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiNkNGFmMzciIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5GdXR1cmU8L3RleHQ+Cjwvc3ZnPg==",
                category: "t-shirts",
                description: "Inspirational design with Jeremiah 29:11 theme"
            },
            {
                id: 3,
                name: "Celestial Shorts",
                price: 39.99,
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxYTFhMWEiLz4KPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iI2Q0YWYzNyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkNlbGVzdGlhbCBTaG9ydHM8L3RleHQ+Cjwvc3ZnPg==",
                category: "shorts",
                description: "Comfortable black shorts with phone pocket"
            }
        ];

        let cart = [];
        let orders = [];

        // Initialize website
        document.addEventListener('DOMContentLoaded', function() {
            loadProducts();
            updateCartCount();
        });

        // Product management
        function loadProducts() {
            const grid = document.getElementById('productGrid');
            grid.innerHTML = '';

            if (products.length === 0) {
                grid.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
                return;
            }

            products.forEach(product => {
                const productCard = createProductCard(product);
                grid.appendChild(productCard);
            });
        }

        function createProductCard(product) {
            const card = document.createElement('div');
            card.className = 'product-card';
            card.innerHTML = `
                <div class="product-image" style="background-image: url('${product.image}')">
                    <div class="product-overlay">
                        <button class="btn" onclick="quickView(${product.id})">Quick View</button>
                    </div>
                </div>
                <div class="product-info">
                    <h3 class="product-name">${product.name}</h3>
                    <p class="product-price">$${product.price.toFixed(2)}</p>
                    <p style="color: var(--text-gray); margin-bottom: 1rem;">${product.description}</p>
                    <button class="add-to-cart" onclick="addToCart(${product.id})">Add to Cart</button>
                </div>
            `;
            return card;
        }

        function addToCart(productId) {
            const product = products.find(p => p.id === productId);
            if (product) {
                const existingItem = cart.find(item => item.id === productId);
                if (existingItem) {
                    existingItem.quantity += 1;
                } else {
                    cart.push({ ...product, quantity: 1 });
                }
                updateCartCount();
                updateCartSidebar();
                showToast(`${product.name} added to cart!`);
            }
        }

        function removeFromCart(productId) {
            cart = cart.filter(item => item.id !== productId);
            updateCartCount();
            updateCartSidebar();
        }

        function updateCartCount() {
            const count = cart.reduce((total, item) => total + item.quantity, 0);
            document.querySelector('.cart-count').textContent = count;
        }

        function updateCartSidebar() {
            const cartItems = document.getElementById('cartItems');
            const cartTotal = document.getElementById('cartTotal');
            
            if (cart.length === 0) {
                cartItems.innerHTML = '<p style="text-align: center; color: var(--text-gray);">Your cart is empty</p>';
                cartTotal.textContent = '0.00';
                return;
            }

            cartItems.innerHTML = '';
            let total = 0;

            cart.forEach(item => {
                total += item.price * item.quantity;
                const cartItem = document.createElement('div');
                cartItem.className = 'cart-item';
                cartItem.innerHTML = `
                    <img src="${item.image}" alt="${item.name}">
                    <div style="flex: 1;">
                        <h4 style="margin-bottom: 0.5rem;">${item.name}</h4>
                        <p style="color: var(--accent-gold);">${item.price.toFixed(2)}</p>
                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
                            <button onclick="updateQuantity(${item.id}, ${item.quantity - 1})" style="background: var(--primary-dark); border: 1px solid var(--accent-gold); color: var(--text-light); width: 30px; height: 30px; border-radius: 50%; cursor: pointer;">-</button>
                            <span>${item.quantity}</span>
                            <button onclick="updateQuantity(${item.id}, ${item.quantity + 1})" style="background: var(--primary-dark); border: 1px solid var(--accent-gold); color: var(--text-light); width: 30px; height: 30px; border-radius: 50%; cursor: pointer;">+</button>
                        </div>
                    </div>
                    <button onclick="removeFromCart(${item.id})" style="background: none; border: none; color: var(--text-gray); cursor: pointer; font-size: 1.2rem;">&times;</button>
                `;
                cartItems.appendChild(cartItem);
            });

            cartTotal.textContent = total.toFixed(2);
        }

        function updateQuantity(productId, newQuantity) {
            if (newQuantity <= 0) {
                removeFromCart(productId);
                return;
            }

            const item = cart.find(item => item.id === productId);
            if (item) {
                item.quantity = newQuantity;
                updateCartCount();
                updateCartSidebar();
            }
        }

        function quickView(productId) {
            const product = products.find(p => p.id === productId);
            if (product) {
                showToast(`Quick view: ${product.name}`);
                // Here you would typically open a modal with product details
            }
        }

        function checkout() {
            if (cart.length === 0) {
                showToast('Your cart is empty!');
                return;
            }

            const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
            const order = {
                id: Date.now(),
                items: [...cart],
                total: total,
                date: new Date().toISOString(),
                status: 'pending'
            };

            orders.push(order);
            cart = [];
            updateCartCount();
            updateCartSidebar();
            toggleCart();
            showToast('Order placed successfully!');
        }

        // Cart functionality
        function toggleCart() {
            const sidebar = document.getElementById('cartSidebar');
            const overlay = document.getElementById('cartOverlay');
            
            sidebar.classList.toggle('open');
            overlay.classList.toggle('open');
            
            if (sidebar.classList.contains('open')) {
                updateCartSidebar();
            }
        }

        // Admin functionality
        function toggleAdmin() {
            const panel = document.getElementById('adminPanel');
            panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
            if (panel.style.display === 'block') {
                showProductList();
            }
        }

        function showAddProduct() {
            const content = document.getElementById('adminContent');
            content.innerHTML = `
                <h3 style="color: var(--accent-gold); margin-bottom: 1.5rem;">Add New Product</h3>
                <form onsubmit="addProduct(event)">
                    <div class="form-group">
                        <label>Product Name</label>
                        <input type="text" id="productName" required>
                    </div>
                    <div class="form-group">
                        <label>Price ($)</label>
                        <input type="number" id="productPrice" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label>Category</label>
                        <select id="productCategory" required>
                            <option value="t-shirts">T-Shirts</option>
                            <option value="shorts">Shorts</option>
                            <option value="hoodies">Hoodies</option>
                            <option value="accessories">Accessories</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea id="productDescription" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label>Image URL</label>
                        <input type="url" id="productImage" required>
                    </div>
                    <button type="submit" class="btn">Add Product</button>
                </form>
            `;
        }

        function addProduct(event) {
            event.preventDefault();
            
            const newProduct = {
                id: Date.now(),
                name: document.getElementById('productName').value,
                price: parseFloat(document.getElementById('productPrice').value),
                category: document.getElementById('productCategory').value,
                description: document.getElementById('productDescription').value,
                image: document.getElementById('productImage').value
            };

            products.push(newProduct);
            loadProducts();
            showToast('Product added successfully!');
            showProductList();
        }

        function showProductList() {
            const content = document.getElementById('adminContent');
            let productRows = products.map(product => `
                <tr style="border-bottom: 1px solid var(--primary-dark);">
                    <td style="padding: 1rem 0;">${product.name}</td>
                    <td style="padding: 1rem 0;">${product.price.toFixed(2)}</td>
                    <td style="padding: 1rem 0;">${product.category}</td>
                    <td style="padding: 1rem 0;">
                        <button onclick="editProduct(${product.id})" class="btn" style="margin-right: 0.5rem; padding: 0.5rem 1rem;">Edit</button>
                        <button onclick="deleteProduct(${product.id})" class="btn" style="background: #ff4444; padding: 0.5rem 1rem;">Delete</button>
                    </td>
                </tr>
            `).join('');

            content.innerHTML = `
                <h3 style="color: var(--accent-gold); margin-bottom: 1.5rem;">Product Management</h3>
                <table style="width: 100%; color: var(--text-light);">
                    <thead>
                        <tr style="border-bottom: 2px solid var(--accent-gold);">
                            <th style="padding: 1rem 0; text-align: left;">Name</th>
                            <th style="padding: 1rem 0; text-align: left;">Price</th>
                            <th style="padding: 1rem 0; text-align: left;">Category</th>
                            <th style="padding: 1rem 0; text-align: left;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${productRows}
                    </tbody>
                </table>
            `;
        }

        function deleteProduct(productId) {
            if (confirm('Are you sure you want to delete this product?')) {
                products = products.filter(p => p.id !== productId);
                loadProducts();
                showProductList();
                showToast('Product deleted successfully!');
            }
        }

        function editProduct(productId) {
            const product = products.find(p => p.id === productId);
            if (!product) return;

            const content = document.getElementById('adminContent');
            content.innerHTML = `
                <h3 style="color: var(--accent-gold); margin-bottom: 1.5rem;">Edit Product</h3>
                <form onsubmit="updateProduct(event, ${productId})">
                    <div class="form-group">
                        <label>Product Name</label>
                        <input type="text" id="editProductName" value="${product.name}" required>
                    </div>
                    <div class="form-group">
                        <label>Price ($)</label>
                        <input type="number" id="editProductPrice" value="${product.price}" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label>Category</label>
                        <select id="editProductCategory" required>
                            <option value="t-shirts" ${product.category === 't-shirts' ? 'selected' : ''}>T-Shirts</option>
                            <option value="shorts" ${product.category === 'shorts' ? 'selected' : ''}>Shorts</option>
                            <option value="hoodies" ${product.category === 'hoodies' ? 'selected' : ''}>Hoodies</option>
                            <option value="accessories" ${product.category === 'accessories' ? 'selected' : ''}>Accessories</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea id="editProductDescription" rows="3" required>${product.description}</textarea>
                    </div>
                    <div class="form-group">
                        <label>Image URL</label>
                        <input type="url" id="editProductImage" value="${product.image}" required>
                    </div>
                    <div style="display: flex; gap: 1rem;">
                        <button type="submit" class="btn">Update Product</button>
                        <button type="button" class="btn" onclick="showProductList()" style="background: var(--text-gray);">Cancel</button>
                    </div>
                </form>
            `;
        }

        function updateProduct(event, productId) {
            event.preventDefault();
            
            const productIndex = products.findIndex(p => p.id === productId);
            if (productIndex === -1) return;

            products[productIndex] = {
                ...products[productIndex],
                name: document.getElementById('editProductName').value,
                price: parseFloat(document.getElementById('editProductPrice').value),
                category: document.getElementById('editProductCategory').value,
                description: document.getElementById('editProductDescription').value,
                image: document.getElementById('editProductImage').value
            };

            loadProducts();
            showToast('Product updated successfully!');
            showProductList();
        }

        function showOrders() {
            const content = document.getElementById('adminContent');
            
            if (orders.length === 0) {
                content.innerHTML = `
                    <h3 style="color: var(--accent-gold); margin-bottom: 1.5rem;">Orders</h3>
                    <p style="text-align: center; color: var(--text-gray);">No orders yet.</p>
                `;
                return;
            }

            let orderRows = orders.map(order => `
                <tr style="border-bottom: 1px solid var(--primary-dark);">
                    <td style="padding: 1rem 0;">#${order.id}</td>
                    <td style="padding: 1rem 0;">${new Date(order.date).toLocaleDateString()}</td>
                    <td style="padding: 1rem 0;">${order.items.length} items</td>
                    <td style="padding: 1rem 0;">${order.total.toFixed(2)}</td>
                    <td style="padding: 1rem 0;">
                        <span style="background: var(--accent-gold); color: var(--primary-dark); padding: 0.2rem 0.5rem; border-radius: 15px; font-size: 0.8rem;">
                            ${order.status}
                        </span>
                    </td>
                    <td style="padding: 1rem 0;">
                        <button onclick="viewOrder(${order.id})" class="btn" style="padding: 0.5rem 1rem;">View</button>
                    </td>
                </tr>
            `).join('');

            content.innerHTML = `
                <h3 style="color: var(--accent-gold); margin-bottom: 1.5rem;">Orders Management</h3>
                <table style="width: 100%; color: var(--text-light);">
                    <thead>
                        <tr style="border-bottom: 2px solid var(--accent-gold);">
                            <th style="padding: 1rem 0; text-align: left;">Order ID</th>
                            <th style="padding: 1rem 0; text-align: left;">Date</th>
                            <th style="padding: 1rem 0; text-align: left;">Items</th>
                            <th style="padding: 1rem 0; text-align: left;">Total</th>
                            <th style="padding: 1rem 0; text-align: left;">Status</th>
                            <th style="padding: 1rem 0; text-align: left;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${orderRows}
                    </tbody>
                </table>
            `;
        }

        function viewOrder(orderId) {
            const order = orders.find(o => o.id === orderId);
            if (!order) return;

            const content = document.getElementById('adminContent');
            let orderItems = order.items.map(item => `
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--primary-dark);">
                    <div>
                        <h4>${item.name}</h4>
                        <p style="color: var(--text-gray);">Quantity: ${item.quantity}</p>
                    </div>
                    <p style="color: var(--accent-gold);">${(item.price * item.quantity).toFixed(2)}</p>
                </div>
            `).join('');

            content.innerHTML = `
                <h3 style="color: var(--accent-gold); margin-bottom: 1.5rem;">Order Details - #${order.id}</h3>
                <div style="background: var(--primary-dark); padding: 1.5rem; border-radius: 10px; margin-bottom: 1.5rem;">
                    <p><strong>Date:</strong> ${new Date(order.date).toLocaleDateString()}</p>
                    <p><strong>Status:</strong> ${order.status}</p>
                    <p><strong>Total:</strong> ${order.total.toFixed(2)}</p>
                </div>
                <h4 style="margin-bottom: 1rem;">Items:</h4>
                <div>
                    ${orderItems}
                </div>
                <button class="btn" onclick="showOrders()" style="margin-top: 1.5rem;">Back to Orders</button>
            `;
        }

        function showAnalytics() {
            const content = document.getElementById('adminContent');
            const totalProducts = products.length;
            const totalOrders = orders.length;
            const totalRevenue = orders.reduce((sum, order) => sum + order.total, 0);
            const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;

            content.innerHTML = `
                <h3 style="color: var(--accent-gold); margin-bottom: 1.5rem;">Analytics Dashboard</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
                    <div style="background: var(--primary-dark); padding: 1.5rem; border-radius: 10px; text-align: center;">
                        <h2 style="color: var(--accent-gold); margin-bottom: 0.5rem;">${totalProducts}</h2>
                        <p>Total Products</p>
                    </div>
                    <div style="background: var(--primary-dark); padding: 1.5rem; border-radius: 10px; text-align: center;">
                        <h2 style="color: var(--accent-gold); margin-bottom: 0.5rem;">${totalOrders}</h2>
                        <p>Total Orders</p>
                    </div>
                    <div style="background: var(--primary-dark); padding: 1.5rem; border-radius: 10px; text-align: center;">
                        <h2 style="color: var(--accent-gold); margin-bottom: 0.5rem;">${totalRevenue.toFixed(2)}</h2>
                        <p>Total Revenue</p>
                    </div>
                    <div style="background: var(--primary-dark); padding: 1.5rem; border-radius: 10px; text-align: center;">
                        <h2 style="color: var(--accent-gold); margin-bottom: 0.5rem;">${averageOrderValue.toFixed(2)}</h2>
                        <p>Avg Order Value</p>
                    </div>
                </div>
                <div style="background: var(--primary-dark); padding: 1.5rem; border-radius: 10px;">
                    <h4 style="margin-bottom: 1rem;">Recent Activity</h4>
                    <p style="color: var(--text-gray);">
                        ${orders.length > 0 ? `Last order: ${new Date(orders[orders.length - 1].date).toLocaleDateString()}` : 'No recent orders'}
                    </p>
                    <p style="color: var(--text-gray);">
                        Products in catalog: ${totalProducts}
                    </p>
                </div>
            `;
        }

        // Utility functions
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        // Smooth scrolling for navigation 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'
                    });
                }
            });
        });

        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 100) {
                header.style.background = 'rgba(15, 15, 15, 0.98)';
            } else {
                header.style.background = 'rgba(15, 15, 15, 0.95)';
            }
        });

        // Close admin panel when clicking outside
        document.getElementById('adminPanel').addEventListener('click', (e) => {
            if (e.target.id === 'adminPanel') {
                toggleAdmin();
            }
        });

        // Newsletter subscription
        document.querySelector('input[type="email"]').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                showToast('Thank you for subscribing!');
                e.target.value = '';
            }
        });

        // Initialize intersection observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // Observe elements for animation
        document.querySelectorAll('.product-card, .section-title').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(el);
        });
    </script>
</body>
</html>