/* MAISON ALMA — main mount + tweaks
   Persistent tweak defaults below survive direct-manipulation edits. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper",
  "accent": "#1A2A4A",
  "serif": "cormorant",
  "showFab": true
}/*EDITMODE-END*/;

const PALETTES = {
  paper:    { paper: '#F4F1EB', stone: '#E7E1D4', line: '#D8D1C0', muted: '#6B6760', ink: '#16181B' },
  sand:     { paper: '#EFE6D5', stone: '#E0D4BB', line: '#CFC1A2', muted: '#6F664F', ink: '#1A1815' },
  noir:     { paper: '#15171A', stone: '#1F2226', line: '#2A2D31', muted: '#8A8780', ink: '#F0EDE7' },
  pearl:    { paper: '#F5F4F1', stone: '#E9E7E2', line: '#D5D2CB', muted: '#73706A', ink: '#16181B' },
};

const ACCENTS = {
  '#1A2A4A': { val: 'oklch(0.35 0.06 250)', soft: 'oklch(0.86 0.02 250)', focus: 'oklch(0.55 0.13 250)' },
  '#7A5A2E': { val: 'oklch(0.46 0.06 65)',  soft: 'oklch(0.88 0.025 65)', focus: 'oklch(0.6 0.13 65)' },
  '#2A4A38': { val: 'oklch(0.38 0.06 155)', soft: 'oklch(0.87 0.025 155)', focus: 'oklch(0.55 0.13 155)' },
  '#7A2A2E': { val: 'oklch(0.42 0.08 22)',  soft: 'oklch(0.88 0.025 22)',  focus: 'oklch(0.55 0.15 22)' },
};

const SERIFS = {
  cormorant: '"Cormorant Garamond", "EB Garamond", Georgia, serif',
  playfair:  '"Playfair Display", Georgia, serif',
  bodoni:    '"Bodoni Moda", "Didot", Georgia, serif',
  fraunces:  '"Fraunces", Georgia, serif',
};

function applyTweaks(t) {
  const root = document.documentElement.style;
  const pal = PALETTES[t.palette] || PALETTES.paper;
  const acc = ACCENTS[t.accent] || ACCENTS['#1A2A4A'];
  root.setProperty('--paper', pal.paper);
  root.setProperty('--stone', pal.stone);
  root.setProperty('--line', pal.line);
  root.setProperty('--muted', pal.muted);
  root.setProperty('--ink', pal.ink);
  root.setProperty('--ink-2', pal.line);
  root.setProperty('--accent', acc.val);
  root.setProperty('--accent-soft', acc.soft);
  root.setProperty('--focus', acc.focus);
  root.setProperty('--serif', SERIFS[t.serif] || SERIFS.cormorant);
  const fab = document.querySelector('.fab');
  if (fab) fab.style.display = t.showFab ? '' : 'none';
}

// extra font preloads for tweak options
(function preloadExtras() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Bodoni+Moda:ital,wght@0,400;0,500;1,400&family=Fraunces:ital,wght@0,300;0,400;1,300;1,400&display=swap';
  document.head.appendChild(link);
})();

function App() {
  const [route, setRoute] = React.useState('home');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  const view = (() => {
    switch (route) {
      case 'home':        return <Home setRoute={setRoute} />;
      case 'development': return <Development setRoute={setRoute} />;
      case 'area':        return <Area setRoute={setRoute} />;
      case 'listing':     return <Listing setRoute={setRoute} />;
      case 'valuation':   return <Valuation setRoute={setRoute} />;
      case 'journal':     return <Journal setRoute={setRoute} />;
      case 'about':       return <About setRoute={setRoute} />;
      default:            return <Home setRoute={setRoute} />;
    }
  })();

  return (
    <React.Fragment>
      <Nav route={route} setRoute={setRoute} tweaks={tweaks} />
      {view}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Surface" />
        <TweakSelect
          label="Palette"
          value={tweaks.palette}
          onChange={v => setTweak('palette', v)}
          options={[
            { value: 'paper',  label: 'Paper (default)' },
            { value: 'sand',   label: 'Sand' },
            { value: 'pearl',  label: 'Pearl' },
            { value: 'noir',   label: 'Noir (dark)' },
          ]}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Accent hue"
          value={tweaks.accent}
          onChange={v => setTweak('accent', v)}
          options={['#1A2A4A','#7A5A2E','#2A4A38','#7A2A2E']}
        />
        <TweakSection label="Type" />
        <TweakSelect
          label="Display serif"
          value={tweaks.serif}
          onChange={v => setTweak('serif', v)}
          options={[
            { value: 'cormorant', label: 'Cormorant Garamond' },
            { value: 'playfair',  label: 'Playfair Display' },
            { value: 'bodoni',    label: 'Bodoni Moda' },
            { value: 'fraunces',  label: 'Fraunces' },
          ]}
        />
        <TweakSection label="Interface" />
        <TweakToggle
          label="WhatsApp button"
          value={tweaks.showFab}
          onChange={v => setTweak('showFab', v)}
        />
        <TweakSection label="Navigate" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, padding: '4px 12px 8px' }}>
          {[
            ['home','Home'],['development','Off-plan'],['area','Areas'],
            ['listing','Listing'],['valuation','Sell'],['journal','Journal'],
            ['about','House'],
          ].map(([id, label]) => (
            <TweakButton key={id} label={label} onClick={() => setRoute(id)} />
          ))}
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
}

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