function BuilderHome({go,openCustomTeam}){
  const [q,setQ]=React.useState("");
  const lockers=[
    {name:"Northside Eagles",category:"12 templates",badge:"Popular"},
    {name:"Camelot Dragons",category:"8 templates"},
    {name:"Colfax Bulldogs",category:"17 templates",preview:"../../assets/mascots/bulldogs-mascot.png",badge:"New"},
    {name:"Lakeview Hawks",category:"5 templates"},
    {name:"Cedar Bulls",category:"3 templates"},
    {name:"Mill City FC",category:"9 templates"}
  ];
  return <div style={{minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",gap:28,padding:"32px 16px 40px",textAlign:"center"}}>
    <img src="../../assets/bruce-character.png" alt="Bruce" style={{width:180,objectFit:"contain"}}/>
    <h1 style={{margin:0,fontSize:26,fontWeight:700,textTransform:"uppercase"}}>Art Template Builder</h1>
    <div style={{width:"100%",maxWidth:520}}>
      <SearchInput placeholder="Search for your school or start a design…" value={q} onChange={e=>setQ(e.target.value)} style={{width:"100%",boxSizing:"border-box"}}/>
    </div>
    <Button size="sm" variant="outline" onClick={openCustomTeam}>Create custom team</Button>
    <div style={{display:"flex",flexDirection:"column",gap:12,width:"100%",maxWidth:900,marginTop:12,textAlign:"left"}}>
      <div style={{display:"flex",alignItems:"center",gap:8}}>
        <span style={{fontSize:13,fontWeight:600,color:"var(--text-subtle)"}}>Choose from your team lockers</span>
        <div style={{flex:1}}/>
        <Button variant="ghost" size="sm" iconRight={<Icon name="arrow-right" size={14}/>} onClick={()=>go("teams")}>View all</Button>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(180px,1fr))",gap:16}}>
        {lockers.map(l=><TemplateCard key={l.name} name={l.name} category={l.category} preview={l.preview} badge={l.badge} onClick={()=>go("browse")}/>)}
      </div>
    </div>
  </div>;
}
window.BuilderHome=BuilderHome;