const {Button, Window, Transit, Tag, Dialog} = window.ArcadiaDesignSystem_90e8f6;
function HomePage({go, releaseDay}){
  const [ref, w] = useWidth();
  const hat = EST.hat;
  return <div>
    <section style={{display:"flex", gap:56, alignItems:"center", padding:"48px 0 80px", flexWrap:"wrap"}}>
      <div ref={ref} style={{flex:"1 1 300px", maxWidth:380}}><div className="reveal"><CoverArt title="MAKE" rank="single" size={Math.max(240, Math.min(380, w||380))} plate="visit still — MAKE"/></div></div>
      <div style={{flex:"1 1 300px", maxWidth:420}}>
        <div className="micro-text">{releaseDay ? "Release day" : "The latest"}</div>
        <h1 className="display-planet" style={{fontSize:"clamp(40px,6vw,58px)", margin:"12px 0 16px"}}>{releaseDay ? "MAKE is out now!" : "MAKE"}</h1>
        <p className="chrome-text" style={{color:"var(--text-secondary)", margin:"0 0 28px"}}>{EST.releases[0].line}</p>
        <Button onClick={()=>go("music")}>Listen</Button>
      </div>
    </section>
    <section style={{paddingBottom:16}}>
      <h2 className="heading-2" style={{margin:"0 0 24px"}}>Recent visits</h2>
      <div className="est-row3">
        {EST.visits.slice(0,3).map(v=><div key={v.id} className="est-click" role="button" tabIndex={0} onClick={()=>go("videos")} onKeyDown={(e)=>{if(e.key==="Enter")go("videos");}}>
          <Window aspect="4/5" placeholder={"visit still — "+v.caption} caption={v.caption}/>
        </div>)}
      </div>
    </section>
    <section style={{padding:"96px 0 32px"}}>
      <div className="est-hatcard est-click" role="button" tabIndex={0} aria-label="The Hat — shop" onClick={()=>go("shop")} onKeyDown={(e)=>{if(e.key==="Enter")go("shop");}}>
        <Window aspect="2/3" placeholder="the hat — studio, full length"/>
        <div className="est-hatcard-meta">
          <span className="chrome-text" style={{fontWeight:600}}>The Hat</span>
          <span className="chrome-text" style={{color:"var(--starlight-100)"}}><Tbd note="price TBD">{money(hat.price)}</Tbd></span>
        </div>
      </div>
    </section>
  </div>;
}
function MusicPage({stub}){
  const [sel, setSel] = React.useState(null);
  const r = EST.releases.find(x=>x.id===sel);
  const rankLabel = {single:"Single", ep:"EP", album:"Album"};
  return <div style={{paddingTop:16}}>
    <h1 className="heading-1" style={{margin:"0 0 8px"}}>Music</h1>
    <div className="est-relgrid">
      {EST.releases.map(x=><div key={x.id} className="est-click" role="button" tabIndex={0} aria-label={x.title} onClick={()=>setSel(sel===x.id?null:x.id)} onKeyDown={(e)=>{if(e.key==="Enter")setSel(sel===x.id?null:x.id);}}>
        <CoverArt title={x.title} rank={x.rank} wonk={x.wonk} size={220} plate={"visit still — "+x.title}/>
      </div>)}
    </div>
    {r && <div className="est-reldetail">
      <span className="chrome-text" style={{fontWeight:600, fontSize:16}}>{r.title}</span>
      <Tag>{rankLabel[r.rank]}</Tag>
      <span className="micro-text">{r.year}</span>
      <div className="est-provlinks">
        {EST.providers.map(p=><a key={p} href="#" onClick={(e)=>{e.preventDefault(); stub("Opens on "+p+" — link TBD.");}}>{p}</a>)}
        <button type="button" className="est-bag" aria-label="Close" onClick={()=>setSel(null)} style={{width:30, height:30}}><Ic d={IC.x} size={14}/></button>
      </div>
    </div>}
  </div>;
}
function VideosPage({stub}){
  const [openV, setOpenV] = React.useState(null);
  const v = EST.visits.find(x=>x.id===openV);
  return <div style={{paddingTop:16}}>
    <h1 className="heading-1" style={{margin:"0 0 28px"}}>Videos</h1>
    <div className="est-masonry">
      {EST.visits.map(x=><div key={x.id} className="est-click" role="button" tabIndex={0} aria-label={"Play — "+x.caption} onClick={()=>setOpenV(x.id)} onKeyDown={(e)=>{if(e.key==="Enter")setOpenV(x.id);}}>
        <Window aspect={x.aspect} alt={x.alt} placeholder={"visit still — "+x.caption} caption={x.caption}/>
      </div>)}
    </div>
    <Dialog open={!!v} title={v ? v.caption : ""} onClose={()=>setOpenV(null)} actions={<Button variant="secondary" onClick={()=>setOpenV(null)}>Close</Button>}>
      <div style={{display:"flex", flexDirection:"column", gap:12}}>
        <Window aspect="16/9" placeholder="on-Planet player — embed TBD"/>
        <a href="#" onClick={(e)=>{e.preventDefault(); stub("Opens on the platform — link TBD.");}}>Watch on the platform</a>
      </div>
    </Dialog>
  </div>;
}
function AboutPage(){
  return <div className="est-measure-text" style={{paddingTop:16}}>
    <h1 className="heading-1" style={{margin:"0 0 28px"}}>About</h1>
    <div style={{maxWidth:400, margin:"0 0 32px"}}><Window aspect="3/4" placeholder="owned portrait — Planet register" alt="Ruti in the costume, photographed on deep violet" caption="Ruti Buser"/></div>
    {EST.bio.map((p,i)=><p key={i} className="body-text" style={{margin:"0 0 20px"}}>{p}</p>)}
    <h2 className="heading-2" style={{margin:"48px 0 20px"}}>The ten truths</h2>
    <ol className="est-truths">{EST.truths.map((t,i)=><li key={i}>{t}</li>)}</ol>
  </div>;
}
function ShowsPage({stub, go}){
  const cell = (s, i, links) => <tr key={i} className="est-showrow">
    <td style={{whiteSpace:"nowrap"}}><a href={"#/show/"+s.id} onClick={(e)=>{e.preventDefault(); go("show/"+s.id);}}>{s.date}</a></td>
    <td className="est-td-city">{s.city}</td>
    <td><a href={"#/show/"+s.id} className="est-venuelink" onClick={(e)=>{e.preventDefault(); go("show/"+s.id);}}>{s.venue}</a></td>
    <td>{links ? (s.soldOut ? <span style={{color:"var(--text-tertiary)"}}>Sold out</span> : <a href="#" onClick={(e)=>{e.preventDefault(); stub("Ticket link routes out — URL TBD.");}}>Get tickets</a>) : ""}</td>
  </tr>;
  return <div style={{paddingTop:16, maxWidth:760}}>
    <h1 className="heading-1" style={{margin:"0 0 28px"}}>Shows</h1>
    <table className="est-table"><tbody>{EST.shows.upcoming.map((s,i)=>cell(s,i,true))}</tbody></table>
    <div style={{marginTop:48}}>
      <Collapse title="Past shows"><table className="est-table" style={{marginTop:-6}}><tbody>{EST.shows.past.map((s,i)=>cell(s,i,false))}</tbody></table></Collapse>
    </div>
  </div>;
}
Object.assign(window, {HomePage, MusicPage, VideosPage, AboutPage, ShowsPage});