// ============================================================
// SECTION 7 — FAQ (accordion)
// ============================================================

function Section7() {
  const faqs = [
    {
      q: 'Apa itu Yojea?',
      a: 'Yojea merupakan minuman kesehatan wanita dengan rasa yang enak, mempunyai kandungan yang kaya anti-oksidan, anti-inflamasi, dan anti-bakteri. Formulasi bahan-bahan alami Yojea dapat membantu mencegah dan mengatasi berbagai masalah kewanitaan.',
    },
    {
      q: 'Bagaimana cara kerja Yojea?',
      a: 'Yojea bekerja dengan menyeimbangkan hormon estrogen dan progesteron dalam tubuh wanita. Formula Yojea mengandung bahan aktif dengan sifat antiinflamasi dan antioksidan yang berperan penting dalam membantu mengatasi nyeri menstruasi dan mendukung kesehatan tubuh secara menyeluruh.',
    },
    {
      q: 'Apa saja bahan utama dalam Yojea?',
      a: 'Bahan utama Yojea terdiri dari Bunga Sidowayah, Kulit Delima, Pulosari, Kayu Rapat, Daun Tapak Liman, dan Madu.',
    },
    {
      q: 'Apakah aman untuk dikonsumsi setiap hari?',
      a: 'Tentu aman, karena Yojea terbuat dari bahan alami sehingga tidak memberikan efek samping dan ketergantungan.',
    },
    {
      q: 'Apakah boleh dikonsumsi ibu hamil?',
      a: 'Untuk kondisi hamil, sebaiknya dikonsultasikan dengan tenaga kesehatan profesional sebelum mengonsumsi Yojea.',
    },
    {
      q: 'Bagaimana cara konsumsi Yojea?',
      a: (
        <>
          <ol className="s7-a-list">
            <li>Dewasa sehari 1–2 sachet, dapat dikonsumsi setiap hari.</li>
            <li>Langsung diminum dari sachetnya.</li>
            <li>Kocok terlebih dahulu sebelum diminum.</li>
          </ol>
        </>
      ),
    },
    {
      q: 'Siapa saja yang boleh mengonsumsi Yojea?',
      a: 'Yojea dapat mulai dikonsumsi mulai dari usia 10 tahun hingga lansia.',
    },
    {
      q: 'Di mana saya bisa membeli Yojea?',
      a: 'Yojea dapat dibeli melalui Shopee, Tokopedia, TikTok Shop, serta Chat Admin.',
    },
    {
      q: 'Apakah sudah tersertifikasi BPOM dan Halal MUI?',
      a: 'Yojea sudah tersertifikasi BPOM dan Halal MUI sehingga keamanannya sudah terjamin.',
    },
    {
      q: 'Apakah menyebabkan ketergantungan?',
      a: 'Yojea tidak menyebabkan efek samping maupun ketergantungan karena terbuat dari bahan-bahan alami sehingga aman untuk dikonsumsi jangka panjang.',
    },
    {
      q: 'Apakah termasuk obat-obatan?',
      a: 'Yojea tidak termasuk obat-obatan karena terbuat dari bahan-bahan alami sehingga bukan obat-obatan yang membuat efek ketergantungan.',
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="s7" id="faq">
      <div className="s7-container">
        <div className="s7-head">
          <div className="s7-eyebrow">
            <span className="s7-eyebrow-line" />
            FAQ · Yang sering ditanya
          </div>
          <h2 className="s7-title">
            Hal-hal yang<br/>
            <em>kamu mau tahu.</em>
          </h2>
          <p className="s7-lead">
            Untuk pertanyaan yang lebih spesifik mengenai produk kami,
            jangan ragu untuk menghubungi kami.
          </p>
          <a
            className="s7-contact-btn"
            href="https://api.whatsapp.com/send?phone=6281217010008&text=Hai%2C%20saya%20ingin%20bertanya%20mengenai%20produk%20Yojea%20lebih%20lanjut%2C%20apakah%20bisa%20dibantu%3F%20%F0%9F%98%8A"
            target="_blank"
            rel="noopener noreferrer"
          >
            <span className="s7-contact-icon" aria-hidden="true">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M21 12a9 9 0 1 1-3.4-7.04L21 4l-1.05 3.36A9 9 0 0 1 21 12z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
                <path d="M9 9.5c.2 2 1.5 3.7 3.4 4.5l1.2-1c.2-.2.5-.3.8-.2l2 .6c.3.1.5.4.5.7v1.6c0 .5-.4.9-.9.9A8 8 0 0 1 8 8.6c0-.5.4-.9.9-.9h1.6c.3 0 .6.2.7.5l.6 2c.1.3 0 .6-.2.8l-1 1.2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
            Contact Us
            <span className="s7-contact-arrow" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M5 3l5 5-5 5M3 8h7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
          </a>
        </div>

        <div className="s7-list">
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={'s7-item' + (isOpen ? ' is-open' : '')}>
                <button className="s7-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span className="s7-q-num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="s7-q-text">{f.q}</span>
                  <span className="s7-q-icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                    </svg>
                  </span>
                </button>
                <div className="s7-a-wrap">
                  <div className="s7-a">{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Section7 });