// app-brooklyn.jsx — mounts just LandingBrooklyn full-bleed, with Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "crimson",
  "fonts": "bricolage",
  "hero": "split"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  { value: 'crimson', label: 'Crimson' },
  { value: 'gold',    label: 'Gold' },
  { value: 'forest',  label: 'Forest' },
  { value: 'ink',     label: 'Ink' },
];

const ACCENT_MAP = {
  crimson: '#9b2c2c',
  gold:    '#a87a26',
  forest:  '#3a5a44',
  ink:     '#1a1714',
};

const FONT_OPTIONS = [
  { value: 'bricolage', label: 'Bricolage × Manrope' },
  { value: 'archivo',   label: 'Archivo × DM Sans' },
  { value: 'space',     label: 'Space × IBM Plex' },
];

const FONT_MAP = {
  bricolage: { display: '"Bricolage Grotesque", system-ui, sans-serif', body: '"Manrope", system-ui, sans-serif' },
  archivo:   { display: '"Archivo", system-ui, sans-serif',             body: '"DM Sans", system-ui, sans-serif' },
  space:     { display: '"Space Grotesk", system-ui, sans-serif',       body: '"IBM Plex Sans", system-ui, sans-serif' },
};

const HERO_OPTIONS = [
  { value: 'split',   label: 'Split' },
  { value: 'stacked', label: 'Stacked' },
  { value: 'overlay', label: 'Overlay' },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENT_MAP[t.accent];
  const fontOverride = FONT_MAP[t.fonts];

  // Viewport-aware. Mobile (≤760) renders at full width and CSS @media rules
  // flatten the layout. Mid-size viewports scale the 1280 design to fit.
  // Desktop (≥1280) renders 1:1.
  const [vw, setVw] = React.useState(() => typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const onResize = () => setVw(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const isMobile = vw <= 760;
  const scale = !isMobile && vw < 1280 ? vw / 1280 : 1;

  // Publish a "hero fills the fold" min-height in design units. We invert
  // the wrapper's transform-scale so a vh-based value stays correct after
  // the design is scaled to fit narrower viewports.
  React.useEffect(() => {
    const setVar = () => {
      const wWidth = window.innerWidth;
      const wHeight = window.innerHeight;
      const s = wWidth <= 760 ? 1 : (wWidth < 1280 ? wWidth / 1280 : 1);
      const navH = 84; // matches nav height in design
      const designH = Math.max(560, wHeight / s - navH);
      document.documentElement.style.setProperty('--hero-min-h', designH + 'px');
    };
    setVar();
    window.addEventListener('resize', setVar);
    return () => window.removeEventListener('resize', setVar);
  }, []);

  return (
    <React.Fragment>
      <div
        style={
          isMobile
            ? { width: '100%' }
            : {
                width: 1280,
                margin: '0 auto',
                transformOrigin: 'top left',
                transform: scale === 1 ? 'none' : `scale(${scale})`,
              }
        }
      >
        <LandingBrooklyn heroVariant={t.hero} accentOverride={accent} fontOverride={fontOverride} />
      </div>

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Typography" />
        <TweakSelect
          label="Pairing"
          value={t.fonts}
          options={FONT_OPTIONS}
          onChange={(v) => setTweak('fonts', v)}
        />
        <TweakSection label="Hero layout" />
        <TweakRadio
          label="Variant"
          value={t.hero}
          options={HERO_OPTIONS}
          onChange={(v) => setTweak('hero', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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