/* House of Windsor — App shell */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const HOWJ_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "Royal Blue + Champagne",
  "displayFont": "Cormorant Garamond",
  "showBrowserChrome": true,
  "density": "Generous"
}/*EDITMODE-END*/;

const PALETTES = {
  'Royal Blue + Champagne': {
    '--royal-blue': '#1B2A4A',
    '--midnight': '#0E1626',
    '--champagne-gold': '#C9A86A',
    '--gold-deep': '#A8843E',
    '--gold-soft': '#E4D2A8',
    '--ivory': '#F7F4EF',
    '--cream-card': '#FBF9F5',
  },
  'Signature Teal': {
    '--royal-blue': '#1E7A86',
    '--midnight': '#0F3A41',
    '--champagne-gold': '#D4B470',
    '--gold-deep': '#A8843E',
    '--gold-soft': '#E4D2A8',
    '--ivory': '#F5F3EE',
    '--cream-card': '#FAF8F2',
  },
  'Charcoal + Bronze': {
    '--royal-blue': '#2A2A2D',
    '--midnight': '#161617',
    '--champagne-gold': '#B98D5E',
    '--gold-deep': '#8E6936',
    '--gold-soft': '#D9B98C',
    '--ivory': '#F4F1EA',
    '--cream-card': '#F9F6EE',
  },
};

const DISPLAY_FONTS = {
  'Cormorant Garamond': "'Cormorant Garamond', 'Times New Roman', serif",
  'Marcellus': "'Marcellus', 'Cormorant Garamond', serif",
  'Tenor (system fallback)': "'Tenor Sans', 'Cormorant Garamond', serif",
};

function App() {
  const initialRoute = window.__BYTESGLUE_SHOWCASE_ROUTE || 'home';
  const [route, setRoute] = useStateA(initialRoute);
  const [scrolled, setScrolled] = useStateA(false);
  const [bookOpen, setBookOpen] = useStateA(false);
  const [bookCollection, setBookCollection] = useStateA(null);
  const siteRef = useRefA(null);

  const [t, setTweak] = useTweaks(HOWJ_TWEAKS);

  // Apply tweaks to CSS vars
  useEffectA(() => {
    const palette = PALETTES[t.palette] || PALETTES['Royal Blue + Champagne'];
    Object.entries(palette).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    document.documentElement.style.setProperty('--font-serif', DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS['Cormorant Garamond']);
  }, [t.palette, t.displayFont]);

  // Scroll listener for sticky-nav style change
  useEffectA(() => {
    const el = siteRef.current;
    if (!el) return;
    const onScroll = () => setScrolled(el.scrollTop > 24);
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  // Reset scroll on route change
  useEffectA(() => {
    if (siteRef.current) siteRef.current.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  // Lock body scroll while modal open
  useEffectA(() => {
    document.body.classList.toggle('locked', bookOpen);
  }, [bookOpen]);

  const onBook = (collection) => {
    setBookCollection(typeof collection === 'string' ? collection : null);
    setBookOpen(true);
  };
  const goRoute = (r) => setRoute(r);

  // Routing: collection:<id>
  const collMatch = route.startsWith('collection:') && route.slice(11);

  const screen = (() => {
    if (collMatch) return <CollectionDetail collectionId={collMatch} setRoute={goRoute} onBook={onBook} />;
    switch (route) {
      case 'collections': return <CollectionsScreen setRoute={goRoute} onBook={onBook} />;
      case 'bespoke': return <BespokeScreen setRoute={goRoute} onBook={onBook} />;
      case 'diamonds': return <DiamondsScreen onBook={onBook} />;
      case 'about': return <AboutScreen setRoute={goRoute} onBook={onBook} />;
      case 'testimonials': return <TestimonialsScreen onBook={onBook} />;
      case 'visit': return <VisitScreen onBook={onBook} />;
      case 'home':
      default: return <HomeScreen setRoute={goRoute} onBook={onBook} />;
    }
  })();

  const navRoute = collMatch ? 'collections' : route;

  const siteContent = (
    <div className="site" ref={siteRef} data-screen-label={route}>
      <Nav route={navRoute} setRoute={goRoute} onBook={() => onBook()} scrolled={scrolled} />
      <main>
        <PageFade k={route}>{screen}</PageFade>
      </main>
      <Footer setRoute={goRoute} onBook={() => onBook()} />
      <WhatsAppFab />
      <MobileBookBar onBook={() => onBook()} />
    </div>
  );

  return (
    <>
      {t.showBrowserChrome ? (
        <div className="browser-shell">
          <div className="browser-window">
            <div className="browser-chrome">
              <div className="browser-dots"><span/><span/><span/></div>
              <div className="browser-url">
                <span className="lock">🔒</span>houseofwindsorjewellers.com<span style={{opacity: 0.5}}>{routePath(route)}</span>
              </div>
              <div style={{ width: 36 }} />
            </div>
            {siteContent}
          </div>
        </div>
      ) : siteContent}

      <ConsultationModal open={bookOpen} onClose={() => setBookOpen(false)} defaultCollection={bookCollection} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Look" />
        <TweakSelect
          label="Palette"
          value={t.palette}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          options={Object.keys(DISPLAY_FONTS)}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakSection label="Frame" />
        <TweakToggle
          label="Browser chrome"
          value={t.showBrowserChrome}
          onChange={(v) => setTweak('showBrowserChrome', v)}
        />
        <TweakSection label="Quick jump" />
        {HOWJ.navItems.map(n => (
          <TweakButton key={n.id} label={n.label} onClick={() => goRoute(n.id)} />
        ))}
        <TweakButton label="Open Consultation modal" onClick={() => onBook()} />
      </TweaksPanel>
    </>
  );
}

function routePath(r) {
  if (r === 'home') return '/';
  if (r.startsWith('collection:')) return `/collections/${r.slice(11)}`;
  return `/${r}`;
}

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