<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Discover Your Glow • Lady J's Beauty Retreat</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Great+Vibes&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <!-- CUSTOM PINK & BLACK SCROLLBAR + PINK NAIL POLISH BOTTLE CURSOR -->
  <style>
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: #000000; border-radius: 9999px; }
    ::-webkit-scrollbar-thumb { background: #ec4899; border-radius: 9999px; border: 3px solid #000000; }
    ::-webkit-scrollbar-thumb:hover { background: #db2777; }
    html, body { scrollbar-width: thin; scrollbar-color: #ec4899 #000000; }
    * { cursor: url('https://img.icons8.com/color/48/nail-polish.png') 24 12, auto !important; }
    .product-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .product-card:hover { transform: translateY(-12px) scale(1.05); box-shadow: 0 30px 60px -15px rgb(236 72 153); }
    .neon-text { text-shadow: 0 0 20px #ec4899, 0 0 40px #ec4899; }
    
    /* BLACK TEXT IN SIZE/LENGTH/COLOR DROPDOWN OPTIONS WHEN CLICKED/OPENED */
    select option {
      color: black;
      background: white;
    }
  </style>
</head>
<body class="bg-black text-white overflow-x-hidden">

  <!-- NAVIGATION - MORE SHEER (bg-black/10) so background image shows through -->
  <nav class="fixed top-0 w-full z-50 bg-black/10 backdrop-blur-2xl border-b border-white/10">
    <div class="max-w-screen-2xl mx-auto px-10 py-6 flex justify-between items-center">
      <div class="text-4xl font-great-vibes text-pink-200">Lady J’s</div>
      
      <div class="hidden md:flex gap-10 text-lg font-medium">
        <a href="index.html" class="hover:text-pink-300 transition">Home</a>
        <a href="index.html#services" class="hover:text-pink-300 transition">Services</a>
        <a href="shop.html" class="text-pink-300 font-semibold">Shop</a>
        <a href="index.html#services" class="hover:text-pink-300 transition">Book</a>
        <a href="join.html" class="hover:text-pink-300 transition">Join</a>
      </div>

      <div class="flex items-center gap-4">
        <a href="login.html" class="px-8 py-3 border-2 border-pink-300 text-white rounded-2xl hover:bg-pink-300 hover:text-black transition-all">Login</a>
        <a href="signup.html" class="px-8 py-3 border-2 border-white text-pink-300 rounded-2xl hover:bg-white hover:text-black transition-all">Sign Up</a>
        
        <button onclick="openCartModal()" class="relative text-3xl text-white hover:text-pink-300 transition-all p-2">
          <i class="fa-solid fa-bag-shopping"></i>
          <span id="cart-count" class="absolute -top-1 -right-1 bg-pink-300 text-black text-[10px] font-bold h-5 w-5 flex items-center justify-center rounded-full shadow-inner">0</span>
        </button>
      </div>
    </div>
  </nav>

  <!-- HERO - Background image now shows WAY MORE (opacity-85) while still having the overlay -->
  <section class="min-h-screen flex items-center justify-center relative pt-20 overflow-hidden">
    <div class="absolute inset-0 bg-[radial-gradient(at_center,#ec489920_0%,transparent_70%)]"></div>
    <div class="absolute inset-0 bg-[url('shophero.png')] bg-cover bg-center opacity-85"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-black/85 via-black/55 to-black/85"></div>
    
    <div class="relative z-10 max-w-screen-2xl mx-auto px-8 text-center">
      <h1 class="text-7xl md:text-8xl font-great-vibes neon-text text-pink-200 tracking-widest">Discover Your Glow</h1>
      
      <div class="mt-16 flex flex-wrap justify-center gap-6">
        <a href="#subscribe-section" class="px-12 py-7 border-2 border-pink-300 text-white rounded-3xl text-2xl font-medium hover:bg-pink-300 hover:text-black transition-all">
          Join Pink Privilege Club
          <span class="block text-pink-300 text-sm mt-1">Sitewide &amp; Any Service</span>
        </a>
        <a href="join.html" class="px-12 py-7 border-2 border-pink-300 text-white rounded-3xl text-2xl font-medium hover:bg-pink-300 hover:text-black transition-all">
          Become a Technician 
          <span class="block text-sm text-pink-300 mt-1">Nationwide opportunity</span>
        </a>
        <a onclick="showScholarModal()" class="px-12 py-7 border-2 border-pink-300 text-white rounded-3xl text-2xl font-medium hover:bg-pink-300 hover:text-black transition-all">
          Join Glow Scholars Program
          <span class="block text-sm text-pink-300 mt-1">Nationwide Advantage</span>
        </a>
      </div>

      <div class="mt-12 text-sm text-pink-300 tracking-widest flex items-center justify-center gap-8">
        <a href="#subscribe-section" class="hover:text-pink-100 transition">10% OFF FIRST PURCHASE • SUBSCRIBE NOW</a>
        <div class="w-px h-4 bg-pink-300"></div>
        <div>20% OFF FOR PINK PRIVILEGE MEMBERS</div>
      </div>
    </div>
  </section>

  <!-- VIRAL PROMO BANNERS -->
  <div class="py-12 bg-black border-y border-pink-300/20">
    <div class="max-w-screen-2xl mx-auto px-8 grid md:grid-cols-4 gap-8">
      <div class="text-center group">
        <div class="text-7xl mb-4 text-blue-400">💳</div>
        <h3 class="text-3xl font-great-vibes text-pink-200">Pink Privilege Club</h3>
        <p class="text-white/70 mt-3">Exclusive drops, VIP perks, monthly glow credits for discounts.</p>
        <a href="join.html" class="mt-6 inline-block text-pink-300 hover:text-pink-100">Join the Club →</a>
      </div>
      <div class="text-center group">
        <div class="text-7xl mb-4 text-pink-300">🌍</div>
        <h3 class="text-3xl font-great-vibes text-pink-200">Lady J's Collective</h3>
        <p class="text-white/70 mt-3">Rep the brand. Get clients in your area. Level up your career.</p>
        <a href="join.html" class="mt-6 inline-block text-pink-300 hover:text-pink-100">Become a Technician →</a>
      </div>
      <div class="text-center group">
        <div class="text-7xl mb-4 text-white">🎓</div>
        <h3 class="text-3xl font-great-vibes text-pink-200">Glow Scholars Program</h3>
        <p class="text-white/70 mt-3">Help students glow for back-to-school. End bullying with confidence.</p>
        <a onclick="showScholarModal()" class="mt-6 inline-block text-pink-300 hover:text-pink-100">Join or Sponsor →</a>
      </div>
      <div class="text-center group">
        <div class="text-7xl mb-4 text-pink-300">🙏</div>
        <h3 class="text-3xl font-great-vibes text-pink-200">Donate &amp; Sponsor</h3>
        <p class="text-white/70 mt-3">Money, clothes, supplies, beauty items — change lives.</p>
        <a onclick="showScholarModal()" class="mt-6 inline-block text-pink-300 hover:text-pink-100">Donate Today →</a>
      </div>
    </div>
  </div>

  <!-- CATEGORIES -->
  <section class="py-16 bg-black">
    <div class="max-w-screen-2xl mx-auto px-8">
      <div class="flex flex-wrap justify-center gap-4 border-b border-white/10 pb-8" id="categoryTabs">
        <!-- Populated by JS -->
      </div>

      <!-- Products Grid -->
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-12" id="productsGrid">
        <!-- Populated by JS -->
      </div>
    </div>
  </section>

  <!-- SUBSCRIPTION SECTION -->
  <section id="subscribe-section" class="py-24 bg-zinc-950">
    <div class="max-w-screen-2xl mx-auto px-8">
      <div class="grid md:grid-cols-2 gap-16 items-start">
        <div class="text-center max-w-md mx-auto">
          <h2 class="text-6xl font-great-vibes text-pink-200 mb-6">Stay in the Glow</h2>
          <p class="text-xl text-white/80 mb-12">Be the first to know about new treatments, signature drops, exclusive retreat invites, and VIP beauty secrets.</p>
          
          <form id="subscribe-form" class="max-w-md mx-auto flex gap-2 mb-16">
            <input type="email" id="subscribe-email" class="flex-1 bg-white/10 border border-white/20 focus:border-pink-300 rounded-3xl px-8 py-6 text-white outline-none text-lg placeholder:text-white/50" placeholder="your@email.com" required>
            <button type="submit" class="px-12 py-6 bg-gradient-to-r from-pink-300 to-pink-200 text-black rounded-3xl font-medium text-lg hover:from-white hover:to-white transition-all">Subscribe</button>
          </form>

          <div class="flex justify-center items-center gap-10 text-5xl">
            <a href="https://www.instagram.com/mybeautyretreatofficial" target="_blank" class="text-pink-300 hover:text-pink-100 transition-colors"><i class="fa-brands fa-instagram"></i></a>
            <a href="https://www.tiktok.com/@mybeautyretreat" target="_blank" class="text-pink-300 hover:text-pink-100 transition-colors"><i class="fa-brands fa-tiktok"></i></a>
            <a href="https://www.twitter.com/lady_j26594" target="_blank" class="text-pink-300 hover:text-pink-100 transition-colors"><i class="fa-brands fa-x-twitter"></i></a>
            <a href="https://www.facebook.com/profile.php?id=61575369373586" target="_blank" class="text-pink-300 hover:text-pink-100 transition-colors"><i class="fa-brands fa-facebook"></i></a>
            <a onclick="openEmailProviderModal()" class="text-pink-300 hover:text-pink-100 transition-colors cursor-pointer"><i class="fa-solid fa-envelope"></i></a>
          </div>
          <p class="text-xs text-white/40 mt-10 tracking-widest">FOLLOW US FOR DAILY GLOW INSPIRATION</p>
        </div>

        <div class="text-center max-w-md mx-auto">
          <h2 class="text-6xl font-great-vibes text-pink-200 mb-6">Pink Privilege Club</h2>
          <p class="text-4xl font-light text-white mt-3">Only <span class="font-semibold text-pink-300">$69</span> per month</p>
          <p class="text-xl text-white/80 mt-8 leading-relaxed">Exclusive discounts, complimentary services, and VIP treatment</p>
          <a href="join.html" class="mt-24 inline-block px-16 py-7 border-2 border-pink-300 text-white rounded-2xl text-xl font-medium hover:bg-pink-300 hover:text-black transition-all">Join the Club</a>
        </div>
      </div>
    </div>
  </section>

  <footer class="bg-black py-16 text-center text-white/60 text-sm">
    <p><span class="text-pink-200">Designed by</span> 
       <span class="text-white">Webcore Global Technologies</span> • 
       <span class="text-pink-200">All Rights Reserved</span> 
       <span class="text-white">Lady J's</span> 
       <span class="text-pink-200">&copy;</span> 
       <span class="text-white">2026</span></p>
  </footer>

  <!-- MINI CART MODAL -->
  <div id="cartModal" onclick="if(event.target===this)closeCartModal()" class="hidden fixed inset-0 bg-black/80 flex items-end md:items-center justify-center z-[9999]">
    <div onclick="event.stopImmediatePropagation()" class="bg-zinc-950 rounded-t-3xl md:rounded-3xl w-full max-w-lg mx-0 md:mx-4 max-h-[85vh] flex flex-col">
      <div class="px-8 py-6 border-b border-white/10 flex justify-between items-center">
        <h2 class="text-4xl font-great-vibes text-pink-200">Your Glow Bag</h2>
        <button onclick="closeCartModal()" class="text-4xl text-white/40 hover:text-pink-300">×</button>
      </div>
      <div id="cartItems" class="flex-1 overflow-y-auto p-8 space-y-6"></div>
      <div class="p-8 border-t border-white/10">
        <div class="flex justify-between text-xl mb-6">
          <span class="text-white/70">Total</span>
          <span id="cartTotal" class="text-pink-200 font-semibold">$0</span>
        </div>
        <button onclick="checkout()" class="w-full py-7 bg-gradient-to-r from-pink-300 to-pink-200 text-black rounded-3xl text-2xl font-medium hover:from-white hover:to-white transition-all">
          CHECKOUT – LET’S GLOW ✨
        </button>
      </div>
    </div>
  </div>

  <!-- SCHOLAR PROGRAM MODAL -->
  <div id="scholarModal" onclick="if(event.target===this)hideScholarModal()" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[10000]">
    <div onclick="event.stopImmediatePropagation()" class="bg-zinc-950 rounded-3xl w-full max-w-4xl mx-4 p-10">
      <h2 class="text-5xl font-great-vibes text-pink-200 text-center">Lady J's Glow Scholars Program</h2>
      <p class="text-center text-white/80 mt-6">Helping young women &amp; men shine for back-to-school</p>
      <div class="grid md:grid-cols-3 gap-8 mt-12">
        <div class="text-center border border-pink-300/30 rounded-3xl p-8 flex flex-col h-full">
          <div class="text-6xl mb-4 text-pink-300">🙏</div>
          <h3 class="text-2xl font-medium">Monetary Donations</h3>
          <p class="text-white/70 mt-4 flex-1">Fund haircuts, nails, lashes, clothes, backpacks &amp; school supplies</p>
          <p class="text-xs text-white/50 mt-8 italic">It's confidential</p>
          <button onclick="donateMoney()" class="mt-auto w-full py-6 bg-pink-300 text-black rounded-3xl font-medium">Donate Now</button>
        </div>
        <div class="text-center border border-pink-300/30 rounded-3xl p-8 flex flex-col h-full">
          <div class="text-6xl mb-4 text-white">🎓</div>
          <h3 class="text-2xl font-medium">Sponsor a Student</h3>
          <p class="text-white/70 mt-4 flex-1">Provide full glow-up packages to prevent bullying &amp; boost confidence</p>
          <p class="text-xs text-white/50 mt-8 italic">It's confidential</p>
          <button onclick="sponsorStudent()" class="mt-auto w-full py-6 border-2 border-pink-300 text-white rounded-3xl font-medium">Sponsor a Student</button>
        </div>
        <div class="text-center border border-pink-300/30 rounded-3xl p-8 flex flex-col h-full">
          <div class="text-6xl mb-4 text-pink-300">👨‍👧‍👦</div>
          <h3 class="text-2xl font-medium">Parent Enroll Your Student</h3>
          <p class="text-white/70 mt-4 flex-1">Enroll your child in our Glow Scholars Program for back-to-school confidence</p>
          <p class="text-xs text-white/50 mt-8 italic">It's confidential</p>
          <button onclick="enrollParentStudent()" class="mt-auto w-full py-6 border-2 border-pink-300 text-white rounded-3xl font-medium">Enroll My Student</button>
        </div>
      </div>
      <button onclick="hideScholarModal()" class="mt-12 w-full py-4 text-white/70 hover:text-pink-300">Close</button>
    </div>
  </div>

  <script>
    // Products - Sculpt & Set Tint now correctly uses lambrow.png
    let products = [
      { id: 1, name: "Doll Me Royal", price: 15, category: "Beauty", img: "doll.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      { id: 2, name: "After Dark", price: 15, category: "Beauty", img: "cat.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      { id: 3, name: "Elevated Elegance", price: 15, category: "Beauty", img: "open.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      { id: 4, name: "Soft Drama", price: 15, category: "Beauty", img: "wispy.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      { id: 5, name: "Heavy Crown", price: 15, category: "Beauty", img: "mega.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      { id: 6, name: "The Main Character", price: 15, category: "Beauty", img: "volume.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      { id: 7, name: "Simply Her", price: 15, category: "Beauty", img: "natural.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      { id: 8, name: "Mink Majesty", price: 15, category: "Beauty", img: "mink.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      
      { id: 9, name: "Simply Flawless", price: 24, category: "Beauty", img: "classic.png", variantLabel: "Length", variantOptions: ["8mm", "10mm", "12mm", "14mm", "16mm", "18mm", "20mm"] },
      { id: 10, name: "Perfect Blend", price: 24, category: "Beauty", img: "hybrid.png", variantLabel: "Length", variantOptions: ["8mm", "10mm", "12mm", "14mm", "16mm", "18mm", "20mm"] },
      { id: 11, name: "Full Effect", price: 24, category: "Beauty", img: "volume1.png", variantLabel: "Length", variantOptions: ["8mm", "10mm", "12mm", "14mm", "16mm", "18mm", "20mm"] },
      { id: 12, name: "Unapologetic Glam", price: 24, category: "Beauty", img: "megavolume1.png", variantLabel: "Length", variantOptions: ["8mm", "10mm", "12mm", "14mm", "16mm", "18mm", "20mm"] },
      { id: 13, name: "Pink Factor", price: 24, category: "Beauty", img: "wispy1.png", variantLabel: "Length", variantOptions: ["8mm", "10mm", "12mm", "14mm", "16mm", "18mm", "20mm"] },
      { id: 14, name: "Instant Badie", price: 24, category: "Beauty", img: "cluster.png", variantLabel: "Length", variantOptions: ["8mm", "10mm", "12mm", "14mm", "16mm", "18mm", "20mm"] },
      
      { id: 15, name: "Cloud Kissed", price: 35, category: "Beauty", img: "angel.png", variantLabel: "Size", variantOptions: ["S", "M", "L", "XL"] },
      
      { id: 16, name: "BareBrow Tint", price: 22, category: "Beauty", img: "classictint.png", variantLabel: "Color", variantOptions: ["Jet Black", "Soft Black", "Dark Brown", "Medium Brown", "Light Brown", "Auburn", "Blond Red", "Custom"] },
      { id: 17, name: "FullSculpt Tint", price: 22, category: "Beauty", img: "hybridtint.png", variantLabel: "Color", variantOptions: ["Jet Black", "Soft Black", "Dark Brown", "Medium Brown", "Light Brown", "Auburn", "Blond Red", "Custom"] },
      { id: 18, name: "NaturalDefinitions Tint", price: 22, category: "Beauty", img: "hennatint.png", variantLabel: "Color", variantOptions: ["Jet Black", "Soft Black", "Dark Brown", "Medium Brown", "Light Brown", "Auburn", "Blond Red", "Custom"] },
      { id: 19, name: "AirSculpt Brow Tint", price: 22, category: "Beauty", img: "airbrushtint.png", variantLabel: "Color", variantOptions: ["Jet Black", "Soft Black", "Dark Brown", "Medium Brown", "Light Brown", "Auburn", "Blond Red", "Custom"] },
      { id: 20, name: "PopTint", price: 22, category: "Beauty", img: "temptint.png", variantLabel: "Color", variantOptions: ["Jet Black", "Soft Black", "Dark Brown", "Medium Brown", "Light Brown", "Auburn", "Blond Red", "Custom"] },
      { id: 21, name: "Sculpt & Set Tint", price: 45, category: "Beauty", img: "lambrow.png", variantLabel: "Color", variantOptions: ["Jet Black", "Soft Black", "Dark Brown", "Medium Brown", "Light Brown", "Auburn", "Blond Red", "Custom"] }
    ];

    let cart = [];
    let currentCategory = "Beauty";

    function renderCategoryTabs() {
      const categories = ["Beauty", "Body", "Fashion", "Hair", "Nails", "Skin", "Wellness"];
      let html = '';
      categories.forEach(cat => {
        const active = (cat === currentCategory) ? 'bg-pink-300 text-black' : 'border border-white/30 hover:border-pink-300';
        html += `<button onclick="filterCategory('${cat}')" class="px-10 py-5 rounded-3xl ${active} text-white font-medium text-xl transition-all">${cat}</button>`;
      });
      document.getElementById('categoryTabs').innerHTML = html;
    }

    function filterCategory(cat) {
      currentCategory = cat;
      renderCategoryTabs();
      renderProducts();
    }

    function renderProducts() {
      const grid = document.getElementById('productsGrid');
      grid.innerHTML = '';

      const filtered = products.filter(p => p.category === currentCategory);

      filtered.forEach(product => {
        const card = document.createElement('div');
        card.className = "product-card bg-zinc-900 rounded-3xl overflow-hidden";
        card.innerHTML = `
          <img src="${product.img}" class="w-full h-80 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-medium">${product.name}</h3>
            <p class="text-pink-200 text-3xl font-semibold mt-2">$${product.price}</p>
            
            <div class="mt-4">
              <label class="block text-xs text-white/60 mb-1">${product.variantLabel}</label>
              <select id="variant-select-${product.id}" class="w-full bg-white/10 border border-pink-300 rounded-3xl px-4 py-2 text-white text-sm">
                ${product.variantOptions.map(opt => `<option value="${opt}">${opt}</option>`).join('')}
              </select>
            </div>
            
            <button onclick="addToCart(${product.id}); event.stopImmediatePropagation()" class="mt-6 w-full py-4 bg-gradient-to-r from-pink-300 to-pink-200 text-black rounded-3xl font-medium hover:from-white hover:to-white transition-all">Add to Bag</button>
          </div>
        `;
        grid.appendChild(card);
      });

      if (filtered.length === 0) {
        grid.innerHTML = `<p class="col-span-full text-center py-20 text-white/40 text-2xl">More Glow coming soon in this category ✨</p>`;
      }
    }

    function addToCart(id) {
      const product = products.find(p => p.id === id);
      const select = document.getElementById(`variant-select-${id}`);
      const selectedVariant = select ? select.value : 'M';
      
      cart.push({ ...product, quantity: 1, variant: selectedVariant });
      document.getElementById('cart-count').textContent = cart.length;
      
      const toast = document.createElement('div');
      toast.style.cssText = 'position:fixed; bottom:30px; right:30px; background:#ec4899; color:black; padding:18px 28px; border-radius:9999px; font-weight:700; box-shadow:0 20px 25px -5px rgb(236 72 153);';
      toast.innerHTML = `✅ ${product.name} (${selectedVariant}) added to bag!`;
      document.body.appendChild(toast);
      setTimeout(() => toast.remove(), 2500);
    }

    function openCartModal() {
      const modal = document.getElementById('cartModal');
      const container = document.getElementById('cartItems');
      container.innerHTML = cart.length === 0 
        ? `<p class="text-center text-white/40 py-12 text-2xl">Your bag is glowing… but empty ✨</p>` 
        : cart.map((item, i) => `
          <div class="flex gap-6 items-center">
            <div class="flex-1">
              <p class="font-medium">${item.name}</p>
              <p class="text-pink-200">$${item.price} • ${item.variant || 'M'}</p>
            </div>
            <div class="flex items-center gap-4">
              <button onclick="changeQuantity(${i},-1)" class="px-4 py-2 border border-white/30 rounded-3xl">-</button>
              <span>${item.quantity}</span>
              <button onclick="changeQuantity(${i},1)" class="px-4 py-2 border border-white/30 rounded-3xl">+</button>
            </div>
            <button onclick="removeFromCart(${i})" class="text-3xl text-white/40 hover:text-pink-300">×</button>
          </div>
        `).join('');
      document.getElementById('cartTotal').textContent = '$' + cart.reduce((a, b) => a + b.price * b.quantity, 0);
      modal.classList.remove('hidden');
      modal.classList.add('flex');
    }

    function changeQuantity(i, delta) {
      cart[i].quantity = Math.max(1, cart[i].quantity + delta);
      openCartModal();
    }

    function removeFromCart(i) {
      cart.splice(i, 1);
      document.getElementById('cart-count').textContent = cart.length;
      openCartModal();
    }

    function checkout() {
      alert("🛒 Redirecting to secure checkout...");
      cart = [];
      document.getElementById('cart-count').textContent = '0';
      closeCartModal();
    }

    function closeCartModal() {
      const modal = document.getElementById('cartModal');
      modal.classList.add('hidden');
      modal.classList.remove('flex');
    }

    function showScholarModal() {
      const modal = document.getElementById('scholarModal');
      modal.classList.remove('hidden');
      modal.classList.add('flex');
    }

    function hideScholarModal() {
      const modal = document.getElementById('scholarModal');
      modal.classList.add('hidden');
      modal.classList.remove('flex');
    }

    function donateMoney() {
      hideScholarModal();
      alert("💖 Thank you! Your donation will help students glow for back-to-school.");
    }

    function sponsorStudent() {
      hideScholarModal();
      alert("🌟 Thank you! You are now sponsoring a student’s glow-up.");
    }

    function enrollParentStudent() {
      hideScholarModal();
      alert("👨‍👧‍👦 Thank you! Your student's enrollment is being processed.");
    }

    // Initialize
    window.onload = () => {
      renderCategoryTabs();
      renderProducts();
    };
  </script>
</body>
</html>