/* Storefront screens: Home, Products, ProductDetail, Cart, Checkout success.
   Exposes window.AXScreens. */
(function(){
const { Button, IconButton, Badge, Rating, PriceTag, QuantityStepper, Input, Eyebrow, SectionHeader, ProductCard } = window.AXUI;
const { Newsletter } = window.AXChrome;
const Ic = () => window.AXIcons;
const D = () => window.AX_DATA;
const wrap = { maxWidth:'var(--container-max)', margin:'0 auto', padding:'0 var(--gutter)' };

/* ---------------- HOME ---------------- */
function Hero({ onNav }){
  const i=Ic();
  const products=D().products;
  const heroCards=[
    {p:products.find(p=>p.id==='p1'),t:18,l:'8%',w:200,r:3},
    {p:products.find(p=>p.id==='p4'),t:120,l:'48%',w:210,r:-4},
    {p:products.find(p=>p.id==='p8'),t:236,l:'14%',w:200,r:5},
  ];
  return <section style={{background:'radial-gradient(110% 130% at 88% -10%, #16234a 0%, var(--ink-900) 52%)',color:'#fff',overflow:'hidden',position:'relative'}}>
    <div style={{...wrap,display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:40,alignItems:'center',padding:'clamp(48px,7vw,88px) var(--gutter)'}} className="ax-hero-grid">
      <div style={{display:'flex',flexDirection:'column',gap:22,alignItems:'flex-start'}}>
        <span style={{display:'inline-flex',alignItems:'center',gap:8,background:'rgba(255,255,255,0.08)',border:'1px solid rgba(255,255,255,0.14)',padding:'6px 14px',borderRadius:'999px',fontSize:'var(--fs-sm)',fontWeight:600}}>
          {React.createElement(i.Bolt,{size:14,style:{color:'var(--cyan-400)'}})} Photo-Led Fashion, Everyday Value
        </span>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'clamp(36px,5.4vw,60px)',fontWeight:700,lineHeight:1.04,letterSpacing:'-0.03em',margin:0}}>Fresh fashion drops for <span style={{background:'linear-gradient(120deg,var(--blue-400),var(--cyan-400))',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>everyday outfits</span></h1>
        <p style={{fontSize:'var(--fs-lg)',lineHeight:1.55,color:'var(--text-on-dark-muted)',maxWidth:480,margin:0}}>Shop real product photos across graphic tees, hoodies, plaid shirts, caps, Hanfu looks, pants, and outerwear with secure checkout and easy returns.</p>
        <div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:6}}>
          <Button variant="accent" size="lg" iconRight={React.createElement(i.ArrowRight,{size:18})} onClick={()=>onNav({type:'products',label:'Best Sellers'})}>Shop Best Sellers</Button>
          <Button variant="outline" size="lg" style={{background:'rgba(255,255,255,0.06)',color:'#fff',border:'1px solid rgba(255,255,255,0.22)'}} onClick={()=>onNav({type:'products',label:'New Arrivals'})}>Explore Collections</Button>
        </div>
        <div style={{display:'flex',gap:24,marginTop:14,flexWrap:'wrap'}}>
          {[['4.8★','12k+ reviews'],['50k+','happy customers'],['3–5d','fast delivery']].map(([a,b])=><div key={b} style={{display:'flex',flexDirection:'column'}}><span style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-xl)',fontWeight:700,color:'#fff'}}>{a}</span><span style={{fontSize:'var(--fs-sm)',color:'var(--text-on-dark-muted)'}}>{b}</span></div>)}
        </div>
      </div>
      <div className="ax-hero-art" style={{position:'relative',height:380}}>
        {heroCards.map((c,k)=>
          <div key={k} style={{position:'absolute',top:c.t,left:c.l,width:c.w,background:'#fff',borderRadius:'var(--radius-xl)',padding:14,boxShadow:'var(--shadow-xl)',transform:`rotate(${c.r}deg)`}}>
            <div style={{height:120,borderRadius:'var(--radius-lg)',background:c.p.accent,marginBottom:12,overflow:'hidden'}}>
              {c.p.image
                ? <img src={c.p.image} alt={c.p.name} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                : <div style={{height:'100%',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontWeight:700,fontSize:40,color:'rgba(10,17,36,0.12)'}}>{c.p.name.charAt(0)}</div>}
            </div>
            <div style={{fontFamily:'var(--font-display)',fontWeight:600,color:'var(--text-strong)',fontSize:'var(--fs-base)'}}>{c.p.name.split(' ').slice(0,2).join(' ')}</div>
            <div style={{fontFamily:'var(--font-mono)',fontWeight:600,color:'var(--text-strong)',fontSize:'var(--fs-base)',marginTop:2}}>${c.p.price.toFixed(2)}</div>
          </div>)}
      </div>
    </div>
  </section>;
}

function CategoryTiles({ onNav }){
  return <section style={{...wrap,padding:'72px var(--gutter) 0'}}>
    <SectionHeader eyebrow="Browse" title="Shop by category"/>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18}} className="ax-cat-grid">
      {D().collections.map(c=><a key={c.slug} href="#" onClick={e=>{e.preventDefault();onNav({type:'products',label:c.name});}} style={{position:'relative',borderRadius:'var(--radius-xl)',overflow:'hidden',background:c.accent,minHeight:150,padding:22,display:'flex',flexDirection:'column',justifyContent:'flex-end',border:'1px solid var(--border-subtle)',transition:'transform .2s,box-shadow .2s'}}
        onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-3px)';e.currentTarget.style.boxShadow='var(--shadow-lg)';}}
        onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='none';}}>
        <span style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-xl)',fontWeight:700,color:'var(--ink-900)',letterSpacing:'-0.01em'}}>{c.name}</span>
        <span style={{fontSize:'var(--fs-sm)',color:'var(--slate-600)',marginTop:2}}>{c.tagline} · {c.count} items</span>
      </a>)}
    </div>
  </section>;
}

function ProductRow({ eyebrow, title, items, onAdd, onView, onNav }){
  return <section style={{...wrap,padding:'72px var(--gutter) 0'}}>
    <SectionHeader eyebrow={eyebrow} title={title} action="View all" onAction={()=>onNav({type:'products',label:title})}/>
    <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:22}} className="ax-prod-grid">
      {items.map(p=><ProductCard key={p.id} product={p} onAdd={onAdd} onView={onView}/>)}
    </div>
  </section>;
}

const whyItems = [
  ['Shield','Secure Checkout','256-bit encryption on every order. Your details stay private.'],
  ['Truck','Fast Shipping','Dispatched in 24h with tracking. Most orders arrive in 3–5 days.'],
  ['Refresh','Easy Returns','Changed your mind? 30-day no-hassle returns, no questions asked.'],
  ['Headset','24/7 Support','Real people, any time zone. Reach us by chat or email anytime.'],
];
function WhyChoose(){
  const i=Ic();
  return <section style={{...wrap,padding:'80px var(--gutter) 0'}}>
    <div style={{background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-2xl)',padding:'clamp(28px,4vw,48px)',boxShadow:'var(--shadow-sm)'}}>
      <div style={{textAlign:'center',marginBottom:36}}>
        <Eyebrow>Why AshopNexa</Eyebrow>
        <h2 style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-2xl)',fontWeight:700,color:'var(--text-strong)',letterSpacing:'-0.02em',margin:'10px 0 0'}}>Shopping you can trust</h2>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:28}} className="ax-why-grid">
        {whyItems.map(([icon,t,b])=><div key={t} style={{display:'flex',flexDirection:'column',gap:10,alignItems:'flex-start'}}>
          <span style={{width:48,height:48,borderRadius:'var(--radius-md)',background:'var(--surface-accent-soft)',color:'var(--blue-600)',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>{React.createElement(i[icon],{size:24})}</span>
          <span style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-lg)',fontWeight:600,color:'var(--text-strong)'}}>{t}</span>
          <span style={{fontSize:'var(--fs-base)',color:'var(--text-muted)',lineHeight:1.55}}>{b}</span>
        </div>)}
      </div>
    </div>
  </section>;
}

function Reviews(){
  return <section style={{...wrap,padding:'80px var(--gutter) 0'}}>
    <SectionHeader eyebrow="Loved by customers" title="What shoppers are saying"/>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:22}} className="ax-rev-grid">
      {D().reviews.map((r,k)=><figure key={k} style={{margin:0,background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',padding:26,display:'flex',flexDirection:'column',gap:12,boxShadow:'var(--shadow-sm)'}}>
        <Rating value={r.rating} size={16}/>
        <figcaption style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-lg)',fontWeight:600,color:'var(--text-strong)'}}>{r.title}</figcaption>
        <blockquote style={{margin:0,fontSize:'var(--fs-base)',color:'var(--text-body)',lineHeight:1.6}}>“{r.body}”</blockquote>
        <div style={{display:'flex',alignItems:'center',gap:10,marginTop:'auto',paddingTop:10}}>
          <span style={{width:36,height:36,borderRadius:'999px',background:'linear-gradient(135deg,var(--blue-500),var(--cyan-400))',color:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',fontWeight:700,fontSize:'var(--fs-sm)'}}>{r.name.charAt(0)}</span>
          <div style={{display:'flex',flexDirection:'column'}}>
            <span style={{fontWeight:600,fontSize:'var(--fs-sm)',color:'var(--text-strong)'}}>{r.name}</span>
            <span style={{fontSize:'var(--fs-xs)',color:'var(--text-faint)'}}>Verified · {r.product}</span>
          </div>
        </div>
      </figure>)}
    </div>
  </section>;
}

function Home({ onNav, onAdd, onView }){
  const all=D().products;
  const best=all.filter(p=>p.badge==='Best Seller').concat(all).slice(0,4);
  const fresh=all.filter(p=>p.badge==='New').concat(all.filter(p=>p.badge==='Limited')).slice(0,4);
  return <div>
    <Hero onNav={onNav}/>
    <CategoryTiles onNav={onNav}/>
    <ProductRow eyebrow="Trending now" title="Best Sellers" items={best} onAdd={onAdd} onView={onView} onNav={onNav}/>
    <ProductRow eyebrow="Just landed" title="New Arrivals" items={fresh} onAdd={onAdd} onView={onView} onNav={onNav}/>
    <WhyChoose/>
    <Reviews/>
    <div style={{...wrap,padding:'80px var(--gutter) 0'}}><Newsletter/></div>
  </div>;
}

window.AXScreens = { Home };
})();