/* The Estate — app shell. Assumptions (design notes):
   · All logistics values (price $240, 6 ft, 21 in, 2.1 lb, 10 days, flat-pack method, Stripe seam) are plausible
     placeholders — dotted-flagged in the UI (toggle in Tweaks). Layout survives any real value.
   · Bio, origin, ten truths, venues = draft copy for review, sincere register, no lore.
   · Photography: none exists — every window is a labeled plate per the design system.
   · Hat-only launch (no rack), batch + notify-me, drawer cart, no social proof — the brief's recommendations. */
const {Button, Toast} = window.ArcadiaDesignSystem_90e8f6;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "stock": "In stock",
  "releaseDay": false,
  "tbdFlags": true
}/*EDITMODE-END*/;
const ROUTES = {"":"Planet Ruti", "music":"Music", "videos":"Videos", "shop":"The Hat", "about":"About", "shows":"Shows", "checkout":"Your order", "thanks":"Thank you", "press":"Press", "contact":"Contact", "shipping":"Shipping & returns", "privacy":"Privacy"};
function parseHash(){ const h = (location.hash||"#/").replace(/^#\/?/, ""); return h; }
function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(parseHash());
  const [qty, setQtyRaw] = React.useState(()=>{ try{ return Math.max(0, JSON.parse(localStorage.getItem("pr-estate-cart")||"0")); }catch(e){ return 0; } });
  const [drawer, setDrawer] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [consent, setConsent] = React.useState(()=>{ try{ return !sessionStorage.getItem("pr-consent"); }catch(e){ return true; } });
  const toastTimer = React.useRef(null);
  const setQty = (n)=>{ setQtyRaw(n); try{ localStorage.setItem("pr-estate-cart", JSON.stringify(n)); }catch(e){} };
  const go = (r)=>{ location.hash = "#/"+r; };
  React.useEffect(()=>{
    const onHash = ()=>{ setRoute(parseHash()); window.scrollTo(0,0); };
    window.addEventListener("hashchange", onHash); return ()=>window.removeEventListener("hashchange", onHash);
  },[]);
  React.useEffect(()=>{
    let name = ROUTES[route];
    if(route.startsWith("show/")){ const s = findShow(route.slice(5))[0]; name = s ? s.city.split(",")[0]+", "+s.date : "404"; }
    document.title = route==="" ? "Planet Ruti" : "Planet Ruti — "+(name||"404");
  },[route]);
  const showToast = (msg)=>{ setToast(msg); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(()=>setToast(null), 2600); };
  const stub = (msg)=>showToast(msg);
  const onAdd = (n)=>{ setQty(qty+n); showToast("Added to cart."); };
  const onPlace = ()=>{ setQty(0); go("thanks"); };
  const answerConsent = (v)=>{ try{ sessionStorage.setItem("pr-consent", v); }catch(e){} setConsent(false); };
  const inStock = t.stock === "In stock";
  const page = ()=>{
    switch(route){
      case "": return <HomePage go={go} releaseDay={t.releaseDay}/>;
      case "music": return <MusicPage stub={stub}/>;
      case "videos": return <VideosPage stub={stub}/>;
      case "shop": return <ShopPage tweaks={t} onAdd={onAdd}/>;
      case "about": return <AboutPage/>;
      case "shows": return <ShowsPage stub={stub} go={go}/>;
      case "checkout": return <CheckoutPage qty={qty} go={go} onPlace={onPlace}/>;
      case "thanks": return <ThanksPage key={Date.now()} go={go}/>;
      case "press": return <PressPage stub={stub}/>;
      case "contact": return <ContactPage/>;
      case "shipping": return <PolicyPage kind="shipping"/>;
      case "privacy": return <PolicyPage kind="privacy"/>;
      default:
        if(route.startsWith("show/")) return <ShowPage id={route.slice(5)} go={go} stub={stub}/>;
        return <NotFoundPage go={go}/>;
    }
  };
  return <div className={"sky-gradient night-grain"+(t.tbdFlags?" show-tbd":"")} style={{minHeight:"100vh"}}>
    <div className="est-wrap"><EstMasthead route={route} go={go} cartCount={qty} onBag={()=>setDrawer(true)}/></div>
    {route==="" && t.releaseDay && <div className="trim-band"></div>}
    <main className="est-wrap" style={{paddingBottom:route==="shop"?64:0}}>{page()}</main>
    <EstFooter go={go} stub={stub}/>
    {route==="shop" && inStock && <div className="est-buybar">
      <span className="chrome-text" style={{color:"var(--starlight-100)", fontWeight:600}}><Tbd note="price TBD">{money(EST.hat.price)}</Tbd></span>
      <Button size="sm" onClick={()=>onAdd(1)}>Buy the hat</Button>
    </div>}
    <CartDrawer open={drawer} onClose={()=>setDrawer(false)} qty={qty} setQty={setQty} go={go}/>
    {toast && <div className="est-toast-wrap"><Toast>{toast}</Toast></div>}
    {consent && <div className="est-consent">
      <span className="chrome-text" style={{color:"var(--text-secondary)"}}>We count listens, watches, sign-ups, and orders — four numbers, nothing else. Okay to count you?</span>
      <div style={{display:"flex", gap:10}}>
        <Button variant="secondary" size="sm" onClick={()=>answerConsent("yes")}>Okay</Button>
        <Button variant="secondary" size="sm" onClick={()=>answerConsent("no")}>No thanks</Button>
      </div>
    </div>}
    <TweaksPanel>
      <TweakSection label="Shop state"/>
      <TweakRadio label="The batch" value={t.stock} options={["In stock","Between batches"]} onChange={(v)=>setTweak("stock", v)}/>
      <TweakSection label="Dressing"/>
      <TweakToggle label="Release-day dress" value={t.releaseDay} onChange={(v)=>setTweak("releaseDay", v)}/>
      <TweakToggle label="TBD flags" value={t.tbdFlags} onChange={(v)=>setTweak("tbdFlags", v)}/>
    </TweaksPanel>
  </div>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);