// ========== GLOBAL CONFIG ==========

const app = {
version: "1.0.0",
darkMode: false,
user: null,
tiers: ["Prompts", "Standard Images", "High-Quality Images", "Videos"]
};

// ========== THEME HANDLER ==========
const themeToggle = document.querySelector("#theme-toggle");
themeToggle?.addEventListener("click", () => {
document.body.classList.toggle("dark");
app.darkMode = !app.darkMode;
localStorage.setItem("darkMode", app.darkMode);
});

// Load saved theme
window.addEventListener("DOMContentLoaded", () => {
const savedMode = localStorage.getItem("darkMode");
if (savedMode === "true") document.body.classList.add("dark");
loadGallery();
loadTestimonials();
});

// ========== AUTHENTICATION ==========
async function loginUser(email, password) {
// Example: integrate Firebase or Supabase here
console.log(`Logging in ${email}`);
// Placeholder logic
app.user = { email, tier: "Standard Images" };
updateUIForUser();
}

async function signupUser(email, password, tier) {
console.log(`Signing up ${email} for ${tier}`);
app.user = { email, tier };
updateUIForUser();
}

function logoutUser() {
app.user = null;
updateUIForUser();
}

function updateUIForUser() {
const userDisplay = document.querySelector("#user-display");
if (app.user) {
userDisplay.textContent = `Welcome, ${app.user.email} (${app.user.tier})`;
} else {
userDisplay.textContent = "Guest Mode";
}
}

// ========== GALLERY HANDLER ==========
async function loadGallery() {
const gallery = document.querySelector(".gallery");
if (!gallery) return;
gallery.innerHTML = "<p>Loading your AI masterpieces...</p>";

// Example fetch (you’ll hook to your backend or Firestore)
const images = [
{ src: "ai1.jpg", title: "Urban Jungle", quality: "HD" },
{ src: "ai2.jpg", title: "Neon Dreams", quality: "4K" }
];

gallery.innerHTML = images
.map(
(img) => `
<div class="gallery-item">
<img src="${img.src}" alt="${img.title}" />
<div class="overlay">
<h3>${img.title}</h3>
<span>${img.quality}</span>
</div>
</div>`
)
.join("");
}

// ========== TESTIMONIALS ==========
async function loadTestimonials() {
const container = document.querySelector(".testimonials");
if (!container) return;
const testimonials = [
{ name: "Maya", text: "This AI changed my brand visuals overnight!" },
{ name: "Rico", text: "The realism and motion are beyond perfect." },
{ name: "Ava", text: "I tested others — nothing compares to this quality!" }
];
container.innerHTML = testimonials
.map(
(t) => `
<div class="testimonial-card">
<p>"${t.text}"</p>
<h4>- ${t.name}</h4>
</div>`
)
.join("");
}

// ========== BEFORE/AFTER FEATURE ==========
function initBeforeAfter() {
const slider = document.querySelector(".before-after-slider");
if (!slider) return;

const before = slider.querySelector(".before");
const after = slider.querySelector(".after");
const handle = slider.querySelector(".handle");

let isDragging = false;

handle.addEventListener("mousedown", () => (isDragging = true));
window.addEventListener("mouseup", () => (isDragging = false));
window.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const rect = slider.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
const percent = Math.min(Math.max(offsetX / rect.width, 0), 1);
before.style.width = `${percent * 100}%`;
handle.style.left = `${percent * 100}%`;
});
}

// ========== PROMPT GENERATOR ==========
function generatePromptPack(count = 100) {
const basePrompts = [
"Cinematic portrait, ultra-detailed lighting",
"Abstract fusion of neon and shadow",
"Real-world wildlife with surreal landscapes"
];
const prompts = Array.from({ length: count }, () =>
basePrompts[Math.floor(Math.random() * basePrompts.length)]
);
return prompts;
}

// ========== SUBSCRIPTION HANDLER ==========
function showSubscriptionTiers() {
const section = document.querySelector(".pricing");
if (!section) return;
const tiers = [
{ name: "Prompts", price: "$10.99", perks: ["100 AI Prompts"] },
{
name: "Standard Images",
price: "$300",
perks: ["10 HD AI Images", "Access to Prompt Tools"]
},
{
name: "High-Quality Images",
price: "$1200",
perks: ["20 4K Images", "Custom Style Blends"]
},
{
name: "Video + Ads",
price: "$6300",
perks: ["AI Video Creation", "Ad Creative Assistance"]
}
];

section.innerHTML = tiers
.map(
(tier) => `
<div class="tier-card">
<h2>${tier.name}</h2>
<p class="price">${tier.price}</p>
<ul>${tier.perks.map((p) => `<li>${p}</li>`).join("")}</ul>
<button onclick="purchaseTier('${tier.name}')">Subscribe</button>
</div>`
)
.join("");
}

function purchaseTier(tierName) {
alert(`Subscribed to ${tierName} successfully!`);
app.user = { ...app.user, tier: tierName };
updateUIForUser();
}

// Initialize
window.addEventListener("load", () => {
initBeforeAfter();
showSubscriptionTiers();
});

script.js

@@ -1,159 +1,516 @@
-// AI Showcase Website Script
-document.addEventListener('DOMContentLoaded', function() {
-    // Initialize cart count
-    updateCartCount();
-    
-    // Initialize processor tabs
-    initProcessorTabs();
-    
-    // Initialize gallery
-    initGallery();
+=== GLOBAL CONFIG ==========
+const app = {
+  version: "1.0.0",
+  darkMode: false,
+  user: null,
+  tiers: ["Prompts", "Standard Images", "High-Quality Images", "Videos"]
+};
+
+// ========== THEME HANDLER ==========
+const themeToggle = document.querySelector("#theme-toggle");
+themeToggle?.addEventListener("click", () => {
+  document.body.classList.toggle("dark");
+  app.darkMode = !app.darkMode;
+  localStorage.setItem("darkMode", app.darkMode);
 });
 
-// Cart functionality
-let cart = JSON.parse(localStorage.getItem('aiShowcaseCart')) || [];
+// Load saved theme
+window.addEventListener("DOMContentLoaded", () => {
+  const savedMode = localStorage.getItem("darkMode");
+  if (savedMode === "true") document.body.classList.add("dark");
+  loadGallery();
+  loadTestimonials();
+});
 
-function updateCartCount() {
-    const cartCounts = document.querySelectorAll('.cart-count');
-    const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
-    cartCounts.forEach(count => {
-        count.textContent = totalItems;
-    });
+// ========== AUTHENTICATION ==========
+async function loginUser(email, password) {
+  // Example: integrate Firebase or Supabase here
+  console.log(`Logging in ${email}`);
+  // Placeholder logic
+  app.user = { email, tier: "Standard Images" };
+  updateUIForUser();
 }
 
-function addToCart(product) {
-    const existingItem = cart.find(item => item.id === product.id);
-    
-    if (existingItem) {
-        existingItem.quantity += 1;
-    } else {
-        cart.push({
-            ...product,
-            quantity: 1
-        });
+async function signupUser(email, password, tier) {
+  console.log(`Signing up ${email} for ${tier}`);
+  app.user = { email, tier };
+  updateUIForUser();
+}
+
+function logoutUser() {
+  app.user = null;
+  updateUIForUser();
+}
+
+function updateUIForUser() {
+  const userDisplay = document.querySelector("#user-display");
+  if (app.user) {
+    userDisplay.textContent = `Welcome, ${app.user.email} (${app.user.tier})`;
+  } else {
+    userDisplay.textContent = "Guest Mode";
+  }
+}
+
+// ========== GALLERY HANDLER ==========
+async function loadGallery() {
+  const gallery = document.querySelector(".gallery");
+  if (!gallery) return;
+  gallery.innerHTML = "<p>Loading your AI masterpieces...</p>";
+
+  // Example fetch (you'll hook to your backend or Firestore)
+  const images = [
+    { src: "ai1.jpg", title: "Urban Jungle", quality: "HD" },
+    { src: "ai2.jpg", title: "Neon Dreams", quality: "4K" }
+  ];
+
+  gallery.innerHTML = images
+    .map(
+      (img) => `
+      <div class="gallery-item">
+        <img src="${img.src}" alt="${img.title}" />
+        <div class="overlay">
+          <h3>${img.title}</h3>
+          <span>${img.quality}</span>
+        </div>
+      </div>`
+    )
+    .join("");
+}
+
+// ========== TESTIMONIALS ==========
+async function loadTestimonials() {
+  const container = document.querySelector(".testimonials");
+  if (!container) return;
+  const testimonials = [
+    { name: "Maya", text: "This AI changed my brand visuals overnight!" },
+    { name: "Rico", text: "The realism and motion are beyond perfect." },
+    { name: "Ava", text: "I tested others — nothing compares to this quality!" }
+  ];
+  container.innerHTML = testimonials
+    .map(
+      (t) => `
+      <div class="testimonial-card">
+        <p>"${t.text}"</p>
+        <h4>- ${t.name}</h4>
+      </div>`
+    )
+    .join("");
+}
+
+// ========== BEFORE/AFTER FEATURE ==========
+function initBeforeAfter() {
+  const slider = document.querySelector(".before-after-slider");
+  if (!slider) return;
+
+  const before = slider.querySelector(".before");
+  const after = slider.querySelector(".after");
+  const handle = slider.querySelector(".handle");
+
+  let isDragging = false;
+
+  handle.addEventListener("mousedown", () => (isDragging = true));
+  window.addEventListener("mouseup", () => (isDragging = false));
+  window.addEventListener("mousemove", (e) => {
+    if (!isDragging) return;
+    const rect = slider.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const percent = Math.min(Math.max(offsetX / rect.width, 0), 1);
+    before.style.width = `${percent * 100}%`;
+    handle.style.left = `${percent * 100}%`;
+  });
+}
+
+// ========== PROMPT GENERATOR ==========
+function generatePromptPack(count = 100) {
+  const basePrompts = [
+    "Cinematic portrait, ultra-detailed lighting",
+    "Abstract fusion of neon and shadow",
+    "Real-world wildlife with surreal landscapes"
+  ];
+  const prompts = Array.from({ length: count }, () =>
+    basePrompts[Math.floor(Math.random() * basePrompts.length)]
+  );
+  return prompts;
+}
+
+// ========== SUBSCRIPTION HANDLER ==========
+function showSubscriptionTiers() {
+  const section = document.querySelector(".pricing");
+  if (!section) return;
+  const tiers = [
+    { name: "Prompts", price: "$10.99", perks: ["100 AI Prompts"] },
+    {
+      name: "Standard Images",
+      price: "$300",
+      perks: ["10 HD AI Images", "Access to Prompt Tools"]
+    },
+    {
+      name: "High-Quality Images",
+      price: "$1200",
+      perks: ["20 4K Images", "Custom Style Blends"]
+    },
+    {
+      name: "Video + Ads",
+      price: "$6300",
+      perks: ["AI Video Creation", "Ad Creative Assistance"]
     }
-    
-    localStorage.setItem('aiShowcaseCart', JSON.stringify(cart));
-    updateCartCount();
-    
-    // Show success notification
-    showNotification('Added to cart successfully!', 'success');
+  ];
+
+  section.innerHTML = tiers
+    .map(
+      (tier) => `
+      <div class="tier-card">
+        <h2>${tier.name}</h2>
+        <p class="price">${tier.price}</p>
+        <ul>${tier.perks.map((p) => `<li>${p}</li>`).join("")}</ul>
+        <button onclick="purchaseTier('${tier.name}')">Subscribe</button>
+      </div>`
+    )
+    .join("");
 }
 
-// Processor Tabs
-function initProcessorTabs() {
-    const tabs = document.querySelectorAll('[data-processor-tab]');
-    
-    tabs.forEach(tab => {
-        tab.addEventListener('click', function() {
-            const tabId = this.getAttribute('data-processor-tab');
-            
-            // Update active tab
-            tabs.forEach(t => t.classList.remove('bg-accent-red', 'bg-accent-green', 'bg-accent-blue');
-            this.classList.add(this.getAttribute('data-tab-color'));
-            
-            // Show corresponding processor section
-            document.querySelectorAll('.processor-section').forEach(section => {
-                section.classList.remove('active');
-            });
-            
-            const targetSection = document.getElementById(`${tabId}-processor`);
-            if (targetSection) {
-                targetSection.classList.add('active');
-            }
-        });
-    });
+function purchaseTier(tierName) {
+  alert(`Subscribed to ${tierName} successfully!`);
+  app.user = { ...app.user, tier: tierName };
+  updateUIForUser();
 }
 
-// Gallery functionality
-function initGallery() {
-    // This would typically load gallery items from an API
-    const galleryGrid = document.querySelector('.grid.gap-6');
-    
-    if (galleryGrid) {
-        // Simulate loading gallery items
-        setTimeout(() => {
-            // Add some sample gallery items
-            for (let i = 1; i <= 12; i++) {
-                const category = i % 3 === 0 ? 'red' : i % 3 === 1 ? 'green' : 'blue';
-                galleryGrid.innerHTML += `
-                    <div class="card-tilt bg-card-bg rounded-2xl p-4 shadow-2xl gallery-item" style="animation-delay: ${i * 0.1}s">
-                        <img src="http://static.photos/${category}/640x360/${i}" alt="AI Generated Art" class="w-full h-48 object-cover rounded-xl mb-4">
-                        <h3 class="text-xl font-semibold mb-2">AI Artwork ${i}</h3>
-                    <p class="text-accent-red text-2xl font-bold mb-2">$${300 + (i * 100)}</p>
-                    <div class="flex gap-2 mb-4">
-                            <span class="bg-accent-${category} text-white px-2 py-1 rounded-full text-sm">${category}</span>
-                            <span class="bg-accent-green text-white px-2 py-1 rounded-full text-sm">4K</span>
-                        </div>
-                        <button class="w-full bg-accent-red hover:bg-red-600 text-white py-2 rounded-xl transition-colors" onclick="addToCart({id: ${i}, name: 'AI Artwork ${i}', price: ${300 + (i * 100)})">
-                            Add to Cart
-                        </button>
-                    </div>
-                `;
-            }
-        }, 1000);
+// Initialize
+window.addEventListener("load", () => {
+  initBeforeAfter();
+  showSubscriptionTiers();
+});
+=======
+// ========== GLOBAL CONFIG ==========
+const app = {
+  version: "1.0.0",
+  darkMode: false,
+  user: null,
+  tiers: ["Prompts", "Standard Images", "High-Quality Images", "Videos"]
+};
+
+// ========== THEME HANDLER ==========
+const themeToggle = document.querySelector("#theme-toggle");
+themeToggle?.addEventListener("click", () => {
+  document.body.classList.toggle("dark");
+  app.darkMode = !app.darkMode;
+  localStorage.setItem("darkMode", app.darkMode);
+});
+
+// Load saved theme
+window.addEventListener("DOMContentLoaded", () => {
+  const savedMode = localStorage.getItem("darkMode");
+  if (savedMode === "true") document.body.classList.add("dark");
+  loadGallery();
+  loadTestimonials();
+});
+
+// ========== AUTHENTICATION ==========
+async function loginUser(email, password) {
+  // Example: integrate Firebase or Supabase here
+  console.log(`Logging in ${email}`);
+  // Placeholder logic
+  app.user = { email, tier: "Standard Images" };
+  updateUIForUser();
+}
+
+async function signupUser(email, password, tier) {
+  console.log(`Signing up ${email} for ${tier}`);
+  app.user = { email, tier };
+  updateUIForUser();
+}
+
+function logoutUser() {
+  app.user = null;
+  updateUIForUser();
+}
+
+function updateUIForUser() {
+  const userDisplay = document.querySelector("#user-display");
+  if (app.user) {
+    userDisplay.textContent = `Welcome, ${app.user.email} (${app.user.tier})`;
+  } else {
+    userDisplay.textContent = "Guest Mode";
+  }
+}
+
+// ========== GALLERY HANDLER ==========
+async function loadGallery() {
+  const gallery = document.querySelector(".gallery");
+  if (!gallery) return;
+  gallery.innerHTML = "<p>Loading your AI masterpieces...</p>";
+
+  // Example fetch (you'll hook to your backend or Firestore)
+  const images = [
+    { src: "http://static.photos/technology/320x240/1", title: "Urban Jungle", quality: "HD" },
+    { src: "http://static.photos/abstract/320x240/2", title: "Neon Dreams", quality: "4K" },
+    { src: "http://static.photos/minimal/320x240/3", title: "Digital Art", quality: "HD" },
+    { src: "http://static.photos/gradient/320x240/4", title: "Color Fusion", quality: "4K" }
+  ];
+
+  gallery.innerHTML = images
+    .map(
+      (img) => `
+      <div class="gallery-item">
+        <img src="${img.src}" alt="${img.title}" />
+        <div class="overlay">
+          <h3>${img.title}</h3>
+          <span>${img.quality}</span>
+        </div>
+      </div>`
+    )
+    .join("");
+}
+
+// ========== TESTIMONIALS ==========
+async function loadTestimonials() {
+  const container = document.querySelector(".testimonials");
+  if (!container) return;
+  const testimonials = [
+    { name: "Maya", text: "This AI changed my brand visuals overnight!" },
+    { name: "Rico", text: "The realism and motion are beyond perfect." },
+    { name: "Ava", text: "I tested others — nothing compares to this quality!" }
+  ];
+  container.innerHTML = testimonials
+    .map(
+      (t) => `
+      <div class="testimonial-card">
+        <p>"${t.text}"</p>
+        <h4>- ${t.name}</h4>
+      </div>`
+    )
+    .join("");
+}
+
+// ========== BEFORE/AFTER FEATURE ==========
+function initBeforeAfter() {
+  const slider = document.querySelector(".before-after-slider");
+  if (!slider) return;
+
+  const before = slider.querySelector(".before");
+  const after = slider.querySelector(".after");
+  const handle = slider.querySelector(".handle");
+
+  let isDragging = false;
+
+  handle.addEventListener("mousedown", () => (isDragging = true));
+  window.addEventListener("mouseup", () => (isDragging = false));
+  window.addEventListener("mousemove", (e) => {
+    if (!isDragging) return;
+    const rect = slider.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const percent = Math.min(Math.max(offsetX / rect.width, 0), 1);
+    before.style.width = `${percent * 100}%`;
+    handle.style.left = `${percent * 100}%`;
+  });
+}
+
+// ========== PROMPT GENERATOR ==========
+function generatePromptPack(count = 100) {
+  const basePrompts = [
+    "Cinematic portrait, ultra-detailed lighting",
+    "Abstract fusion of neon and shadow",
+    "Real-world wildlife with surreal landscapes"
+  ];
+  const prompts = Array.from({ length: count }, () =>
+    basePrompts[Math.floor(Math.random() * basePrompts.length)]
+  );
+  return prompts;
+}
+
+// ========== SUBSCRIPTION HANDLER ==========
+function showSubscriptionTiers() {
+  const section = document.querySelector(".pricing");
+  if (!section) return;
+  const tiers = [
+    { name: "Prompts", price: "$10.99", perks: ["100 AI Prompts"] },
+    {
+      name: "Standard Images",
+      price: "$300",
+      perks: ["10 HD AI Images", "Access to Prompt Tools"]
+    },
+    {
+      name: "High-Quality Images",
+      price: "$1200",
+      perks: ["20 4K Images", "Custom Style Blends"]
+    },
+    {
+      name: "Video + Ads",
+      price: "$6300",
+      perks: ["AI Video Creation", "Ad Creative Assistance"]
     }
+  ];
+
+  section.innerHTML = tiers
+    .map(
+      (tier) => `
+      <div class="tier-card">
+        <h2>${tier.name}</h2>
+        <p class="price">${tier.price}</p>
+        <ul>${tier.perks.map((p) => `<li>${p}</li>`).join("")}</ul>
+        <button onclick="purchaseTier('${tier.name}')">Subscribe</button>
+      </div>`
+    )
+    .join("");
 }
 
-// Notification system
-function showNotification(message, type = 'info') {
-    const notification = document.createElement('div');
-    notification.className = `fixed top-4 right-4 z-50 px-6 py-3 rounded-xl font-semibold ${
-        type === 'success' ? 'bg-accent-green' : 
-        type === 'error' ? 'bg-accent-red' : 'bg-accent-blue'
-    } text-white transform transition-all duration-300 translate-x-full';
-    
-    notification.textContent = message;
-    document.body.appendChild(notification);
-    
-    // Animate in
-    setTimeout(() => {
-        notification.classList.remove('translate-x-full');
-    }, 100);
-    
-    // Auto remove after 3 seconds
-    setTimeout(() => {
-        notification.classList.add('translate-x-full');
-        setTimeout(() => {
-            document.body.removeChild(notification);
-        }, 300);
-    }, 3000);
-}
-
-// Image upload handler
-function handleImageUpload(event) {
-    const file = event.target.files[0];
-    if (file) {
-        // In a real implementation, this would upload to your server
-        showNotification('Image uploaded successfully!', 'success');
+function purchaseTier(tierName) {
+  alert(`Subscribed to ${tierName} successfully!`);
+  app.user = { ...app.user, tier: tierName };
+  updateUIForUser();
+}
+
+// ========== SHOPPING CART FUNCTIONALITY ==========
+class ShoppingCart {
+  constructor() {
+    this.items = JSON.parse(localStorage.getItem('cart')) || [];
+  }
+  
+  addItem(item) {
+    this.items.push(item);
+    this.saveToLocalStorage();
+    this.updateCartCount();
+  }
+  
+  removeItem(index) {
+    this.items.splice(index, 1);
+    this.saveToLocalStorage();
+    this.updateCartCount();
+  }
+  
+  saveToLocalStorage() {
+    localStorage.setItem('cart', JSON.stringify(this.items));
+  }
+  
+  updateCartCount() {
+    const count = this.items.length;
+    const cartCountElement = document.getElementById('cart-count');
+    if (cartCountElement) {
+      cartCountElement.textContent = count;
+      count > 0 ? cartCountElement.classList.remove('hidden') : cartCountElement.classList.add('hidden');
     }
+  }
 }
 
-// Initialize tooltips and other UI enhancements
-function initUI() {
-    // Add hover effects to cards
-    const cards = document.querySelectorAll('.card-tilt');
+// Initialize cart on page load
+window.cart = new ShoppingCart();
+window.cart.updateCartCount();
+
+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', function() {
+  // Lazy loading for images
+  const lazyImages = document.querySelectorAll('img[data-src]');
+  
+  const lazyLoad = (target) => {
+    const io = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const img = entry.target;
+          img.src = img.dataset.src;
+          observer.unobserve(img);
+        }
+      });
+    });
+    io.observe(target);
+  };
+  
+  lazyImages.forEach(lazyLoad);
+  
+  // Add subtle tilt effect to cards on mousemove
+  document.querySelectorAll('.card-tilt').forEach(card => {
+    card.addEventListener('mousemove', (e) => {
+      const x = e.clientX - card.getBoundingClientRect().left;
+    const y = e.clientY - card.getBoundingClientRect().top;
+    const midX = card.clientWidth / 2;
+    const midY = card.clientHeight / 2;
+    const angleX = (midY - y) / 15;
+    const angleY = (x - midX) / 15;
     
-    cards.forEach(card => {
-        card.addEventListener('mousemove', function(e) {
-            const rect = this.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        
-        const centerX = rect.width / 2;
-        const centerY = rect.height / 2;
-        
-        const rotateX = (y - centerY) / 10;
-        const rotateY = (centerX - x) / 10;
-        
-        this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)';
+    card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
+    });
+    
+    card.addEventListener('mouseleave', () => {
+      card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)`;
+    });
+  });
+});
+
+// Initialize
+window.addEventListener("load", () => {
+  initBeforeAfter();
+  showSubscriptionTiers();
+});
+Initialize tooltips
+document.addEventListener('DOMContentLoaded', function() {
+    // Lazy loading for images
+    const lazyImages = document.querySelectorAll('img[data-src]');
+    
+    const lazyLoad = (target) => {
+        const io = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src;
+                    observer.unobserve(img);
+                }
+            });
+        });
+        io.observe(target);
+    };
+    
+    lazyImages.forEach(lazyLoad);
+    
+    // Add subtle tilt effect to cards on mousemove
+    document.querySelectorAll('.card-tilt').forEach(card => {
+        card.addEventListener('mousemove', (e) => {
+            const x = e.clientX - card.getBoundingClientRect().left;
+            const y = e.clientY - card.getBoundingClientRect().top;
+            const midX = card.clientWidth / 2;
+            const midY = card.clientHeight / 2;
+            const angleX = (midY - y) / 15;
+            const angleY = (x - midX) / 15;
+            
+            card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
         });
         
-        card.addEventListener('mouseleave', function() {
-            this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
+        card.addEventListener('mouseleave', () => {
+            card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
         });
     });
+});
+
+// Shopping cart functionality
+class ShoppingCart {
+    constructor() {
+        this.items = JSON.parse(localStorage.getItem('cart')) || [];
+    }
+    
+    addItem(item) {
+        this.items.push(item);
+        this.saveToLocalStorage();
+        this.updateCartCount();
+    }
+    
+    removeItem(index) {
+        this.items.splice(index, 1);
+        this.saveToLocalStorage();
+        this.updateCartCount();
+    }
+    
+    saveToLocalStorage() {
+        localStorage.setItem('cart', JSON.stringify(this.items));
+    }
+    
+    updateCartCount() {
+        const count = this.items.length;
+        const cartCountElement = document.getElementById('cart-count');
+        if (cartCountElement) {
+            cartCountElement.textContent = count;
+            count > 0 ? cartCountElement.classList.remove('hidden') : cartCountElement.classList.add('hidden');
+        }
+    }
 }
 
-// Call initialization
-initUI();
+// Initialize cart on page load
+window.cart = new ShoppingCart();
+window.cart.updateCartCount();