// app.jsx — Liptove main app: router, theme tokens, Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "onyx",
  "typography": "editorial",
  "hero": "video",
  "regionLayout": "mosaic",
  "dark": true,
  "buttonStyle": "pill"
}/*EDITMODE-END*/;

// ── Palette presets ────────────────────────────────────────────────────
const PALETTES = {
  onyx: {
    label: 'Onyx & zlato',
    accent: '#C9A66B',
    swatches: ['#C9A66B', '#0B0F0D', '#F4EFE7'],
    dark:  { bg: '#0B0F0D', surface: '#131816', surface2: '#1B2120', text: '#F4EFE7', textSoft: 'rgba(244,239,231,0.66)', textMute: 'rgba(244,239,231,0.42)', line: 'rgba(244,239,231,0.08)', line2: 'rgba(244,239,231,0.16)' },
    light: { bg: '#F4EFE7', surface: '#FFFFFF', surface2: '#EFE8DC', text: '#0B0F0D', textSoft: 'rgba(11,15,13,0.66)', textMute: 'rgba(11,15,13,0.45)', line: 'rgba(11,15,13,0.08)', line2: 'rgba(11,15,13,0.16)' },
    accentInkDark: '#0B0F0D',
    accentInkLight: '#0B0F0D',
  },
  forest: {
    label: 'Les & mosadz',
    accent: '#B89868',
    swatches: ['#B89868', '#0F1A14', '#EFE9DD'],
    dark:  { bg: '#0F1A14', surface: '#16251D', surface2: '#1C2F26', text: '#EFE9DD', textSoft: 'rgba(239,233,221,0.66)', textMute: 'rgba(239,233,221,0.42)', line: 'rgba(239,233,221,0.08)', line2: 'rgba(239,233,221,0.16)' },
    light: { bg: '#EFE9DD', surface: '#FBF7EE', surface2: '#E5DFCF', text: '#0F1A14', textSoft: 'rgba(15,26,20,0.66)', textMute: 'rgba(15,26,20,0.45)', line: 'rgba(15,26,20,0.08)', line2: 'rgba(15,26,20,0.16)' },
    accentInkDark: '#0F1A14',
    accentInkLight: '#0F1A14',
  },
  alpine: {
    label: 'Alpský bridlicový',
    accent: '#A9C5E0',
    swatches: ['#A9C5E0', '#0E1620', '#E8EEF5'],
    dark:  { bg: '#0E1620', surface: '#16202C', surface2: '#1E2A38', text: '#E8EEF5', textSoft: 'rgba(232,238,245,0.66)', textMute: 'rgba(232,238,245,0.42)', line: 'rgba(232,238,245,0.08)', line2: 'rgba(232,238,245,0.16)' },
    light: { bg: '#E8EEF5', surface: '#FFFFFF', surface2: '#DCE5F0', text: '#0E1620', textSoft: 'rgba(14,22,32,0.66)', textMute: 'rgba(14,22,32,0.45)', line: 'rgba(14,22,32,0.08)', line2: 'rgba(14,22,32,0.16)' },
    accentInkDark: '#0E1620',
    accentInkLight: '#0E1620',
  },
  bronze: {
    label: 'Krém & bronz',
    accent: '#8B6B3D',
    swatches: ['#8B6B3D', '#22241F', '#F4EFE7'],
    dark:  { bg: '#22241F', surface: '#2C2E27', surface2: '#363830', text: '#F4EFE7', textSoft: 'rgba(244,239,231,0.66)', textMute: 'rgba(244,239,231,0.42)', line: 'rgba(244,239,231,0.08)', line2: 'rgba(244,239,231,0.16)' },
    light: { bg: '#F4EFE7', surface: '#FFFFFF', surface2: '#E8E2D4', text: '#22241F', textSoft: 'rgba(34,36,31,0.66)', textMute: 'rgba(34,36,31,0.45)', line: 'rgba(34,36,31,0.08)', line2: 'rgba(34,36,31,0.16)' },
    accentInkDark: '#22241F',
    accentInkLight: '#FFFFFF',
  },
};

const TYPOGRAPHY = {
  editorial: {
    label: 'Editorial Serif',
    display: '"Cormorant Garamond", "Times New Roman", serif',
    body:    '"Inter", system-ui, sans-serif',
  },
  modern: {
    label: 'Modern Sans',
    display: '"Fraunces", "Cormorant Garamond", serif',
    body:    '"Inter", system-ui, sans-serif',
  },
  didone: {
    label: 'Magazine Didone',
    display: '"Bodoni Moda", "Cormorant Garamond", serif',
    body:    '"Inter", system-ui, sans-serif',
  },
};

const BUTTON_STYLES = {
  rounded: { label: 'Rounded', radius: '10px' },
  sharp:   { label: 'Sharp',   radius: '0px' },
  pill:    { label: 'Pill',    radius: '999px' },
};

// ── Apply tokens to :root ──────────────────────────────────────────────
function applyTokens(t) {
  const pal = PALETTES[t.palette] || PALETTES.onyx;
  const mode = t.dark ? pal.dark : pal.light;
  const typ = TYPOGRAPHY[t.typography] || TYPOGRAPHY.editorial;
  const btn = BUTTON_STYLES[t.buttonStyle] || BUTTON_STYLES.pill;
  const accentInk = t.dark ? pal.accentInkDark : pal.accentInkLight;

  const r = document.documentElement;
  r.style.setProperty('--bg', mode.bg);
  r.style.setProperty('--surface', mode.surface);
  r.style.setProperty('--surface-2', mode.surface2);
  r.style.setProperty('--text', mode.text);
  r.style.setProperty('--text-soft', mode.textSoft);
  r.style.setProperty('--text-mute', mode.textMute);
  r.style.setProperty('--line', mode.line);
  r.style.setProperty('--line-2', mode.line2);
  r.style.setProperty('--accent', pal.accent);
  r.style.setProperty('--accent-soft', pal.accent + '29');
  r.style.setProperty('--accent-ink', accentInk);
  r.style.setProperty('--font-display', typ.display);
  r.style.setProperty('--font-body', typ.body);
  r.style.setProperty('--radius-btn', btn.radius);
}

// ── Router (very simple, hash-based) ───────────────────────────────────
function useHashRoute(initial = 'home') {
  const [route, setRoute] = useState(() => (window.location.hash || '').replace('#', '') || initial);
  useEffect(() => {
    const onHash = () => setRoute((window.location.hash || '').replace('#', '') || initial);
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const nav = (id) => {
    window.location.hash = id;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  return [route, nav];
}

// ── App ────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, nav] = useHashRoute('home');
  const [lang, setLang] = useState('SK');
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => { applyTokens(t); }, [t]);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const Page = (() => {
    if (route.startsWith('case-')) {
      const key = route.replace('case-', '');
      return <CaseStudyPage tweaks={t} onNav={nav} caseKey={key} />;
    }
    switch (route) {
      case 'home':       return <HomePage tweaks={t} onNav={nav} />;
      case 'regiony':    return <RegionsPage tweaks={t} onNav={nav} />;
      case 'region-jan': return <RegionPage tweaks={t} onNav={nav} regionKey="jan" />;
      case 'region-dem': return <RegionPage tweaks={t} onNav={nav} regionKey="dem" />;
      case 'region':     return <RegionPage tweaks={t} onNav={nav} regionKey="jan" />; // legacy fallback
      case 'object':     return <ObjectPage tweaks={t} onNav={nav} />;
      case 'sluzby':     return <ServicesPage tweaks={t} onNav={nav} />;
      case 'atrakcie':   return <AttractionsPage tweaks={t} onNav={nav} />;
      case 'about':      return <AboutPage tweaks={t} onNav={nav} />;
      case 'kontakt':    return <ContactPage tweaks={t} onNav={nav} />;
      case 'coming':     return <ComingSoonPage tweaks={t} onNav={nav} />;
      case 'logos':      return <LogosPage tweaks={t} onNav={nav} />;
      default:           return <HomePage tweaks={t} onNav={nav} />;
    }
  })();

  // pick active top-nav highlight
  const navHighlight = (() => {
    if (route.startsWith('region') || route === 'object' || route === 'coming') return 'regiony';
    if (route.startsWith('case-')) return 'sluzby';
    return route;
  })();

  // sticky page-bar showing current page + quick links to internal pages
  return (
    <>
      <TopNav current={navHighlight}
              onNav={nav} lang={lang} setLang={setLang} scrolled={scrolled} />
      {Page}
      <Footer onNav={nav} />

      {/* Sub-nav: logos page link */}
      <SubBar route={route} onNav={nav} />

      <TweaksPanel title="Tweaks · Liptove">
        <TweakSection label="Téma" />
        <TweakColor label="Paleta" value={PALETTES[t.palette]?.swatches || PALETTES.onyx.swatches}
          options={Object.values(PALETTES).map(p => p.swatches)}
          onChange={(v) => {
            // find palette by swatches[0]
            const key = Object.entries(PALETTES).find(([k, p]) => p.swatches[0] === v[0])?.[0] || 'onyx';
            setTweak('palette', key);
          }} />
        <TweakToggle label="Tmavý režim" value={t.dark} onChange={(v) => setTweak('dark', v)} />

        <TweakSection label="Typografia" />
        <TweakSelect label="Pár písma" value={t.typography}
          options={Object.entries(TYPOGRAPHY).map(([k, v]) => ({ value: k, label: v.label }))}
          onChange={(v) => setTweak('typography', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Hero" value={t.hero}
          options={['video', 'map', 'split']}
          onChange={(v) => setTweak('hero', v)} />
        <TweakSelect label="Regióny" value={t.regionLayout}
          options={[
            { value: 'cards',  label: 'Karty (3 stĺpce)' },
            { value: 'mosaic', label: 'Mozaika' },
            { value: 'split',  label: 'Fullbleed split' },
          ]}
          onChange={(v) => setTweak('regionLayout', v)} />
        <TweakRadio label="Tlačidlá" value={t.buttonStyle}
          options={['rounded', 'sharp', 'pill']}
          onChange={(v) => setTweak('buttonStyle', v)} />

        <TweakSection label="Navigácia" />
        <TweakSelect label="Stránka" value={route}
          options={[
            { value: 'home',       label: '01 Domov' },
            { value: 'regiony',    label: '02 Regióny (index)' },
            { value: 'region-jan', label: ' — Liptovský Ján' },
            { value: 'region-dem', label: ' — Demänovská Dolina' },
            { value: 'object',     label: '03 Objekt: Apartmány Stagnum' },
            { value: 'sluzby',     label: '04 Služby & Akcie' },
            { value: 'case-svadby', label: ' — Case: Svadby' },
            { value: 'case-firmy',  label: ' — Case: Firemné akcie' },
            { value: 'case-team',   label: ' — Case: Teambuilding' },
            { value: 'case-family', label: ' — Case: Rodinné stretnutia' },
            { value: 'atrakcie',   label: '05 Atrakcie' },
            { value: 'about',      label: '06 O nás' },
            { value: 'kontakt',    label: '07 Kontakt' },
            { value: 'coming',     label: '08 Pripravujeme (Bešeňová)' },
          ]}
          onChange={(v) => nav(v)} />
        <TweakButton label="→ Otvoriť Logá (samostatne)" onClick={() => window.open('logos.html', '_blank')} />
        <TweakButton label="→ Otvoriť Logá (in-page)" secondary onClick={() => nav('logos')} />
      </TweaksPanel>
    </>
  );
}

// Floating sub-bar to easily reach the Logos page
function SubBar({ route, onNav }) {
  if (route === 'logos') return null;
  return null; // disabled: logos now have a dedicated standalone file
}

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