/* ============================================================
   GlowMerald — Info / Help pages (Bantuan)
   Cara Pemesanan · Pengiriman · Kebijakan Privasi
   ============================================================ */
const { useState:useStateInf } = React;

/* Reusable header for info pages */
function InfoHead({ crumb, title, sub }){
  const { navigate } = useApp();
  return (
    <div className="page-head">
      <div className="container">
        <div className="crumb" style={{ marginBottom:14 }}>
          <a onClick={()=>navigate('home')}>Home</a><Icon name="chevron" size={13}/>
          <span>{crumb}</span>
        </div>
        <h1 style={{ fontSize:'clamp(2rem,6vw,3rem)' }}>{title}</h1>
        {sub && <p className="muted" style={{ maxWidth:560, marginTop:10 }}>{sub}</p>}
      </div>
    </div>
  );
}

/* ---- CARA PEMESANAN ---- */
function HowToOrderPage(){
  const { navigate } = useApp();
  const steps = [
    { ic:'search', t:'Pilih Produk', d:'Jelajahi koleksi di halaman Shop. Buka detail produk untuk membaca kandungan, cara pakai, dan ulasan sebelum memutuskan.' },
    { ic:'cart',   t:'Tambah ke Keranjang', d:'Pilih varian dan jumlah, lalu tekan “Tambah ke Keranjang”. Kamu bisa meninjau seluruh pesanan kapan saja melalui ikon keranjang.' },
    { ic:'truck',  t:'Isi Data Pengiriman', d:'Masukkan alamat lengkap dan pilih metode pengiriman (JNE, J&T, atau SiCepat) sesuai kebutuhanmu.' },
    { ic:'gem',    t:'Pilih Pembayaran', d:'Bayar dengan transfer bank, virtual account, e-wallet (GoPay, OVO, Dana), atau QRIS — semua diproses dengan aman.' },
    { ic:'check',  t:'Konfirmasi & Lacak', d:'Setelah pembayaran terkonfirmasi, kamu akan menerima nomor pesanan. Pantau statusnya melalui menu “Pesanan Saya”.' },
  ];
  const faqs = [
    ['Apakah saya harus membuat akun untuk memesan?', 'Kamu dapat berbelanja sebagai tamu, namun membuat akun memudahkan pelacakan pesanan, menyimpan alamat, dan mengumpulkan loyalty points.'],
    ['Bagaimana jika pembayaran saya gagal?', 'Pesanan akan tersimpan di keranjang. Kamu bisa mengulang proses checkout dan memilih metode pembayaran lain kapan saja.'],
    ['Bisakah saya mengubah pesanan setelah dibuat?', 'Selama status masih “Diproses”, hubungi tim kami melalui WhatsApp dan kami akan membantu menyesuaikan pesananmu.'],
  ];
  return (
    <div>
      <InfoHead crumb="Cara Pemesanan" title="Cara Pemesanan" sub="Memulai ritual GlowMerald hanya butuh beberapa langkah sederhana." />
      <div className="container section info-wrap">
        <ol className="order-steps">
          {steps.map((s,i)=>(
            <li key={i} className="order-step">
              <span className="os-num">{String(i+1).padStart(2,'0')}</span>
              <span className="os-ic"><Icon name={s.ic} size={22} stroke={1.5}/></span>
              <div className="os-body">
                <h3>{s.t}</h3>
                <p className="muted" style={{ fontWeight:300, margin:0 }}>{s.d}</p>
              </div>
            </li>
          ))}
        </ol>

        <div className="info-faq">
          <h2 style={{ fontSize:'1.7rem', marginBottom:8 }}>Pertanyaan Umum</h2>
          <Accordion items={faqs} />
        </div>

        <div className="info-cta">
          <div>
            <h3 className="serif" style={{ fontSize:'1.4rem' }}>Siap memulai?</h3>
            <p className="muted" style={{ fontWeight:300, margin:'6px 0 0' }}>Temukan produk yang sesuai dengan kebutuhan kulitmu.</p>
          </div>
          <button className="btn btn-gold" onClick={()=>navigate('shop')}>Mulai Belanja</button>
        </div>
      </div>
    </div>
  );
}

/* ---- PENGIRIMAN ---- */
function ShippingPage(){
  const { navigate } = useApp();
  const faqs = [
    ['Apakah tersedia pengiriman ke seluruh Indonesia?', 'Ya. Kami mengirim ke seluruh wilayah Indonesia melalui mitra logistik tepercaya. Estimasi waktu menyesuaikan lokasi tujuan.'],
    ['Berapa lama pesanan saya diproses?', 'Pesanan yang masuk sebelum pukul 14.00 WIB pada hari kerja umumnya diproses di hari yang sama. Selebihnya diproses pada hari kerja berikutnya.'],
    ['Bagaimana cara melacak paket saya?', 'Nomor resi akan tersedia di menu “Pesanan Saya” begitu paket dikirim, lengkap dengan tautan pelacakan.'],
    ['Apakah kemasan aman untuk produk skincare?', 'Setiap pesanan dikemas dengan pelindung tambahan untuk menjaga kualitas dan keamanan produk selama perjalanan.'],
  ];
  return (
    <div>
      <InfoHead crumb="Pengiriman" title="Pengiriman" sub="Informasi mitra logistik, estimasi waktu, dan biaya pengiriman." />
      <div className="container section info-wrap">
        <div className="ship-grid">
          {SHIPPING.map(s=>(
            <div key={s.id} className="ship-card">
              <span className="ship-ic"><Icon name="truck" size={24} stroke={1.4}/></span>
              <h3>{s.name}</h3>
              <div className="ship-eta muted">Estimasi {s.eta}</div>
              <div className="ship-price">mulai {formatRp(s.price)}</div>
            </div>
          ))}
        </div>

        <div className="ship-notes">
          <div className="note-item"><span className="note-ic"><Icon name="check" size={15}/></span><div><strong>Gratis ongkir</strong> untuk pembelian di atas {formatRp(750000)} ke seluruh Indonesia.</div></div>
          <div className="note-item"><span className="note-ic"><Icon name="check" size={15}/></span><div><strong>Proses cepat</strong> — pesanan sebelum 14.00 WIB diproses di hari yang sama.</div></div>
          <div className="note-item"><span className="note-ic"><Icon name="check" size={15}/></span><div><strong>Kemasan aman</strong> dengan pelindung tambahan untuk setiap produk.</div></div>
        </div>

        <div className="info-faq">
          <h2 style={{ fontSize:'1.7rem', marginBottom:8 }}>Pertanyaan Umum</h2>
          <Accordion items={faqs} />
        </div>

        <div className="info-cta">
          <div>
            <h3 className="serif" style={{ fontSize:'1.4rem' }}>Ada pertanyaan lain?</h3>
            <p className="muted" style={{ fontWeight:300, margin:'6px 0 0' }}>Tim kami siap membantu seputar pengiriman pesananmu.</p>
          </div>
          <button className="btn btn-ghost" onClick={()=>navigate('contact')}>Hubungi Kami</button>
        </div>
      </div>
    </div>
  );
}

/* ---- KEBIJAKAN PRIVASI ---- */
function PrivacyPage(){
  const sections = [
    ['Informasi yang Kami Kumpulkan', 'Kami mengumpulkan informasi yang kamu berikan saat membuat akun atau melakukan pemesanan, seperti nama, alamat email, nomor telepon, dan alamat pengiriman. Kami juga mengumpulkan data penggunaan untuk meningkatkan pengalaman berbelanja.'],
    ['Bagaimana Kami Menggunakan Informasi', 'Informasi digunakan untuk memproses pesanan, mengirimkan pembaruan status, memberikan layanan pelanggan, serta — dengan persetujuanmu — mengirim informasi promo dan peluncuran produk.'],
    ['Keamanan Data', 'Kami menerapkan langkah-langkah keamanan yang wajar untuk melindungi data pribadimu. Informasi pembayaran diproses melalui penyedia pembayaran tepercaya dan tidak kami simpan di server kami.'],
    ['Berbagi dengan Pihak Ketiga', 'Kami hanya membagikan data seperlunya kepada mitra logistik dan penyedia pembayaran untuk menyelesaikan pesananmu. Kami tidak menjual data pribadi kepada pihak mana pun.'],
    ['Hak Kamu', 'Kamu berhak mengakses, memperbarui, atau meminta penghapusan data pribadimu. Hubungi kami kapan saja untuk menggunakan hak-hak ini.'],
    ['Cookie', 'Situs kami menggunakan cookie untuk menyimpan preferensi dan menjaga isi keranjangmu. Kamu dapat mengatur preferensi cookie melalui pengaturan peramban.'],
  ];
  return (
    <div>
      <InfoHead crumb="Kebijakan Privasi" title="Kebijakan Privasi" sub="Terakhir diperbarui 8 Juni 2026. Privasimu adalah prioritas kami." />
      <div className="container section info-wrap">
        <div className="legal-body">
          <p className="muted" style={{ fontWeight:300 }}>
            PT Global Makmur Sempurna (“GlowMerald”, “kami”) menghargai kepercayaanmu. Kebijakan ini menjelaskan bagaimana kami mengumpulkan, menggunakan, dan melindungi informasi pribadimu saat menggunakan situs ini.
          </p>
          {sections.map(([t,d],i)=>(
            <div key={i} className="legal-sec">
              <h3>{String(i+1).padStart(2,'0')} · {t}</h3>
              <p className="muted" style={{ fontWeight:300, margin:0 }}>{d}</p>
            </div>
          ))}
          <div className="legal-contact">
            <Icon name="shield" size={20} style={{ color:'var(--emerald)' }}/>
            <div>Pertanyaan tentang privasi? Hubungi kami di <strong>official@glowmerald.id</strong></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Shared Accordion ---- */
function Accordion({ items }){
  const [open,setOpen] = useStateInf(0);
  return (
    <div className="accordion">
      {items.map(([q,a],i)=>(
        <div key={i} className={'acc-row'+(open===i?' open':'')}>
          <button className="acc-q" onClick={()=>setOpen(open===i?-1:i)}>
            <span>{q}</span>
            <Icon name="plus" size={18} style={{ transition:'.25s', transform:open===i?'rotate(45deg)':'none', flexShrink:0 }}/>
          </button>
          <div className="acc-a"><p className="muted" style={{ fontWeight:300, margin:0 }}>{a}</p></div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { HowToOrderPage, ShippingPage, PrivacyPage, Accordion, InfoHead });