<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Security Headers are now handled in inc/header.php via secure.php

require_once __DIR__ . '/admin-panal/includes/db.php';

// ── Fetch Hero Slides ──
$stmtHero = $pdo->query("SELECT * FROM hero_slides WHERE is_active = 1 ORDER BY sort_order ASC, created_at DESC");
$heroSlides = $stmtHero->fetchAll(PDO::FETCH_ASSOC);

// ── Fetch Promise Bar ──
$stmtPromise = $pdo->query("SELECT * FROM promise_bar WHERE is_active = 1 ORDER BY sort_order ASC, created_at DESC");
$promiseBar = $stmtPromise->fetchAll(PDO::FETCH_ASSOC);

// ── Fetch Editorial Banner ──
$stmtEd = $pdo->query("SELECT * FROM editorial_banner WHERE is_active = 1 LIMIT 1");
$editorialBanner = $stmtEd->fetch(PDO::FETCH_ASSOC);

// ── Fetch Video Reel ──
$stmtVid = $pdo->query("SELECT * FROM video_reel WHERE is_active = 1 ORDER BY sort_order ASC, created_at DESC");
$videoReels = $stmtVid->fetchAll(PDO::FETCH_ASSOC);

// ── Fetch categories with their first product image ──
$stmtCats = $pdo->query("
    SELECT c.*, 
           (SELECT p.design_swatches FROM products p WHERE FIND_IN_SET(c.id, p.category_id) AND p.is_active = 1 LIMIT 1) AS sample_swatch
    FROM categories c 
    ORDER BY c.sort_order, c.name
");
$homeCategories = $stmtCats->fetchAll(PDO::FETCH_ASSOC);

// ── Fetch New Arrivals (latest 8 active products) ──
$stmtNew = $pdo->query("
    SELECT p.*, c.name AS category_name 
    FROM products p 
    LEFT JOIN categories c ON c.id = CAST(SUBSTRING_INDEX(p.category_id, ',', 1) AS UNSIGNED) 
    WHERE p.is_active = 1 
    ORDER BY p.created_at DESC 
    LIMIT 8
");
$newArrivals = $stmtNew->fetchAll(PDO::FETCH_ASSOC);

// ── Fetch Best Sellers (products with badge or fallback) ──
$stmtBest = $pdo->prepare("
    SELECT p.*, c.name AS category_name 
    FROM products p 
    LEFT JOIN categories c ON c.id = CAST(SUBSTRING_INDEX(p.category_id, ',', 1) AS UNSIGNED) 
    WHERE p.is_active = 1 
    ORDER BY RAND() 
    LIMIT 8
");
$stmtBest->execute();
$bestSellers = $stmtBest->fetchAll(PDO::FETCH_ASSOC);

// Helper: get first swatch image from product
function getProductImage($product, $index = 0) {
    $swatches = json_decode($product['design_swatches'] ?? '[]', true);
    if (empty($swatches)) return 'assets/placeholder-product.jpg';
    
    // Support refined structure: thumb or gallery
    $sw = $swatches[0]; // Primary swatch
    if ($index > 0 && !empty($sw['gallery']) && isset($sw['gallery'][$index-1])) {
        return $sw['gallery'][$index-1]; // Hover image from gallery
    }
    
    if (!empty($sw['thumb'])) return $sw['thumb'];
    if (!empty($sw['src'])) return $sw['src']; // Old format fallback
    if (!empty($sw['gallery'])) return $sw['gallery'][0];
    
    return 'assets/placeholder-product.jpg';
}

function getProductVideo($product) {
    $swatches = json_decode($product['design_swatches'] ?? '[]', true);
    if (empty($swatches)) return '';
    $sw = $swatches[0];
    if (!empty($sw['videos'][0])) return $sw['videos'][0];
    return '';
}

function getCategoryImage($cat) {
    if (!empty($cat['image'])) {
        return 'assets/uploads/categories/' . $cat['image'];
    }
    $swatches = json_decode($cat['sample_swatch'] ?? '[]', true);
    if (empty($swatches)) return 'assets/placeholder-product.jpg';
    
    $sw = $swatches[0];
    if (!empty($sw['thumb'])) return $sw['thumb'];
    if (!empty($sw['src'])) return $sw['src'];
    if (!empty($sw['gallery'])) return $sw['gallery'][0];
    
    return 'assets/placeholder-product.jpg';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-Z2X2T395KZ');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Elegance of India — South Asian Luxury Fashion</title>
  <meta name="description" content="Discover premium South Asian luxury fashion. Shop curated collections of Salwar Kameez, Sarees, Lehengas, and more at Elegance of India." />
  <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=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />
  <style>
    /* ── HOMEPAGE-SPECIFIC STYLES ── */

    /* Hero Slider Enhanced */
    .hero-slider { position: relative; width: 100%; height: 100vh; min-height: 700px; max-height: 1400px; overflow: hidden; }
    .hero-slide {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      opacity: 0; transition: opacity 1.4s ease;
      display: flex; align-items: center; justify-content: flex-start;
    }
    .hero-slide.active { opacity: 1; z-index: 2; }
    .hero-slide__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
    }
    .hero-slide__content {
      position: relative; z-index: 3;
      padding-left: clamp(32px, 8vw, 140px);
      color: #fff; max-width: 650px;
    }
    .hero-slide__kicker {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--gold-lt); margin-bottom: 20px;
      opacity: 0; transform: translateY(20px);
      animation: heroFadeIn 0.8s 0.3s forwards;
    }
    .hero-slide__title {
      font-size: clamp(2.8rem, 6vw, 5rem);
      font-weight: 300; line-height: 1.08;
      margin-bottom: 18px; letter-spacing: -0.01em;
      opacity: 0; transform: translateY(30px);
      animation: heroFadeIn 0.8s 0.5s forwards;
    }
    .hero-slide__title span { color: var(--gold-lt); font-weight: 400; }
    .hero-slide__desc {
      font-size: 15px; letter-spacing: 0.04em;
      opacity: 0; line-height: 1.7; margin-bottom: 36px;
      transform: translateY(20px);
      animation: heroFadeIn 0.8s 0.7s forwards;
    }
    .hero-slide__cta {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 15px 38px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      background: var(--gold); color: #fff; border: none;
      text-decoration: none; transition: all 0.35s ease;
      opacity: 0; transform: translateY(20px);
      animation: heroFadeIn 0.8s 0.9s forwards;
    }
    .hero-slide__cta:hover { background: #fff; color: var(--black); letter-spacing: 0.28em; }
    .hero-slide__cta i { font-size: 10px; transition: transform 0.3s; }
    .hero-slide__cta:hover i { transform: translateX(4px); }
    @keyframes heroFadeIn {
      to { opacity: 1; transform: translateY(0); }
    }

    /* Hero Nav */
    .hero-nav {
      position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
      z-index: 10; display: flex; gap: 10px;
    }
    .hero-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,0.35); border: 2px solid rgba(255,255,255,0.5);
      cursor: pointer; transition: all 0.35s ease;
    }
    .hero-dot.active { background: var(--gold); border-color: var(--gold); width: 32px; border-radius: 5px; }
    .hero-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      z-index: 10; width: 52px; height: 52px;
      background: rgba(255,255,255,0.08); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.2); color: #fff;
      font-size: 16px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.35s ease;
    }
    .hero-arrow:hover { background: var(--gold); border-color: var(--gold); }
    .hero-arrow--prev { left: 24px; }
    .hero-arrow--next { right: 24px; }

    /* Promise Bar */
    .home-promise {
      border-top: 1px solid var(--mid-gray); border-bottom: 1px solid var(--mid-gray);
      background: var(--white);
    }
    .home-promise__list {
      display: grid; grid-template-columns: repeat(4, 1fr);
      list-style: none; margin: 0; padding: 0;
    }
    .home-promise__item {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      padding: 24px 16px; text-align: center;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--charcoal); border-right: 1px solid var(--mid-gray);
      transition: background 0.3s;
    }
    .home-promise__item:last-child { border-right: none; }
    .home-promise__item:hover { background: var(--warm-gray); }
    .home-promise__item i { color: var(--gold); font-size: 18px; flex-shrink: 0; }

    /* Section Heading — Refined */
    .home-section { padding: 80px 0; }
    .home-section__header {
      text-align: center; margin-bottom: 48px;
    }
    .home-section__kicker {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 12px;
    }
    .home-section__title {
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 300; color: var(--black);
      letter-spacing: 0.02em; margin-bottom: 14px;
    }
    .home-section__rule {
      width: 50px; height: 2px;
      background: var(--gold); margin: 0 auto 16px;
    }
    .home-section__desc {
      font-size: 14px; color: #888;
      letter-spacing: 0.04em; max-width: 500px; margin: 0 auto;
    }

    /* Category Slider Implementation */
    .home-cats { background: var(--warm-gray); position: relative; }
    .home-cats__wrapper {
      position: relative;
      margin: 0 auto;
    }
    .home-cats__viewport {
      overflow: hidden;
      margin: 0 -10px; /* offset card padding */
    }
    .home-cats__track {
      display: flex;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }
    .home-cat-card {
      flex: 0 0 20%; /* 5 per view */
      padding: 0 10px;
      text-decoration: none; color: inherit;
      position: relative; overflow: hidden;
      display: block;
    }
    .home-cat-card__inner {
      background: #fff;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      height: 100%;
    }
    .home-cat-card:hover .home-cat-card__inner { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
    .home-cat-card__img {
      aspect-ratio: 3/4; overflow: hidden; background: var(--mid-gray);
    }
    .home-cat-card__img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.7s ease;
    }
    .home-cat-card:hover .home-cat-card__img img { transform: scale(1.08); }
    .home-cat-card__label {
      padding: 16px 14px; text-align: center;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .home-cat-card__name {
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--charcoal); transition: color 0.3s;
    }
    .home-cat-card:hover .home-cat-card__name { color: var(--gold); }
    
    /* Slider Nav Buttons */
    .cat-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      background: #fff;
      border: 1px solid var(--mid-gray);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: all 0.3s;
      color: var(--charcoal);
    }
    .cat-nav-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
    .cat-nav-btn--prev { left: -22px; }
    .cat-nav-btn--next { right: -22px; }
    @media (max-width: 1200px) {
      .cat-nav-btn--prev { left: 5px; }
      .cat-nav-btn--next { right: 5px; }
    }
    .home-cat-card__arrow {
      font-size: 10px; color: var(--gold);
      opacity: 0; transform: translateX(-6px);
      transition: all 0.3s;
    }
    .home-cat-card:hover .home-cat-card__arrow { opacity: 1; transform: translateX(0); }

    /* Product Grid — Homepage */
    .home-products__grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .home-product-card {
      display: block; text-decoration: none; color: inherit;
      position: relative;
    }
    .home-product-card__img {
      position: relative; overflow: hidden;
      aspect-ratio: 3/4; background: var(--warm-gray);
    }
    .home-product-card__img img,
    .home-product-card__img video {
      width: 100%; height: 100%; object-fit: contain;
      transition: transform 0.7s ease; display: block;
    }
    .home-product-card__hover-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      opacity: 0; transition: opacity 0.5s ease;
    }
    .home-product-card:hover .home-product-card__hover-img { opacity: 1; }
    .home-product-card:hover .home-product-card__img img:first-child { transform: scale(1.04); }
    .home-product-card__badge {
      position: absolute; top: 12px; left: 12px;
      background: var(--black); color: #fff;
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 5px 12px; z-index: 1;
    }
    .home-product-card__badge--gold { background: var(--gold); }
    .home-product-card__wish {
      position: absolute; top: 12px; right: 12px;
      width: 34px; height: 34px;
      background: #fff; border-radius: 50%; border: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; color: var(--charcoal);
      cursor: pointer; z-index: 1;
      opacity: 0; transform: translateY(-6px);
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .home-product-card:hover .home-product-card__wish { opacity: 1; transform: translateY(0); }
    .home-product-card__wish:hover { color: #c0392b; }
    .home-product-card__info { padding: 14px 2px 6px; }
    .home-product-card__sku {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 5px;
    }
    .home-product-card__name {
      font-size: 0.95rem; font-weight: 400;
      color: var(--black); margin-bottom: 6px;
      line-height: 1.35; transition: color 0.3s;
    }
    .home-product-card:hover .home-product-card__name { color: var(--gold-dk); }
    .home-product-card__price {
      font-size: 12px; font-weight: 600;
      color: var(--charcoal); letter-spacing: 0.04em;
    }

    /* View All Button */
    .home-view-all {
      text-align: center; margin-top: 48px;
    }
    .home-view-all__btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 42px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--charcoal); background: transparent;
      border: 2px solid var(--mid-gray);
      text-decoration: none; transition: all 0.35s;
    }
    .home-view-all__btn:hover {
      border-color: var(--black); color: #fff;
      background: var(--black);
    }
    .home-view-all__btn i { font-size: 10px; transition: transform 0.3s; }
    .home-view-all__btn:hover i { transform: translateX(4px); }

    /* Editorial Banner */
    .home-editorial {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 500px;
    }
    .home-editorial__img {
      overflow: hidden; position: relative;
    }
    .home-editorial__img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 1s ease; display: block;
    }
    .home-editorial:hover .home-editorial__img img { transform: scale(1.04); }
    .home-editorial__text {
      background: var(--black); color: #fff;
      display: flex; flex-direction: column;
      justify-content: center; padding: 60px 64px;
    }
    .home-editorial__kicker {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--gold-lt); margin-bottom: 24px;
    }
    .home-editorial__title {
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 300; line-height: 1.15;
      margin-bottom: 20px; letter-spacing: 0.01em;
    }
    .home-editorial__title span { color: var(--gold-lt); }
    .home-editorial__desc {
      font-size: 14px; line-height: 1.8;
      color: rgba(255,255,255,0.65); margin-bottom: 36px;
      max-width: 380px;
    }
    .home-editorial__cta {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 36px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      background: var(--gold); color: #fff; border: none;
      text-decoration: none; transition: all 0.35s;
      width: fit-content;
    }
    .home-editorial__cta:hover { background: var(--gold-dk); letter-spacing: 0.26em; }

    /* Newsletter */
    .home-newsletter {
      background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
      padding: 80px 0;
    }
    .home-newsletter__inner {
      display: flex; align-items: center;
      justify-content: space-between; gap: 48px;
    }
    .home-newsletter__text h2 {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 300; color: #fff;
      margin-bottom: 10px; letter-spacing: 0.02em;
    }
    .home-newsletter__text h2 span { color: var(--gold-lt); }
    .home-newsletter__text p {
      font-size: 13px; color: rgba(255,255,255,0.5);
      max-width: 380px; line-height: 1.6;
    }
    .home-newsletter__form {
      display: flex; gap: 0; flex-shrink: 0;
    }
    .home-newsletter__form input {
      width: 300px; padding: 15px 20px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-right: none; color: #fff;
      font-size: 13px; outline: none;
      transition: border-color 0.3s;
    }
    .home-newsletter__form input::placeholder { color: rgba(255,255,255,0.35); }
    .home-newsletter__form input:focus { border-color: var(--gold); }
    .home-newsletter__form button {
      padding: 15px 28px;
      background: var(--gold); color: #fff;
      border: 1px solid var(--gold);
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      cursor: pointer; transition: all 0.3s;
    }
    .home-newsletter__form button:hover { background: var(--gold-dk); border-color: var(--gold-dk); }
    
    /* Video Reel Slider Styles */
    .video-reel { position: relative; overflow: hidden; padding: 0; background: #000; }
    .video-reel__wrapper { position: relative; width: 100%; margin: 0; padding: 0; }
    .video-reel__viewport { overflow: hidden; margin: 0; }
    .video-reel__track {
      display: flex;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }
    .video-reel__item {
      flex: 0 0 calc(100% / 4);
      padding: 0;
      box-sizing: border-box;
    }
    @media (max-width: 1024px) { .video-reel__item { flex: 0 0 33.333%; } }
    @media (max-width: 768px) { .video-reel__item { flex: 0 0 50%; } }
    @media (max-width: 480px) { .video-reel__item { flex: 0 0 100%; } }

    .video-reel__item video {
      width: 100%;
      aspect-ratio: 9/16;
      object-fit: cover;
      border-radius: 0;
      background: #000;
      display: block;
    }
    .video-nav-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 50px; height: 50px; background: rgba(255,255,255,0.2); border: none;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 10; backdrop-filter: blur(8px);
      transition: all 0.3s; color: #fff;
    }
    .video-nav-btn:hover { background: rgba(255,255,255,0.4); scale: 1.1; }
    .video-nav-btn--prev { left: 20px; }
    .video-nav-btn--next { right: 20px; }

    /* Scroll Reveal Animation */
    // ── Reveal on Scroll ──
    .reveal-on-scroll {
      opacity: 0; transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal-on-scroll.revealed {
      opacity: 1; transform: translateY(0);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .hero-slider { height: 80vh; min-height: 500px; }
      .home-products__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .home-editorial { grid-template-columns: 1fr; }
      .home-editorial__img { height: 350px; }
      .home-editorial__text { padding: 48px 40px; }
      .hero-arrow { display: none; }
    }

    @media (max-width: 768px) {
      .hero-slider { height: 50vh; min-height: auto; }
      .hero-slide { background-size: contain; background-repeat: no-repeat; background-position: center; }
      .hero-slide__content { padding-left: 24px; padding-right: 24px; }
      .hero-slide__title { font-size: clamp(2rem, 8vw, 3rem); }
      .hero-slide__desc { font-size: 13px; margin-bottom: 24px; }
      .hero-slide__cta { padding: 12px 28px; font-size: 10px; }
      .home-promise__list { grid-template-columns: repeat(2, 1fr); }
      .home-promise__item { padding: 18px 12px; font-size: 10px; }
      .home-promise__item:nth-child(2) { border-right: none; }
      .home-cats__track { gap: 0; }
      .home-cat-card { flex: 0 0 33.333%; }
      .home-section { padding: 56px 0; }
      .home-editorial__text { padding: 36px 24px; }
      .home-newsletter__inner { flex-direction: column; text-align: center; gap: 28px; }
      .home-newsletter__text p { margin: 0 auto; }
      .home-newsletter__form { width: 100%; max-width: 420px; }
      .home-newsletter__form input { flex: 1; width: auto; min-width: 0; }
    }

    @media (max-width: 480px) {
      .hero-slider { height: 40vh; min-height: auto; }
      .hero-slide { background-size: contain; background-repeat: no-repeat; background-position: center; }
      .hero-slide__kicker { font-size: 9px; }
      .hero-slide__title { font-size: 1.8rem; }
      .hero-slide__desc { display: none; }
      .home-promise__list { grid-template-columns: repeat(2, 1fr); }
      .home-promise__item { font-size: 9px; gap: 8px; padding: 14px 10px; letter-spacing: 0.06em; }
      .home-cat-card { flex: 0 0 50%; }
      .home-cat-card__label { padding: 10px 8px; }
      .home-cat-card__name { font-size: 11px; letter-spacing: 0.06em; }
      .home-products__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .home-product-card__info { padding: 10px 2px 4px; }
      .home-product-card__name { font-size: 0.82rem; }
      .home-product-card__price { font-size: 11px; }
      .home-section__title { font-size: 1.5rem; }
      .home-newsletter__form { flex-direction: column; }
      .home-newsletter__form input { border-right: 1px solid rgba(255,255,255,0.15); width: 100%; }
      .home-newsletter__form button { width: 100%; }
    }

    /* New Arrivals Slider Styles */
    .home-arrivals { position: relative; }
    .home-arrivals__wrapper { position: relative; margin: 0 auto; }
    .home-arrivals__viewport { overflow: hidden; margin: 0 -12px; }
    .home-arrivals__track {
      display: flex;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }
    .home-arrival-item {
      flex: 0 0 25%; /* 4 per view on desktop */
      padding: 0 12px;
      box-sizing: border-box;
    }
    @media (max-width: 1024px) { .home-arrival-item { flex: 0 0 33.333%; } }
    @media (max-width: 768px) { .home-arrival-item { flex: 0 0 50%; } }
    @media (max-width: 480px) { .home-arrival-item { flex: 0 0 50%; padding: 0 5px; } .home-arrivals__viewport { margin: 0 -5px; } }

    .arrival-nav-btn {
      position: absolute; top: 40%; transform: translateY(-50%);
      width: 44px; height: 44px; background: #fff; border: 1px solid var(--mid-gray);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: all 0.3s; color: var(--charcoal);
    }
    .arrival-nav-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
    .arrival-nav-btn--prev { left: -22px; }
    .arrival-nav-btn--next { right: -22px; }
    @media (max-width: 1250px) {
      .arrival-nav-btn--prev { left: 10px; }
      .arrival-nav-btn--next { right: 10px; }
    }
    /* Best Sellers Slider Styles */
    .home-best { position: relative; }
    .home-best__wrapper { position: relative; margin: 0 auto; }
    .home-best__viewport { overflow: hidden; margin: 0 -12px; }
    .home-best__track {
      display: flex;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }
    .home-best-item {
      flex: 0 0 25%; /* 4 per view on desktop */
      padding: 0 12px;
      box-sizing: border-box;
    }
    @media (max-width: 1024px) { .home-best-item { flex: 0 0 33.333%; } }
    @media (max-width: 768px) { .home-best-item { flex: 0 0 50%; } }
    @media (max-width: 480px) { .home-best-item { flex: 0 0 50%; padding: 0 5px; } .home-best__viewport { margin: 0 -5px; } }

    .best-nav-btn {
      position: absolute; top: 40%; transform: translateY(-50%);
      width: 44px; height: 44px; background: #fff; border: 1px solid var(--mid-gray);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: all 0.3s; color: var(--charcoal);
    }
    .best-nav-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
    .best-nav-btn--prev { left: -22px; }
    .best-nav-btn--next { right: -22px; }
    @media (max-width: 1250px) {
      .best-nav-btn--prev { left: 10px; }
      .best-nav-btn--next { right: 10px; }
    }
  </style>
</head>
<body>

  <?php include 'inc/header.php'; ?>

  <!-- ═══════════════════════  HERO SLIDER  ═══════════════════════ -->
  <section class="hero-slider" id="heroSlider">
    <?php foreach ($heroSlides as $index => $slide): ?>
      <div class="hero-slide <?= $index === 0 ? 'active' : '' ?>" style="background-image: url('<?= htmlspecialchars($slide['image_path']) ?>')">
        <?php if (!empty($slide['kicker']) || !empty($slide['title']) || !empty($slide['description']) || !empty($slide['cta_text'])): ?>
          <div class="hero-slide__overlay"></div>
          <div class="hero-slide__content">
            <?php if (!empty($slide['kicker'])): ?>
              <p class="hero-slide__kicker"><?= htmlspecialchars($slide['kicker']) ?></p>
            <?php endif; ?>
            <?php if (!empty($slide['title'])): ?>
              <h1 class="hero-slide__title"><?= $slide['title'] // allowing some basic HTML or span if needed, else strip_tags ?></h1>
            <?php endif; ?>
            <?php if (!empty($slide['description'])): ?>
              <p class="hero-slide__desc"><?= htmlspecialchars($slide['description']) ?></p>
            <?php endif; ?>
            <?php if (!empty($slide['cta_text'])): ?>
              <a href="<?= htmlspecialchars($slide['cta_link'] ?: '#') ?>" class="hero-slide__cta">
                <?= htmlspecialchars($slide['cta_text']) ?> <i class="fas fa-arrow-right"></i>
              </a>
            <?php endif; ?>
          </div>
        <?php endif; ?>
      </div>
    <?php endforeach; ?>

    <?php if (count($heroSlides) > 1): ?>
      <button class="hero-arrow hero-arrow--prev" id="heroPrev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
      <button class="hero-arrow hero-arrow--next" id="heroNext" aria-label="Next"><i class="fas fa-chevron-right"></i></button>

      <div class="hero-nav" id="heroNav">
        <?php foreach ($heroSlides as $index => $slide): ?>
          <div class="hero-dot <?= $index === 0 ? 'active' : '' ?>" data-slide="<?= $index ?>"></div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </section>

  <!-- ═══════════════════════  PROMISE BAR  ═══════════════════════ -->
  <?php if (!empty($promiseBar)): ?>
  <section class="home-promise">
    <ul class="home-promise__list">
      <?php foreach ($promiseBar as $promise): ?>
        <li class="home-promise__item"><i class="<?= htmlspecialchars($promise['icon']) ?>"></i> <?= htmlspecialchars($promise['text']) ?></li>
      <?php endforeach; ?>
    </ul>
  </section>
  <?php endif; ?>

  <!-- ═══════════════════════  DYNAMIC CATEGORIES  ═══════════════════════ -->
  <section class="home-section home-cats reveal-on-scroll">
    <div class="container">
      <div class="home-section__header">
        <p class="home-section__kicker">Collections</p>
        <h2 class="home-section__title">Explore By Category</h2>
        <div class="home-section__rule"></div>
        <p class="home-section__desc">Discover our curated world of South Asian luxury fashion</p>
      </div>
      <div class="home-cats__wrapper">
        <button class="cat-nav-btn cat-nav-btn--prev" id="catPrev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
        <div class="home-cats__viewport">
          <div class="home-cats__track" id="catTrack">
            <?php foreach ($homeCategories as $cat): ?>
              <a href="shop.php?cat=<?= $cat['id'] ?>" class="home-cat-card">
                <div class="home-cat-card__inner">
                  <div class="home-cat-card__img">
                    <img src="<?= htmlspecialchars(getCategoryImage($cat)) ?>" alt="<?= htmlspecialchars($cat['name']) ?>" loading="lazy" />
                  </div>
                  <div class="home-cat-card__label">
                    <span class="home-cat-card__name"><?= htmlspecialchars($cat['name']) ?></span>
                    <i class="fas fa-arrow-right home-cat-card__arrow"></i>
                  </div>
                </div>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
        <button class="cat-nav-btn cat-nav-btn--next" id="catNext" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════  NEW ARRIVALS  ═══════════════════════ -->
  <?php if (!empty($newArrivals)): ?>
  <section class="home-section home-arrivals reveal-on-scroll">
    <div class="container">
      <div class="home-section__header">
        <p class="home-section__kicker">Just Landed</p>
        <h2 class="home-section__title">New Arrivals</h2>
        <div class="home-section__rule"></div>
        <p class="home-section__desc">The latest additions to our luxury collection</p>
      </div>

      <div class="home-arrivals__wrapper">
        <button class="arrival-nav-btn arrival-nav-btn--prev" id="arrivalPrev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
        <div class="home-arrivals__viewport">
          <div class="home-arrivals__track" id="arrivalTrack">
            <?php foreach ($newArrivals as $prod): ?>
              <div class="home-arrival-item">
                <a href="product.php?id=<?= $prod['id'] ?>" class="home-product-card">
                  <div class="home-product-card__img">
                    <?php 
                      $img1 = getProductImage($prod, 0);
                      $vid1 = ($img1 === 'assets/placeholder-product.jpg') ? getProductVideo($prod) : '';
                    ?>
                    <?php if ($vid1): ?>
                      <video src="<?= htmlspecialchars($vid1) ?>" autoplay muted loop playsinline></video>
                    <?php else: ?>
                      <img src="<?= htmlspecialchars($img1) ?>" alt="<?= htmlspecialchars($prod['name']) ?>" loading="lazy" />
                    <?php endif; ?>
                    <?php $hoverImg = getProductImage($prod, 1); ?>
                    <?php if (!$vid1 && $hoverImg !== $img1): ?>
                      <img class="home-product-card__hover-img" src="<?= htmlspecialchars($hoverImg) ?>" alt="hover" loading="lazy" />
                    <?php endif; ?>
                    <?php if (!empty($prod['badge_text'])): ?>
                      <span class="home-product-card__badge<?= ($prod['badge_color'] ?? '') === '#c9a96e' ? ' home-product-card__badge--gold' : '' ?>"
                            <?php if (!empty($prod['badge_color']) && $prod['badge_color'] !== '#c9a96e'): ?>style="background:<?= htmlspecialchars($prod['badge_color']) ?>"<?php endif; ?>>
                        <?= htmlspecialchars($prod['badge_text']) ?>
                      </span>
                    <?php else: ?>
                      <span class="home-product-card__badge home-product-card__badge--gold">New</span>
                    <?php endif; ?>
                    <button class="home-product-card__wish plp-card__wishlist" 
                            data-id="<?= (int)$prod['id'] ?>"
                            aria-label="Add to Wishlist" 
                            onclick="toggleWishlist(event, <?= htmlspecialchars(json_encode([
                              'id' => $prod['id'],
                              'name' => $prod['name'],
                              'price' => $prod['price_usd'],
                              'image' => $img1,
                              'sku' => $prod['sku'] ?? ($prod['category_name'] ?? '')
                            ])) ?>)">
                      <i class="far fa-heart"></i>
                    </button>
                  </div>
                  <div class="home-product-card__info">
                    <p class="home-product-card__sku"><?= htmlspecialchars($prod['sku']) ?></p>
                    <p class="home-product-card__name"><?= htmlspecialchars($prod['name']) ?></p>
                    <p class="home-product-card__price">USD <?= number_format($prod['price_usd'], 2) ?></p>
                  </div>
                </a>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
        <button class="arrival-nav-btn arrival-nav-btn--next" id="arrivalNext" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
      </div>

      <div class="home-view-all">
        <a href="shop.php" class="home-view-all__btn">View All Products <i class="fas fa-arrow-right"></i></a>
      </div>
    </div>
  </section>
  <?php endif; ?>

  <!-- ═══════════════════════  EDITORIAL BANNER  ═══════════════════════ -->
  <?php if (!empty($editorialBanner)): ?>
  <section class="home-editorial reveal-on-scroll">
    <div class="home-editorial__img">
      <img src="<?= htmlspecialchars($editorialBanner['image_path']) ?>" alt="Editorial" loading="lazy" />
    </div>
    <div class="home-editorial__text">
      <?php if (!empty($editorialBanner['kicker'])): ?>
        <p class="home-editorial__kicker"><?= htmlspecialchars($editorialBanner['kicker']) ?></p>
      <?php endif; ?>
      <?php if (!empty($editorialBanner['title'])): ?>
        <h2 class="home-editorial__title"><?= $editorialBanner['title'] ?></h2>
      <?php endif; ?>
      <?php if (!empty($editorialBanner['description'])): ?>
        <p class="home-editorial__desc"><?= htmlspecialchars($editorialBanner['description']) ?></p>
      <?php endif; ?>
      <?php if (!empty($editorialBanner['cta_text'])): ?>
        <a href="<?= htmlspecialchars($editorialBanner['cta_link'] ?: '#') ?>" class="home-editorial__cta"><?= htmlspecialchars($editorialBanner['cta_text']) ?> <i class="fas fa-arrow-right"></i></a>
      <?php endif; ?>
    </div>
  </section>
  <?php endif; ?>

  <!-- ═══════════════════════  BEST SELLERS  ═══════════════════════ -->
  <?php if (!empty($bestSellers)): ?>
  <section class="home-section home-best reveal-on-scroll">
    <div class="container">
      <div class="home-section__header">
        <p class="home-section__kicker">Most Loved</p>
        <h2 class="home-section__title">Best Sellers</h2>
        <div class="home-section__rule"></div>
        <p class="home-section__desc">Our community's favourite picks this season</p>
      </div>

      <div class="home-best__wrapper">
        <button class="best-nav-btn best-nav-btn--prev" id="bestPrev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
        <div class="home-best__viewport">
          <div class="home-best__track" id="bestTrack">
            <?php foreach ($bestSellers as $prod): ?>
              <div class="home-best-item">
                <a href="product.php?id=<?= $prod['id'] ?>" class="home-product-card">
                  <div class="home-product-card__img">
                    <?php 
                      $img1 = getProductImage($prod, 0);
                      $vid1 = ($img1 === 'assets/placeholder-product.jpg') ? getProductVideo($prod) : '';
                    ?>
                    <?php if ($vid1): ?>
                      <video src="<?= htmlspecialchars($vid1) ?>" autoplay muted loop playsinline></video>
                    <?php else: ?>
                      <img src="<?= htmlspecialchars($img1) ?>" alt="<?= htmlspecialchars($prod['name']) ?>" loading="lazy" />
                    <?php endif; ?>
                    <?php $hoverImg = getProductImage($prod, 1); ?>
                    <?php if (!$vid1 && $hoverImg !== $img1): ?>
                      <img class="home-product-card__hover-img" src="<?= htmlspecialchars($hoverImg) ?>" alt="hover" loading="lazy" />
                    <?php endif; ?>
                    <?php if (!empty($prod['badge_text'])): ?>
                      <span class="home-product-card__badge<?= ($prod['badge_color'] ?? '') === '#c9a96e' ? ' home-product-card__badge--gold' : '' ?>"
                            <?php if (!empty($prod['badge_color']) && $prod['badge_color'] !== '#c9a96e'): ?>style="background:<?= htmlspecialchars($prod['badge_color']) ?>"<?php endif; ?>>
                        <?= htmlspecialchars($prod['badge_text']) ?>
                      </span>
                    <?php else: ?>
                      <span class="home-product-card__badge home-product-card__badge--gold">Best Seller</span>
                    <?php endif; ?>
                    <button class="home-product-card__wish plp-card__wishlist" 
                            data-id="<?= (int)$prod['id'] ?>"
                            aria-label="Add to Wishlist" 
                            onclick="toggleWishlist(event, <?= htmlspecialchars(json_encode([
                              'id' => $prod['id'],
                              'name' => $prod['name'],
                              'price' => $prod['price_usd'],
                              'image' => $img1,
                              'sku' => $prod['sku'] ?? ($prod['category_name'] ?? '')
                            ])) ?>)">
                      <i class="far fa-heart"></i>
                    </button>
                  </div>
                  <div class="home-product-card__info">
                    <p class="home-product-card__sku"><?= htmlspecialchars($prod['sku']) ?></p>
                    <p class="home-product-card__name"><?= htmlspecialchars($prod['name']) ?></p>
                    <p class="home-product-card__price">USD <?= number_format($prod['price_usd'], 2) ?></p>
                  </div>
                </a>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
        <button class="best-nav-btn best-nav-btn--next" id="bestNext" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
      </div>

      <div class="home-view-all">
        <a href="shop.php" class="home-view-all__btn">Shop All Best Sellers <i class="fas fa-arrow-right"></i></a>
      </div>
    </div>
  </section>
  <?php endif; ?>

  <!-- ═══════════════════════  VIDEO REEL  ═══════════════════════ -->
  <?php if (!empty($videoReels)): ?>
  <section class="video-reel reveal-on-scroll">
    <div class="video-reel__wrapper">
      <button class="video-nav-btn video-nav-btn--prev" id="videoPrev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
      <div class="video-reel__viewport">
        <div class="video-reel__track" id="videoTrack">
          <?php foreach ($videoReels as $vid): ?>
            <div class="video-reel__item">
              <video src="<?= htmlspecialchars($vid['video_path']) ?>" autoplay muted loop playsinline></video>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
      <button class="video-nav-btn video-nav-btn--next" id="videoNext" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
    </div>
  </section>
  <?php endif; ?>

  <!-- ═══════════════════════  NEWSLETTER  ═══════════════════════ -->
  <!-- <section class="home-newsletter reveal-on-scroll">
    <div class="container">
      <div class="home-newsletter__inner">
        <div class="home-newsletter__text">
          <h2>Join the <span>Inner Circle</span></h2>
          <p>Be the first to know about new arrivals, exclusive offers, and styling inspiration.</p>
        </div>
        <form class="home-newsletter__form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Subscribed ✓';">
          <input type="email" placeholder="Your email address" required />
          <button type="submit">Subscribe</button>
        </form>
      </div>
    </div>
  </section> -->

  <?php include 'inc/footer.php'; ?>

  <script>
  // ── Hero Slider ──
  (function() {
    const slides = document.querySelectorAll('.hero-slide');
    const dots = document.querySelectorAll('.hero-dot');
    let current = 0;
    let interval;

    function goTo(idx) {
      slides.forEach((s, i) => {
        s.classList.toggle('active', i === idx);
        // Reset animations
        if (i === idx) {
          s.querySelectorAll('[class*="hero-slide__"]').forEach(el => {
            if (el.style) {
              el.style.animation = 'none';
              el.offsetHeight; // trigger reflow
              el.style.animation = '';
            }
          });
        }
      });
      dots.forEach((d, i) => d.classList.toggle('active', i === idx));
      current = idx;
    }

    function next() { goTo((current + 1) % slides.length); }
    function prev() { goTo((current - 1 + slides.length) % slides.length); }

    function startAuto() { interval = setInterval(next, 6000); }
    function stopAuto() { clearInterval(interval); }

    document.getElementById('heroNext')?.addEventListener('click', () => { stopAuto(); next(); startAuto(); });
    document.getElementById('heroPrev')?.addEventListener('click', () => { stopAuto(); prev(); startAuto(); });

    dots.forEach(dot => {
      dot.addEventListener('click', () => { stopAuto(); goTo(+dot.dataset.slide); startAuto(); });
    });

    startAuto();
  })();

  // ── Category Slider ──
  (function() {
    const track = document.getElementById('catTrack');
    const prev = document.getElementById('catPrev');
    const next = document.getElementById('catNext');
    if (!track || !prev || !next) return;

    let index = 0;
    let autoInterval;

    function getItemsPerView() {
      const w = window.innerWidth;
      if (w <= 480) return 2;
      if (w <= 1024) return 3;
      return 5;
    }

    function update() {
      const items = track.children.length;
      const perView = getItemsPerView();
      const max = Math.max(0, items - perView);
      
      if (index > max) index = max;
      if (index < 0) index = 0;

      const offset = (index * (100 / perView));
      track.style.transform = `translateX(-${offset}%)`;

      // Optional: hide/dim arrows
      prev.style.opacity = index === 0 ? '0.3' : '1';
      next.style.opacity = index >= max ? '0.3' : '1';
    }

    function slideNext() {
      const perView = getItemsPerView();
      const max = track.children.length - perView;
      if (index < max) {
        index++;
      } else {
        index = 0; // Loop back
      }
      update();
    }

    function slidePrev() {
      if (index > 0) {
        index--;
      } else {
        const perView = getItemsPerView();
        index = Math.max(0, track.children.length - perView); // Loop to end
      }
      update();
    }

    function startAuto() { stopAuto(); autoInterval = setInterval(slideNext, 5000); }
    function stopAuto() { clearInterval(autoInterval); }

    next.addEventListener('click', () => { stopAuto(); slideNext(); startAuto(); });
    prev.addEventListener('click', () => { stopAuto(); slidePrev(); startAuto(); });

    window.addEventListener('resize', update);
    
    // Initial update and start
    setTimeout(() => {
        update();
        startAuto();
    }, 100);
  })();

  // ── New Arrivals Slider ──
  (function() {
    const track = document.getElementById('arrivalTrack');
    const prev = document.getElementById('arrivalPrev');
    const next = document.getElementById('arrivalNext');
    if (!track || !prev || !next) return;

    let index = 0;
    let autoInterval;

    function getItemsPerView() {
      const w = window.innerWidth;
      if (w <= 480) return 2;
      if (w <= 768) return 2;
      if (w <= 1024) return 3;
      return 4;
    }

    function update() {
      const items = track.children.length;
      const perView = getItemsPerView();
      const max = Math.max(0, items - perView);
      
      if (index > max) index = max;
      if (index < 0) index = 0;

      const offset = (index * (100 / perView));
      track.style.transform = `translateX(-${offset}%)`;

      prev.style.opacity = index === 0 ? '0.3' : '1';
      next.style.opacity = index >= max ? '0.3' : '1';
    }

    function slideNext() {
      const perView = getItemsPerView();
      const max = track.children.length - perView;
      if (index < max) {
        index++;
      } else {
        index = 0; // Loop
      }
      update();
    }

    function slidePrev() {
      if (index > 0) {
        index--;
      } else {
        const perView = getItemsPerView();
        index = Math.max(0, track.children.length - perView); 
      }
      update();
    }

    function startAuto() { stopAuto(); autoInterval = setInterval(slideNext, 5000); }
    function stopAuto() { clearInterval(autoInterval); }

    next.addEventListener('click', () => { stopAuto(); slideNext(); startAuto(); });
    prev.addEventListener('click', () => { stopAuto(); slidePrev(); startAuto(); });

    window.addEventListener('resize', update);
    
    // Initial update and start
    setTimeout(() => {
        update();
        startAuto();
    }, 150);
  })();

    // ── Best Sellers Slider ──
    (function() {
      const track = document.getElementById('bestTrack');
      const prev = document.getElementById('bestPrev');
      const next = document.getElementById('bestNext');
      if (!track || !prev || !next) return;

      let index = 0;
      let autoInterval;

      function getItemsPerView() {
        const w = window.innerWidth;
        if (w <= 480) return 2;
        if (w <= 768) return 2;
        if (w <= 1024) return 3;
        return 4;
      }

      function update() {
        const items = track.children.length;
        const perView = getItemsPerView();
        const max = Math.max(0, items - perView);
        
        if (index > max) index = max;
        if (index < 0) index = 0;

        const offset = (index * (100 / perView));
        track.style.transform = `translateX(-${offset}%)`;

        prev.style.opacity = index === 0 ? '0.3' : '1';
        next.style.opacity = index >= max ? '0.3' : '1';
      }

      function slideNext() {
        const perView = getItemsPerView();
        const max = track.children.length - perView;
        if (index < max) {
          index++;
        } else {
          index = 0; // Loop back
        }
        update();
      }

      function slidePrev() {
        if (index > 0) {
          index--;
        } else {
          const perView = getItemsPerView();
          index = Math.max(0, track.children.length - perView);
        }
        update();
      }

      function startAuto() { stopAuto(); autoInterval = setInterval(slideNext, 5000); }
      function stopAuto() { clearInterval(autoInterval); }

      next.addEventListener('click', () => { stopAuto(); slideNext(); startAuto(); });
      prev.addEventListener('click', () => { stopAuto(); slidePrev(); startAuto(); });

      window.addEventListener('resize', update);
      
      setTimeout(() => {
          update();
          startAuto();
      }, 200);
    })();

    // ── Video Reel Slider ──
    (function() {
      const track = document.getElementById('videoTrack');
      const prev = document.getElementById('videoPrev');
      const next = document.getElementById('videoNext');
      if (!track || !prev || !next) return;

      let index = 0;

      function getItemsPerView() {
        const w = window.innerWidth;
        if (w <= 480) return 1;
        if (w <= 768) return 2;
        if (w <= 1024) return 3;
        return 4;
      }

      function update() {
        const items = track.children.length;
        const perView = getItemsPerView();
        const max = Math.max(0, items - perView);
        
        if (index > max) index = max;
        if (index < 0) index = 0;

        const offset = (index * (100 / perView));
        track.style.transform = `translateX(-${offset}%)`;

        prev.style.opacity = index === 0 ? '0.3' : '1';
        next.style.opacity = index >= max ? '0.3' : '1';
      }

      function slideNext() {
        const perView = getItemsPerView();
        if (index < track.children.length - perView) {
          index++;
          update();
        }
      }

      function slidePrev() {
        if (index > 0) {
          index--;
          update();
        }
      }

      next.addEventListener('click', slideNext);
      prev.addEventListener('click', slidePrev);
      window.addEventListener('resize', update);
      
      setTimeout(update, 300);
    })();

    // ── Scroll Reveal ──
  (function() {
    const els = document.querySelectorAll('.reveal-on-scroll');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => observer.observe(el));
  })();

  // ── Wishlist management ──
  function toggleWishlist(e, prod) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    
    let wl = [];
    try { wl = JSON.parse(localStorage.getItem('eoi_wishlist') || '[]'); } catch(err) {}

    const index = wl.findIndex(item => item.id == prod.id);

    if (index >= 0) {
      // Remove
      wl.splice(index, 1);
      showToast('Removed from wishlist');
    } else {
      // Add
      wl.push({
        id: prod.id,
        name: prod.name,
        price: prod.price,
        image: prod.image,
        sku: prod.sku
      });
      showToast('Added to wishlist!');
    }
    
    localStorage.setItem('eoi_wishlist', JSON.stringify(wl));
    updateHomeWishlistIcons();
    if (typeof updateWishlistBadge === 'function') updateWishlistBadge();
  }

  function updateHomeWishlistIcons() {
    let wl = [];
    try { wl = JSON.parse(localStorage.getItem('eoi_wishlist') || '[]'); } catch(err) {}
    
    const ids = wl.map(item => item.id);
    document.querySelectorAll('.plp-card__wishlist').forEach(btn => {
      const id = btn.getAttribute('data-id');
      const icon = btn.querySelector('i');
      if (ids.includes(id)) {
        icon.className = 'fas fa-heart';
        btn.style.color = '#c0392b';
      } else {
        icon.className = 'far fa-heart';
        btn.style.color = '';
      }
    });
  }

  function showToast(msg) {
    const toast = document.createElement('div');
    toast.className = 'eoi-toast';
    toast.textContent = msg;
    document.body.appendChild(toast);
    setTimeout(() => { toast.classList.add('visible'); }, 100);
    setTimeout(() => {
      toast.classList.remove('visible');
      setTimeout(() => { toast.remove(); }, 400);
    }, 3000);
  }

  // Sync icons on load
  document.addEventListener('DOMContentLoaded', updateHomeWishlistIcons);
  window.addEventListener('storage', updateHomeWishlistIcons);
  </script>
</body>
</html>
