/* ============================================================
   SALES MEDİKAL — uygulama kökü (routing + tweaks)
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headerStyle": "island",
  "heroLayout": "stage",
  "heroColor": 0,
  "accent": "sky",
  "cardRadius": 24
}/*EDITMODE-END*/;

const PAGES = { home: 'HomePage', products: 'ProductsPage', detail: 'DetailPage', about: 'AboutPage', contact: 'ContactPage' };

const ACCENTS = {
  sky:  { deep: '#4E94BE', tint: '#EAF4FA', base: '#6FB0D6' },
  gold: { deep: '#A9842E', tint: '#FBF4DF', base: '#C2A24E' },
  navy: { deep: '#2A4870', tint: '#EEF1F6', base: '#3A5C86' },
};

function parseHash() {
  const h = (location.hash || '#/home').replace(/^#\//, '');
  const [page, size] = h.split('/');
  return { page: PAGES[page] ? page : 'home', size: size || null };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(parseHash());

  useEffect(() => {
    const onHash = () => { setRoute(parseHash()); window.scrollTo({ top: 0, behavior: 'auto' }); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // apply accent to CSS vars
  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.sky;
    const r = document.documentElement.style;
    r.setProperty('--sky-deep', a.deep);
    r.setProperty('--sky-tint', a.tint);
    r.setProperty('--sky', a.base);
  }, [t.accent]);

  const nav = (page, size) => {
    location.hash = '#/' + page + (size ? '/' + size : '');
  };

  const Page = window[PAGES[route.page]];

  return (
    <React.Fragment>
      <Header route={route.page} nav={nav} variant={t.headerStyle} />
      <div key={route.page + (route.size || '')} className="page-fade">
        <Page nav={nav} t={t} params={{ size: route.size }} />
      </div>
      <Footer nav={nav} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Header" />
        <TweakRadio label="Tasarım" value={t.headerStyle} options={[{value:'island',label:'Ada'},{value:'topbar',label:'Şerit'},{value:'classic',label:'Klasik'}]}
          onChange={(v) => setTweak('headerStyle', v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Düzen" value={t.heroLayout} options={[{value:'stage',label:'Sahne'},{value:'editorial',label:'Editöryal'}]}
          onChange={(v) => setTweak('heroLayout', v)} />
        <TweakSelect label="Hero rengi" value={String(t.heroColor)}
          options={[{value:'0',label:'Mavi · Size 0'},{value:'1',label:'Pembe · Size 1'},{value:'2',label:'Yeşil · Size 2'},{value:'3',label:'Sarı · Size 3'},{value:'4',label:'Lila · Size 4'}]}
          onChange={(v) => setTweak('heroColor', parseInt(v, 10))} />
        <TweakSection label="Tema" />
        <TweakColor label="Vurgu rengi" value={ACCENTS[t.accent].base}
          options={[ACCENTS.sky.base, ACCENTS.gold.base, ACCENTS.navy.base]}
          onChange={(v) => {
            const key = Object.keys(ACCENTS).find((k) => ACCENTS[k].base === v) || 'sky';
            setTweak('accent', key);
          }} />
        <TweakSlider label="Kart yuvarlaklığı" value={t.cardRadius} min={8} max={32} step={2} unit="px"
          onChange={(v) => setTweak('cardRadius', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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