/* ============================================================
   GlowMerald — Navigation, Footer, ProductCard
   ============================================================ */
const { useState:useStateN, useEffect:useEffectN } = React;

const NAV_LINKS = [
  { route:'shop', label:'Shop' },
  { route:'insight', label:'Beauty Insight' },
  { route:'about', label:'About' },
  { route:'contact', label:'Contact' },
];

/* ---- Top navigation ---- */
function NavBar(){
  const { route, navigate, cartCount, wishlist, openSearch } = useApp();
  const [scrolled,setScrolled] = useStateN(false);
  const [menu,setMenu] = useStateN(false);
  useEffectN(()=>{
    const f=()=>setScrolled(window.scrollY>10); f();
    window.addEventListener('scroll',f); return ()=>window.removeEventListener('scroll',f);
  },[]);
  const onHomeHero = route==='home' && !scrolled;
  const barStyle = {
    position:'sticky', top:0, zIndex:200, height:'var(--nav-h)',
    background: onHomeHero ? 'transparent' : 'rgba(250,247,240,.88)',
    backdropFilter: onHomeHero ? 'none' : 'saturate(140%) blur(10px)',
    borderBottom: onHomeHero ? '1px solid transparent' : '1px solid var(--line)',
    transition:'background .3s, border-color .3s',
  };
  const ic = 'var(--ink)';
  const dark = false;
  return (
    <>
      <header style={barStyle}>
        <div className="container" style={{ height:'100%', display:'flex', alignItems:'center', gap:18 }}>
          <button className="navhide-desk" onClick={()=>setMenu(true)} aria-label="Menu" style={{ background:'none', border:0, color:ic, display:'flex', padding:4 }}>
            <Icon name="menu" size={22}/>
          </button>
          <a onClick={()=>navigate('home')} className="nav-logo" style={{ display:'flex', cursor:'pointer' }}>
            <Logo size={24} mark={dark?'cream':'gold'} dark={dark}/>
          </a>
          <nav className="navlinks" style={{ display:'flex', gap:30, marginLeft:34 }}>
            {NAV_LINKS.map(l=>(
              <a key={l.route} onClick={()=>navigate(l.route)}
                 style={{ fontSize:'.78rem', letterSpacing:'.08em', color: route===l.route?'var(--gold-deep)':ic,
                          fontWeight:500, cursor:'pointer', paddingBottom:2,
                          borderBottom: route===l.route?'1px solid var(--gold)':'1px solid transparent' }}>
                {l.label}
              </a>
            ))}
          </nav>
          <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:4, color:ic }}>
            <button className="navicon" onClick={openSearch} aria-label="Cari"><Icon name="search" size={20}/></button>
            <button className="navicon navhide-mob" onClick={()=>navigate('account','wishlist')} aria-label="Wishlist" style={{ position:'relative' }}>
              <Icon name="heart" size={20}/>
              {wishlist.length>0 && <span className="nav-badge">{wishlist.length}</span>}
            </button>
            <button className="navicon" onClick={()=>navigate('cart')} aria-label="Keranjang" style={{ position:'relative' }}>
              <Icon name="cart" size={20}/>
              {cartCount>0 && <span className="nav-badge">{cartCount}</span>}
            </button>
            <button className="navicon navhide-mob" onClick={()=>navigate('account')} aria-label="Akun"><Icon name="user" size={20}/></button>
          </div>
        </div>
      </header>
      {menu && <MobileMenu close={()=>setMenu(false)}/>}
    </>
  );
}

/* ---- Mobile drawer ---- */
function MobileMenu({ close }){
  const { navigate } = useApp();
  const go=(r,s)=>{ navigate(r,s); close(); };
  return (
    <div className="drawer-overlay" onClick={close}>
      <div className="drawer" onClick={e=>e.stopPropagation()}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:36 }}>
          <Logo size={24}/>
          <button onClick={close} style={{ background:'none', border:0, color:'var(--ink)', display:'flex' }}><Icon name="close" size={22}/></button>
        </div>
        <nav style={{ display:'flex', flexDirection:'column' }}>
          {NAV_LINKS.map(l=>(
            <a key={l.route} onClick={()=>go(l.route)} className="drawer-link">{l.label}</a>
          ))}
          <a onClick={()=>go('account')} className="drawer-link">Akun Saya</a>
          <a onClick={()=>go('account','wishlist')} className="drawer-link">Wishlist</a>
        </nav>
        <div className="hr-gold" style={{ margin:'26px 0' }}></div>
        <p className="ital" style={{ color:'var(--muted)', fontSize:'1.05rem' }}>Glow from Within,<br/>Confidence Revealed.</p>
      </div>
    </div>
  );
}

/* ---- Bottom navigation (mobile) ---- */
function BottomNav(){
  const { route, navigate } = useApp();
  const items=[
    { r:'home', label:'Home', icon:'home' },
    { r:'shop', label:'Shop', icon:'shop' },
    { r:'insight', label:'Insight', icon:'book' },
    { r:'account', label:'Akun', icon:'user' },
  ];
  return (
    <nav className="bottom-nav">
      {items.map(it=>{
        const active = route===it.r;
        return (
          <button key={it.r} onClick={()=>navigate(it.r)} className={'bn-item'+(active?' active':'')}>
            <Icon name={it.icon} size={21} stroke={active?1.9:1.5}/>
            <span>{it.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

/* ---- Footer ---- */
function Footer(){
  const { navigate } = useApp();
  return (
    <footer style={{ background:'var(--dark)', color:'var(--on-dark)', paddingBottom:90 }}>
      <div className="container" style={{ paddingTop:64 }}>
        <div className="footer-grid">
          <div>
            <Logo size={26} mark="cream" dark/>
            <p className="ital" style={{ color:'var(--on-dark-muted)', marginTop:18, fontSize:'1.05rem', maxWidth:280 }}>
              Glow from Within, Confidence Revealed.
            </p>
            <div style={{ display:'flex', gap:14, marginTop:22, color:'var(--on-dark-muted)' }}>
              <a className="foot-soc" aria-label="Instagram"><Icon name="ig" size={19}/></a>
              <a className="foot-soc" aria-label="TikTok"><Icon name="tiktok" size={19}/></a>
              <a className="foot-soc" aria-label="WhatsApp"><Icon name="whatsapp" size={19}/></a>
            </div>
          </div>
          <div className="foot-col">
            <h4>Belanja</h4>
            <a onClick={()=>navigate('shop')}>Semua Produk</a>
            <a onClick={()=>navigate('product','serum')}>Phyto Complex Serum</a>
            <a onClick={()=>navigate('product','mask')}>Hydrogel Mask</a>
            <a onClick={()=>navigate('shop')}>Bundle</a>
          </div>
          <div className="foot-col">
            <h4>GlowMerald</h4>
            <a onClick={()=>navigate('insight')}>Beauty Insight</a>
            <a onClick={()=>navigate('about')}>About</a>
            <a onClick={()=>navigate('contact')}>Contact</a>
            <a onClick={()=>navigate('account')}>Akun Saya</a>
          </div>
          <div className="foot-col">
            <h4>Bantuan</h4>
            <a>Cara Pemesanan</a>
            <a>Pengiriman</a>
            <a>Kebijakan Privasi</a>
            <a>Hubungi Kami</a>
          </div>
        </div>
        <div className="hr-gold" style={{ margin:'44px 0 22px', opacity:.3 }}></div>
        <div className="footer-bottom">
          <div style={{ color:'var(--on-dark-muted)', fontSize:'.72rem', letterSpacing:'.04em' }}>
            <span>BPOM Serum: NA11262000011</span><span style={{ margin:'0 12px' }}>·</span><span>BPOM Mask: NA11260200061</span>
          </div>
          <div style={{ color:'var(--on-dark-muted)', fontSize:'.72rem' }}>
            © 2026 PT Global Makmur Sempurna. All rights reserved.
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---- Shared Product Card ---- */
function ProductCard({ item, eager }){
  const { navigate, addToCart, wishlist, toggleWishlist } = useApp();
  const [adding,setAdding] = useStateN(false);
  const wished = wishlist.includes(item.id);
  const isBundle = item.type==='Bundle';
  const add=(e)=>{ e.stopPropagation(); addToCart(item.id); setAdding(true); setTimeout(()=>setAdding(false),1400); };
  return (
    <div className="pcard">
      <div className="pcard-media" onClick={()=>navigate('product',item.id)}>
        {item.bestSeller && <span className="badge-best">Best Seller</span>}
        {isBundle && <span className="badge-save">Hemat {formatRp(item.was-item.price)}</span>}
        <button className={'wish-btn'+(wished?' active':'')} onClick={(e)=>{e.stopPropagation(); toggleWishlist(item.id);}} aria-label="Wishlist">
          <Icon name="heart" size={17} fill={wished}/>
        </button>
        <ProductVisual kind={item.visual}/>
      </div>
      <div className="pcard-body">
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
          <span style={{ fontSize:'.62rem', letterSpacing:'.18em', textTransform:'uppercase', color:'var(--gold-deep)', fontWeight:500 }}>{item.type}</span>
          <span style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:'.74rem', color:'var(--muted)' }}>
            <Icon name="star" size={12} fill style={{ color:'var(--gold)' }}/>{item.rating} · {item.reviews}
          </span>
        </div>
        <div className="pname" onClick={()=>navigate('product',item.id)}>{item.name}</div>
        <Chips items={item.chips} />
        <div style={{ marginTop:'auto', display:'flex', flexDirection:'column', gap:12, paddingTop:6 }}>
          <div className="price">
            {formatRp(item.price)}
            {isBundle && <span className="strike">{formatRp(item.was)}</span>}
          </div>
          <button className="btn btn-gold btn-block btn-sm" onClick={add}>
            {adding ? <span className="added"><Icon name="check" size={15}/> Ditambahkan</span> : 'Tambah ke Keranjang'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NavBar, MobileMenu, BottomNav, Footer, ProductCard, NAV_LINKS });