<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= judulHalaman %> - <%= infoToko.namaToko %></title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    body { font-family: 'Poppins', sans-serif; }
    .logo-font { font-family: 'Pacifico', cursive; }

    /* AWAL DARI CSS PRELOADER */
    #preloader {
      background-color: #FFF8E1;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.6s ease-out, visibility 0s linear 0.6s;
    }
    #preloader.hidden { opacity: 0; visibility: hidden; }
    .baking-loader-content { text-align: center; }
    .dots-container { display: flex; justify-content: center; align-items: center; margin-bottom: 25px; }
    .dots-container .dot { width: 18px; height: 18px; background-color: #D2691E; border-radius: 50%; margin: 0 10px; animation: bounceDot 1.5s infinite ease-in-out; }
    .dots-container .dot:nth-child(1) { animation-delay: -0.30s; }
    .dots-container .dot:nth-child(2) { animation-delay: -0.15s; }
    @keyframes bounceDot { 0%, 80%, 100% { transform: scale(0.7) translateY(0); opacity: 0.6; background-color: #D2691E; } 40% { transform: scale(1.1) translateY(-5px); opacity: 1; background-color: #f59e0b; } }
    .loading-text { font-size: 2.8em; color: #8B4513; margin-bottom: 10px; line-height: 1.2; }
    .sub-text { font-family: 'Poppins', sans-serif; font-size: 1.1em; color: #A0522D; letter-spacing: 0.5px; }
    /* AKHIR DARI CSS PRELOADER */

    /* Custom Slider Styles */
    .product-slider-container { overflow: hidden; position: relative; border-radius: 1.5rem; background-color: white; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
    .product-slider { display: flex; transition: transform 0.3s ease-in-out; }
    .product-card { width: 100%; flex-shrink: 0; }
    .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0 10px; box-sizing: border-box; z-index: 10; }
    .slider-nav button { background: rgba(255,255,255,0.8); color: #facc15; border: none; padding: 10px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 1.5em; opacity: 0.7; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; line-height: 1; }
    .slider-nav button:hover { opacity: 1; background-color: rgba(255,255,255,0.95); transform: scale(1.1); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
    
    .slider-dots { text-align: center; margin-top: 20px; }
    .slider-dots span {
      display: inline-block; width: 10px; height: 10px; border-radius: 50%;
      background-color: #d1d5db; /* Default: abu-abu (Tailwind gray-300) */
      margin: 0 5px; cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease; /* Efek transisi diperbarui */
    }
    .slider-dots span:hover { /* Efek hover baru */
      background-color: #fcd34d; /* Warna kuning muda (Tailwind yellow-300) */
      transform: scale(1.2);
    }
    .slider-dots span.active {
      background-color: #f59e0b; /* Warna kuning/amber (Tailwind amber-500) */
      transform: scale(1.2); /* Efek skala ditambahkan */
    }

    .whatsapp-button { background-color: #25D366; color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; margin-top: 15px; transition: background-color 0.2s ease-in-out, transform 0.2s ease; }
    .whatsapp-button:hover { background-color: #128C7E; transform: scale(1.05); }
    .product-info h3 { line-height: 1.3; }
  </style>
</head>
<body class="bg-gradient-to-b from-yellow-100 via-white to-yellow-200 text-gray-800 flex flex-col min-h-screen">

  <%- include('../partials/preloader') %>
  <%- include('../partials/header', { infoToko: infoToko }) %>

  <main class="pt-16 flex-grow flex flex-col justify-center">
    <section class="py-12 md:py-16">
      <div class="max-w-xl md:max-w-3xl lg:max-w-5xl mx-auto px-4">
        <h2 class="text-3xl md:text-4xl font-extrabold text-center text-yellow-700 mb-8 md:mb-12" data-aos="fade-down">
          Pilihan Roti <span class="logo-font text-yellow-600">Istimewa</span> Kami
        </h2>

        <% if (typeof produk !== 'undefined' && produk.length > 0) { %>
          <div class="product-slider-container" data-aos="fade-up">
            <div class="product-slider">
              <% produk.forEach(item => { %>
                <div class="product-card relative group transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1">
                  <%# Kelas di atas ditambahkan untuk efek hover pada kartu dan 'group' untuk efek pada gambar di dalamnya %>
                  
                  <div class="overflow-hidden"> <%# Pembungkus ini untuk memastikan efek zoom pada gambar tidak keluar dari batas kartu %>
                    <img src="<%= item.gambar %>" alt="<%= item.nama %>" class="w-full h-64 md:h-80 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105">
                  </div>
                  
                  <%# --- AWAL BAGIAN TAG/BADGE PRODUK (INI OPSIONAL) --- %>
                  <%# Fitur ini memerlukan properti 'tag' pada data 'item' Anda (misalnya item.tag = "BARU"). %>
                  <%# Pastikan juga item.tag tidak kosong sebelum ditampilkan. %>
                  <% if (item.tag && typeof item.tag === 'string' && item.tag.trim() !== '') { %>
                    <span class="absolute top-3 left-3 bg-amber-500 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg z-10">
                      <%= item.tag.toUpperCase() %>
                    </span>
                  <% } %>
                  <%# --- AKHIR BAGIAN TAG/BADGE PRODUK --- %>

                  <div class="p-6 product-info">
                    <h3 class="text-xl lg:text-2xl font-bold text-yellow-800 mb-2"><%= item.nama %></h3>
                    <%# Nilai min-h-[70px] di bawah ini bisa Anda sesuaikan agar tinggi deskripsi konsisten %>
                    <p class="text-gray-600 text-sm leading-relaxed mb-4 min-h-[60px] md:min-h-[70px]"><%= item.deskripsi %></p>
                    <%# Warna harga produk menggunakan amber-600 %>
                    <p class="text-xl font-bold text-amber-600 mb-4"><%= item.harga %></p>
                    <a href="https://wa.me/<%= infoToko.nomorWhatsAppInternasional %>?text=Saya%20tertarik%20dengan%20produk%20<%= encodeURIComponent(item.nama) %>%20(<%= encodeURIComponent(item.harga) %>)" target="_blank" class="whatsapp-button">
                      <i class="fab fa-whatsapp mr-2"></i>Pesan Sekarang
                    </a>
                  </div>
                </div>
              <% }); %>
            </div>
            <div class="slider-nav">
              <button class="prev-btn" aria-label="Previous Slide">&#10094;</button>
              <button class="next-btn" aria-label="Next Slide">&#10095;</button>
            </div>
            <div class="slider-dots"></div>
          </div>
        <% } else { %>
            <p class="text-center text-gray-600 text-xl py-10">Oops! Produk kami belum tersedia saat ini.</p>
        <% } %>
      </div>
    </section>
  </main>

  <script> // Script untuk slider produk
    const sliderContainer = document.querySelector('.product-slider-container');
    if (sliderContainer) {
      const slider = sliderContainer.querySelector('.product-slider');
      const slides = sliderContainer.querySelectorAll('.product-card');
      const prevBtn = sliderContainer.querySelector('.prev-btn');
      const nextBtn = sliderContainer.querySelector('.next-btn');
      const sliderDotsContainer = sliderContainer.querySelector('.slider-dots');
      let currentIndex = 0;
      let touchStartX = null;

      function updateSlider() { if (slides.length > 0) { slider.style.transform = `translateX(-${currentIndex * 100}%)`; updateDots(); } }
      function nextSlide() { if (slides.length === 0) return; currentIndex = (currentIndex + 1) % slides.length; updateSlider(); }
      function prevSlide() { if (slides.length === 0) return; currentIndex = (currentIndex - 1 + slides.length) % slides.length; updateSlider(); }
      function goToSlide(index) { if (slides.length === 0 || index < 0 || index >= slides.length) return; currentIndex = index; updateSlider(); }

      if (slides.length > 0) {
        slides.forEach((_, index) => {
          const dot = document.createElement('span');
          dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
          dot.addEventListener('click', () => goToSlide(index));
          sliderDotsContainer.appendChild(dot);
        });
      }
      function updateDots() { const dots = sliderDotsContainer.querySelectorAll('span'); dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentIndex); }); }
      if (nextBtn && prevBtn) { nextBtn.addEventListener('click', nextSlide); prevBtn.addEventListener('click', prevSlide); }
      if (slider) {
        slider.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; }, { passive: true });
        slider.addEventListener('touchend', (e) => { if (touchStartX === null) return; const touchEndX = e.changedTouches[0].clientX; const deltaX = touchStartX - touchEndX; if (deltaX > 50) { nextSlide(); } else if (deltaX < -50) { prevSlide(); } touchStartX = null; });
      }
      updateSlider();
    }
  </script>

  <%- include('../partials/footer', { infoToko: infoToko }) %>

</body>
</html>
