/* Storefront chrome — AnnouncementBar, Header, Footer, Toast. Exposes window.AXChrome. */
(function(){
const { Button, IconButton, Input, Eyebrow } = window.AXUI;
const navLinks = ['Best Sellers','New Arrivals','Short Sleeve Tees','Hoodies & Sweatshirts','Plaid Shirts','Hanfu Dresses','Caps','Outerwear'];

function AnnouncementBar(){
  const Ic=window.AXIcons;
  return <div style={{background:'var(--ink-900)',color:'var(--text-on-dark)',fontSize:'var(--fs-sm)',fontWeight:500,textAlign:'center',padding:'9px 16px',display:'flex',alignItems:'center',justifyContent:'center',gap:8}}>
    {React.createElement(Ic.Truck,{size:15,style:{color:'var(--cyan-400)'}})}
    <span>Free shipping on orders over <strong style={{color:'#fff'}}>$49</strong> · 30-day easy returns</span>
  </div>;
}

function Header({ cartCount=0, authed=false, onNav, onCart, onAccount, query, onQuery, onSearch }){
  const Ic=window.AXIcons; const [mobile,setMobile]=React.useState(false);
  return <header style={{position:'sticky',top:0,zIndex:100,background:'rgba(255,255,255,0.86)',backdropFilter:'blur(14px)',WebkitBackdropFilter:'blur(14px)',borderBottom:'1px solid var(--border-subtle)'}}>
    <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--gutter)',height:72,display:'flex',alignItems:'center',gap:24}}>
      <div style={{display:'flex',alignItems:'center',gap:12}}>
        <button onClick={()=>setMobile(true)} aria-label="Menu" className="ax-hide-desktop" style={{display:'none',background:'none',border:'none',cursor:'pointer',color:'var(--text-strong)',padding:0}}>{React.createElement(Ic.Menu,{size:24})}</button>
        <a href="#" onClick={e=>{e.preventDefault();onNav&&onNav({type:'home'});}} style={{display:'flex',alignItems:'center'}}><img src="assets/logo-wordmark.svg" height="30" alt="AshopNexa"/></a>
      </div>
      <nav className="ax-hide-mobile" style={{display:'flex',gap:22,marginLeft:8}}>
        {navLinks.slice(0,5).map(l=><a key={l} href="#" onClick={e=>{e.preventDefault();onNav&&onNav({type:'products',label:l});}} style={{fontSize:'var(--fs-base)',fontWeight:500,color:'var(--text-body)',whiteSpace:'nowrap'}} onMouseEnter={e=>e.currentTarget.style.color='var(--blue-600)'} onMouseLeave={e=>e.currentTarget.style.color='var(--text-body)'}>{l}</a>)}
      </nav>
      <form onSubmit={e=>{e.preventDefault();onSearch&&onSearch();}} className="ax-hide-mobile" style={{flex:1,maxWidth:340,marginLeft:'auto'}}>
        <div style={{display:'flex',alignItems:'center',gap:8,height:42,padding:'0 14px',background:'var(--surface-sunken)',border:'1px solid var(--border-subtle)',borderRadius:'999px'}}>
          <span style={{color:'var(--text-faint)',display:'inline-flex'}}>{React.createElement(Ic.Search,{size:17})}</span>
          <input value={query} onChange={e=>onQuery&&onQuery(e.target.value)} placeholder="Search products…" style={{flex:1,border:'none',outline:'none',background:'transparent',fontFamily:'var(--font-body)',fontSize:'var(--fs-base)',color:'var(--text-strong)'}}/>
        </div>
      </form>
      <div style={{display:'flex',alignItems:'center',gap:4,marginLeft:'auto'}} className="ax-header-actions">
        <IconButton label={authed?'Account':'Sign in'} onClick={onAccount}>{React.createElement(Ic.User,{size:21})}</IconButton>
        <IconButton label="Cart" badge={cartCount} onClick={onCart}>{React.createElement(Ic.Cart,{size:21})}</IconButton>
      </div>
    </div>
    {mobile && <MobileMenu onClose={()=>setMobile(false)} onNav={(p)=>{setMobile(false);onNav&&onNav(p);}}/>}
  </header>;
}

function MobileMenu({ onClose, onNav }){
  const Ic=window.AXIcons;
  return <div style={{position:'fixed',inset:0,zIndex:200}}>
    <div onClick={onClose} style={{position:'absolute',inset:0,background:'rgba(10,17,36,0.45)'}}/>
    <div style={{position:'absolute',top:0,left:0,bottom:0,width:300,maxWidth:'82vw',background:'var(--surface-card)',padding:'20px',display:'flex',flexDirection:'column',gap:6,boxShadow:'var(--shadow-xl)'}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:14}}>
        <img src="assets/logo-wordmark.svg" height="28" alt="AshopNexa"/>
        <button onClick={onClose} aria-label="Close" style={{background:'none',border:'none',cursor:'pointer',color:'var(--text-strong)'}}>{React.createElement(Ic.X,{size:22})}</button>
      </div>
      {navLinks.map(l=><a key={l} href="#" onClick={e=>{e.preventDefault();onNav({type:'products',label:l});}} style={{padding:'12px 8px',fontFamily:'var(--font-display)',fontSize:'var(--fs-lg)',fontWeight:600,color:'var(--text-strong)',borderBottom:'1px solid var(--border-subtle)'}}>{l}</a>)}
    </div>
  </div>;
}

function Newsletter(){
  const [email,setEmail]=React.useState(''); const [done,setDone]=React.useState(false);
  const Ic=window.AXIcons;
  return <section style={{background:'radial-gradient(120% 160% at 85% 0%, #16234a 0%, var(--ink-900) 55%)',borderRadius:'var(--radius-2xl)',padding:'clamp(32px,5vw,56px)',display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',gap:14,overflow:'hidden',position:'relative'}}>
    <Eyebrow style={{color:'var(--cyan-400)'}}>Stay in the loop</Eyebrow>
    <h2 style={{fontFamily:'var(--font-display)',fontSize:'clamp(24px,3.2vw,34px)',fontWeight:700,color:'#fff',letterSpacing:'-0.02em',margin:0,maxWidth:520}}>Get early access &amp; member-only deals</h2>
    <p style={{color:'var(--text-on-dark-muted)',fontSize:'var(--fs-md)',maxWidth:440,margin:0}}>Join the AshopNexa list for new drops, restocks, and subscriber pricing. No spam — unsubscribe anytime.</p>
    {done ? <div style={{display:'inline-flex',alignItems:'center',gap:8,color:'var(--cyan-400)',fontWeight:600,fontSize:'var(--fs-md)',marginTop:8}}>{React.createElement(Ic.CheckCircle,{size:20})} You're subscribed — welcome aboard!</div>
    : <form onSubmit={e=>{e.preventDefault();if(email.includes('@'))setDone(true);}} style={{display:'flex',gap:10,marginTop:8,width:'100%',maxWidth:440,flexWrap:'wrap'}}>
        <div style={{flex:1,minWidth:200,display:'flex',alignItems:'center',gap:8,height:50,padding:'0 16px',background:'rgba(255,255,255,0.08)',border:'1px solid rgba(255,255,255,0.16)',borderRadius:'var(--radius-md)'}}>
          <span style={{color:'var(--text-on-dark-muted)',display:'inline-flex'}}>{React.createElement(Ic.Mail,{size:17})}</span>
          <input value={email} onChange={e=>setEmail(e.target.value)} type="email" required placeholder="you@example.com" style={{flex:1,border:'none',outline:'none',background:'transparent',color:'#fff',fontFamily:'var(--font-body)',fontSize:'var(--fs-base)'}}/>
        </div>
        <Button variant="accent" size="lg" type="submit">Subscribe</Button>
      </form>}
  </section>;
}

const footCols = {
  Shop:['Best Sellers','New Arrivals','Collections','Gift Cards'],
  Support:['Track Order','Shipping & Returns','FAQ','Contact Us'],
  Company:['About AshopNexa','Careers','Privacy Policy','Terms of Service'],
};
function Footer({ onNav }){
  const Ic=window.AXIcons;
  return <footer style={{background:'var(--ink-950)',color:'var(--text-on-dark-muted)',marginTop:80}}>
    <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'64px var(--gutter) 36px',display:'grid',gridTemplateColumns:'1.6fr 1fr 1fr 1fr',gap:40}} className="ax-footer-grid">
      <div style={{display:'flex',flexDirection:'column',gap:16,maxWidth:300}}>
        <img src="assets/logo-wordmark-light.svg" height="30" alt="AshopNexa"/>
        <p style={{fontSize:'var(--fs-base)',lineHeight:1.6,margin:0}}>Photo-led fashion drops, everyday value. Shop graphic tees, hoodies, plaid shirts, caps, Hanfu looks, pants, and outerwear with fast shipping and easy returns.</p>
        <div style={{display:'flex',gap:8,marginTop:4}}>
          {['in','tw','ig','yt'].map(s=><span key={s} style={{width:36,height:36,borderRadius:'999px',background:'rgba(255,255,255,0.06)',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:700,color:'var(--text-on-dark-muted)',fontFamily:'var(--font-mono)',textTransform:'uppercase'}}>{s}</span>)}
        </div>
      </div>
      {Object.entries(footCols).map(([h,items])=><div key={h} style={{display:'flex',flexDirection:'column',gap:12}}>
        <span style={{color:'#fff',fontWeight:700,fontSize:'var(--fs-sm)',letterSpacing:'.04em',textTransform:'uppercase'}}>{h}</span>
        {items.map(i=><a key={i} href="#" onClick={e=>{e.preventDefault();onNav&&onNav({type:'page',label:i});}} style={{color:'var(--text-on-dark-muted)',fontSize:'var(--fs-base)'}} onMouseEnter={e=>e.currentTarget.style.color='#fff'} onMouseLeave={e=>e.currentTarget.style.color='var(--text-on-dark-muted)'}>{i}</a>)}
      </div>)}
    </div>
    <div style={{borderTop:'1px solid rgba(255,255,255,0.08)'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'20px var(--gutter)',display:'flex',justifyContent:'space-between',alignItems:'center',gap:16,flexWrap:'wrap',fontSize:'var(--fs-sm)'}}>
        <span>© 2026 AshopNexa · <strong style={{color:'var(--text-on-dark)',fontWeight:600}}>ashopnexa.com</strong></span>
        <span style={{display:'inline-flex',alignItems:'center',gap:6}}>{React.createElement(Ic.Lock,{size:14})} Secure checkout · USD</span>
      </div>
    </div>
  </footer>;
}

function Toast({ toast }){
  const Ic=window.AXIcons;
  return <div style={{position:'fixed',bottom:24,left:'50%',transform:`translateX(-50%) translateY(${toast?'0':'120%'})`,zIndex:400,transition:'transform .35s var(--ease-spring)',pointerEvents:'none'}}>
    {toast && <div style={{display:'flex',alignItems:'center',gap:10,background:'var(--ink-900)',color:'#fff',padding:'13px 18px',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-xl)',fontSize:'var(--fs-base)',fontWeight:500}}>
      <span style={{color:'var(--cyan-400)',display:'inline-flex'}}>{React.createElement(Ic.CheckCircle,{size:18})}</span>{toast}
    </div>}
  </div>;
}

window.AXChrome = { AnnouncementBar, Header, Footer, MobileMenu, Newsletter, Toast };
})();