/* Auth (Login, Register, Forgot Password) + Account dashboard. Exposes window.AXAuth. */
(function(){
const { Button, Input, Eyebrow, Badge, PriceTag } = window.AXUI;
const Ic=()=>window.AXIcons;
const wrap={maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--gutter)'};

/* ---- shared brand side panel (navy radial gradient, matches hero/newsletter) ---- */
function BrandPanel({ heading, sub, points }){
  const i=Ic();
  return <div style={{position:'relative',background:'radial-gradient(120% 150% at 80% 0%, #16234a 0%, var(--ink-900) 58%)',borderRadius:'var(--radius-2xl)',padding:'clamp(32px,4vw,48px)',display:'flex',flexDirection:'column',justifyContent:'space-between',gap:32,overflow:'hidden',minHeight:560}} className="ax-auth-aside">
    <div style={{position:'absolute',top:-80,right:-80,width:260,height:260,borderRadius:'999px',background:'radial-gradient(circle, rgba(34,211,238,0.22), transparent 70%)'}}/>
    <img src="assets/logo-wordmark-light.svg" height="30" alt="AshopNexa" style={{position:'relative'}}/>
    <div style={{position:'relative',display:'flex',flexDirection:'column',gap:14}}>
      <h2 style={{fontFamily:'var(--font-display)',fontSize:'clamp(28px,3.4vw,40px)',fontWeight:700,color:'#fff',letterSpacing:'-0.02em',lineHeight:1.1,margin:0}}>{heading}</h2>
      <p style={{color:'var(--text-on-dark-muted)',fontSize:'var(--fs-md)',lineHeight:1.6,margin:0,maxWidth:380}}>{sub}</p>
    </div>
    <div style={{position:'relative',display:'flex',flexDirection:'column',gap:16}}>
      {points.map(([Icon,t,d])=><div key={t} style={{display:'flex',gap:13,alignItems:'flex-start'}}>
        <span style={{width:42,height:42,borderRadius:'var(--radius-md)',background:'rgba(255,255,255,0.08)',border:'1px solid rgba(255,255,255,0.12)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--cyan-400)',flex:'0 0 auto'}}>{React.createElement(Icon,{size:20})}</span>
        <div><div style={{color:'#fff',fontWeight:600,fontSize:'var(--fs-base)'}}>{t}</div><div style={{color:'var(--text-on-dark-muted)',fontSize:'var(--fs-sm)'}}>{d}</div></div>
      </div>)}
    </div>
  </div>;
}

function AuthShell({ children, aside }){
  return <div style={{...wrap,padding:'40px var(--gutter) 0'}}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:32,alignItems:'stretch'}} className="ax-auth-grid">
      {aside}
      <div style={{display:'flex',alignItems:'center'}}>
        <div style={{width:'100%',maxWidth:420,margin:'0 auto'}}>{children}</div>
      </div>
    </div>
  </div>;
}

function PasswordInput({ label='Password', ...rest }){
  const i=Ic(); const [show,setShow]=React.useState(false);
  return <div style={{position:'relative'}}>
    <Input label={label} type={show?'text':'password'} placeholder="••••••••" iconLeft={React.createElement(i.Lock,{size:16})} {...rest}/>
    <button type="button" onClick={()=>setShow(s=>!s)} aria-label={show?'Hide password':'Show password'} style={{position:'absolute',right:12,bottom:11,background:'none',border:'none',cursor:'pointer',color:'var(--text-faint)',display:'inline-flex',padding:2}}>{React.createElement(show?i.EyeOff:i.Eye,{size:17})}</button>
  </div>;
}

function SocialRow(){
  const btn=(label,glyph)=><button type="button" style={{flex:1,display:'inline-flex',alignItems:'center',justifyContent:'center',gap:9,height:46,background:'var(--surface-card)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-md)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:'var(--fs-sm)',color:'var(--text-strong)',cursor:'pointer',boxShadow:'var(--shadow-xs)',transition:'background .15s'}} onMouseEnter={e=>e.currentTarget.style.background='var(--surface-sunken)'} onMouseLeave={e=>e.currentTarget.style.background='var(--surface-card)'}>{glyph}{label}</button>;
  const gG=<svg width="17" height="17" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.6 9.2c0-.6-.1-1.2-.2-1.8H9v3.5h4.8a4.1 4.1 0 0 1-1.8 2.7v2.2h2.9c1.7-1.6 2.7-3.9 2.7-6.6z"/><path fill="#34A853" d="M9 18c2.4 0 4.5-.8 6-2.2l-2.9-2.2c-.8.5-1.8.9-3.1.9-2.4 0-4.4-1.6-5.1-3.8H.9v2.3A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.9 10.7a5.4 5.4 0 0 1 0-3.4V5H.9a9 9 0 0 0 0 8l3-2.3z"/><path fill="#EA4335" d="M9 3.6c1.3 0 2.5.5 3.4 1.3l2.6-2.6A9 9 0 0 0 .9 5l3 2.3C4.6 5.2 6.6 3.6 9 3.6z"/></svg>;
  const aG=<svg width="16" height="16" viewBox="0 0 16 16" fill="var(--ink-900)"><path d="M11.2 8.5c0-1.6 1.3-2.4 1.4-2.4-.8-1.1-2-1.3-2.4-1.3-1-.1-2 .6-2.5.6s-1.3-.6-2.1-.6c-1.1 0-2.1.6-2.7 1.6-1.1 2-.3 5 .8 6.6.5.8 1.2 1.7 2 1.6.8 0 1.1-.5 2.1-.5s1.2.5 2.1.5 1.4-.8 1.9-1.5c.6-.9.8-1.7.9-1.8 0 0-1.6-.6-1.6-2.4zM9.6 3.7c.4-.5.7-1.3.6-2-.6 0-1.4.4-1.9.9-.4.5-.7 1.2-.6 2 .7 0 1.4-.4 1.9-.9z"/></svg>;
  return <div style={{display:'flex',gap:12}}>{btn('Google',gG)}{btn('Apple',aG)}</div>;
}

function Divider({ children }){
  return <div style={{display:'flex',alignItems:'center',gap:14,color:'var(--text-faint)',fontSize:'var(--fs-sm)'}}>
    <span style={{flex:1,height:1,background:'var(--border-subtle)'}}/>{children}<span style={{flex:1,height:1,background:'var(--border-subtle)'}}/>
  </div>;
}
function Check({ checked, onChange, children }){
  const i=Ic();
  return <label style={{display:'flex',alignItems:'flex-start',gap:9,cursor:'pointer',fontSize:'var(--fs-sm)',color:'var(--text-body)',lineHeight:1.5}}>
    <span onClick={onChange} style={{width:18,height:18,borderRadius:6,border:`1.5px solid ${checked?'var(--blue-600)':'var(--border-strong)'}`,background:checked?'var(--blue-600)':'var(--surface-card)',display:'inline-flex',alignItems:'center',justifyContent:'center',flex:'0 0 auto',marginTop:1,transition:'all .15s'}}>{checked&&React.createElement(i.Check,{size:12,sw:3,style:{color:'#fff'}})}</span>
    <span>{children}</span>
  </label>;
}

/* ---------------- LOGIN ---------------- */
function Login({ onNav, onAuth }){
  const i=Ic(); const [remember,setRemember]=React.useState(true);
  return <AuthShell aside={<BrandPanel heading="Welcome back to AshopNexa." sub="Sign in to track orders, save your favorites, and check out faster — your cart and addresses are right where you left them."
    points={[[i.Truck,'Faster checkout','Saved addresses & payment, ready to go'],[i.Package,'Order tracking','Live status on everything you’ve ordered'],[i.Gift,'Member-only deals','Subscriber pricing and early access']]}/>}>
    <div style={{display:'flex',flexDirection:'column',gap:22}}>
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        <Eyebrow>Sign in</Eyebrow>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-3xl)',fontWeight:700,color:'var(--text-strong)',letterSpacing:'-0.02em',margin:0}}>Sign in to your account</h1>
        <p style={{color:'var(--text-muted)',fontSize:'var(--fs-base)',margin:0}}>New to AshopNexa? <a href="#" onClick={e=>{e.preventDefault();onNav({type:'register'});}} style={{color:'var(--blue-600)',fontWeight:600}}>Create an account</a></p>
      </div>
      <SocialRow/>
      <Divider>or sign in with email</Divider>
      <form onSubmit={e=>{e.preventDefault();onAuth&&onAuth();}} style={{display:'flex',flexDirection:'column',gap:16}}>
        <Input label="Email" type="email" required placeholder="you@example.com" iconLeft={React.createElement(i.Mail,{size:16})}/>
        <PasswordInput/>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:8}}>
          <Check checked={remember} onChange={()=>setRemember(r=>!r)}>Remember me</Check>
          <a href="#" onClick={e=>{e.preventDefault();onNav({type:'forgot'});}} style={{color:'var(--blue-600)',fontWeight:600,fontSize:'var(--fs-sm)'}}>Forgot password?</a>
        </div>
        <Button variant="primary" size="lg" full type="submit" iconRight={React.createElement(i.ArrowRight,{size:18})}>Sign In</Button>
      </form>
      <div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:7,fontSize:'var(--fs-sm)',color:'var(--text-faint)'}}>{React.createElement(i.Lock,{size:14})} Secured with 256-bit encryption</div>
    </div>
  </AuthShell>;
}

/* ---------------- REGISTER ---------------- */
function Register({ onNav, onAuth }){
  const i=Ic(); const [agree,setAgree]=React.useState(false); const [sub,setSub]=React.useState(true);
  return <AuthShell aside={<BrandPanel heading="Join AshopNexa today." sub="Create a free account to unlock member pricing, faster checkout, and a smarter way to shop photo-led fashion drops."
    points={[[i.Gift,'Welcome offer','10% off your first order when you join'],[i.Shield,'Secure & private','Your data is encrypted and never sold'],[i.Refresh,'Easy 30-day returns','Free return shipping on every order']]}/>}>
    <div style={{display:'flex',flexDirection:'column',gap:22}}>
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        <Eyebrow>Create account</Eyebrow>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-3xl)',fontWeight:700,color:'var(--text-strong)',letterSpacing:'-0.02em',margin:0}}>Create your account</h1>
        <p style={{color:'var(--text-muted)',fontSize:'var(--fs-base)',margin:0}}>Already have one? <a href="#" onClick={e=>{e.preventDefault();onNav({type:'login'});}} style={{color:'var(--blue-600)',fontWeight:600}}>Sign in</a></p>
      </div>
      <SocialRow/>
      <Divider>or sign up with email</Divider>
      <form onSubmit={e=>{e.preventDefault();if(agree)onAuth&&onAuth();}} style={{display:'flex',flexDirection:'column',gap:16}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}} className="ax-form-2">
          <Input label="First name" required placeholder="Jordan"/>
          <Input label="Last name" required placeholder="Vale"/>
        </div>
        <Input label="Email" type="email" required placeholder="you@example.com" iconLeft={React.createElement(i.Mail,{size:16})}/>
        <PasswordInput hint="At least 8 characters with a number and a symbol."/>
        <div style={{display:'flex',flexDirection:'column',gap:11,marginTop:2}}>
          <Check checked={agree} onChange={()=>setAgree(a=>!a)}>I agree to AshopNexa’s <a href="#" onClick={e=>{e.preventDefault();onNav({type:'terms'});}} style={{color:'var(--blue-600)',fontWeight:600}}>Terms of Service</a> and <a href="#" onClick={e=>{e.preventDefault();onNav({type:'privacy'});}} style={{color:'var(--blue-600)',fontWeight:600}}>Privacy Policy</a>.</Check>
          <Check checked={sub} onChange={()=>setSub(s=>!s)}>Email me new drops and member-only deals.</Check>
        </div>
        <Button variant="primary" size="lg" full type="submit" iconRight={React.createElement(i.ArrowRight,{size:18})} style={{opacity:agree?1:0.55,cursor:agree?'pointer':'not-allowed'}}>Create Account</Button>
      </form>
    </div>
  </AuthShell>;
}

/* ---------------- FORGOT PASSWORD ---------------- */
function Forgot({ onNav }){
  const i=Ic(); const [sent,setSent]=React.useState(false); const [email,setEmail]=React.useState('');
  return <div style={{...wrap,padding:'56px var(--gutter)',maxWidth:480}}>
    <div style={{background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-2xl)',padding:'clamp(28px,4vw,40px)',boxShadow:'var(--shadow-md)',display:'flex',flexDirection:'column',gap:20}}>
      {!sent ? <>
        <span style={{width:52,height:52,borderRadius:'var(--radius-lg)',background:'var(--surface-accent-soft)',border:'1px solid var(--blue-100)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--blue-600)'}}>{React.createElement(i.Lock,{size:24})}</span>
        <div><h1 style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-2xl)',fontWeight:700,color:'var(--text-strong)',letterSpacing:'-0.02em',margin:'0 0 6px'}}>Forgot your password?</h1>
        <p style={{color:'var(--text-muted)',fontSize:'var(--fs-base)',margin:0,lineHeight:1.55}}>Enter the email on your account and we’ll send you a link to reset it.</p></div>
        <form onSubmit={e=>{e.preventDefault();if(email.includes('@'))setSent(true);}} style={{display:'flex',flexDirection:'column',gap:16}}>
          <Input label="Email" type="email" required value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@example.com" iconLeft={React.createElement(i.Mail,{size:16})}/>
          <Button variant="primary" size="lg" full type="submit">Send reset link</Button>
        </form>
      </> : <>
        <span style={{width:52,height:52,borderRadius:'var(--radius-lg)',background:'var(--status-success-soft)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--status-success)'}}>{React.createElement(i.CheckCircle,{size:26})}</span>
        <div><h1 style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-2xl)',fontWeight:700,color:'var(--text-strong)',letterSpacing:'-0.02em',margin:'0 0 6px'}}>Check your inbox</h1>
        <p style={{color:'var(--text-muted)',fontSize:'var(--fs-base)',margin:0,lineHeight:1.55}}>We sent a reset link to <strong style={{color:'var(--text-strong)'}}>{email}</strong>. It expires in 30 minutes.</p></div>
      </>}
      <button onClick={()=>onNav({type:'login'})} style={{display:'inline-flex',alignItems:'center',justifyContent:'center',gap:7,background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font-body)',fontWeight:600,fontSize:'var(--fs-base)',color:'var(--text-muted)'}}>← Back to sign in</button>
    </div>
  </div>;
}

/* ---------------- ACCOUNT DASHBOARD ---------------- */
const navItems=[['overview','Overview','Package'],['orders','Orders','Truck'],['addresses','Addresses','MapPin'],['wishlist','Wishlist','Heart'],['settings','Settings','Settings']];
const mockOrders=[
  {no:'ORD-2026-04817',date:'Jun 14, 2026',status:'Shipped',total:118.97,items:3,tone:'default'},
  {no:'ORD-2026-04122',date:'May 28, 2026',status:'Delivered',total:54.00,items:1,tone:'success'},
  {no:'ORD-2026-03840',date:'May 09, 2026',status:'Delivered',total:212.45,items:4,tone:'success'},
];
function Account({ onNav, onLogout }){
  const i=Ic(); const [tab,setTab]=React.useState('overview'); const D=window.AX_DATA;
  const wl=(D&&D.products?D.products.slice(0,3):[]);
  return <div style={{...wrap,padding:'36px var(--gutter) 0'}}>
    <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:28,flexWrap:'wrap'}}>
      <span style={{width:60,height:60,borderRadius:'999px',background:'linear-gradient(135deg,var(--blue-600),var(--cyan-500))',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#fff',fontFamily:'var(--font-display)',fontWeight:700,fontSize:22,flex:'0 0 auto'}}>JV</span>
      <div style={{flex:1}}><h1 style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-2xl)',fontWeight:700,color:'var(--text-strong)',letterSpacing:'-0.02em',margin:0}}>Hi, Jordan</h1><p style={{color:'var(--text-muted)',fontSize:'var(--fs-base)',margin:'2px 0 0'}}>jordan.vale@example.com · Member since 2025</p></div>
      <Badge tone="success">Verified</Badge>
    </div>
    <div style={{display:'grid',gridTemplateColumns:'240px 1fr',gap:28,alignItems:'start'}} className="ax-acct-grid">
      <aside style={{display:'flex',flexDirection:'column',gap:4,background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',padding:10,boxShadow:'var(--shadow-sm)',position:'sticky',top:88}} className="ax-acct-nav">
        {navItems.map(([k,label,icon])=>{const on=tab===k;return <button key={k} onClick={()=>setTab(k)} style={{display:'flex',alignItems:'center',gap:11,padding:'11px 13px',borderRadius:'var(--radius-md)',border:'none',cursor:'pointer',textAlign:'left',background:on?'var(--surface-accent-soft)':'transparent',color:on?'var(--blue-700)':'var(--text-body)',fontFamily:'var(--font-body)',fontWeight:on?600:500,fontSize:'var(--fs-base)',transition:'background .12s'}} onMouseEnter={e=>{if(!on)e.currentTarget.style.background='var(--surface-sunken)';}} onMouseLeave={e=>{if(!on)e.currentTarget.style.background='transparent';}}>{React.createElement(i[icon],{size:18})}{label}</button>;})}
        <span style={{height:1,background:'var(--border-subtle)',margin:'6px 4px'}}/>
        <button onClick={onLogout} style={{display:'flex',alignItems:'center',gap:11,padding:'11px 13px',borderRadius:'var(--radius-md)',border:'none',cursor:'pointer',textAlign:'left',background:'transparent',color:'var(--status-danger)',fontFamily:'var(--font-body)',fontWeight:500,fontSize:'var(--fs-base)'}}>{React.createElement(i.LogOut,{size:18})}Sign out</button>
      </aside>
      <div style={{minHeight:400}}>
        {tab==='overview' && <Overview i={i} onTab={setTab} onNav={onNav}/>}
        {tab==='orders' && <Orders i={i} onNav={onNav}/>}
        {tab==='addresses' && <Addresses i={i}/>}
        {tab==='wishlist' && <Wishlist items={wl} onNav={onNav}/>}
        {tab==='settings' && <SettingsTab i={i}/>}
      </div>
    </div>
  </div>;
}
function Panel({ title, action, onAction, children }){
  const i=Ic();
  return <section style={{background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',padding:24,boxShadow:'var(--shadow-sm)',display:'flex',flexDirection:'column',gap:16}}>
    <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:12}}>
      <h2 style={{fontFamily:'var(--font-display)',fontSize:'var(--fs-lg)',fontWeight:600,color:'var(--text-strong)',margin:0}}>{title}</h2>
      {action && <button onClick={onAction} style={{display:'inline-flex',alignItems:'center',gap:5,background:'none',border:'none',cursor:'pointer',color:'var(--blue-600)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:'var(--fs-sm)'}}>{action} {React.createElement(i.ChevronRight,{size:15})}</button>}
    </div>
    {children}
  </section>;
}
function StatusBadge({ status, tone }){ return <Badge tone={tone==='success'?'success':'default'}>{status}</Badge>; }
function Overview({ i, onTab, onNav }){
  const stats=[['Active orders','1','Truck'],['Wishlist','3','Heart'],['Reward points','840','Gift']];
  return <div style={{display:'flex',flexDirection:'column',gap:20}}>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}} className="ax-stat-grid">
      {stats.map(([label,val,icon])=><div key={label} style={{background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-xl)',padding:'18px 20px',boxShadow:'var(--shadow-sm)',display:'flex',flexDirection:'column',gap:8}}>
        <span style={{width:38,height:38,borderRadius:'var(--radius-md)',background:'var(--surface-accent-soft)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--blue-600)'}}>{React.createElement(i[icon],{size:19})}</span>
        <div style={{fontFamily:'var(--font-mono)',fontSize:'var(--fs-2xl)',fontWeight:700,color:'var(--text-strong)'}}>{val}</div>
        <div style={{fontSize:'var(--fs-sm)',color:'var(--text-muted)'}}>{label}</div>
      </div>)}
    </div>
    <Panel title="Recent orders" action="View all" onAction={()=>onTab('orders')}>
      {mockOrders.slice(0,2).map(o=><div key={o.no} style={{display:'flex',alignItems:'center',gap:14,padding:'12px 0',borderBottom:'1px solid var(--border-subtle)'}}>
        <span style={{width:42,height:42,borderRadius:'var(--radius-md)',background:'var(--surface-sunken)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--text-muted)',flex:'0 0 auto'}}>{React.createElement(i.Package,{size:19})}</span>
        <div style={{flex:1}}><div style={{fontFamily:'var(--font-mono)',fontWeight:600,fontSize:'var(--fs-sm)',color:'var(--text-strong)'}}>{o.no}</div><div style={{fontSize:'var(--fs-sm)',color:'var(--text-muted)'}}>{o.date} · {o.items} item{o.items>1?'s':''}</div></div>
        <StatusBadge status={o.status} tone={o.tone}/>
        <span style={{fontFamily:'var(--font-mono)',fontWeight:600,color:'var(--text-strong)',minWidth:72,textAlign:'right'}}>${o.total.toFixed(2)}</span>
      </div>)}
    </Panel>
    <Panel title="Default address" action="Manage" onAction={()=>onTab('addresses')}>
      <div style={{fontSize:'var(--fs-base)',color:'var(--text-body)',lineHeight:1.6}}>Jordan Vale<br/>123 Market St, Apt 4B<br/>San Francisco, CA 94103<br/>United States</div>
    </Panel>
  </div>;
}
function Orders({ i, onNav }){
  return <Panel title="Order history">
    <div style={{display:'flex',flexDirection:'column'}}>
      {mockOrders.map((o,idx)=><div key={o.no} style={{display:'flex',alignItems:'center',gap:14,padding:'16px 0',borderBottom:idx<mockOrders.length-1?'1px solid var(--border-subtle)':'none'}}>
        <span style={{width:46,height:46,borderRadius:'var(--radius-md)',background:'var(--surface-sunken)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--text-muted)',flex:'0 0 auto'}}>{React.createElement(i.Package,{size:20})}</span>
        <div style={{flex:1,minWidth:0}}><div style={{fontFamily:'var(--font-mono)',fontWeight:600,color:'var(--text-strong)'}}>{o.no}</div><div style={{fontSize:'var(--fs-sm)',color:'var(--text-muted)'}}>{o.date} · {o.items} item{o.items>1?'s':''} · ${o.total.toFixed(2)}</div></div>
        <StatusBadge status={o.status} tone={o.tone}/>
        <button onClick={()=>onNav({type:'track',order:o.no})} style={{display:'inline-flex',alignItems:'center',gap:5,background:'none',border:'none',cursor:'pointer',color:'var(--blue-600)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:'var(--fs-sm)',whiteSpace:'nowrap'}}>Track {React.createElement(i.ChevronRight,{size:15})}</button>
      </div>)}
    </div>
  </Panel>;
}
function Addresses({ i }){
  const addrs=[{label:'Home',def:true,lines:['Jordan Vale','123 Market St, Apt 4B','San Francisco, CA 94103','United States']},{label:'Work',def:false,lines:['Jordan Vale','500 Howard St, Floor 8','San Francisco, CA 94105','United States']}];
  return <div style={{display:'flex',flexDirection:'column',gap:16}}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}} className="ax-form-2">
      {addrs.map(a=><div key={a.label} style={{background:'var(--surface-card)',border:`1px solid ${a.def?'var(--blue-100)':'var(--border-subtle)'}`,borderRadius:'var(--radius-xl)',padding:20,boxShadow:'var(--shadow-sm)',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}><span style={{fontWeight:600,color:'var(--text-strong)'}}>{a.label}</span>{a.def&&<Badge tone="success">Default</Badge>}</div>
        <div style={{fontSize:'var(--fs-base)',color:'var(--text-body)',lineHeight:1.6}}>{a.lines.map((l,k)=><div key={k}>{l}</div>)}</div>
        <div style={{display:'flex',gap:14,marginTop:2}}><button style={{display:'inline-flex',alignItems:'center',gap:5,background:'none',border:'none',cursor:'pointer',color:'var(--blue-600)',fontWeight:600,fontSize:'var(--fs-sm)',fontFamily:'var(--font-body)'}}>{React.createElement(i.Edit,{size:14})} Edit</button><button style={{background:'none',border:'none',cursor:'pointer',color:'var(--text-muted)',fontWeight:600,fontSize:'var(--fs-sm)',fontFamily:'var(--font-body)'}}>Remove</button></div>
      </div>)}
    </div>
    <button style={{display:'inline-flex',alignItems:'center',justifyContent:'center',gap:8,height:54,background:'var(--surface-card)',border:'1.5px dashed var(--border-strong)',borderRadius:'var(--radius-xl)',cursor:'pointer',color:'var(--text-muted)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:'var(--fs-base)'}}>{React.createElement(i.Plus,{size:18})} Add new address</button>
  </div>;
}
function Wishlist({ items, onNav }){
  const i=Ic();
  return <Panel title="Your wishlist">
    <div style={{display:'flex',flexDirection:'column'}}>
      {items.map((p,idx)=><div key={p.id} style={{display:'flex',alignItems:'center',gap:14,padding:'14px 0',borderBottom:idx<items.length-1?'1px solid var(--border-subtle)':'none'}}>
        <div style={{width:56,height:56,borderRadius:'var(--radius-md)',background:p.accent,flex:'0 0 auto',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontWeight:700,color:'rgba(10,17,36,0.12)'}}>{p.name.charAt(0)}</div>
        <div style={{flex:1,minWidth:0}}><div style={{fontWeight:600,color:'var(--text-strong)'}}>{p.name}</div><div style={{marginTop:3}}><PriceTag price={p.price} compareAt={p.compareAt} size="sm"/></div></div>
        <Button variant="dark" size="sm" iconLeft={React.createElement(i.Cart,{size:15})} onClick={()=>onNav({type:'detail',product:p})}>View</Button>
        <button aria-label="Remove" style={{background:'none',border:'none',cursor:'pointer',color:'var(--text-faint)',padding:4}}>{React.createElement(i.Trash,{size:17})}</button>
      </div>)}
    </div>
  </Panel>;
}
function SettingsTab({ i }){
  return <div style={{display:'flex',flexDirection:'column',gap:20}}>
    <Panel title="Profile">
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}} className="ax-form-2">
        <Input label="First name" defaultValue="Jordan"/>
        <Input label="Last name" defaultValue="Vale"/>
        <Input label="Email" defaultValue="jordan.vale@example.com" containerStyle={{gridColumn:'span 2'}}/>
        <Input label="Phone" defaultValue="+1 (415) 555-0188" containerStyle={{gridColumn:'span 2'}}/>
      </div>
      <div><Button variant="primary" size="md">Save changes</Button></div>
    </Panel>
    <Panel title="Password">
      <div style={{display:'flex',flexDirection:'column',gap:16,maxWidth:380}}>
        <Input label="Current password" type="password" placeholder="••••••••" iconLeft={React.createElement(i.Lock,{size:16})}/>
        <Input label="New password" type="password" placeholder="••••••••" iconLeft={React.createElement(i.Lock,{size:16})}/>
      </div>
      <div><Button variant="outline" size="md">Update password</Button></div>
    </Panel>
    <Panel title="Email preferences">
      <Toggle i={i} label="Order updates" desc="Shipping, delivery and return notifications" on={true}/>
      <Toggle i={i} label="Deals & new arrivals" desc="Member pricing, restocks and early access" on={true}/>
      <Toggle i={i} label="Product tips" desc="How-tos and care guides for your purchases" on={false}/>
    </Panel>
  </div>;
}
function Toggle({ label, desc, on:initial }){
  const [on,setOn]=React.useState(initial);
  return <div style={{display:'flex',alignItems:'center',gap:14,padding:'4px 0'}}>
    <div style={{flex:1}}><div style={{fontWeight:600,color:'var(--text-strong)'}}>{label}</div><div style={{fontSize:'var(--fs-sm)',color:'var(--text-muted)'}}>{desc}</div></div>
    <button onClick={()=>setOn(o=>!o)} aria-label={label} style={{width:46,height:26,borderRadius:'999px',border:'none',cursor:'pointer',background:on?'var(--blue-600)':'var(--border-strong)',position:'relative',transition:'background .2s',flex:'0 0 auto'}}>
      <span style={{position:'absolute',top:3,left:on?23:3,width:20,height:20,borderRadius:'999px',background:'#fff',boxShadow:'var(--shadow-sm)',transition:'left .2s var(--ease-out)'}}/>
    </button>
  </div>;
}

window.AXAuth = { Login, Register, Forgot, Account };
})();
