// ===== HERO SLIDESHOW =====
const slides = document.querySelectorAll('.hero-slide');
const dots = document.querySelectorAll('.hero-dots span');
let currentSlide = 0;
let slideInterval;

function goToSlide(n) {
  slides[currentSlide].classList.remove('active');
  dots[currentSlide].classList.remove('active');
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
  dots[currentSlide].classList.add('active');
}

function nextSlide() { goToSlide(currentSlide + 1); }

function startSlideshow() {
  slideInterval = setInterval(nextSlide, 5000);
}

dots.forEach((dot, i) => {
  dot.addEventListener('click', () => {
    clearInterval(slideInterval);
    goToSlide(i);
    startSlideshow();
  });
});

startSlideshow();

// ===== NAVBAR SCROLL =====
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
  navbar.classList.toggle('scrolled', window.scrollY > 60);
});

// ===== MOBILE MENU =====
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('open');
  const spans = hamburger.querySelectorAll('span');
  if (navLinks.classList.contains('open')) {
    spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
    spans[1].style.opacity = '0';
    spans[2].style.transform = 'rotate(-45deg) translate(5px, -5px)';
  } else {
    spans[0].style.transform = 'none';
    spans[1].style.opacity = '1';
    spans[2].style.transform = 'none';
  }
});

// Close mobile menu on link click
navLinks.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    navLinks.classList.remove('open');
    const spans = hamburger.querySelectorAll('span');
    spans[0].style.transform = 'none';
    spans[1].style.opacity = '1';
    spans[2].style.transform = 'none';
  });
});

// ===== SCROLL ANIMATIONS =====
const animElements = document.querySelectorAll('.fade-up, .fade-left, .fade-right');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });

animElements.forEach(el => observer.observe(el));

// ===== CLUSTER MODAL =====
const clusterData = {
  mejiro: {
    name: 'Mejiro',
    jp: '目白',
    img: 'assets/Type-Rumah-Mejiro.jpg',
    size: '6 x 14',
    landArea: '84 m²',
    buildArea: '100 m²',
    floors: '2 Lantai',
    bedrooms: '3',
    bathrooms: '2',
    desc: 'Cluster Mejiro menghadirkan hunian 2 lantai yang kompak namun tetap luas dengan desain Jepang modern. Dengan luas bangunan 100 m², tipe ini ideal untuk keluarga muda yang menginginkan privasi dan kenyamanan di kawasan premium OCBD Bogor.',
    features: ['Smart Home System', 'Struktur Anti Gempa', 'Solar Panel', 'Carport', 'Wall Facade Premium', 'EDGE Advanced Certified']
  },
  hitaki: {
    name: 'Hitaki',
    jp: 'ヒタキ',
    img: 'assets/hitaki-web-1-1.jpg',
    size: '7 x 15',
    landArea: '105 m²',
    buildArea: '115 m²',
    floors: '2 Lantai',
    bedrooms: '3',
    bathrooms: '2',
    desc: 'Cluster Hitaki menawarkan ruang lebih leluasa dengan luas tanah 105 m². Desain arsitektur Jepang yang elegan berpadu dengan material berkualitas tinggi, menciptakan suasana hangat dan modern untuk setiap anggota keluarga.',
    features: ['Smart Home System', 'Struktur Anti Gempa', 'Solar Panel', 'Carport Luas', 'Wall Facade Premium', 'EDGE Advanced Certified']
  },
  hibari: {
    name: 'Hibari',
    jp: '雲雀',
    img: 'assets/Type-Rumah-Hibari.jpg',
    size: '7 x 15',
    landArea: '105 m²',
    buildArea: '138 m²',
    floors: '2 Lantai',
    bedrooms: '4',
    bathrooms: '3',
    desc: 'Cluster Hibari dirancang untuk keluarga yang membutuhkan ruang ekstra. Dengan bangunan seluas 138 m² dan 4 kamar tidur, tipe ini sempurna bagi Anda yang menghargai kemewahan dan fleksibilitas ruang. Filosofi Ka-cho-fu-getsu tercermin dalam setiap sudut desainnya.',
    features: ['Smart Home System', 'Struktur Anti Gempa', 'Solar Panel', 'Carport Luas', 'Wall Facade Premium', 'EDGE Advanced Certified', '4 Kamar Tidur']
  },
  kiji: {
    name: 'Kiji',
    jp: '雉',
    img: 'assets/Type-Rumah-Kiji.jpg',
    size: '8 x 15',
    landArea: '120 m²',
    buildArea: '156 m²',
    floors: '2 Lantai',
    bedrooms: '4',
    bathrooms: '3',
    desc: 'Cluster Kiji adalah tipe terbesar dan terpremium di Morizora. Dengan luas bangunan 156 m² di atas tanah 120 m², hunian ini menghadirkan kemewahan maksimal. Ideal sebagai investasi jangka panjang dengan nilai properti yang terus meningkat di kawasan OCBD Bogor.',
    features: ['Smart Home System', 'Struktur Anti Gempa', 'Solar Panel', 'Double Carport', 'Wall Facade Premium', 'EDGE Advanced Certified', '4 Kamar Tidur', 'Master Suite']
  }
};

const modalOverlay = document.getElementById('clusterModal');
const modalBox = modalOverlay.querySelector('.modal-box');

function openModal(clusterKey) {
  const d = clusterData[clusterKey];
  if (!d) return;
  
  modalBox.querySelector('.modal-img').src = d.img;
  modalBox.querySelector('.modal-img').alt = d.name;
  modalBox.querySelector('.modal-content h2').textContent = d.name;
  modalBox.querySelector('.modal-content .jp-name').textContent = d.jp;
  
  const specs = modalBox.querySelectorAll('.modal-spec');
  const specData = [
    { label: 'Luas Tanah', val: d.landArea },
    { label: 'Luas Bangunan', val: d.buildArea },
    { label: 'Kamar Tidur', val: d.bedrooms },
    { label: 'Kamar Mandi', val: d.bathrooms }
  ];
  specs.forEach((spec, i) => {
    spec.querySelector('.label').textContent = specData[i].label;
    spec.querySelector('.val').textContent = specData[i].val;
  });
  
  modalBox.querySelector('.modal-content p').textContent = d.desc;
  
  const featContainer = modalBox.querySelector('.modal-features');
  featContainer.innerHTML = d.features.map(f => `<span>${f}</span>`).join('');
  
  modalOverlay.classList.add('show');
  document.body.style.overflow = 'hidden';
}

function closeModal() {
  modalOverlay.classList.remove('show');
  document.body.style.overflow = '';
}

modalOverlay.addEventListener('click', (e) => {
  if (e.target === modalOverlay) closeModal();
});

document.querySelector('.modal-close').addEventListener('click', closeModal);

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
});

// ===== COUNTER ANIMATION =====
const counters = document.querySelectorAll('[data-count]');
const counterObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const target = parseInt(entry.target.dataset.count);
      let current = 0;
      const increment = target / 60;
      const timer = setInterval(() => {
        current += increment;
        if (current >= target) {
          entry.target.textContent = target + (entry.target.dataset.suffix || '');
          clearInterval(timer);
        } else {
          entry.target.textContent = Math.floor(current) + (entry.target.dataset.suffix || '');
        }
      }, 25);
      counterObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });

counters.forEach(c => counterObserver.observe(c));

// ===== LEAD FORM → WHATSAPP =====
function submitToWhatsApp(e) {
  e.preventDefault();
  const fname    = document.getElementById('fname').value.trim();
  const lname    = document.getElementById('lname').value.trim();
  const phone    = document.getElementById('phone').value.trim();
  const email    = document.getElementById('email').value.trim();
  const interest = document.getElementById('interest').value || 'Belum ditentukan';

  const msg =
    `Halo, saya ingin mendapatkan info lengkap Morizora.%0A%0A` +
    `*Nama*: ${encodeURIComponent(fname + ' ' + lname)}%0A` +
    `*No. WhatsApp*: ${encodeURIComponent(phone)}%0A` +
    `*Email*: ${encodeURIComponent(email)}%0A` +
    `*Cluster Diminati*: ${encodeURIComponent(interest)}%0A%0A` +
    `Mohon dikirimkan pricelist, denah rumah, dan simulasi KPR. Terima kasih.`;

  window.open(`https://wa.me/628178818077?text=${msg}`, '_blank');
  e.target.reset();
}
