<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= infoToko.namaToko %> - <%= judulHalaman %></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; /* Warna krem muda, seperti adonan */
      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  */

    /* CSS Kustom untuk Line Clamp (Deskripsi Produk) */
    .text-line-clamp-2 { /* Untuk 2 baris */
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
    }
    .text-line-clamp-3 { /* Untuk 3 baris */
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
    }
  </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="flex-grow">
    <section class="relative bg-yellow-400 bg-cover bg-center min-h-screen flex items-center justify-center" style="background-image: url('https://images.unsplash.com/photo-1562050900-51F121426238?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
      <div class="absolute inset-0 bg-black opacity-50"></div>
      <%# padding-top (pt-24) di div bawah ini disesuaikan untuk memberi ruang bagi header fixed (asumsi header ~4rem) %>
      <div class="relative text-center px-6 pt-24 pb-10 z-10" data-aos="zoom-in"> 
        <h1 class="text-5xl md:text-6xl font-extrabold text-white drop-shadow-lg logo-font">
          Selamat Datang di <span class="text-yellow-300"><%= infoToko.namaToko %></span>
        </h1>
        <%# font-light pada tagline bisa diganti font-normal jika ingin teksnya sedikit lebih tebal %>
        <p class="mt-4 text-lg md:text-xl text-white font-normal max-w-2xl mx-auto"><%= infoToko.tagline %></p>
        <div class="mt-8 space-y-4 sm:space-y-0 sm:flex sm:justify-center sm:space-x-4">
          <a href="#produk-unggulan" 
             class="inline-block w-full sm:w-auto bg-white text-yellow-700 font-bold text-lg py-3 px-10 rounded-lg shadow-md hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-200 focus:ring-opacity-75 transition-all duration-300 transform hover:scale-105">
            Produk Unggulan
          </a>
          <a href="/katalog" 
             class="inline-block w-full sm:w-auto bg-yellow-500 text-white font-bold text-lg py-3 px-10 rounded-lg shadow-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-75 transition-all duration-300 transform hover:scale-105">
            Lihat Semua Katalog
          </a>
        </div>
      </div>
    </section>

    <section id="produk-unggulan" class="py-16 lg:py-24 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-4xl font-extrabold text-center text-yellow-700 mb-12 lg:mb-16" data-aos="fade-down">
          Roti <span class="logo-font text-yellow-600">Unggulan</span> Kami
        </h2>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
          <% if (typeof produk !== 'undefined' && produk.length > 0) { %>
            <% produk.slice(0, 3).forEach(item => { %>
              <div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl group relative" data-aos="fade-up" data-aos-delay="<%= item.aosDelay %>">
                <%# 'relative' ditambahkan di atas untuk positioning badge jika ada %>

                <%# --- AWAL BAGIAN TAG/BADGE PRODUK (OPSIONAL) --- %>
                <%# Fitur ini memerlukan properti 'tag' pada data 'item' Anda. %>
                <% 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-semibold px-3 py-1.5 rounded-full shadow-md z-10">
                    <%= item.tag.toUpperCase() %>
                  </span>
                <% } %>
                <%# --- AKHIR BAGIAN TAG/BADGE PRODUK --- %>
                
                <div class="relative overflow-hidden h-64">
                  <img src="<%= item.gambar %>" alt="<%= item.nama %>" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                </div>
                <div class="p-6">
                  <h3 class="text-xl lg:text-2xl font-semibold text-yellow-800 mb-2 truncate" title="<%= item.nama %>"><%= item.nama %></h3>
                  <%# Menggunakan line-clamp untuk deskripsi, komentar yang salah sudah dihapus %>
                  <p class="text-sm text-gray-600 mb-3 text-line-clamp-3"><%= item.deskripsi %></p> 
                  <div class="flex justify-between items-center mt-4">
                    <p class="text-lg font-bold text-yellow-600"><%= 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="inline-flex items-center px-4 py-2 bg-yellow-500 border border-transparent rounded-md font-semibold text-sm text-white tracking-widest hover:bg-yellow-600 active:bg-yellow-700 focus:outline-none focus:border-yellow-700 focus:ring focus:ring-yellow-300 disabled:opacity-25 transition ease-in-out duration-150">
                       <i class="fab fa-whatsapp -ml-1 mr-2 h-4 w-4"></i> <%# Icon WhatsApp & penyesuaian ukuran teks tombol %>
                       Pesan
                    </a>
                  </div>
                </div>
              </div>
            <% }); %>
          <% } else { %>
            <p class="col-span-full text-center text-gray-600">Produk unggulan akan segera hadir!</p>
          <% } %>
        </div>
         <% if (produk.length > 3) { %>
            <div class="text-center mt-16" data-aos="fade-up">
                <a href="/katalog" 
                   class="inline-block bg-yellow-600 text-white font-bold text-lg py-3 px-10 rounded-lg shadow-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 transition-transform transform hover:scale-105">
                    Lihat Katalog Lengkap
                </a>
            </div>
        <% } %>
      </div>
    </section>

    <section class="bg-yellow-100 py-16 lg:py-24">
      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8" data-aos="fade-up">
        <h3 class="text-3xl lg:text-4xl font-bold text-yellow-800 text-center mb-12 lg:mb-16">
          Apa Kata <span class="logo-font text-yellow-700">Pelanggan</span> Kami?
        </h3>
        <div class="grid md:grid-cols-2 gap-8 lg:gap-12">
          <% if (typeof testimonials !== 'undefined' && testimonials.length > 0) { %>
            <% testimonials.forEach(testi => { %>
              <div class="bg-white p-6 lg:p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="100">
                <div class="flex items-start mb-4">
                  <i class="fas fa-quote-left text-yellow-500 text-3xl mr-4 mt-1"></i>
                  <p class="text-gray-700 italic leading-relaxed">“<%= testi.kutipan %>”</p>
                </div>
                <p class="mt-4 font-semibold text-yellow-800 text-right">— <%= testi.nama %>, <%= testi.kota %></p>
              </div>
            <% }); %>
          <% } else { %>
            <p class="col-span-full text-center text-gray-600">Belum ada testimoni untuk ditampilkan.</p>
          <% } %>
        </div>
      </div>
    </section>
  </main>

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

