function KontakHero() {
  return (
    <section className="kontak-hero">
      <div className="kontak-hero-bg" />
      <div className="container kontak-hero-inner">
        <div className="page-breadcrumb">
          <a href="index.html">Home</a><span>›</span><span>Kontak</span>
        </div>
        <div className="eyebrow light">HUBUNGI KAMI</div>
        <h1 className="kontak-hero-h1">Kami Siap<br />Membantu Anda</h1>
        <p className="kontak-hero-sub">
          Konsultasikan kebutuhan perjalanan Anda via WhatsApp, telepon, atau kunjungi
          langsung kantor kami di Jakarta Selatan.
        </p>
        <div className="kontak-hero-badges">
          <div className="kontak-badge"><span>⚡</span><div><strong>Respon &lt; 5 Menit</strong><small>Via WhatsApp</small></div></div>
          <div className="kontak-badge"><span>🕐</span><div><strong>24/7</strong><small>Siap Dihubungi</small></div></div>
          <div className="kontak-badge"><span>📍</span><div><strong>Jakarta Selatan</strong><small>Karet Semanggi</small></div></div>
        </div>
      </div>
    </section>
  );
}

function KontakCards() {
  const wa1 = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  const wa2 = `https://wa.me/${KONTAK.wa2.replace(/[^\d]/g, '')}`;

  return (
    <section className="section">
      <div className="container">
        <div className="kontak-cards-grid-2">
          <div className="kontak-card primary">
            <div className="kontak-card-icon">💬</div>
            <h3>WhatsApp</h3>
            <p>Cara termudah dan tercepat untuk booking atau konsultasi perjalanan Anda. Tim kami siap merespons dalam hitungan menit.</p>
            <div className="kontak-card-detail">
              <div className="kontak-detail-row">
                <span>WA 1</span>
                <strong>{KONTAK.wa1}</strong>
              </div>
              <div className="kontak-detail-row">
                <span>WA 2</span>
                <strong>{KONTAK.wa2}</strong>
              </div>
            </div>
            <div className="kontak-card-actions">
              <a href={wa1} target="_blank" className="btn btn-primary">💬 Chat WA 1</a>
              <a href={wa2} target="_blank" className="btn btn-dark">💬 Chat WA 2</a>
            </div>
          </div>

          <div className="kontak-card">
            <div className="kontak-card-icon">✉️</div>
            <h3>Email</h3>
            <p>Kirim penawaran resmi atau pertanyaan detail melalui email kami. Kami akan membalas dalam 1–2 hari kerja.</p>
            <div className="kontak-card-detail">
              <div className="kontak-detail-row">
                <span>Email</span>
                <strong>{KONTAK.email}</strong>
              </div>
              <div className="kontak-detail-row">
                <span>Balasan</span>
                <strong>1–2 hari kerja</strong>
              </div>
            </div>
            <div className="kontak-card-actions">
              <a href={`mailto:${KONTAK.email}`} className="btn btn-ghost">✉️ Kirim Email</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function KontakMapSection() {
  return (
    <section className="kontak-map-section">
      <div className="container">
        <div className="kontak-map-header">
          <div>
            <div className="eyebrow light">LOKASI KANTOR</div>
            <h2 style={{ color: '#fff', fontSize: 'clamp(24px,3vw,40px)' }}>Kunjungi Kantor Kami</h2>
          </div>
          <div className="kontak-hours-box">
            <div className="kontak-hours-title">🕐 Jam Operasional</div>
            <div className="kontak-hours-row"><span>Senin – Jumat</span><strong>08.00 – 18.00</strong></div>
            <div className="kontak-hours-row"><span>Sabtu &amp; Minggu</span><strong>09.00 – 19.00</strong></div>
            <div className="kontak-hours-note">*Booking WhatsApp tersedia 24/7</div>
          </div>
        </div>

        <div className="maps-hero-wrap" style={{ marginTop: '32px' }}>
          <iframe
            src={KONTAK.mapsEmbed}
            className="maps-iframe"
            allowFullScreen=""
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="Lokasi Deny Trans"
          />
          <div className="maps-overlay-card maps-overlay-dark">
            <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>
    </section>
  );
}

function KontakCTA() {
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}?text=${encodeURIComponent('Halo Deny Trans, saya ingin booking bus pariwisata.')}`;
  return (
    <section className="kontak-cta-section">
      <div className="container kontak-cta-inner">
        <div className="kontak-cta-text">
          <div className="eyebrow">MULAI PERJALANAN ANDA</div>
          <h2>Siap Booking Bus Sekarang?</h2>
          <p>Sampaikan kebutuhan perjalanan Anda — tujuan, tanggal, jumlah peserta, dan jenis armada. Tim kami akan menyiapkan penawaran terbaik.</p>
        </div>
        <div className="kontak-cta-form">
          <div className="kontak-cta-step"><span>1</span><p>Chat WhatsApp dan sampaikan kebutuhan Anda</p></div>
          <div className="kontak-cta-step"><span>2</span><p>Kami kirim penawaran harga terbaik</p></div>
          <div className="kontak-cta-step"><span>3</span><p>Konfirmasi, DP, dan perjalanan siap!</p></div>
          <a href={wa} target="_blank" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: '8px' }}>
            💬 Mulai Chat Sekarang
          </a>
        </div>
      </div>
    </section>
  );
}

function KontakApp() {
  const { useEffect } = React;
  useEffect(() => { document.title = 'Kontak – Bus Deny Trans | Hubungi Kami via WhatsApp'; }, []);
  return (
    <>
      <NavPage />
      <KontakHero />
      <KontakCards />
      <KontakMapSection />
      <KontakCTA />
      <FooterPage />
    </>
  );
}

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