/* app.jsx — main router, tweaks, mounts everything */

const FONT_MAP = {
  cormorant: '"Cormorant Garamond", "Times New Roman", serif',
  playfair: '"Playfair Display", "Times New Roman", serif',
  italiana: '"Italiana", serif',
  dmserif: '"DM Serif Display", serif',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ivory-light",
  "displayFont": "cormorant",
  "density": "editorial",
  "showTrust": true,
  "showTestimonial": true,
  "showInstagram": true,
  "showConsultBar": true
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  const initialRoute = ['home', 'bespoke', 'product'].includes(window.__BYTESGLUE_SHOWCASE_ROUTE)
    ? window.__BYTESGLUE_SHOWCASE_ROUTE
    : 'home';
  const [route, setRoute] = React.useState(initialRoute);
  const [productId, setProductId] = React.useState('aureveris');
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const [drawerPrefill, setDrawerPrefill] = React.useState(null);
  const [locale, setLocale] = React.useState('en');

  const openConsult = () => { setDrawerPrefill(null); setDrawerOpen(true); };
  const openPiecedConsult = (id) => { setDrawerPrefill({piece: id, occasion: 'Engagement'}); setDrawerOpen(true); };

  // expose nav helper for the wordmark
  React.useEffect(() => { window.__nav = setRoute; }, []);

  // apply palette + density + display font
  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', tweaks.palette);
    document.documentElement.setAttribute('data-density', tweaks.density);
    document.documentElement.style.setProperty('--font-display', FONT_MAP[tweaks.displayFont] || FONT_MAP.cormorant);
  }, [tweaks.palette, tweaks.density, tweaks.displayFont]);

  return (
    <React.Fragment>
      <Navbar route={route} setRoute={setRoute} onOpenConsult={openConsult} locale={locale} setLocale={setLocale} />

      <main data-screen-label={
        route === 'home' ? '01 Home' :
        route === 'bespoke' ? '02 Bespoke' :
        '03 Product Detail'
      }>
        {route === 'home' && <Home onConsult={openConsult} setRoute={setRoute} setProductId={setProductId} tweaks={tweaks} />}
        {route === 'bespoke' && <Bespoke onConsult={openConsult} setRoute={setRoute} />}
        {route === 'product' && <Product productId={productId} setProductId={setProductId} setRoute={setRoute} onConsult={openConsult} onPiecedConsult={openPiecedConsult} />}
      </main>

      <Footer />

      {tweaks.showConsultBar && <ConsultBar onOpen={openConsult} />}
      <WhatsAppFab />

      <ConsultationDrawer
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        prefill={drawerPrefill}
      />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Palette">
          <window.TweakColor
            label="Mood"
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              {value: 'ivory-light', colors: ['#FBF7EF', '#1A1530', '#B8923A']},
              {value: 'royal-dark', colors: ['#14101F', '#D4AB55', '#2A2240']},
              {value: 'souk-warm', colors: ['#F5EBDA', '#A07028', '#3A1F1B']},
            ].map(o => o.colors)}
          />
          <div style={{fontSize: 11, color: '#999', marginTop: 6}}>
            {tweaks.palette === 'ivory-light' && 'Ivory · editorial restraint'}
            {tweaks.palette === 'royal-dark' && 'Royal night · couture'}
            {tweaks.palette === 'souk-warm' && 'Souk warmth · spice tones'}
          </div>
          <div style={{display: 'flex', gap: 4, marginTop: 8}}>
            {[
              {v: 'ivory-light', l: 'Ivory'},
              {v: 'royal-dark', l: 'Royal'},
              {v: 'souk-warm', l: 'Souk'},
            ].map(o => (
              <button key={o.v} onClick={() => setTweak('palette', o.v)} style={{
                flex: 1, padding: '6px 8px', fontSize: 11,
                border: tweaks.palette === o.v ? '1px solid #444' : '1px solid #ccc',
                background: tweaks.palette === o.v ? '#444' : '#fff',
                color: tweaks.palette === o.v ? '#fff' : '#444',
                cursor: 'pointer',
              }}>{o.l}</button>
            ))}
          </div>
        </window.TweakSection>

        <window.TweakSection title="Typography">
          <window.TweakSelect
            label="Display font"
            value={tweaks.displayFont}
            onChange={(v) => setTweak('displayFont', v)}
            options={[
              {value: 'cormorant', label: 'Cormorant Garamond'},
              {value: 'playfair', label: 'Playfair Display'},
              {value: 'italiana', label: 'Italiana'},
              {value: 'dmserif', label: 'DM Serif Display'},
            ]}
          />
        </window.TweakSection>

        <window.TweakSection title="Density">
          <window.TweakRadio
            label="Pacing"
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              {value: 'editorial', label: 'Editorial'},
              {value: 'commercial', label: 'Commercial'},
            ]}
          />
        </window.TweakSection>

        <window.TweakSection title="Show / Hide">
          <window.TweakToggle label="Trust strip"
            value={tweaks.showTrust}
            onChange={(v) => setTweak('showTrust', v)} />
          <window.TweakToggle label="Testimonial"
            value={tweaks.showTestimonial}
            onChange={(v) => setTweak('showTestimonial', v)} />
          <window.TweakToggle label="Instagram strip"
            value={tweaks.showInstagram}
            onChange={(v) => setTweak('showInstagram', v)} />
          <window.TweakToggle label="Sticky consult bar"
            value={tweaks.showConsultBar}
            onChange={(v) => setTweak('showConsultBar', v)} />
        </window.TweakSection>

        <window.TweakSection title="Jump to screen">
          <window.TweakRadio
            label="Page"
            value={route}
            onChange={(v) => { setRoute(v); window.scrollTo(0,0); }}
            options={[
              {value: 'home', label: 'Home'},
              {value: 'bespoke', label: 'Bespoke'},
              {value: 'product', label: 'Product'},
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
};

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