// Terms & conditions for online orders — linked from the checkout TnC checkbox
// and the footer. Keep in sync with how checkout/cancel/shipping actually work
// (api/_shop-core.js): 60-min payment window, cancel until courier pickup,
// Jabodetabek shipping subsidy.

const TERMS = [
  ["Pemesanan & harga", [
    "Semua harga dalam Rupiah. Total yang berlaku adalah total yang tampil di halaman pembayaran Midtrans.",
    "Harga member berlaku jika kamu login ke akun onethird saat checkout.",
    "Stok ditahan selama pesanan menunggu pembayaran. Jika dalam kasus langka stok ternyata habis setelah kamu membayar, kami akan menghubungimu dan mengembalikan dana secara penuh.",
  ]],
  ["Pembayaran", [
    "Pembayaran diproses oleh Midtrans: QRIS, virtual account, e-wallet, dan kartu.",
    "Batas waktu pembayaran 60 menit sejak pesanan dibuat. Lewat dari itu pesanan otomatis batal dan stok dilepas.",
    "Konfirmasi pembayaran dan nomor resi dikirim ke email yang kamu isi saat checkout. Cek juga folder spam/promosi.",
  ]],
  ["Pengiriman", [
    "Pesanan dikirim dari Tangerang melalui JNE, SiCepat, J&T, atau AnterAja. Pesanan diproses setelah pembayaran terkonfirmasi, dan nomor resi dikirim via email serta tampil di halaman pesanan.",
    "Estimasi waktu kirim berasal dari kurir dan bukan jaminan.",
    "Subsidi ongkir Rp9.000 berlaku untuk alamat Jabodetabek (kode pos 10xxx–17xxx), sehingga opsi kurir termurah menjadi gratis.",
    "Pastikan nama penerima, nomor telepon, dan alamat sudah benar. Biaya kirim ulang akibat alamat yang salah atau tidak lengkap ditanggung pembeli.",
  ]],
  ["Pembatalan", [
    "Pesanan bisa kamu batalkan sendiri dari halaman pesanan selama kurir belum mengambil paket.",
    "Jika pesanan yang dibatalkan sudah dibayar, kami akan menghubungimu via WhatsApp untuk proses pengembalian dana.",
    "Setelah paket diambil kurir, pesanan tidak dapat dibatalkan.",
  ]],
  ["Barang rusak atau salah kirim", [
    "Hubungi kami via WhatsApp maksimal 2×24 jam setelah paket diterima, sertakan video unboxing tanpa jeda sejak paket belum dibuka.",
    "Parfum yang sudah dibuka atau dipakai tidak dapat dikembalikan, kecuali rusak atau tidak sesuai pesanan.",
  ]],
];

// The points a buyer must see before paying — shown right above the TnC
// checkbox on checkout. Keep consistent with TERMS above.
const TERMS_HIGHLIGHTS = [
  "Bayar maksimal 60 menit — lewat dari itu pesanan batal otomatis.",
  "Pembatalan hanya bisa sebelum kurir pickup. Pesanan yang sudah dibayar lalu dibatalkan, dananya kami kembalikan secara manual.",
  "Parfum yang sudah dibuka/dipakai tidak bisa diretur, kecuali rusak atau salah kirim.",
  "Komplain rusak/salah kirim maksimal 2×24 jam setelah paket diterima, wajib video unboxing tanpa jeda.",
  "Biaya kirim ulang karena alamat salah atau tidak lengkap ditanggung pembeli.",
];
window.TERMS_HIGHLIGHTS = TERMS_HIGHLIGHTS;

const Terms = ({ navigate }) => (
  <main>
    <section style={{ padding: "60px var(--pad-x) 120px", maxWidth: 820, margin: "0 auto" }}>
      <span className="caption">Belanja online</span>
      <h1 className="d-l" style={{ fontStyle: "italic", margin: "16px 0 12px" }}>Syarat &amp; Ketentuan</h1>
      <p className="mono" style={{ fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--ink-mute)", margin: "0 0 48px" }}>
        Berlaku untuk pembelian di onethirdscent.com · Diperbarui 14 September 2026
      </p>

      {TERMS.map(([title, points], i) => (
        <div key={title} style={{ borderTop: "1px solid var(--hair-strong)", padding: "28px 0" }}>
          <SectionTag index={String(i + 1).padStart(2, "0")} total={String(TERMS.length).padStart(2, "0")} label={title} />
          <ul style={{ margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            {points.map((t) => (
              <li key={t} style={{ fontSize: 15, lineHeight: 1.65 }}>{t}</li>
            ))}
          </ul>
        </div>
      ))}

      <div style={{ borderTop: "1px solid var(--hair-strong)", paddingTop: 28 }}>
        <p className="mono" style={{ fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--ink-mute)", lineHeight: 1.8, margin: 0 }}>
          Pertanyaan? <a className="lnk" href="https://wa.me/6287789777109" target="_blank" rel="noreferrer">WhatsApp +62 877-8977-7109</a>
          {" "}· <a className="lnk" href="mailto:hello@onethirdscent.com">hello@onethirdscent.com</a>
        </p>
      </div>

      <button className="btn" style={{ marginTop: 40 }} onClick={() => navigate("/products")}>Back to shop</button>
    </section>
  </main>
);

window.Terms = Terms;