/* Symphony — App shell, hash router, tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "coral",
  "displayFont": "serif",
  "heroVariant": "split",
  "density": "default"
}/*EDITMODE-END*/;

const ROUTES = ['home', 'treatments', 'laser', 'team', 'reviews', 'contact'];

function App() {
  const [route, setRoute] = React.useState(() => {
    const fallback = window.__BYTESGLUE_SHOWCASE_ROUTE || 'home';
    const h = (location.hash || '#' + fallback).slice(1);
    return ROUTES.includes(h) ? h : 'home';
  });
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks → root data-attributes
  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.palette = tweaks.palette;
    r.dataset.display = tweaks.displayFont === 'sans' ? 'sans' : '';
    r.dataset.density = tweaks.density === 'default' ? '' : tweaks.density;
  }, [tweaks.palette, tweaks.displayFont, tweaks.density]);

  // Hash sync
  React.useEffect(() => {
    const onHash = () => {
      const fallback = window.__BYTESGLUE_SHOWCASE_ROUTE || 'home';
      const h = (location.hash || '#' + fallback).slice(1);
      if (ROUTES.includes(h)) {
        setRoute(h);
        window.scrollTo({ top: 0, behavior: 'instant' });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (r) => {
    if (location.hash !== '#' + r) { location.hash = r; }
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  let Page;
  switch (route) {
    case 'treatments': Page = <PageTreatments onNavigate={navigate} />; break;
    case 'laser':      Page = <PageLaser      onNavigate={navigate} />; break;
    case 'team':       Page = <PageTeam       onNavigate={navigate} />; break;
    case 'reviews':    Page = <PageReviews    onNavigate={navigate} />; break;
    case 'contact':    Page = <PageContact    onNavigate={navigate} />; break;
    default:           Page = <PageHome       onNavigate={navigate} tweaks={tweaks} />;
  }

  return (
    <>
      <Navbar route={route} onNavigate={navigate} />
      {Page}
      <Footer onNavigate={navigate} />
      <WhatsAppFab />
      <SymphonyTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

// ───────────── Tweaks UI ─────────────
function SymphonyTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <TweakSelect
          label="Theme"
          value={tweaks.palette}
          onChange={(v)=>setTweak('palette', v)}
          options={[
            { value: 'coral',     label: 'Coral · brand (default)' },
            { value: 'champagne', label: 'Champagne · classic' },
            { value: 'noir',      label: 'Editorial · noir' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakRadio
          label="Display"
          value={tweaks.displayFont}
          onChange={(v)=>setTweak('displayFont', v)}
          options={[
            { value: 'serif', label: 'Cormorant' },
            { value: 'sans',  label: 'Montserrat' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Hero (Home)">
        <TweakSelect
          label="Layout"
          value={tweaks.heroVariant}
          onChange={(v)=>setTweak('heroVariant', v)}
          options={[
            { value: 'split',     label: 'Asymmetric split' },
            { value: 'editorial', label: 'Editorial full-bleed' },
            { value: 'quiet',     label: 'Quiet typographic' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Rhythm">
        <TweakSelect
          label="Density"
          value={tweaks.density}
          onChange={(v)=>setTweak('density', v)}
          options={[
            { value: 'tight',   label: 'Tight' },
            { value: 'default', label: 'Default' },
            { value: 'airy',    label: 'Airy' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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