// home.jsx — Homepage / Landing (Minimal Japan)

function Countdown() {
  const [t, setT] = React.useState({ h: 8, m: 24, s: 11 });
  React.useEffect(() => {
    const i = setInterval(() => {
      setT(prev => {
        let { h, m, s } = prev;
        s -= 1;
        if (s < 0) { s = 59; m -= 1; }
        if (m < 0) { m = 59; h -= 1; }
        if (h < 0) { h = 23; }
        return { h, m, s };
      });
    }, 1000);
    return () => clearInterval(i);
  }, []);
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="countdown">
      <div className="cd-box">{pad(t.h)}</div>
      <span className="cd-sep">:</span>
      <div className="cd-box">{pad(t.m)}</div>
      <span className="cd-sep">:</span>
      <div className="cd-box">{pad(t.s)}</div>
    </div>
  );
}

function Home({ ctx }) {
  const newProducts   = PRODUCTS.filter(p => p.badges.includes('new')).slice(0, 6);
  const flashProducts = PRODUCTS.filter(p => p.badges.includes('sale')).slice(0, 6);
  const bestSellers   = [...PRODUCTS].sort((a, b) => b.sold - a.sold).slice(0, 6);

  return (
    <div>
      {/* HERO */}
      <section className="hero">
        <div className="hero-text">
          <div className="hero-eyebrow">SELAMAT DATANG · ようこそ</div>
          <h1 className="hero-title">Semua dari Jepang, langsung ke rumahmu.</h1>
          <div className="hero-jp">日本のすべてが、ここに。</div>
          <p className="hero-desc">
            Dari snack Hokkaido hingga gadget Akihabara — 10.000+ produk asli Jepang
            dikirim via EMS Japan Post ke seluruh Indonesia.
          </p>
          <div className="hero-ctas">
            <button className="btn primary lg" onClick={() => ctx.go('katalog', null)}>
              Belanja Sekarang <Icon name="chevr" size={16} />
            </button>
            <button className="btn lg" onClick={() => ctx.go('katalog', 'shumi')}>
              Jelajah Anime & Hobby
            </button>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-card-stack">
            <div>抹</div>
            <div>桜</div>
            <div>遊</div>
          </div>
        </div>
      </section>

      {/* KATEGORI */}
      <section className="section">
        <div className="section-hd">
          <h2 className="section-title">
            <span className="jp">KATEGORI · カテゴリー</span>
            Belanja per Kategori
          </h2>
          <a className="section-link" onClick={() => ctx.go('katalog', null)}>Lihat semua →</a>
        </div>
        <div className="cat-grid">
          {CATEGORIES.map(c => (
            <div key={c.slug} className="cat-tile" onClick={() => ctx.go('katalog', c.slug)}>
              <div className="icon">{c.kanji}</div>
              <div className="label">
                {c.nameID}
                <span className="jp">{c.nameJP}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FLASH SALE */}
      <section className="section">
        <div className="flash-banner">
          <div className="flash-title">
            <div>
              <h3>
                <span className="jp">FLASH SALE · 限定セール</span>
                Promo Hari Ini
              </h3>
            </div>
            <div className="flash-meta">Berakhir dalam:</div>
            <Countdown />
          </div>
          <button className="btn sm" onClick={() => ctx.go('katalog', null)}>
            Lihat Semua <Icon name="chevr" size={14} />
          </button>
        </div>
        <div className="product-grid">
          {flashProducts.map(p => <ProductCard key={p.id} product={p} ctx={ctx} />)}
        </div>
      </section>

      {/* CAMPAIGN ROW */}
      <section className="section">
        <div className="campaign-row">
          {CAMPAIGNS.map(c => (
            <div key={c.id} className={`campaign-card ${c.tone}`}>
              <div>
                <div className="jp">{c.jp}</div>
                <h4>{c.title}</h4>
              </div>
              <p>{c.desc}</p>
              <div>
                <button className="btn sm ghost">Selengkapnya →</button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PRODUK BARU */}
      <section className="section">
        <div className="section-hd">
          <h2 className="section-title">
            <span className="jp">NEW ARRIVAL · 新着</span>
            Produk Baru Pekan Ini
          </h2>
          <a className="section-link" onClick={() => ctx.go('katalog', null)}>Lihat semua →</a>
        </div>
        <div className="product-grid">
          {newProducts.map(p => <ProductCard key={p.id} product={p} ctx={ctx} />)}
        </div>
      </section>

      {/* BEST SELLER */}
      <section className="section">
        <div className="section-hd">
          <h2 className="section-title">
            <span className="jp">RANKING · ランキング</span>
            Best Seller Bulan Ini
          </h2>
          <a className="section-link" onClick={() => ctx.go('katalog', null)}>Lihat semua →</a>
        </div>
        <div className="product-grid">
          {bestSellers.map(p => <ProductCard key={p.id} product={p} ctx={ctx} />)}
        </div>
      </section>

      {/* NEWSLETTER */}
      <section className="section">
        <div className="newsletter">
          <div>
            <div className="newsletter-eyebrow">NEWSLETTER · ニュースレター</div>
            <h3 className="newsletter-title">Dapat update produk baru + voucher ¥500</h3>
            <p className="muted newsletter-desc">
              Subscribe newsletter mingguan — info pre-order, restock, dan promo eksklusif.
            </p>
          </div>
          <form className="newsletter-form" onSubmit={(e) => {
            e.preventDefault();
            ctx.pushToast({ msg: 'Voucher dikirim ke email!', type: 'success' });
          }}>
            <input type="email" placeholder="email@kamu.com" />
            <button type="submit" className="btn primary">Subscribe</button>
          </form>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });