// App shell — page routing + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF6A1A",
  "headline1": "STICK IT",
  "headline2": "TO 'EM.",
  "subhead": "Premium die-cut vinyl stickers, holographic, glitter & sheets — printed in Australia and ready to wreck your laptop.",
  "page": "home"
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = React.useState(window.location.hash.replace('#','') || 'home');
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(()=>{
    const root = document.documentElement;
    root.style.setProperty('--orange', t.accent);
  }, [t.accent]);

  React.useEffect(()=>{
    const onHash = ()=> setPage(window.location.hash.replace('#','') || 'home');
    window.addEventListener('hashchange', onHash);
    return ()=>window.removeEventListener('hashchange', onHash);
  }, []);

  const go = (p) => {
    setPage(p);
    window.location.hash = p;
    window.scrollTo({top:0, behavior:'instant'});
  };

  // expose tweaks/page injection
  const inject = { t, setTweak };

  return (
    <>
      {(()=>{
        if (page==='product' || page==='die-cut') return <Product go={go} tweaks={inject}/>;
        if (page==='holo')     return <HoloProduct go={go}/>;
        if (page==='sheets')   return <SheetsProduct go={go}/>;
        if (page==='glitter')  return <GlitterProduct go={go}/>;
        if (page==='clear')    return <ClearProduct go={go}/>;
        if (page==='mural')    return <MuralProduct go={go}/>;
        if (page==='kiss-cut') return <KissCutProduct go={go}/>;
        if (page==='bulk')     return <BulkProduct go={go}/>;
        if (page==='sample') return <SamplePack go={go}/>;
        if (page==='shop') return <Shop go={go}/>;
        if (page==='artwork-guidelines') return <ArtworkGuidelines go={go}/>;
        if (page==='templates') return <Templates go={go}/>;
        if (page==='materials-guide') return <MaterialsPage go={go}/>;
        if (page==='sizing-guide') return <SizingGuide go={go}/>;
        if (page==='sustainability') return <Sustainability go={go}/>;
        if (page==='blog') return <Blog go={go}/>;
        if (page==='install-guide') return <InstallGuide go={go}/>;
        if (page==='contact') return <Contact go={go}/>;
        if (page==='help-center') return <HelpCenter go={go}/>;
        if (page==='order-tracking') return <OrderTracking go={go}/>;
        if (page==='returns') return <Returns go={go}/>;
        if (page==='shipping') return <Shipping go={go}/>;
        return <Home go={go} tweaks={inject}/>;
      })()}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme"/>
        <TweakColor label="Accent" value={t.accent} onChange={v=>setTweak('accent', v)}
          options={['#FF6A1A','#FF3D7F','#3D7AFE','#2BB04A','#A23BFF','#111111']}/>
        <TweakRadio label="Page" value={page} onChange={v=>go(v)} options={[
          { value:'home', label:'Home' },
          { value:'product', label:'Product' },
          { value:'sample', label:'Sample' },
        ]}/>

        {page==='home' && <>
          <TweakSection label="Hero copy"/>
          <TweakText label="Line 1" value={t.headline1} onChange={v=>setTweak('headline1', v)}/>
          <TweakText label="Line 2" value={t.headline2} onChange={v=>setTweak('headline2', v)}/>
          <TweakText label="Subhead" value={t.subhead} onChange={v=>setTweak('subhead', v)}/>
        </>}
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);