function RuteHero() {
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  return (
    <section className="rute-hero">
      <div className="rute-hero-bg" />
      <div className="container rute-hero-inner">
        <div className="page-breadcrumb">
          <a href="index.html">Home</a><span>›</span><span>Rute</span>
        </div>
        <div className="eyebrow light">LAYANAN SEWA BUS PARIWISATA</div>
        <h1 className="rute-hero-h1">Rute Perjalanan<br /><em>Bus Deny Trans</em></h1>
        <p className="rute-hero-sub">
          Kami melayani penjemputan dari seluruh wilayah <strong>Jabodetabek</strong> menuju berbagai
          destinasi wisata, ziarah, dan perjalanan dinas ke seluruh <strong>Pulau Jawa, Bali, dan Sumatera</strong>.
        </p>
        <div className="rute-hero-stats">
          <div className="rute-stat"><strong>6</strong><span>Kota Penjemputan</span></div>
          <div className="rute-stat"><strong>30+</strong><span>Tujuan Destinasi</span></div>
          <div className="rute-stat"><strong>Jawa &amp; Bali</strong><span>Lintas Pulau</span></div>
          <div className="rute-stat"><strong>24/7</strong><span>Siap Dipesan</span></div>
        </div>
        <a href={wa} target="_blank" className="rute-hero-btn">&#9742; Booking via WhatsApp</a>
      </div>
    </section>
  );
}

function RuteHighlight() {
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  const tagColors = {
    'LONG-TRIP': { bg: '#1a3a5c', text: '#7eb8f0' },
    'WISATA':    { bg: '#1a3d2b', text: '#6dcf95' },
    'SHUTTLE':   { bg: '#3a2a10', text: '#f5c96a' },
    'ZIARAH':    { bg: '#2d1a3a', text: '#c09be0' },
  };
  return (
    <section className="section">
      <div className="container">
        <div className="rute-section-head">
          <div>
            <div className="eyebrow">RUTE UNGGULAN</div>
            <h2>Rute Paling Sering Dipesan</h2>
          </div>
          <p>Rute populer yang paling banyak dipilih pelanggan. Semua bisa dikustomisasi sesuai kebutuhan rombongan Anda.</p>
        </div>
        <div className="rute-highlight-grid">
          {ROUTES.map((r, i) => {
            const tc = tagColors[r.tag] || tagColors['WISATA'];
            return (
              <a
                key={i}
                href={`${wa}?text=${encodeURIComponent('Halo Deny Trans, saya ingin tanya rute ' + r.from + ' → ' + r.to)}`}
                target="_blank"
                className="rute-card"
              >
                <div className="rute-card-tag" style={{ background: tc.bg, color: tc.text }}>{r.tag}</div>
                <div className="rute-card-route">
                  <span className="rute-from">{r.from}</span>
                  <span className="rute-arrow">→</span>
                  <span className="rute-to">{r.to}</span>
                </div>
                <div className="rute-card-time">
                  <span className="rute-time-icon">⏱</span>
                  <span>{r.time}</span>
                </div>
                <div className="rute-card-cta">Pesan Rute Ini ↗</div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function RuteCoverage() {
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  return (
    <section className="rute-coverage-section">
      <div className="container">
        <div className="rute-section-head light">
          <div>
            <div className="eyebrow light">AREA PENJEMPUTAN</div>
            <h2 style={{ color: '#fff' }}>Layanan se-Jabodetabek</h2>
          </div>
          <p style={{ color: 'rgba(255,255,255,0.7)' }}>
            Pilih kota asal Anda — kami siap menjemput dan mengantar ke tujuan manapun.
          </p>
        </div>
        <div className="rute-coverage-grid">
          {CITY_ROUTES.map((city, i) => (
            <div className="rute-coverage-card" key={i}>
              <div className="rute-coverage-city">{city.city}</div>
              <ul className="rute-coverage-list">
                {city.routes.map((route, j) => (
                  <li key={j}>
                    <a
                      href={`${wa}?text=${encodeURIComponent('Halo, saya ingin tanya tentang ' + route)}`}
                      target="_blank"
                    >
                      <span className="rute-list-dot">▸</span> {route}
                    </a>
                  </li>
                ))}
              </ul>
              <a
                href={`${wa}?text=${encodeURIComponent('Halo, saya ingin sewa bus dari wilayah ' + city.city.replace('Sewa Bus ', ''))}`}
                target="_blank"
                className="rute-coverage-book"
              >
                Booking dari {city.city.replace('Sewa Bus ', '')} →
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RuteDestinasi() {
  const destinations = [
    { name: 'Bali', icon: '🌴', desc: '~24 jam, lintas pulau' },
    { name: 'Bandung', icon: '🏔️', desc: '~3 jam dari Jakarta' },
    { name: 'Yogyakarta', icon: '🏛️', desc: '~9 jam via tol' },
    { name: 'Solo', icon: '🎭', desc: '~9 jam via tol' },
    { name: 'Semarang', icon: '🕌', desc: '~7 jam via tol' },
    { name: 'Malang', icon: '🌿', desc: '~14 jam via tol' },
    { name: 'Wali Songo', icon: '🕌', desc: 'Multi-day ziarah' },
    { name: 'Lampung', icon: '🚢', desc: '~8 jam + penyeberangan' },
  ];
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  return (
    <section className="section">
      <div className="container">
        <div className="rute-section-head">
          <div>
            <div className="eyebrow">DESTINASI TUJUAN</div>
            <h2>Kemana Saja Kami Melayani</h2>
          </div>
          <p>Dari wisata alam hingga ziarah religi — semua destinasi bisa dijangkau dengan armada Deny Trans.</p>
        </div>
        <div className="rute-dest-grid">
          {destinations.map((d, i) => (
            <a
              key={i}
              href={`${wa}?text=${encodeURIComponent('Halo, saya ingin sewa bus ke ' + d.name)}`}
              target="_blank"
              className="rute-dest-card"
            >
              <span className="rute-dest-icon">{d.icon}</span>
              <strong className="rute-dest-name">{d.name}</strong>
              <span className="rute-dest-info">{d.desc}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function RuteCTA() {
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  return (
    <section className="rute-cta-band">
      <div className="container rute-cta-inner">
        <div className="rute-cta-icon">🗺️</div>
        <div>
          <h3>Tidak ada rute yang cocok?</h3>
          <p>Kami bisa membuat rute custom sesuai kebutuhan Anda. Konsultasikan perjalanan Anda via WhatsApp.</p>
        </div>
        <div className="rute-cta-btns">
          <a href={wa} target="_blank" className="btn btn-primary">💬 Chat WhatsApp 1</a>
          <a href={`https://wa.me/${KONTAK.wa2.replace(/[^\d]/g, '')}`} target="_blank" className="btn btn-dark">💬 Chat WhatsApp 2</a>
        </div>
      </div>
    </section>
  );
}

function RuteApp() {
  const { useEffect } = React;
  useEffect(() => { document.title = 'Rute Perjalanan – Bus Deny Trans | Sewa Bus Jabodetabek'; }, []);
  return (
    <>
      <NavPage />
      <RuteHero />
      <RuteHighlight />
      <RuteCoverage />
      <RuteDestinasi />
      <RuteCTA />
      <CTASection />
      <FooterPage />
    </>
  );
}

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