// Longworth Seeds — App shell + router

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "balanced"
}/*EDITMODE-END*/;

const PALETTES = {
  balanced: {
    name: 'Balanced',
    desc: 'Navy + leaf, even hand',
    vars: {
      '--navy': '#102243', '--navy-deep': '#07112a', '--navy-soft': '#2a3b62',
      '--leaf': '#3c8a3c', '--leaf-dark': '#1f5a25', '--leaf-light': '#8ec449',
      '--wheat': '#c9a76e', '--stone': '#f1eadb', '--paper': '#faf6ec',
      '--ink': '#0e1a30', '--ink-soft': '#3b4862',
      '--accent': '#1f5a25', '--accent-deep': '#143f1a',
    },
  },
  green: {
    name: 'Pasture-led',
    desc: 'Foliage forward, growth-first',
    vars: {
      '--navy': '#10322a', '--navy-deep': '#06201a', '--navy-soft': '#2c4f44',
      '--leaf': '#3c8a3c', '--leaf-dark': '#1f5a25', '--leaf-light': '#8ec449',
      '--wheat': '#c9a76e', '--stone': '#ebebd9', '--paper': '#f7f6e8',
      '--ink': '#0b2018', '--ink-soft': '#36473f',
      '--accent': '#3c8a3c', '--accent-deep': '#1f5a25',
    },
  },
  earth: {
    name: 'Earth-warm',
    desc: 'Wheat + ochre forward',
    vars: {
      '--navy': '#352714', '--navy-deep': '#1d1408', '--navy-soft': '#5a4327',
      '--leaf': '#5a7a2e', '--leaf-dark': '#3d531c', '--leaf-light': '#a9c45a',
      '--wheat': '#c9a76e', '--stone': '#ece2cd', '--paper': '#f8f1de',
      '--ink': '#241704', '--ink-soft': '#4f3e25',
      '--accent': '#9a7d49', '--accent-deep': '#6e552a',
    },
  },
  navy: {
    name: 'Navy-led',
    desc: 'Trust-first, formal',
    vars: {
      '--navy': '#0a1c40', '--navy-deep': '#04102a', '--navy-soft': '#243968',
      '--leaf': '#2f7a3a', '--leaf-dark': '#194e22', '--leaf-light': '#7fb846',
      '--wheat': '#c9a76e', '--stone': '#eef0f4', '--paper': '#fafbfd',
      '--ink': '#06112a', '--ink-soft': '#36446a',
      '--accent': '#0a1c40', '--accent-deep': '#04102a',
    },
  },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.balanced;
  const root = document.documentElement;
  Object.entries(p.vars).forEach(([k, v]) => root.style.setProperty(k, v));
}

function App() {
  const [route, setRoute] = React.useState(() => {
    const h = window.location.hash.replace('#', '');
    return ROUTES.find(r => r.id === h) ? h : 'home';
  });

  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyPalette(t.palette);
  }, [t.palette]);

  const onNav = (id) => {
    setRoute(id);
    window.history.replaceState(null, '', `#${id}`);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace('#', '');
      if (ROUTES.find(r => r.id === h)) {
        setRoute(h);
        window.scrollTo({ top: 0, behavior: 'instant' });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const transparent = route === 'home';

  const Page = {
    home:     window.HomePage,
    seed:     window.SeedPage,
    cattle:   window.CattlePage,
    heritage: window.HeritagePage,
    contact:  window.ContactPage,
  }[route];

  return (
    <React.Fragment>
      <Header route={route} onNav={onNav} transparent={transparent} />
      <main key={route} data-screen-label={`Longworth · ${route}`}>
        {Page && <Page onNav={onNav} />}
      </main>
      <Footer onNav={onNav} />
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Palette">
          <PaletteTweak value={t.palette} onChange={(v) => setTweak('palette', v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

function PaletteTweak({ value, onChange }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
      {Object.entries(PALETTES).map(([key, p]) => {
        const swatches = [p.vars['--navy'], p.vars['--leaf-dark'], p.vars['--leaf-light'], p.vars['--wheat'], p.vars['--paper']];
        const active = value === key;
        return (
          <button
            key={key}
            onClick={() => onChange(key)}
            style={{
              padding: 12,
              background: active ? 'rgba(255,255,255,0.06)' : 'transparent',
              border: active ? '1px solid rgba(255,255,255,0.3)' : '1px solid rgba(255,255,255,0.1)',
              borderRadius: 8,
              textAlign: 'left',
              cursor: 'pointer',
              color: 'inherit',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}
          >
            <div style={{ display: 'flex', gap: 0, height: 22, borderRadius: 3, overflow: 'hidden' }}>
              {swatches.map((c, i) => (
                <div key={i} style={{ flex: 1, background: c }} />
              ))}
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600 }}>{p.name}</div>
              <div style={{ fontSize: 10, opacity: 0.6 }}>{p.desc}</div>
            </div>
          </button>
        );
      })}
    </div>
  );
}

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