<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1K Products - Premium Personalized Sneakers</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles/main.css">
  <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.3.0/default/snipcart.css">
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar">
    <a href="index.html" class="logo">
      <img src="assets/logo.png" alt="1K Products Logo">
    </a>
    <div class="nav-links">
      <a href="index.html" class="active">Home</a>
      <a href="about.html">About</a>
      <a href="blog.html">Blog</a>
      <a href="contact.html">Contact</a>
    </div>
  </nav>

  <!-- Header -->
  <header class="hero">
    <h1>1K Products</h1>
    <p class="tagline">1000 Personalized items. 1 product. Unlimited Vision.</p>
  </header>

  <!-- Main Content -->
  <main class="main-container">
    <!-- Product Showcase -->
    <section class="product-showcase">
      <img src="images/premium-sneaker.jpg" alt="Premium Sneakers" class="sneaker-image">
      
      <div class="countdown-container">
        <h2>1000 Items Deploying On</h2>
        <p class="launch-date">1st May 2025 | 12:00 AM IST</p>
        <div class="countdown-grid">
          <div class="countdown-item">
            <span id="days">00</span>
            <small>Days</small>
          </div>
          <div class="countdown-item">
            <span id="hours">00</span>
            <small>Hours</small>
          </div>
          <div class="countdown-item">
            <span id="minutes">00</span>
            <small>Minutes</small>
          </div>
          <div class="countdown-item">
            <span id="seconds">00</span>
            <small>Seconds</small>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
      <button class="reserve-button snipcart-add-item" 
        data-item-id="sneaker-1" 
        data-item-price="10000" 
        data-item-url="/" 
        data-item-name="1K Premium Sneakers"
        data-item-custom1-name="Customization Notes">
        Reserve Your Pair Now
      </button>
    </section>

    <!-- Features -->
    <section class="features-section">
      <h2>Why Choose Us?</h2>
      <div class="feature-grid">
        <div class="feature-card">
          <h3>Unique Design Experience</h3>
          <p>Personalized creative process with experts</p>
        </div>
        <div class="feature-card">
          <h3>Executive Visits</h3>
          <p>At-home size & style selection</p>
        </div>
        <div class="feature-card">
          <h3>Custom Engraving</h3>
          <p>Signature, dates, or special messages</p>
        </div>
        <div class="feature-card">
          <h3>Limited Edition</h3>
          <p>Only 1000 items per product line</p>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="main-footer">
    <p>&copy; 2025 1K Products. All rights reserved.</p>
  </footer>

  <!-- JavaScript -->
  <script src="https://cdn.snipcart.com/themes/v3.3.0/default/snipcart.js"></script>
  <script>
    // Countdown Timer
    function updateCountdown() {
      const countDownDate = new Date("May 1, 2025 00:00:00").getTime();
      const now = new Date().getTime();
      const distance = countDownDate - now;

      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);

      document.getElementById("days").textContent = days.toString().padStart(2, "0");
      document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
      document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
      document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0");

      if (distance < 0) {
        clearInterval(countdownTimer);
        document.querySelector(".countdown-container").innerHTML = `
          <h2 class="drop-live">Drop Live! Reserve Now</h2>
          <p class="limited-stock">Last few pairs remaining!</p>
        `;
      }
    }

    // Initialize Countdown
    const countdownTimer = setInterval(updateCountdown, 1000);
    updateCountdown(); // Initial call

    // Scroll Reveal Animations
    const revealElements = document.querySelectorAll('.reveal');
    const revealObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.15 });

    revealElements.forEach(element => revealObserver.observe(element));

    // Set Active Navigation Link
    document.querySelectorAll('.nav-links a').forEach(link => {
      if(link.href === window.location.href) {
        link.classList.add('active');
      }
    });
  </script>
</body>
</html>
