// v3 top sections — announcement, nav, hero (with floating nuts), trust, categories
const { useState: useStateT, useEffect: useEffectT } = React;

/* ====== Announcement bar (warm tone) ====== */
function Announcement() {
  const items = [
    "Free UAE delivery on orders over AED 150",
    "Freshly packed in Abu Dhabi · Sealed for freshness",
    "Custom corporate gifting · 50+ boxes",
    "New season Medjool dates · now in stock",
  ];
  return (
    <div style={{
      background:'var(--roast)',
      borderBottom:'1px solid rgba(212,162,74,0.22)',
      color:'rgba(244,236,220,0.88)',
      fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:500,
      overflow:'hidden',
    }}>
      <div style={{width:'min(100% - clamp(32px, 5vw, 96px), clamp(1280px, 86vw, 1820px))', margin:'0 auto', padding:'8px 0',
        display:'flex', alignItems:'center', justifyContent:'space-between', gap:24}}>
        <div style={{display:'flex', gap:14, alignItems:'center', flexShrink:0, color:'var(--saffron-soft)'}}>
          <span style={{width:5, height:5, background:'var(--saffron)', borderRadius:99}}/>
          <span style={{fontWeight:600}}>UAE</span>
        </div>
        <div style={{flex:1, overflow:'hidden', maskImage:'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)'}}>
          <div className="marquee" style={{gap:56}}>
            {[...items, ...items, ...items].map((t,i)=>(
              <span key={i} style={{whiteSpace:'nowrap'}}>{t}</span>
            ))}
          </div>
        </div>
        <div style={{display:'flex', gap:14, alignItems:'center', flexShrink:0, fontSize:10.5}}>
          <button style={langBtn}>EN</button>
          <span style={{opacity:0.3}}>·</span>
          <span style={{opacity:0.78}}>AED</span>
        </div>
      </div>
    </div>
  );
}
const langBtn = {background:'transparent', border:'none', cursor:'pointer',
  color:'rgba(244,236,220,0.85)', fontSize:10.5, letterSpacing:'0.14em', fontWeight:600, padding:0};

/* ====== Nav — cream on paper, dark text ====== */
function Nav() {
  const [scrolled, setScrolled] = useStateT(false);
  const [mobileOpen, setMobileOpen] = useStateT(false);
  useEffectT(()=>{
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener('scroll', on, {passive:true});
    return () => window.removeEventListener('scroll', on);
  },[]);
  const items = ["Nuts","Dry Fruits","Dates","Spices","Snack Packs","Gifting","Bulk"];
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'rgba(250,244,229,0.92)' : 'rgba(250,244,229,0.0)',
      backdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(139,106,40,0.18)' : '1px solid transparent',
      transition:'all .35s ease', color:'var(--ink)',
    }}>
      <div className="wrap" style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'clamp(14px, 1.2vw, 22px) 0'}}>
        <Logo compact={scrolled}/>
        <nav className="nav-links" style={{display:'flex', gap:28, alignItems:'center'}}>
          {items.map(t => (
            <a key={t} href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{
              textDecoration:'none', color:'var(--ink)',
              fontSize:13.5, fontWeight:500, letterSpacing:'0.01em', opacity:0.88,
            }}>
              <span className="u-draw">{t}</span>
            </a>
          ))}
        </nav>
        <div style={{display:'flex', gap:4, alignItems:'center', color:'var(--ink)'}}>
          <button aria-label="Search" style={iconBtn}><Icon.Search/></button>
          {/* <button aria-label="Account" style={iconBtn}><Icon.User/></button>
          <button aria-label="Wishlist" style={iconBtn}><Icon.Heart/></button>
          <a href="#" className="btn btn-dark btn-sm" style={{marginLeft:10}}>
            <Icon.Bag width="14" height="14"/> <span>Bag · 2</span>
          </a>
          <button className="hamburger" aria-label="Menu" style={{...iconBtn, marginLeft:6}} onClick={()=>setMobileOpen(!mobileOpen)}>
            {mobileOpen ? <Icon.X/> : <Icon.Menu/>}
          </button> */}
        </div>
      </div>
      {mobileOpen && (
        <div className="mobile-menu" style={{background:'var(--paper)', borderTop:'1px solid rgba(139,106,40,0.18)', padding:'12px 0'}}>
          {items.map(t => (
            <a key={t} href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{display:'block', padding:'14px clamp(20px, 4vw, 48px)',
              color:'var(--ink)', textDecoration:'none', fontSize:15, fontWeight:500,
              borderBottom:'1px solid rgba(139,106,40,0.10)'}}>{t}</a>
          ))}
        </div>
      )}
      <style>{`
        @media (max-width:980px){ .nav-links{ display:none !important; } }
        @media (min-width:981px){ .hamburger{ display:none !important; } .mobile-menu{ display:none !important; } }
      `}</style>
    </header>
  );
}
const iconBtn = {width:40, height:40, display:'inline-flex', alignItems:'center', justifyContent:'center',
  background:'transparent', border:'1px solid transparent', borderRadius:6, cursor:'pointer', color:'inherit'};

Object.assign(window, { Announcement, Nav });