const { useState, useEffect } = React;
const idr = (n) => 'Rp ' + n.toLocaleString('id-ID');

// ============= NAV =============
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const close = () => setMenuOpen(false);

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#home" className="brand">
          <img src="assets/logo-deny-trans.png" alt="Deny Trans" className="nav-logo-img" />
          <span>DENY TRANS</span>
        </a>
        <div className="nav-links">
          <a href="tentang-kami.html">Tentang Kami</a>
          <a href="#armada">Armada</a>
          <a href="#layanan">Layanan</a>
          <a href="rute.html">Rute</a>
          <a href="faq.html">FAQ</a>
          <a href="kontak.html">Kontak</a>
        </div>
        <div className="nav-right">
          <a
            className="btn btn-primary btn-sm nav-cta"
            href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
            target="_blank"
          >
            Booking Sekarang
          </a>
          <button
            className={`hamburger ${menuOpen ? 'open' : ''}`}
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Menu"
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>

      {menuOpen && (
        <div className="mobile-menu">
          <a href="tentang-kami.html" onClick={close}>Tentang Kami</a>
          <a href="#armada" onClick={close}>Armada</a>
          <a href="#layanan" onClick={close}>Layanan</a>
          <a href="rute.html" onClick={close}>Rute</a>
          <a href="faq.html" onClick={close}>FAQ</a>
          <a href="kontak.html" onClick={close}>Kontak</a>
          <a
            className="btn btn-primary"
            href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
            target="_blank"
            onClick={close}
          >
            Booking via WhatsApp
          </a>
        </div>
      )}
    </>
  );
}

// ============= HERO =============
function Hero() {
  const [idx, setIdx] = useState(0);

  useEffect(() => {
    const t = setInterval(() => setIdx((v) => (v + 1) % HERO_SLIDES.length), 4200);
    return () => clearInterval(t);
  }, []);

  const slide = HERO_SLIDES[idx];

  return (
    <header id="home" className="hero" data-hero="split">
      <div className="container hero-inner">
        <div className="hero-text">
          <div className="eyebrow">{slide.eyebrow}</div>
          <h1>
            {slide.h1[0]}<em>{slide.h1[1]}</em>{slide.h1[2]}<em>{slide.h1[3]}</em>
          </h1>
          <p className="hero-sub">{slide.sub}</p>
          <div className="hero-cta-row">
            <a
              className="btn btn-primary"
              href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
              target="_blank"
            >
              Booking via WhatsApp
            </a>
            <a className="btn btn-ghost" href="#armada">Lihat Armada</a>
          </div>
          <div className="hero-meta">
            <div>
              <strong>29–59</strong>
              <span>Kapasitas kursi</span>
            </div>
            <div>
              <strong>10.000+</strong>
              <span>Pelanggan puas</span>
            </div>
            <div>
              <strong>Jawa</strong>
              <span>Bali & Sumatera</span>
            </div>
          </div>
          <div className="slider-dots">
            {HERO_SLIDES.map((_, i) => (
              <button
                key={i}
                className={i === idx ? 'active' : ''}
                onClick={() => setIdx(i)}
                aria-label={`Slide ${i + 1}`}
              ></button>
            ))}
          </div>
        </div>

        <div className="hero-visual bus-photo-card">
          {slide.img && <img src={slide.img} alt={slide.label} className="hero-bus-img" />}
          <div className="badge-float b1">
            <span className="dot"></span> Armada siap jalan
          </div>
          <div className="badge-float b2">Hiace · Medium · Big Bus</div>
        </div>
      </div>
    </header>
  );
}

// ============= QUICK BOOKING =============
function QuickBooking() {
  return (
    <section className="container">
      <div className="booking-card simple-booking">
        <div className="booking-steps">
          <div className="step-pill done"></div>
          <div className="step-pill done"></div>
          <div className="step-pill active"></div>
          <div className="step-pill"></div>
        </div>
        <div className="step-head">
          <div>
            <small>PROSES CEPAT</small>
            <h3>Konsultasi & Booking Perjalanan</h3>
          </div>
          <a
            className="btn btn-dark btn-sm"
            href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
            target="_blank"
          >
            Hubungi Admin
          </a>
        </div>
        <div className="field-grid quick-info-grid">
          <div className="field">
            <label>WhatsApp 1</label>
            <input readOnly value={KONTAK.wa1} />
          </div>
          <div className="field">
            <label>WhatsApp 2</label>
            <input readOnly value={KONTAK.wa2} />
          </div>
          <div className="field">
            <label>Email</label>
            <input readOnly value={KONTAK.email} />
          </div>
          <div className="field">
            <label>Lokasi</label>
            <input readOnly value="Jl. Gatot Subroto, Kartika Chandra, Jakarta" />
          </div>
          <div className="field-actions">
            <p className="mini-note">
              Sampaikan tujuan, tanggal, jumlah peserta, dan jenis armada yang dibutuhkan.
              Tim Deny Trans akan menyiapkan penawaran terbaik untuk Anda.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============= ABOUT =============
function About() {
  return (
    <section id="tentang" className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">PENGALAMAN PERJALANAN PREMIUM DI SETIAP RUTE</div>
            <h2>Nyaman Sepanjang Perjalanan bersama Armada Andalan</h2>
            <a href="tentang-kami.html" className="about-more-link">Tentang Kami selengkapnya →</a>
          </div>
          <p>
            Bus Deny Trans siap menjadi partner terbaik untuk setiap perjalanan Anda. Baik untuk wisata keluarga,
            perjalanan perusahaan, outing seru, hingga kegiatan sekolah—kami hadir dengan standar layanan premium
            yang mengutamakan kenyamanan, keamanan, dan kepuasan Anda dari awal hingga akhir perjalanan.
          </p>
        </div>

        <div className="about">
          <div className="about-visual about-photo">
            <img src="assets/big-bus-59seat.jpeg" alt="Big Bus Premium Deny Trans" className="about-img" />
            <div className="about-stamp">Premium Transport</div>
          </div>
          <div className="about-copy">
            <p>
              Nikmati sensasi perjalanan yang tenang, fasilitas lengkap, dan pelayanan hangat yang membuat
              setiap momen perjalanan terasa lebih istimewa bersama Deny Trans.
            </p>
            <ul className="bullet-list">
              <li>Reservasi Praktis — Pesan bus sesuai kebutuhan Anda dengan mudah melalui WhatsApp. Proses cepat, tanpa ribet.</li>
              <li>Ketepatan Waktu Terjaga — Kami selalu mengutamakan jadwal keberangkatan yang tepat waktu, tanpa mengurangi kenyamanan.</li>
              <li>Harga Kompetitif & Sepadan — Nikmati harga sewa terbaik dengan kualitas layanan yang benar-benar sebanding.</li>
              <li>Kepuasan Terjamin — Kami mengutamakan keamanan, kenyamanan, dan pelayanan terbaik demi kepuasan setiap pelanggan.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============= STATS =============
function Stats() {
  return (
    <section className="section pt-0">
      <div className="container">
        <div className="stats">
          <div className="stat">
            <div className="stat-num">3</div>
            <div className="stat-label">Pilihan armada: Hiace, Medium Bus & Big Bus</div>
          </div>
          <div className="stat">
            <div className="stat-num">59<sup>+</sup></div>
            <div className="stat-label">Kapasitas hingga 59 kursi untuk rombongan besar</div>
          </div>
          <div className="stat">
            <div className="stat-num">10.000<sup>+</sup></div>
            <div className="stat-label">Pelanggan puas menggunakan layanan Deny Trans</div>
          </div>
          <div className="stat">
            <div className="stat-num">24/7</div>
            <div className="stat-label">Respon cepat via WhatsApp untuk konsultasi perjalanan</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============= BOOKING MODAL =============
function BookingModal({ armada, onClose }) {
  const [form, setForm] = useState({ nama: '', wa: '', tanggal: '', asal: '', tujuan: '', penumpang: '', catatan: '' });
  const set = (key) => (e) => setForm(f => ({ ...f, [key]: e.target.value }));

  const penumpangOptions = {
    a0: ['1–5 orang', '6–10 orang', '11–14 orang'],
    a1: ['15–20 orang', '21–28 orang', '29–35 orang'],
    a2: ['36–45 orang', '46–52 orang', '53–59 orang'],
  };

  useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    const msg = [
      `🚌 *BOOKING BUS DENY TRANS*`,
      ``,
      `Armada: *${armada.name}* (${armada.capacity} seat)`,
      `Harga mulai: ${idr(armada.price)}/hari`,
      ``,
      `👤 Nama: ${form.nama}`,
      `📱 WhatsApp: ${form.wa}`,
      `📅 Tanggal Berangkat: ${form.tanggal}`,
      `📍 Asal Penjemputan: ${form.asal}`,
      `🏁 Tujuan: ${form.tujuan}`,
      `👥 Jumlah Penumpang: ${form.penumpang}`,
      form.catatan ? `📝 Catatan: ${form.catatan}` : '',
      ``,
      `Mohon info ketersediaan dan harga final. Terima kasih!`,
    ].filter(Boolean).join('\n');

    window.open(`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}?text=${encodeURIComponent(msg)}`, '_blank');
    onClose();
  };

  return (
    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal-box">
        <button className="modal-close-btn" onClick={onClose} aria-label="Tutup">✕</button>

        <div className="modal-header">
          <span className="modal-armada-badge">{armada.cls}</span>
          <h3 className="modal-title">{armada.name}</h3>
          <div className="modal-armada-meta">{armada.capacity} Seat · Mulai {idr(armada.price)}/hari</div>
        </div>

        <form className="modal-form" onSubmit={handleSubmit}>
          <div className="modal-form-grid">
            <div className="modal-field">
              <label>Nama Lengkap <span className="req">*</span></label>
              <input type="text" required placeholder="Contoh: Budi Santoso" value={form.nama} onChange={set('nama')} />
            </div>
            <div className="modal-field">
              <label>Nomor WhatsApp <span className="req">*</span></label>
              <input type="tel" required placeholder="Contoh: 08123456789" value={form.wa} onChange={set('wa')} />
            </div>
            <div className="modal-field">
              <label>Tanggal Berangkat <span className="req">*</span></label>
              <input type="date" required value={form.tanggal} onChange={set('tanggal')} />
            </div>
            <div className="modal-field">
              <label>Jumlah Penumpang <span className="req">*</span></label>
              <select required value={form.penumpang} onChange={set('penumpang')}>
                <option value="">Pilih jumlah...</option>
                {(penumpangOptions[armada.id] || []).map(o => <option key={o} value={o}>{o}</option>)}
              </select>
            </div>
            <div className="modal-field full">
              <label>Asal Penjemputan <span className="req">*</span></label>
              <input type="text" required placeholder="Contoh: Jakarta Selatan, Depok, Bekasi..." value={form.asal} onChange={set('asal')} />
            </div>
            <div className="modal-field full">
              <label>Tujuan <span className="req">*</span></label>
              <input type="text" required placeholder="Contoh: Bali, Yogyakarta, Bandung..." value={form.tujuan} onChange={set('tujuan')} />
            </div>
            <div className="modal-field full">
              <label>Catatan Tambahan <span className="optional">(opsional)</span></label>
              <textarea placeholder="Kebutuhan khusus, detail rute, jam keberangkatan, dll." value={form.catatan} onChange={set('catatan')} rows={3} />
            </div>
          </div>
          <div className="modal-note">
            Data Anda akan dikirim ke WhatsApp kami. Tim kami akan menghubungi dalam waktu singkat.
          </div>
          <div className="modal-form-actions">
            <button type="button" className="btn btn-ghost" onClick={onClose}>Batal</button>
            <button type="submit" className="btn btn-primary">
              💬 Kirim via WhatsApp
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ============= ARMADA (UPDATE - ganti fungsi Armada di app.jsx) =============
function Armada({ onBook }) {
  return (
    <section id="armada" className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">PILIHAN ARMADA</div>
            <h2>Armada Bus Premium Kami</h2>
          </div>
          <p>
            Dari Hiace untuk rombongan kecil hingga Big Bus untuk rombongan besar — semua tersedia dengan standar kenyamanan premium.
          </p>
        </div>

        <div className="fleet-grid">
          {ARMADA.map((item) => (
            <article className="fleet-card" key={item.id}>
              <div className="fleet-visual">
                <span className="fleet-badge">{item.cls}</span>
                {item.img && <img src={item.img} alt={item.name} className="fleet-img" />}
              </div>
              <div className="fleet-body">
                <div className="fleet-topline">{item.capacity} kursi • {item.type}</div>
                <h3>{item.name}</h3>
                <p className="fleet-desc">{item.desc}</p>
                <div className="fleet-mulai">Mulai Dari</div>
                <div className="fleet-price">
                  {idr(item.price)} <small>/ hari</small>
                </div>
                <div className="fleet-actions">
                  <a className="btn btn-ghost" href={item.url}>Lihat Detail</a>
                  <button className="btn btn-primary" onClick={() => onBook(item)}>
                    Booking Sekarang
                  </button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= LAYANAN =============
function LayananSection() {
  return (
    <section id="layanan" className="section service-alt">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">SEWA BUS PARIWISATA BUS DENY TRANS</div>
            <h2>Layanan untuk Semua Kebutuhan Perjalanan</h2>
          </div>
          <p>
            Bus Deny Trans menyediakan layanan sewa bus pariwisata yang aman, nyaman, dan terpercaya untuk berbagai
            kebutuhan perjalanan seperti wisata, ziarah, study tour, perjalanan dinas, outing perusahaan, hingga
            antar-jemput bandara. Dengan armada modern, driver profesional, serta harga yang kompetitif, kami siap
            menjadi solusi transportasi terbaik untuk perjalanan rombongan Anda.
          </p>
        </div>

        <div className="service-grid">
          {LAYANAN.map((item, i) => (
            <div className="service-card" key={i}>
              <div className="service-icon">{item.icon}</div>
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= RUTE =============
function RoutesSection() {
  const [open, setOpen] = useState(false);
  const waBase = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  const allRoutes = CITY_ROUTES.flatMap(item =>
    item.routes.map(route => ({ city: item.city, route }))
  );

  return (
    <section id="rute" className="section">
      <div className="container">
        <div className="routes-layout">
          <div className="routes-left">
            <div className="eyebrow">RUTE SEWA BUS PARIWISATA</div>
            <h2>Layanan sewa bus pariwisata se-Jabodetabek</h2>
            <p>
              Bus Deny Trans siap menjemput dari seluruh wilayah Jabodetabek menuju berbagai
              destinasi wisata, ziarah, dan perjalanan dinas ke seluruh Pulau Jawa &amp; Bali.
            </p>
            <a href={waBase} target="_blank" className="routes-book-btn">
              &#9742; BOOKING SEKARANG
            </a>
          </div>

          <div className="accordion-list">
            <div className={`accordion-item ${open ? 'open' : ''}`}>
              <button className="accordion-trigger" onClick={() => setOpen(!open)}>
                <span>Jabodetabek</span>
                <span className="accordion-chevron">▾</span>
              </button>
              {open && (
                <div className="accordion-body">
                  <p className="acc-dest-label">Tujuan yang dilayani:</p>
                  <div className="acc-dest-tags">
                    {['Bali', 'Bandung', 'Yogyakarta', 'Solo', 'Malang', 'Semarang', 'Wali Songo', 'Lampung'].map((dest, i) => (
                      <a
                        key={i}
                        href={`${waBase}?text=${encodeURIComponent('Halo, saya ingin tanya tentang rute ke ' + dest + ' dari Jabodetabek')}`}
                        target="_blank"
                        className="dest-tag"
                      >
                        {dest}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============= PAKET =============
function PaketSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">PAKET PERJALANAN</div>
            <h2>Paket populer sesuai kebutuhan rombongan</h2>
          </div>
          <p>
            Mulai dari paket ziarah yang tenang, study tour edukatif, hingga shuttle
            reguler yang andal. Semua paket bisa disesuaikan dengan durasi, tujuan,
            dan kapasitas peserta.
          </p>
        </div>

        <div className="paket-grid">
          {PAKETS.map((p, i) => (
            <div className={`paket-card ${p.feat ? 'feat' : ''}`} key={i}>
              <div className="paket-tag">{p.tag}</div>
              <h3>{p.title}</h3>
              <p className="paket-desc">{p.desc}</p>
              <div className="paket-meta">
                <span>{p.days}</span>
                <span>{p.persons}</span>
              </div>
              <div className="paket-foot">
                <div className="paket-price">
                  {p.price} {p.unit && <small>{p.unit}</small>}
                </div>
                <a
                  className={`btn ${p.feat ? 'btn-primary' : 'btn-dark'}`}
                  href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
                  target="_blank"
                >
                  Tanya Paket
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= TESTIMONIALS =============
function Testimonials() {
  const doubled = [...TESTI_PHOTOS, ...TESTI_PHOTOS];
  return (
    <section className="section testi-section">
      <div className="container">
        <div className="testi-head">
          <div className="testi-stars-top">★★★★★</div>
          <h2>Testi Customer</h2>
          <p>Lebih dari <strong>10.000+</strong> pelanggan puas menggunakan Bus Pariwisata Deny Trans,<br />ayo Jalan-Jalan dan <em>booking</em> bus pariwisata kami sekarang!</p>
        </div>
      </div>
      <div className="testi-marquee">
        <div className="testi-marquee-inner">
          {doubled.map((item, i) => (
            <div className="testi-photo-item" key={i}>
              <img src={item.img} alt={item.caption} className="testi-photo-img" />
              <div className="testi-photo-caption">{item.caption}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= FAQ =============
function FAQSection() {
  const [open, setOpen] = useState(0);

  return (
    <section id="faq" className="section faq-area">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">FAQ</div>
            <h2>Pertanyaan yang sering diajukan pelanggan</h2>
          </div>
          <p>
            Tidak menemukan info rute atau harga yang Anda cari? Hubungi tim admin kami
            via WhatsApp untuk konsultasi cepat dan penawaran yang sesuai.
          </p>
        </div>

        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button
                className="faq-q"
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <span>{f.q}</span>
                <strong>{open === i ? '−' : '+'}</strong>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= KONTAK =============
function ContactSection() {
  return (
    <section id="kontak" className="section contact-final">
      <div className="container">
        <div className="eyebrow" style={{textAlign:'center'}}>HUBUNGI KAMI</div>
        <h2 style={{textAlign:'center', marginBottom:'48px'}}>Kami siap membantu Anda kapan saja</h2>

        <div className="maps-hero-wrap">
          <iframe
            src={KONTAK.mapsEmbed}
            className="maps-iframe"
            allowFullScreen=""
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="Lokasi Deny Trans"
          />
          <div className="maps-overlay-card">
            <div className="maps-overlay-badge">📍 Lokasi Kami</div>
            <h3>Deny Trans</h3>
            <p>{KONTAK.alamat}</p>
            <div className="maps-overlay-divider" />
            <div className="maps-contact-row">
              <span>💬</span>
              <span>{KONTAK.wa1} / {KONTAK.wa2}</span>
            </div>
            <div className="maps-contact-row">
              <span>✉️</span>
              <span>{KONTAK.email}</span>
            </div>
            <div className="maps-overlay-divider" />
            <a href={KONTAK.maps} target="_blank" className="maps-open-btn">
              Buka di Google Maps ↗
            </a>
          </div>
        </div>

        <div className="contact-actions-row">
          <a className="btn btn-primary" href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`} target="_blank">
            💬 Chat WhatsApp 1
          </a>
          <a className="btn btn-dark" href={`https://wa.me/${KONTAK.wa2.replace(/[^\d]/g, '')}`} target="_blank">
            💬 Chat WhatsApp 2
          </a>
          <a className="btn btn-ghost" href={`mailto:${KONTAK.email}`}>
            ✉️ Kirim Email
          </a>
        </div>
      </div>
    </section>
  );
}

// ============= HOME MAP =============
function HomeMapSection() {
  return (
    <section className="home-map-section">
      <div className="container">
        <div className="home-map-grid">
          <div className="home-map-info">
            <div className="eyebrow">LOKASI KAMI</div>
            <h2>Kantor &amp; Pool<br />Bus Deny Trans</h2>
            <p>Berlokasi strategis di Jakarta Selatan, mudah diakses dari seluruh wilayah Jabodetabek.</p>
            <div className="home-map-details">
              <div className="hm-row"><span>📍</span><span>{KONTAK.alamat}</span></div>
              <div className="hm-row"><span>💬</span><span>{KONTAK.wa1} / {KONTAK.wa2}</span></div>
              <div className="hm-row"><span>🕐</span><span>Senin–Minggu, 08.00–19.00 WIB</span></div>
            </div>
            <div className="hm-ctas">
              <a href={KONTAK.maps} target="_blank" className="btn btn-dark btn-sm">Buka Google Maps ↗</a>
              <a href="kontak.html" className="btn btn-ghost btn-sm">Halaman Kontak</a>
            </div>
          </div>
          <div className="home-map-embed">
            <iframe
              src={KONTAK.mapsEmbed}
              className="home-map-iframe"
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Lokasi Deny Trans"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ============= CTA BAND =============
function CTASection() {
  return (
    <section className="cta-band">
      <div className="container cta-band-inner">
        <div>
          <h3>Sewa Bus Pariwisata Sekarang</h3>
          <p>
            Nikmati kemudahan menyewa bus pariwisata dengan pilihan armada lengkap, harga
            transparan, dan pelayanan profesional. Cocok untuk kebutuhan bisnis maupun pribadi,
            dengan proses pemesanan yang cepat melalui WhatsApp.
          </p>
        </div>
        <a
          className="btn btn-primary"
          href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
          target="_blank"
        >
          Booking Sekarang
        </a>
      </div>
    </section>
  );
}

// ============= FOOTER =============
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div>
          <div className="footer-brand">Deny Trans</div>
          <p>
            DenyTrans menyediakan layanan sewa bus pariwisata mewah dengan pelayanan
            premium dan berkualitas. Berlokasi di Cianjur, kami menawarkan berbagai
            pilihan kendaraan dengan kapasitas yang dapat disesuaikan dengan kebutuhan
            perjalanan Anda, dengan tujuan ke seluruh Pulau Jawa, Bali, Palembang, dan Lampung.
          </p>
          <a
            className="btn btn-primary btn-sm"
            href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
            target="_blank"
            style={{ marginTop: '18px', display: 'inline-flex' }}
          >
            Booking & Informasi
          </a>
        </div>
        <div>
          <h4>Kontak Kami</h4>
          <ul className="footer-list">
            <li>{KONTAK.alamat}</li>
            <li>{KONTAK.wa1} / {KONTAK.wa2}</li>
            <li>{KONTAK.email}</li>
          </ul>
        </div>
        <div>
          <h4>Tautan Penting</h4>
          <ul className="footer-list">
            <li><a href="#home">Home</a></li>
            <li><a href="#armada">Armada</a></li>
            <li><a href="#layanan">Layanan</a></li>
            <li><a href="tentang-kami.html">Tentang Kami</a></li>
            <li><a href="kontak.html">Kontak</a></li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="rute.html">Rute</a></li>
          </ul>
        </div>
        <div>
          <h4>Layanan Kami</h4>
          <ul className="footer-list">
            <li>Sewa Bus Wisata</li>
            <li>Ziarah Wali Songo</li>
            <li>Study Tour Sekolah</li>
            <li>Outing Perusahaan</li>
            <li>Perjalanan Dinas</li>
            <li>Antar Jemput Bandara</li>
            <li>Shuttle Cianjur – Jakarta PP</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        Hak cipta dilindungi © 2026 Bus Deny Trans | Bus Pariwisata Premium dan Mewah
      </div>
    </footer>
  );
}

// ============= APP ROOT =============
function App() {
  const [bookingArmada, setBookingArmada] = useState(null);
  return (
    <>
      <Nav />
      <Hero />
      <QuickBooking />
      <About />
      <Stats />
      <Armada onBook={setBookingArmada} />
      <LayananSection />
      <PaketSection />
      <Testimonials />
      <HomeMapSection />
      <CTASection />
      <Footer />
      {bookingArmada && (
        <BookingModal armada={bookingArmada} onClose={() => setBookingArmada(null)} />
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);