function FAQPageHero() {
  return (
    <section className="faq-page-hero">
      <div className="faq-hero-bg" />
      <div className="container faq-hero-inner">
        <div className="page-breadcrumb">
          <a href="index.html">Home</a><span>›</span><span>FAQ</span>
        </div>
        <div className="eyebrow light">PUSAT BANTUAN</div>
        <h1 className="faq-hero-h1">Pertanyaan yang<br />Sering Diajukan</h1>
        <p className="faq-hero-sub">
          Temukan jawaban atas pertanyaan seputar harga, rute, cara booking, armada,
          dan layanan Bus Deny Trans di sini.
        </p>
        <div className="faq-hero-pills">
          <span>💰 Harga</span>
          <span>🚌 Armada</span>
          <span>📋 Booking</span>
          <span>🗺️ Rute</span>
          <span>✅ Legalitas</span>
        </div>
      </div>
    </section>
  );
}

function FAQPageList() {
  const { useState } = React;
  const [open, setOpen] = useState(0);

  const categories = {
    0: '📋 Booking',
    1: '💰 Harga',
    2: '🚌 Layanan',
    3: '📋 Booking',
    4: '🏢 Armada',
    5: '💰 Harga',
    6: '🗺️ Rute',
  };

  return (
    <section className="faq-page-list-section">
      <div className="container faq-page-list-wrap">
        <div className="faq-page-sidebar">
          <div className="faq-sidebar-card">
            <div className="faq-sidebar-icon">💬</div>
            <h4>Masih ada pertanyaan?</h4>
            <p>Tim kami siap membantu Anda kapan saja via WhatsApp.</p>
            <a
              href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`}
              target="_blank"
              className="faq-sidebar-btn"
            >
              Chat {KONTAK.wa1}
            </a>
            <a
              href={`https://wa.me/${KONTAK.wa2.replace(/[^\d]/g, '')}`}
              target="_blank"
              className="faq-sidebar-btn secondary"
            >
              Chat {KONTAK.wa2}
            </a>
          </div>
          <div className="faq-sidebar-info">
            <div className="faq-info-row">
              <span>🕐</span>
              <div><strong>Jam Operasional</strong><span>Senin–Minggu 08.00–20.00</span></div>
            </div>
            <div className="faq-info-row">
              <span>⚡</span>
              <div><strong>Respon Cepat</strong><span>Rata-rata &lt; 5 menit</span></div>
            </div>
            <div className="faq-info-row">
              <span>✉️</span>
              <div><strong>Email</strong><span>{KONTAK.email}</span></div>
            </div>
          </div>
        </div>

        <div className="faq-page-accordion">
          <p className="faq-count">{FAQS.length} pertanyaan tersedia</p>
          {FAQS.map((f, i) => (
            <div className={`faq-page-item ${open === i ? 'open' : ''}`} key={i}>
              <button
                className="faq-page-q"
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="faq-q-left">
                  <span className="faq-q-num">0{i + 1}</span>
                  <span className="faq-q-cat">{categories[i]}</span>
                  <span className="faq-q-text">{f.q}</span>
                </div>
                <span className={`faq-page-chevron ${open === i ? 'open' : ''}`}>▾</span>
              </button>
              {open === i && (
                <div className="faq-page-a">
                  <p>{f.a}</p>
                  <a
                    href={`https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}?text=${encodeURIComponent('Halo, saya ingin bertanya: ' + f.q)}`}
                    target="_blank"
                    className="faq-ask-btn"
                  >
                    Tanya lebih lanjut →
                  </a>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQPageContact() {
  const wa1 = `https://wa.me/${KONTAK.wa1.replace(/[^\d]/g, '')}`;
  const wa2 = `https://wa.me/${KONTAK.wa2.replace(/[^\d]/g, '')}`;
  return (
    <section className="faq-contact-section">
      <div className="container">
        <div className="faq-contact-grid">
          <div className="faq-contact-card wa">
            <div className="faq-contact-icon">💬</div>
            <h4>WhatsApp</h4>
            <p>Respons tercepat. Sampaikan pertanyaan atau langsung booking.</p>
            <div className="faq-contact-btns">
              <a href={wa1} target="_blank" className="btn btn-primary">{KONTAK.wa1}</a>
              <a href={wa2} target="_blank" className="btn btn-dark">{KONTAK.wa2}</a>
            </div>
          </div>
          <div className="faq-contact-card email">
            <div className="faq-contact-icon">✉️</div>
            <h4>Email</h4>
            <p>Untuk pertanyaan detail atau penawaran resmi, kirim email ke kami.</p>
            <a href={`mailto:${KONTAK.email}`} className="faq-contact-link-btn">{KONTAK.email} →</a>
          </div>
          <div className="faq-contact-card location">
            <div className="faq-contact-icon">📍</div>
            <h4>Kantor</h4>
            <p>{KONTAK.alamat}</p>
            <a href="kontak.html" className="faq-contact-link-btn">Lihat Lokasi →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQApp() {
  const { useEffect } = React;
  useEffect(() => { document.title = 'FAQ – Bus Deny Trans | Pertanyaan Seputar Sewa Bus'; }, []);
  return (
    <>
      <NavPage />
      <FAQPageHero />
      <FAQPageList />
      <FAQPageContact />
      <CTASection />
      <FooterPage />
    </>
  );
}

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