const NS = window.ArcadiaDesignSystem_90e8f6;
const {Button, IconButton, Window, Transit, Toast, Tag, Input, Dialog} = NS;
const D = window.EST;
// Line icons — single weight, round terminals (Arcadia iconography rules)
function Ic({d, size=20, style}){
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">{d.split("|").map((p,i)=><path key={i} d={p}/>)}</svg>;
}
const IC = {
  bag:"M6 8h12l-1.2 12a1.6 1.6 0 0 1-1.6 1.4H8.8a1.6 1.6 0 0 1-1.6-1.4L6 8Z|M9 8V6.6a3 3 0 0 1 6 0V8",
  plus:"M12 6v12|M6 12h12", minus:"M6 12h12", x:"M6 6l12 12|M18 6L6 18",
  menu:"M4 7h16|M4 12h16|M4 17h16", chev:"M6 9.5l6 6 6-6", check:"M5 12.5l4.5 4.5L19 7"
};
function Tbd({children, note}){ return <span className="tbd" title={"Placeholder — "+(note||"final value TBD")}>{children}</span>; }
function money(n){ return "$"+n; }
function useWidth(){
  const ref = React.useRef(null); const [w, setW] = React.useState(0);
  React.useEffect(()=>{ if(!ref.current) return; const ro = new ResizeObserver(e=>setW(e[0].contentRect.width)); ro.observe(ref.current); return ()=>ro.disconnect(); },[]);
  return [ref, w];
}
// Cover grammar (from the estate kit): single bare · EP thread rule · album trim band
function CoverArt({title, rank="single", size, wonk=false, plate="visit still"}){
  const titleStyle = {fontFamily:"var(--font-display)", color:"var(--starlight-100)", lineHeight:1.05, margin:0,
    fontVariationSettings: wonk ? "'opsz' 144,'SOFT' 100,'WONK' 1" : "'opsz' 144", fontWeight: wonk ? 600 : 900,
    letterSpacing: wonk ? 0 : "-0.01em", fontSize:size*0.105};
  return <div className="night-grain" style={{width:size, height:size, background:"var(--night-900)", position:"relative", display:"flex", flexDirection:"column", padding:size*0.07, boxSizing:"border-box", flexShrink:0}}>
    {rank==="album" && <div className="trim-band" style={{position:"absolute", top:0, left:0, right:0}}></div>}
    <div style={{flex:1, display:"flex", alignItems:"center", justifyContent:"center", minHeight:0, padding:size*0.03}}>
      <div style={{width:"68%", aspectRatio:"1/1"}}><Window aspect="1/1" placeholder={plate}/></div>
    </div>
    <div><h3 style={titleStyle}>{title}</h3>
      {rank==="ep" && <div style={{width:size*0.14, height:1, background:"var(--thread-500)", marginTop:6}}></div>}
    </div>
    <span style={{position:"absolute", top:size*0.07, right:size*0.07, fontFamily:"var(--font-display)", fontVariationSettings:"'opsz' 144", fontWeight:640, fontSize:Math.max(9,size*0.028), color:"var(--starlight-500)"}}>Planet Ruti</span>
  </div>;
}
const NAV = [["Home",""],["Music","music"],["Videos","videos"],["Shop","shop"],["About","about"],["Shows","shows"]];
function EstMasthead({route, go, cartCount, onBag}){
  const [menu, setMenu] = React.useState(false);
  const link = (label, r) => <a key={r} href={"#/"+r} className={"arc-masthead-link"+(route===r?" arc-masthead-link--active":"")} onClick={(e)=>{e.preventDefault(); setMenu(false); go(r);}}>{label}</a>;
  return <header className="est-mast">
    <a href="#/" className="wordmark" style={{fontSize:26, textDecoration:"none", color:"var(--text-primary)"}} onClick={(e)=>{e.preventDefault(); go("");}}>Planet Ruti</a>
    <nav className="est-nav" aria-label="Main">{NAV.map(([l,r])=>link(l,r))}</nav>
    <button type="button" className="est-bag est-menu-btn" aria-label="Menu" onClick={()=>setMenu(true)}><Ic d={IC.menu}/></button>
    <div className="est-mast-right">
      <button type="button" className="est-bag" aria-label={"Cart, "+cartCount+" item"+(cartCount===1?"":"s")} onClick={onBag}><Ic d={IC.bag} size={21}/>{cartCount>0 && <span className="est-bag-dot">{cartCount}</span>}</button>
    </div>
    {menu && <div className="est-menu" role="dialog" aria-label="Menu">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
        <span className="wordmark" style={{fontSize:22}}>Planet Ruti</span>
        <button type="button" className="est-bag" aria-label="Close menu" onClick={()=>setMenu(false)}><Ic d={IC.x}/></button>
      </div>
      <nav style={{display:"flex", flexDirection:"column", marginTop:16}} aria-label="Main">{NAV.map(([l,r])=>link(l,r))}</nav>
    </div>}
  </header>;
}
function NotifyMe({purpose, compact}){
  const [email, setEmail] = React.useState(""); const [done, setDone] = React.useState(false); const [err, setErr] = React.useState("");
  const submit = (e)=>{ e.preventDefault();
    if(!/.+@.+\..+/.test(email)){ setErr("That address doesn't look right — check the @."); return; }
    setErr(""); setDone(true); };
  if(done) return <div className="chrome-text" style={{display:"flex", gap:8, alignItems:"center", color:"var(--text-secondary)"}}><Ic d={IC.check} size={16} style={{color:"var(--arcady-400)"}}/> You're on the list.</div>;
  return <form onSubmit={submit} style={{display:"flex", flexDirection:"column", gap:10, maxWidth:360}}>
    {purpose && <span className="micro-text">{purpose}</span>}
    <div style={{display:"flex", gap:8, alignItems:"flex-start"}}>
      <div style={{flex:1}}><Input aria-label="Email" placeholder="you@somewhere.com" value={email} error={err} onChange={(e)=>setEmail(e.target.value)}/></div>
      <Button variant="secondary" type="submit" size={compact?"sm":"md"}>Notify me</Button>
    </div>
  </form>;
}
function Collapse({title, children, defaultOpen}){
  return <details className="est-fold" open={defaultOpen}>
    <summary><span>{title}</span><span className="chev" style={{display:"inline-flex"}}><Ic d={IC.chev} size={16}/></span></summary>
    <div className="est-fold-body">{children}</div>
  </details>;
}
function Stepper({value, onChange, min=1}){
  return <div className="est-step">
    <button type="button" aria-label="Fewer" onClick={()=>onChange(Math.max(min, value-1))}><Ic d={IC.minus} size={14}/></button>
    <span aria-live="polite">{value}</span>
    <button type="button" aria-label="More" onClick={()=>onChange(value+1)}><Ic d={IC.plus} size={14}/></button>
  </div>;
}
function EmptyState({line, actionLabel, onAction}){
  return <div style={{padding:"110px 0", display:"flex", flexDirection:"column", alignItems:"center", gap:20, textAlign:"center"}}>
    <Transit size={40}/>
    <p className="chrome-text" style={{color:"var(--text-secondary)", margin:0}}>{line}</p>
    {actionLabel && <a href="#" onClick={(e)=>{e.preventDefault(); onAction();}}>{actionLabel}</a>}
  </div>;
}
function EstFooter({go, stub}){
  const flink = (label, r) => <a key={label} href={"#/"+r} onClick={(e)=>{e.preventDefault(); go(r);}}>{label}</a>;
  return <footer className="est-footer">
    <div className="est-wrap est-footer-grid">
      <div className="est-footer-id">
        <Transit size={30}/>
        <span className="wordmark" style={{fontSize:22}}>Planet Ruti</span>
        <span className="micro-text">© 2026 Planet Ruti</span>
      </div>
      <nav className="est-footer-nav" aria-label="Utility">
        {flink("Press kit","press")}{flink("Contact","contact")}{flink("Shipping & returns","shipping")}{flink("Privacy","privacy")}
      </nav>
      <NotifyMe purpose="Batches and releases. Nothing else." compact/>
    </div>
  </footer>;
}
Object.assign(window, {Ic, IC, Tbd, money, useWidth, CoverArt, EstMasthead, NotifyMe, Collapse, Stepper, EmptyState, EstFooter, NAV});