/* eslint-disable */
// APP — hash router + tweaks panel wiring

const ROUTES = {
  ''           : { key: 'home',        title: 'Platinum Black — DIFC, Dubai',          render: (p) => <PageHome heroVariant={p.heroVariant} /> },
  'services'   : { key: 'services',    title: 'Services · Platinum Black',             render: () => <PageServices /> },
  'memberships': { key: 'memberships', title: 'Memberships & Offers · Platinum Black', render: () => <PageMemberships /> },
  'about'      : { key: 'about',       title: 'About · Platinum Black',                render: () => <PageAbout /> },
  'reviews'    : { key: 'reviews',     title: 'Reviews · Platinum Black',              render: () => <PageReviews /> },
  'book'       : { key: 'book',        title: 'Book · Platinum Black',                 render: () => <PageBook /> },
  'contact'    : { key: 'contact',     title: 'Contact · Platinum Black',              render: () => <PageContact /> },
};

function getRoute() {
  const routed = (window.__BYTESGLUE_SHOWCASE_ROUTE || '').toLowerCase();
  const fallbackHash = routed && routed !== 'home' ? `#/${routed}` : '#/';
  const h = (location.hash || fallbackHash).replace(/^#\/?/, '').toLowerCase();
  return ROUTES[h] ? h : '';
}

// Tiny color helper for accent → accent-deep
function darken(hex, amt) {
  if (!hex || hex[0] !== '#') return hex;
  let h = hex.slice(1);
  if (h.length === 3) h = h.split('').map(c=>c+c).join('');
  const num = parseInt(h, 16);
  let r = (num >> 16) & 255, g = (num >> 8) & 255, b = num & 255;
  r = Math.max(0, Math.round(r * (1 - amt)));
  g = Math.max(0, Math.round(g * (1 - amt)));
  b = Math.max(0, Math.round(b * (1 - amt)));
  return '#' + [r,g,b].map(v => v.toString(16).padStart(2,'0')).join('');
}

function App() {
  const [route, setRoute] = React.useState(getRoute());

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "ivory",
    "accent": "#C8A86B",
    "density": "comfortable",
    "heroVariant": "split"
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette + density + accent to body / root
  React.useEffect(() => {
    document.body.setAttribute('data-mode', tweaks.palette === 'black' ? 'black' : 'ivory');
    document.body.setAttribute('data-density', tweaks.density);
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--accent-deep', darken(tweaks.accent, 0.18));
  }, [tweaks.palette, tweaks.density, tweaks.accent]);

  // Hash routing
  React.useEffect(() => {
    function onHash() {
      setRoute(getRoute());
      window.scrollTo(0, 0);
    }
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  React.useEffect(() => {
    document.title = (ROUTES[route] || ROUTES['']).title;
  }, [route]);

  const r = ROUTES[route] || ROUTES[''];

  return (
    <>
      <TopNav route={r.key} />
      <main>
        {r.render({ heroVariant: tweaks.heroVariant })}
      </main>
      <Footer />
      <FloatActions />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio
            label="Mode"
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[{value:'ivory', label:'Ivory'}, {value:'black', label:'Black'}]}
          />
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#C8A86B', '#B07A52', '#9A9A9A', '#7A1F2B']}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Hero"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[{value:'split', label:'Editorial split'}, {value:'bleed', label:'Full-bleed'}]}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[{value:'comfortable', label:'Airy'}, {value:'dense', label:'Dense'}]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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