function TentangHero() {
  const wa = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  return (
    <section className="tentang-hero-wrap">
      <div className="container tentang-hero-grid">
        <div className="tentang-hero-left">
          <div className="page-breadcrumb">
            <a href="index.html">Home</a><span>›</span>
            <span>Tentang Kami</span>
          </div>
          <h1 className="tentang-hero-h1">Selamat Datang<br />di Bus Deny Trans</h1>
          <p className="tentang-hero-sub">
            Bus Deny Trans adalah perusahaan sewa bus pariwisata premium yang
            berlokasi di Jawa Barat dan siap melayani berbagai kebutuhan transportasi
            Anda dengan standar pelayanan terbaik.
          </p>
          <p className="tentang-hero-sub">
            Sebagai penyedia <strong>layanan sewa bus pariwisata terpercaya</strong>, kami
            berkomitmen menghadirkan pengalaman perjalanan yang nyaman, aman, dan berkesan
            di setiap perjalanan. Didukung oleh armada modern dan fasilitas lengkap, kami siap
            melayani perjalanan wisata, outing perusahaan, study tour, dan perjalanan dinas
            ke seluruh Indonesia.
          </p>
          <p className="tentang-hero-sub">
            Beroperasi di wilayah Depok dan sekitarnya, Bus Deny Trans melayani rute perjalanan
            ke Pulau Jawa, Bali, Sumatera (Palembang &amp; Lampung), dan kota-kota lainnya.
          </p>
          <div className="tentang-owner-row">
            <img src="assets/owner-deny-trans.png" alt="Bang Deny – CEO Deny Trans" className="tentang-owner-img" />
            <div>
              <strong className="tentang-owner-name">BANG DENY</strong>
              <span className="tentang-owner-title">CEO DENY TRANS</span>
            </div>
          </div>
        </div>
        <div className="tentang-hero-logo">
          <img src="assets/logo-deny-trans.png" alt="Logo Deny Trans" className="tentang-logo-img" />
        </div>
        <div className="tentang-hero-right">
          <div className="tentang-profil-box">
            <div className="tentang-profil-eyebrow">Penyedia Sewa Bus Pariwisata Terpercaya<br />di Cianjur, Jawa Barat</div>
            <h2 className="tentang-profil-title">Bus Deny Trans</h2>
            <p>
              Bus Deny Trans adalah perusahaan yang bergerak di bidang <strong>sewa bus
              pariwisata</strong> yang berlokasi di Jawa Barat. Berdiri sejak tahun 2022, kami
              berkomitmen untuk menyediakan layanan transportasi yang penuh dengan <strong>nyaman,
              aman, dan profesional</strong>.
            </p>
            <p>
              Kami melayani berbagai segmen perjalanan, mulai dari <strong>keluarga, sekolah,
              perusahaan, hingga instansi</strong>. Dengan pengalaman di bidang transportasi
              wisata dan rute lokal, Bus Deny Trans siap menjadi partner perjalanan terbaik Anda.
            </p>
            <a href={wa} target="_blank" className="tentang-cta-btn">&#9742; BOOKING SEKARANG</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function TentangWhyChoose() {
  const items = [
    { title: 'Harga Terjangkau & Fleksibel', desc: 'Menawarkan harga sewa bus yang kompetitif dengan pilihan rute custom sesuai kebutuhan, mulai dari wisata lokal Jawa Barat hingga perjalanan luar pulau.' },
    { title: 'Armada Lengkap & Terawat', desc: 'Seluruh unit kendaraan kami dirawat secara rutin dan dilengkapi fasilitas modern untuk memastikan kenyamanan perjalanan, terutama untuk jarak jauh.' },
    { title: 'Customer Support 24/7', desc: 'Tim kami siap membantu Anda kapan saja, mulai dari konsultasi hingga perjalanan selesai, dengan pelayanan yang responsif dan ramah.' },
    { title: 'Legalitas Lengkap & Aman', desc: 'Kami beroperasi dengan legalitas yang jelas serta mengutamakan standar keselamatan dalam setiap perjalanan.' },
  ];
  return (
    <section className="tentang-why-section">
      <div className="container">
        <div className="eyebrow light" style={{marginBottom:'8px'}}>SEWA BUS PARIWISATA TERBAIK</div>
        <h3 className="tentang-why-title">Mengapa Memilih Bus Deny Trans?</h3>
        <div className="tentang-why-grid">
          {items.map((item, i) => (
            <div className="tentang-why-card" key={i}>
              <h4>{item.title}</h4>
              <p>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TentangBooking() {
  const wa1 = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  const wa2 = `https://wa.me/${KONTAK.wa2.replace(/[^\d]/g, '')}`;
  const steps = [
    {
      n: '#1', title: 'Tentukan Kebutuhan Perjalanan',
      sub: 'Siapkan detail seperti:',
      items: ['Durasi perjalanan', 'Titik penjemputan', 'Tujuan wisata', 'Jumlah peserta', 'Jenis bus yang diinginkan'],
    },
    {
      n: '#2', title: 'Hubungi Kami',
      sub: 'Atau langsung hubungi WhatsApp',
      wa: true,
    },
    {
      n: '#3', title: 'Dapatkan Penawaran Harga',
      sub: 'Kirimkan detail berikut:',
      items: ['Nama', 'Instansi / Perusahaan', 'Nomor WhatsApp', 'Tanggal & durasi perjalanan', 'Lokasi penjemputan & tujuan', 'Jumlah peserta', 'Jenis bus', 'Catatan tambahan'],
      note: 'Tim kami akan segera memberikan penawaran harga terbaik sesuai kebutuhan Anda.',
    },
    {
      n: '#4', title: 'Konfirmasi & Pembayaran',
      sub: 'Setelah menyetujui penawaran:',
      items: ['Lakukan DP minimal 30% untuk mengamankan jadwal', 'Pelunasan dilakukan sebelum keberangkatan', 'Kami akan mengonfirmasi detail perjalanan dan armada'],
    },
    {
      n: '#5', title: 'Nikmati Perjalanan Anda',
      sub: null,
      note: 'Armada akan siap menjemput sesuai jadwal dengan kondisi prima, didukung oleh driver profesional dan standar keselamatan tinggi.',
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="detail-section-title center">
          <div className="eyebrow">BOOKING BUS DENY TRANS</div>
          <h3>Cara Booking Bus Deny Trans</h3>
          <p>Kami menghadirkan proses pemesanan yang mudah, cepat, dan transparan agar Anda dapat fokus menikmati perjalanan.</p>
        </div>
        <div className="tentang-steps-list">
          {steps.map((s, i) => (
            <div className="tentang-step-card" key={i}>
              <div className="tentang-step-header">
                <span className="tentang-step-num">{s.n}</span>
                <h4>{s.title}</h4>
              </div>
              <div className="tentang-step-body">
                {s.sub && !s.wa && <p className="tentang-step-sub"><strong>{s.sub}</strong></p>}
                {s.items && (
                  <ul className="tentang-step-list">
                    {s.items.map((item, j) => <li key={j}>{item}</li>)}
                  </ul>
                )}
                {s.wa && (
                  <div className="tentang-wa-buttons">
                    <a href={wa1} target="_blank" className="tentang-wa-btn">{KONTAK.wa1}</a>
                    <a href={wa2} target="_blank" className="tentang-wa-btn">{KONTAK.wa2}</a>
                  </div>
                )}
                {s.note && <p className="tentang-step-note"><strong>{s.note}</strong></p>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TentangVisiMisi() {
  const misi = [
    ['Menyediakan armada bus pariwisata yang nyaman, aman, dan berkualitas tinggi'],
    ['Memberikan pelayanan terbaik dengan mengutamakan kepuasan pelanggan'],
    ['Mengembangkan tim yang profesional, ramah, dan berintegritas'],
    ['Menjaga standar keselamatan dan perawatan armada secara konsisten'],
    ['Menjadi solusi transportasi yang fleksibel dan dapat diandalkan untuk berbagai kebutuhan perjalanan'],
  ];
  return (
    <section className="tentang-vm-section">
      <div className="container tentang-vm-grid">
        <div className="tentang-vm-left">
          <div className="eyebrow light">Visi &amp; Misi Bus Deny Trans</div>
          <h3 className="tentang-vm-label">Visi</h3>
          <p>Menjadi perusahaan <strong>sewa bus pariwisata terpercaya dan profesional</strong> yang menghadirkan standar layanan premium serta pengalaman perjalanan terbaik di Indonesia.</p>
          <h3 className="tentang-vm-label" style={{marginTop:'28px'}}>Misi</h3>
          <ul className="tentang-misi-list">
            {misi.map(([m], i) => <li key={i}>{m}</li>)}
          </ul>
        </div>
        <div className="tentang-vm-right">
          <img src="assets/tim-deny-trans.png" alt="Tim Deny Trans" className="tentang-vm-img" />
        </div>
      </div>
    </section>
  );
}

function TentangKomitmen() {
  return (
    <section className="section">
      <div className="container tentang-komitmen-grid">
        <div className="tentang-komitmen-img-wrap">
          <img src="assets/big-bus-interior-luxury.png" alt="Interior Bus Deny Trans" className="tentang-komitmen-img" />
        </div>
        <div className="tentang-komitmen-text">
          <div className="eyebrow">Elevating Premium Travel Experiences</div>
          <h3>Komitmen Kami</h3>
          <p>Kami percaya bahwa perjalanan yang baik bukan hanya soal sampai tujuan, tetapi juga pengalaman selama di perjalanan.</p>
          <p><strong>Bus Deny Trans selalu mengutamakan:</strong></p>
          <ul className="tentang-komitmen-list">
            <li>Keselamatan perjalanan</li>
            <li>Kenyamanan pelanggan</li>
            <li>Pelayanan profesional</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function TentangLokasi() {
  return (
    <section className="tentang-lokasi-section">
      <div className="container">
        <div className="eyebrow light" style={{marginBottom:'8px'}}>VISIT OUR PREMIUM OFFICE &amp; POOL</div>
        <h3 style={{color:'#fff', fontSize:'clamp(24px,3vw,36px)', marginBottom:'36px'}}>Kantor &amp; Pool Bus Deny Trans</h3>
        <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 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>Senin–Jumat: 08.00–18.00</span></div>
            <div className="maps-contact-row"><span>🕐</span><span>Sabtu &amp; Minggu: 09.00–19.00</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 TentangApp() {
  useEffect(() => { document.title = 'Tentang Kami – Bus Deny Trans | Sewa Bus Pariwisata Premium Cianjur'; }, []);
  return (
    <>
      <NavPage />
      <TentangHero />
      <TentangWhyChoose />
      <TentangBooking />
      <TentangVisiMisi />
      <TentangKomitmen />
      <TentangLokasi />
      <CTASection />
      <FooterPage />
    </>
  );
}

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