script.js

// APEXAUTO WEB APPLICATION LOGIC

// 1. DATA LAYANAN / SERVICES (JSON Statis)
const servicesData = [
  {
    id: 1,
    name: "Tune-Up & Diagnostic ECU",
    category: "Mesin",
    price: 250000,
    tags: ["Terpopuler", "Presisi"],
    image: "assets/service_diagnostics.png",
    description: "Scan kelistrikan mobil menyeluruh dengan komputer scanner OBD2 modern untuk mendeteksi error sensor dan mengembalikan tenaga mesin secara optimal."
  },
  {
    id: 2,
    name: "Servis Rem & Kaki-kaki",
    category: "Keselamatan",
    price: 350000,
    tags: ["Rekomendasi"],
    image: "assets/service_maintenance.png",
    description: "Pengecekan suspensi, penggantian kampas rem, pembersihan piston rem, serta pelumasan sendi roda untuk kenyamanan berkendara tanpa bunyi bising."
  },
  {
    id: 3,
    name: "Detailing & Ceramic Coating",
    category: "Estetika",
    price: 1500000,
    tags: ["Premium", "Proteksi"],
    image: "assets/service_detailing.png",
    description: "Pembersihan noda cat, multi-stage paint correction (poles body), dan perlindungan coating nano-ceramic 9H berkualitas tinggi agar mobil selalu berkilau."
  },
  {
    id: 4,
    name: "Paket Ganti Oli Berkala",
    category: "Perawatan",
    price: 450000,
    tags: ["Paling Cepat"],
    image: "assets/service_maintenance.png",
    description: "Ganti oli mesin berstandar internasional, gratis filter oli baru, pengecekan air radiator, minyak rem, aki, dan pembersihan filter udara."
  }
];

// 2. DATA TESTIMONI (JSON Statis)
const testimonialsData = [
  {
    id: 1,
    name: "Hendra Wijaya",
    vehicle: "Toyota Fortuner 2021",
    rating: 5,
    text: "Puas sekali servis ECU dan Tune-Up di ApexAuto. Mesin jadi super responsif dan tarikannya enteng lagi seperti baru. Penjelasannya mekaniknya sangat detail dan transparan soal estimasi biaya!"
  },
  {
    id: 2,
    name: "Siti Rahma",
    vehicle: "Honda HR-V 2019",
    rating: 5,
    text: "Sangat merekomendasikan layanan detailing-nya. Mobil saya penuh jamur bodi karena sering kehujanan, setelah di-treatment sehari di sini langsung mulus mengkilap seperti mobil baru keluar dealer."
  },
  {
    id: 3,
    name: "Budi Santoso",
    vehicle: "Suzuki Ertiga 2018",
    rating: 4,
    text: "Mekaniknya handal. Kemarin ada bunyi gluduk-gluduk di roda depan, setelah dicek ternyata bushing arm robek. Diganti orisinil dengan harga wajar, garansi 30 hari pula. Top bener."
  }
];

// 3. DATA GALERI (JSON Statis)
const galleryData = [
  {
    id: 1,
    title: "Ruang Kerja Utama Bengkel",
    category: "Fasilitas",
    image: "assets/hero_banner.png",
    alt: "Fasilitas Workshop Bersih dan Rapi"
  },
  {
    id: 2,
    title: "Uji Sensor Diagnostik Mobil",
    category: "Mesin",
    image: "assets/service_diagnostics.png",
    alt: "Pengecekan Komputer Diagnostik"
  },
  {
    id: 3,
    title: "Servis Piringan Rem Cakram",
    category: "Perawatan",
    image: "assets/service_maintenance.png",
    alt: "Pengerjaan Rem Mobil Profesional"
  },
  {
    id: 4,
    title: "Proses Pemolesan Cat Mobil",
    category: "Detailing",
    image: "assets/service_detailing.png",
    alt: "Polishing Body Eksterior"
  },
  {
    id: 5,
    title: "Pemindaian Sistem Kelistrikan",
    category: "Mesin",
    image: "assets/service_diagnostics.png",
    alt: "Analisis OBD2 Scanner"
  },
  {
    id: 6,
    title: "Hasil Cat Coating Glossy",
    category: "Detailing",
    image: "assets/service_detailing.png",
    alt: "Mobil Sport Merah Berkilau"
  }
];

// 4. FORMAT MATA UANG INDONESIA (RUPIAH)
function formatRupiah(number) {
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(number);
}

// 5. RENDER UTILS - DOM INJECTIONS
document.addEventListener("DOMContentLoaded", () => {
  renderServices();
  renderGallery();
  renderTestimonials();
  setupNavbarScroll();
  setupScrollspy();
});

// Render Services list to HTML
function renderServices() {
  const container = document.getElementById("services-container");
  if (!container) return;

  container.innerHTML = servicesData.map(service => {
    // Generate badge tags
    const tagsHtml = service.tags.map(tag =>
      `<span class="badge bg-accent-soft text-accent rounded-pill me-1 px-2.5 py-1 small">${tag}</span>`
    ).join('');

    return `
      <div class="col-md-6 col-lg-3">
        <div class="card service-card shadow-sm h-100">
          <div class="service-card-img position-relative">
            <span class="badge bg-dark service-category text-white border border-secondary">${service.category}</span>
            <img src="${service.image}" alt="${service.name}" loading="lazy">
          </div>
          <div class="service-body d-flex flex-column justify-content-between h-100">
            <div>
              <div class="mb-2 d-flex flex-wrap gap-1">${tagsHtml}</div>
              <h4 class="service-title">${service.name}</h4>
              <p class="text-gray small mb-4">${service.description}</p>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-auto pt-3 border-top border-secondary">
              <span class="service-price text-accent">${formatRupiah(service.price)}</span>
              <a href="#contact" class="btn btn-accent btn-sm rounded-pill px-3">Pesan</a>
            </div>
          </div>
        </div>
      </div>
    `;
  }).join('');
}

// Render Gallery grid to HTML
function renderGallery() {
  const container = document.getElementById("gallery-container");
  if (!container) return;

  container.innerHTML = galleryData.map(item => {
    return `
      <div class="col-sm-6 col-md-4">
        <div class="gallery-item">
          <img src="${item.image}" alt="${item.alt}" loading="lazy">
          <div class="gallery-overlay">
            <span class="badge bg-accent text-white mb-2 align-self-start small">${item.category}</span>
            <h5 class="text-white fw-bold mb-1 fs-6">${item.title}</h5>
            <p class="text-gray small mb-0 fs-7">${item.alt}</p>
          </div>
        </div>
      </div>
    `;
  }).join('');
}

// Render Testimonials Carousel
function renderTestimonials() {
  const carousel = document.getElementById("testimonials-carousel");
  if (!carousel) return;

  // Indicators HTML
  const indicatorsHtml = testimonialsData.map((_, index) => {
    return `
      <button type="button" 
              data-bs-target="#testimonials-carousel" 
              data-bs-slide-to="${index}" 
              class="${index === 0 ? 'active' : ''}" 
              aria-current="${index === 0 ? 'true' : 'false'}" 
              aria-label="Slide ${index + 1}"></button>
    `;
  }).join('');

  // Slides HTML
  const slidesHtml = testimonialsData.map((testi, index) => {
    // Generate Stars
    let starsHtml = "";
    for (let i = 0; i < 5; i++) {
      if (i < testi.rating) {
        starsHtml += '<i class="bi bi-star-fill me-1"></i>';
      } else {
        starsHtml += '<i class="bi bi-star me-1"></i>';
      }
    }

    return `
      <div class="carousel-item ${index === 0 ? 'active' : ''}">
        <div class="testimonial-card text-center text-sm-start">
          <div class="d-flex flex-column flex-sm-row align-items-center mb-4">
            <div class="bg-accent-soft text-accent rounded-circle me-sm-3 mb-3 mb-sm-0 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.5rem; font-weight: bold;">
              ${testi.name.charAt(0)}
            </div>
            <div>
              <h5 class="text-white fw-bold mb-0">${testi.name}</h5>
              <span class="text-gray small">${testi.vehicle}</span>
            </div>
            <div class="testimonial-rating ms-sm-auto mt-2 mt-sm-0">
              ${starsHtml}
            </div>
          </div>
          <p class="text-gray mb-0 lead fs-6 lh-lg font-italic">
            "${testi.text}"
          </p>
        </div>
      </div>
    `;
  }).join('');

  carousel.innerHTML = `
    <div class="carousel-indicators" style="bottom: -50px;">
      ${indicatorsHtml}
    </div>
    <div class="carousel-inner">
      ${slidesHtml}
    </div>
    <button class="carousel-control-prev d-none d-md-flex" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev" style="width: 5%; left: -60px;">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next d-none d-md-flex" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next" style="width: 5%; right: -60px;">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  `;
}

// 6. SCROLL DETECTOR FOR GLASSMORPHISM NAVBAR
function setupNavbarScroll() {
  const navbar = document.getElementById("mainNavbar");
  if (!navbar) return;

  window.addEventListener("scroll", () => {
    if (window.scrollY > 50) {
      navbar.classList.add("scrolled");
    } else {
      navbar.classList.remove("scrolled");
    }
  });
}

// 7. SCROLLSPY (ACTIVE LINK DETECTOR ON SCROLL)
function setupScrollspy() {
  const sections = document.querySelectorAll("section");
  const navLinks = document.querySelectorAll(".navbar-nav .nav-link");

  window.addEventListener("scroll", () => {
    let current = "";

    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.clientHeight;
      if (pageYOffset >= (sectionTop - 150)) {
        current = section.getAttribute("id");
      }
    });

    navLinks.forEach(link => {
      link.classList.remove("active");
      if (link.getAttribute("href") === `#${current}`) {
        link.classList.add("active");
      }
    });
  });
}