// Shared components for all detail pages
const { useState, useEffect } = React;

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

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

  const close = () => setMenuOpen(false);
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;

  return (
    <>
      <nav className={`detail-nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="container detail-nav-inner">
          <a href="index.html" className="detail-brand">
            <img src="assets/logo-deny-trans.png" alt="Deny Trans" className="nav-logo-img" />
            <span>DENY TRANS</span>
          </a>
          <div className="detail-nav-links">
            <a href="index.html">Home</a>
            <a href="index.html#armada">Armada</a>
            <a href="tentang-kami.html">Tentang Kami</a>
            <a href="rute.html">Rute</a>
            <a href="faq.html">FAQ</a>
            <a href="kontak.html">Kontak</a>
          </div>
          <div className="detail-nav-right">
            <a className="detail-book-btn" href={wa} target="_blank">BOOKING SEKARANG</a>
            <button
              className={`detail-hamburger ${menuOpen ? 'open' : ''}`}
              onClick={() => setMenuOpen(!menuOpen)}
              aria-label="Menu"
            >
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>

      {menuOpen && (
        <div className="detail-mobile-menu">
          <a href="index.html" onClick={close}>Home</a>
          <a href="index.html#armada" onClick={close}>Armada</a>
          <a href="tentang-kami.html" onClick={close}>Tentang Kami</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="detail-book-btn" href={wa} target="_blank" onClick={close}
             style={{display:'flex', justifyContent:'center', borderRadius:'999px'}}>
            BOOKING SEKARANG
          </a>
        </div>
      )}
    </>
  );
}

function BookingSteps() {
  const steps = [
    { n: '#1', title: 'Tentukan Kebutuhan', desc: 'Siapkan detail tujuan, tanggal, durasi, dan jumlah penumpang.' },
    { n: '#2', title: 'Hubungi Kami', desc: 'Chat WhatsApp untuk berkonsultasi dan menjelaskan kebutuhan perjalanan Anda.' },
    { n: '#3', title: 'Dapatkan Penawaran', desc: 'Kami akan memberikan penawaran terbaik sesuai rute dan kebutuhan Anda.' },
    { n: '#4', title: 'Konfirmasi & Bayar', desc: 'Setelah cocok, konfirmasi dan lakukan pembayaran untuk mengamankan unit.' },
  ];
  return (
    <section className="section detail-booking-area">
      <div className="container">
        <div className="detail-section-title center">
          <div className="eyebrow">CARA BOOKING BUS DENY TRANS</div>
          <h3>4 Langkah Mudah Booking Bus</h3>
          <p>Proses pemesanan yang cepat dan transparan, tanpa ribet.</p>
        </div>
        <div className="detail-step-list">
          {steps.map((s, i) => (
            <div className="detail-step-card" key={i}>
              <div className="detail-step-number">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  return (
    <section className="detail-cta-band">
      <div className="container detail-cta-inner">
        <div>
          <h3>Siap Booking Bus Sekarang?</h3>
          <p>Hubungi Deny Trans dan dapatkan penawaran terbaik untuk perjalanan Anda.</p>
        </div>
        <a className="detail-book-btn" href={wa} target="_blank">BOOKING SEKARANG</a>
      </div>
    </section>
  );
}

function FooterPage() {
  return (
    <footer className="detail-footer">
      <div className="container detail-footer-inner">
        <div>
          <strong>DENY TRANS</strong>
          <p>Sewa bus pariwisata premium di Jabodetabek, Cianjur, dan Serang.</p>
        </div>
        <div>
          <p>{KONTAK.alamat}</p>
          <p>{KONTAK.wa1} | {KONTAK.wa2}</p>
          <p>{KONTAK.email}</p>
        </div>
      </div>
    </footer>
  );
}