<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GiftLux – Luxury Gifting | Gravixx Innovations Pvt. Ltd.</title>
  <meta name="description" content="Curating the world's finest luxury gifts. Gravixx Innovations Pvt. Ltd.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <style>
    /* Mobile-Specific Dropdown Fixes */
    .mobile-dropdown-content {
      display: none;
      background: #ffffff; /* Make it white */
      flex-direction: column;
      padding-left: 0; /* Align perfectly */
      border-radius: 8px;
      margin-top: 5px;
    }
    .mobile-dropdown-content.active {
      display: flex;
    }
    /* Force links inside the white box to be black */
    .mobile-dropdown-content a {
      color: #000000 !important;
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
      text-transform: none; /* Looks cleaner */
    }
    .mobile-drop-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-drop-btn svg {
      transition: transform 0.3s ease;
    }
    .mobile-drop-btn.active svg {
      transform: rotate(180deg);
    }
</style>
</head>
<body>

<nav id="navbar" class="transparent">
  <div class="nav-inner">
    <button class="nav-logo" onclick="navigate('home')">
      <img src="images/logo.png" alt="Gravixx Innovations Pvt. Ltd.">
    </button>
    
    <div class="nav-links">
      <button onclick="navigate('home')">HOME</button>
      <button onclick="goToSection('about')">ABOUT US</button>
      <button onclick="goToSection('services')">SERVICES</button>
      <button onclick="goToSection('products')">PRODUCTS</button>
      <button onclick="goToSection('contact')">CONTACT US</button>

      <div class="dropdown">
        <button class="dropbtn highlight-btn">CUSTOM DESIGN <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><path d="M6 9l6 6 6-6"/></svg></button>
        <div class="dropdown-content">
          <a href="3d-laser-engraving.html">3D Laser Engraving</a>
          <a href="3d-printing.html">3D Printing</a>
          <a href="personalized-gifting.html">Personalize Gifting</a>
          <a href="corporate-gifting-custom.html">Corporate Gifting</a>
          <a href="cad-3d-modelling.html">CAD 3D Modelling</a>
        </div>
      </div>
    </div>

    <div class="nav-actions">
      <button id="cart-btn" onclick="openCart()" title="View Cart">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
          <line x1="3" y1="6" x2="21" y2="6"/>
          <path d="M16 10a4 4 0 01-8 0"/>
        </svg>
        <span id="cart-badge">0</span>
      </button>
      <button class="hamburger" onclick="toggleMobileMenu()" aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</nav>

<div id="mobile-menu">
  <button onclick="navigate('home')">Home</button>
  <button onclick="goToSection('about')">About Us</button>
  <button onclick="goToSection('services')">Services</button>
  <button onclick="goToSection('products')">Products</button>
  <button onclick="goToSection('contact')">Contact</button>
  
  <button class="mobile-drop-btn" onclick="toggleMobileDropdown(this)">
    Custom Design 
    <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M6 9l6 6 6-6"/></svg>
  </button>
  <div class="mobile-dropdown-content" id="mobile-custom-links">
    <a href="3d-laser-engraving.html">3D Laser Engraving</a>
    <a href="3d-printing.html">3D Printing</a>
    <a href="personalized-gifting.html">Personalize Gifting</a>
    <a href="corporate-gifting-custom.html">Corporate Gifting</a>
    <a href="cad-3d-modelling.html">CAD 3D Modelling</a>
  </div>
</div>

<div id="view-home" class="view">

  <div id="hero">
    <div id="hero-slides"></div>
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <span class="hero-label">Welcome to GiftLux</span>
      <h1 class="hero-title">The Art of Gifting</h1>
      <p class="hero-sub">Curated luxury for every occasion. Experience the joy of giving with our bespoke collection of premium gifts.</p>
      <button class="hero-btn" onclick="goToSection('products')">Explore Collection</button>
    </div>
    <div id="hero-dots" class="hero-dots"></div>
  </div>

  <section id="features">
    <div class="container">
      <div class="features-grid">
        <div class="feature-item">
          <div class="feature-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M20 12V22H4V12"/><path d="M22 7H2v5h20V7z"/>
              <path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z"/>
              <path d="M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"/>
            </svg>
          </div>
          <h3>Bespoke Curation</h3>
          <p>Every item is hand-selected for its exceptional quality and craftsmanship.</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <circle cx="12" cy="8" r="6"/>
              <path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
            </svg>
          </div>
          <h3>Premium Quality</h3>
          <p>We partner only with the world's most prestigious luxury brands.</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
            </svg>
          </div>
          <h3>Concierge Service</h3>
          <p>Personalized assistance for corporate orders and special requests.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="products">
    <div class="container">
      <span class="section-label">Curated for You</span>
      <h2 class="section-title serif">Our Luxury Collection</h2>
      <p class="section-sub">Handpicked gifts for every celebration, crafted with the finest materials.</p>
      <div id="products-grid" class="products-grid"></div>
    </div>
  </section>

  <section id="about">
    <div class="container">
      <div class="about-grid">
        <div class="about-text">
          <span class="section-label">Our Story</span>
          <h2 class="about-title">Crafting Moments That Last Forever</h2>
          <p class="about-desc">At Gravixx Innovations, we believe that a gift is more than just an object — it is a memory, an emotion, and a story. Since our founding, we have curated the world's most exquisite luxury gifts to help you express what words cannot.</p>
          <p class="about-desc">Each product in our collection is hand-selected by our team of experts, ensuring that every gift embodies the highest standards of craftsmanship, elegance, and meaning.</p>
          <div class="about-stats">
            <div><span class="stat-num">500+</span><div class="stat-label">Premium Products</div></div>
            <div><span class="stat-num">10K+</span><div class="stat-label">Happy Clients</div></div>
            <div><span class="stat-num">50+</span><div class="stat-label">Cities Served</div></div>
          </div>
        </div>
        <div class="about-img">
          <img src="images/product-6.png" alt="Luxury gifting">
        </div>
      </div>
    </div>
  </section>

  <section id="contact">
    <div class="container">
      <div class="contact-grid">
        <div class="contact-info">
          <span class="section-label">Get in Touch</span>
          <h2 class="contact-info-title">We'd Love to Hear From You</h2>
          <p style="color:var(--muted);line-height:1.7;margin-top:10px;">For bespoke orders, corporate gifting, or any assistance, our concierge team is at your service.</p>
          <div class="contact-detail">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
            <span>Gravixx Innovations Pvt. Ltd., India</span>
          </div>
          <div class="contact-detail">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.22 2.18 2 2 0 012.18 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
            <a href="tel:+919999999999">+91 99999 99999</a>
          </div>
          <div class="contact-detail">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            <a href="mailto:info@gravixx.com">info@gravixx.com</a>
          </div>
        </div>
        <form id="contact-form" class="contact-form">
          <div class="form-row">
            <input type="text" name="name" placeholder="Your Name" required>
            <input type="email" name="email" placeholder="Email Address" required>
          </div>
          <input type="tel" name="phone" placeholder="Phone Number">
          <input type="text" name="subject" placeholder="Subject">
          <textarea name="message" placeholder="Your message..." rows="4" required></textarea>
          <button type="submit" class="btn-primary">Send Message</button>
        </form>
      </div>
    </div>
  </section>

</div>

<div id="view-product" class="view hidden"></div>
<div id="view-shipping" class="view hidden"></div>
<div id="view-returns" class="view hidden"></div>

<div id="view-success" class="view hidden">
  <div style="text-align: center; padding: 60px 20px;">
    <div class="success-icon" style="margin-bottom: 20px; color: #BB9122;">
      <svg viewBox="0 0 24 24" width="80" height="80" fill="none" stroke="currentColor" stroke-width="1.8">
        <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
      </svg>
    </div>
    <h1>Order Confirmed!</h1>
    <p>Thank you for your purchase. Your luxury gifts are being lovingly prepared and will be dispatched soon.</p>
    <button class="btn-continue" onclick="navigate('home')" style="margin-top: 20px; padding: 12px 30px; background: #111; color: #fff; border: none; cursor: pointer;">Continue Shopping</button>
  </div>
</div>

<footer>
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <img src="images/logo.png" alt="Gravixx Innovations Pvt. Ltd.">
        <p>Curating the world's finest luxury gifts for those who appreciate the extraordinary.</p>
        <div class="footer-socials">
          <a href="https://instagram.com" target="_blank" rel="noopener" class="social-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><circle cx="17.5" cy="6.5" r="1"/></svg>
          </a>
          <a href="https://facebook.com" target="_blank" rel="noopener" class="social-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
          </a>
          <a href="https://twitter.com" target="_blank" rel="noopener" class="social-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/></svg>
          </a>
        </div>
      </div>
      <div class="footer-col">
        <h3>Quick Links</h3>
        <ul>
          <li><button onclick="navigate('home')">Home</button></li>
          <li><button onclick="goToSection('products')">Products</button></li>
          <li><button onclick="goToSection('about')">About Us</button></li>
          <li><button onclick="goToSection('contact')">Contact</button></li>
        </ul>
      </div>
      <div class="footer-col">
        <h3>Customer Care</h3>
        <ul>
          <li><button onclick="renderShipping()">Shipping &amp; Delivery</button></li>
          <li><button onclick="renderReturns()">Returns &amp; Exchanges</button></li>
          <li><a href="#">Corporate Gifting</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h3>Contact Us</h3>
        <div class="footer-contact-row">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
          <span>Gravixx Innovations Pvt. Ltd., India</span>
        </div>
        <div class="footer-contact-row">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.22 2.18 2 2 0 012.18 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
          <a href="tel:+919999999999">+91 99999 99999</a>
        </div>
        <div class="footer-contact-row">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          <a href="mailto:info@gravixx.com">info@gravixx.com</a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <span>&copy; 2026 Gravixx Innovations Pvt. Ltd. All rights reserved.</span>
      <div class="footer-bottom-links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

<div id="cart-overlay"></div>
<div id="cart-drawer">
  <div class="cart-hdr">
    <h2 class="serif">Your Cart</h2>
    <button class="cart-close" onclick="closeCart()">&#10005;</button>
  </div>
  <div class="cart-items" id="cart-list"></div>
  <div class="cart-ftr" id="cart-ftr" style="display:none;">
    <div class="cart-total-row">
      <strong class="serif">Total</strong>
      <span class="cart-total-price" id="cart-total">&#8377;0</span>
    </div>
    <button class="btn-checkout" onclick="openCheckout()">Proceed to Checkout</button>
  </div>
</div>

<div id="co-overlay">
  <div id="co-modal">
    <div class="co-hdr">
      <h2 class="serif">Checkout</h2>
      <button class="co-close" onclick="closeCheckout()">&#10005;</button>
    </div>
    <div class="co-body">
      <div id="co-summary" class="co-summary"></div>
      <form id="co-form">
        <label for="co-name">Full Name</label>
        <input type="text" id="co-name" placeholder="Your full name" required>
        <label for="co-email">Email Address</label>
        <input type="email" id="co-email" placeholder="you@email.com" required>
        <label for="co-phone">Phone Number</label>
        <input type="tel" id="co-phone" placeholder="+91 XXXXX XXXXX" required>
        <label for="co-address">Full Shipping Address</label>
        <textarea id="co-address" placeholder="Flat No, Building, Area, City, PIN Code" required rows="3"></textarea>
        <button type="submit" class="btn-pay" id="pay-btn">Pay Now</button>
      </form>
    </div>
  </div>
</div>

<div id="toasts"></div>

<script src="script.js"></script>
<script>
  // Script to handle mobile dropdown toggle
  function toggleMobileDropdown(btn) {
    const content = document.getElementById('mobile-custom-links');
    btn.classList.toggle('active');
    content.classList.toggle('active');
  }
</script>
</body>
</html>