// ============================================================
// SECTION 8 — Final CTA + Footer
// Big editorial CTA with product photo + brand footer
// ============================================================

function Section8() {
  // Copy contact text to clipboard with brief inline "Tersalin!" feedback.
  const copyText = (text, el) => {
    const done = () => {
      if (!el) return;
      const prev = el.textContent;
      el.classList.add('is-copied');
      el.textContent = 'Tersalin!';
      setTimeout(() => {
        el.textContent = prev;
        el.classList.remove('is-copied');
      }, 1200);
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(done).catch(() => {
        fallbackCopy(text); done();
      });
    } else {
      fallbackCopy(text); done();
    }
  };
  const fallbackCopy = (text) => {
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.select();
    try { document.execCommand('copy'); } catch (e) {}
    document.body.removeChild(ta);
  };

  return (
    <>
      <footer className="s9" id="kontak">
        <div className="s9-container">
          <div className="s9-top">
            <div className="s9-brand">
              <img src="assets/logo-yojea-white.webp" alt="Yojea" className="s9-logo" />
              <p className="s9-brand-tag">
                Jamu Modern Wanita<br/>No. 1 di Indonesia.
              </p>
            </div>

            <div className="s9-cols">
              <div className="s9-col">
                <div className="s9-col-title">Produk</div>
                <a href="#manfaat">Manfaat</a>
                <a href="#testimoni">Testimoni</a>
                <a href="#faq">FAQ</a>
              </div>
              <div className="s9-col">
                <div className="s9-col-title">Beli di</div>
                <a href="https://api.whatsapp.com/send?phone=6281217010008&text=Hai%2C%20saya%20ingin%20memesan%20produk%20Yojea%2C%20apakah%20bisa%20dibantu%3F%20%F0%9F%98%8A" target="_blank" rel="noopener noreferrer">Tokopedia</a>
                <a href="https://api.whatsapp.com/send?phone=6281217010008&text=Hai%2C%20saya%20ingin%20memesan%20produk%20Yojea%2C%20apakah%20bisa%20dibantu%3F%20%F0%9F%98%8A" target="_blank" rel="noopener noreferrer">Shopee</a>
                <a href="https://api.whatsapp.com/send?phone=6281217010008&text=Hai%2C%20saya%20ingin%20memesan%20produk%20Yojea%2C%20apakah%20bisa%20dibantu%3F%20%F0%9F%98%8A" target="_blank" rel="noopener noreferrer">TikTok Shop</a>
                <a href="https://api.whatsapp.com/send?phone=6281217010008&text=Hai%2C%20saya%20ingin%20memesan%20produk%20Yojea%2C%20apakah%20bisa%20dibantu%3F%20%F0%9F%98%8A" target="_blank" rel="noopener noreferrer">Web Yojea</a>
              </div>
              <div className="s9-col">
                <div className="s9-col-title">Kontak</div>
                <button
                  type="button"
                  className="s9-copy-link"
                  onClick={(e) => copyText('yojeaofficial@gmail.com', e.currentTarget.querySelector('.s9-link-label'))}
                >
                  <svg className="s9-link-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="1.5" y="3" width="13" height="10" rx="1.6" stroke="currentColor" strokeWidth="1.3"/><path d="M2 4l6 4.2L14 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  <span className="s9-link-label">yojeaofficial@gmail.com</span>
                </button>
                <button
                  type="button"
                  className="s9-copy-link"
                  onClick={(e) => copyText('+62 812-1701-0008', e.currentTarget.querySelector('.s9-link-label'))}
                >
                  <svg className="s9-link-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 1.7a6.3 6.3 0 00-5.4 9.5L1.7 14.3l3.2-.9A6.3 6.3 0 108 1.7z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/><path d="M6 5.2c.2-.5.4-.5.6-.5h.4c.2 0 .3 0 .4.4l.4 1c.1.2 0 .4-.1.5l-.3.4c-.1.1-.1.2 0 .4.2.4.6.9 1.1 1.2.2.1.3.1.4 0l.3-.3c.2-.2.3-.2.5-.1l1 .5c.2.1.3.2.3.4 0 .5-.2 1-.6 1.2-.4.2-1 .3-2-.1-1.2-.5-2.2-1.5-2.8-2.7-.4-.9-.4-1.5-.3-1.8z" fill="currentColor"/></svg>
                  <span className="s9-link-label">+62 812-1701-0008</span>
                </button>
                <a href="https://www.instagram.com/yojea_official/" target="_blank" rel="noopener noreferrer">
                  <svg className="s9-link-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="1.7" y="1.7" width="12.6" height="12.6" rx="3.6" stroke="currentColor" strokeWidth="1.3"/><circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.3"/><circle cx="11.4" cy="4.6" r="0.9" fill="currentColor"/></svg>
                  <span className="s9-link-label">Instagram @yojea_official</span>
                </a>
                <a href="https://www.tiktok.com/@yojea_official" target="_blank" rel="noopener noreferrer">
                  <svg className="s9-link-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M9.3 1.5v8.7a2.3 2.3 0 11-1.8-2.25V6.1A4.1 4.1 0 109.3 10V5.6a4.6 4.6 0 002.9 1V4.7a2.7 2.7 0 01-2.4-2.4 4 4 0 01-.03-.8H9.3z" fill="currentColor"/></svg>
                  <span className="s9-link-label">TikTok @yojea_official</span>
                </a>
              </div>
            </div>
          </div>

          <div className="s9-divider" />

          <div className="s9-bottom">
            <div className="s9-copy">© 2026 Yojea Indonesia · Diramu sejak 1970</div>
            <div className="s9-legal">
              <a href="#">BPOM TR246062651</a>
            </div>
          </div>

          <div className="s9-mega">YOJEA</div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Section8 });
