// VerityOne — App router + Tweaks

const ACCENT_PALETTES = {
  navy:    { 900: '#08172d', 800: '#0a2540', 700: '#0e335c', 600: '#154a85', 500: '#1b6cc9', 100: '#e7eef7', 50: '#f3f6fb' },
  oxford:  { 900: '#1a1f3a', 800: '#252b54', 700: '#323a73', 600: '#414b96', 500: '#5763bb', 100: '#e4e6f2', 50: '#f1f3f9' },
  slate:   { 900: '#1c2530', 800: '#2a3543', 700: '#384559', 600: '#4a596f', 500: '#697a93', 100: '#e3e7ec', 50: '#f1f3f6' },
  hunter:  { 900: '#0e2620', 800: '#1a3a30', 700: '#244e42', 600: '#316855', 500: '#4a8b73', 100: '#dceae3', 50: '#eef5f1' },
  claret:  { 900: '#2a1216', 800: '#3f1e23', 700: '#5b2b32', 600: '#7e3b44', 500: '#a64e5b', 100: '#efdfe2', 50: '#f8f0f1' }
};

const ACCENT_OPTIONS = [
  ['#0a2540', '#154a85', '#e7eef7'],   // navy
  ['#252b54', '#414b96', '#e4e6f2'],   // oxford
  ['#2a3543', '#4a596f', '#e3e7ec'],   // slate
  ['#1a3a30', '#316855', '#dceae3'],   // hunter green
  ['#3f1e23', '#7e3b44', '#efdfe2']    // claret
];

const ACCENT_KEY_FROM_PALETTE = (palette) => {
  if (!Array.isArray(palette)) return 'navy';
  const hero = String(palette[0] || '').toLowerCase();
  const map = {
    '#0a2540': 'navy', '#252b54': 'oxford', '#2a3543': 'slate',
    '#1a3a30': 'hunter', '#3f1e23': 'claret'
  };
  return map[hero] || 'navy';
};

const App = () => {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [page, setPage] = React.useState(() => {
    const hash = window.location.hash.replace('#', '');
    return hash || 'home';
  });
  const [loginOpen, setLoginOpen] = React.useState(false);
  const [authed, setAuthed] = React.useState(() => window.location.hash.replace('#', '') === 'portal');

  const signIn = () => {
    setAuthed(true);
    setLoginOpen(false);
    window.location.hash = 'portal';
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  const signOut = () => {
    setAuthed(false);
    setPage('home');
    window.location.hash = 'home';
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const go = (p) => {
    setPage(p);
    window.location.hash = p;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace('#', '') || 'home';
      setPage(h);
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const pages = {
    home:    <Home go={go} onStaffLogin={() => setLoginOpen(true)} tweaks={t} />,
    about:   <About go={go} />,
    claims:  <Claims go={go} />,
    coverage:<Coverage go={go} />,
    risk:    <Risk go={go} />,
    contact: <Contact go={go} />
  };

  // Apply accent palette as CSS variables on the app root
  const accentKey = ACCENT_KEY_FROM_PALETTE(t.accent);
  const ac = ACCENT_PALETTES[accentKey] || ACCENT_PALETTES.navy;
  const rootVars = {
    '--navy-900': ac[900],
    '--navy-800': ac[800],
    '--navy-700': ac[700],
    '--navy-600': ac[600],
    '--navy-500': ac[500],
    '--navy-100': ac[100],
    '--navy-50':  ac[50]
  };

  // Density override
  const densityStyle = t.density === 'compact'
    ? `.app-root section { padding: 56px 0; } .app-root .hero { padding: 56px 0 64px; } .app-root .page-hero { padding: 48px 0 56px; }`
    : '';

  if (authed) {
    return (
      <div className="app-root" data-screen-label="portal" style={rootVars}>
        <Portal onSignOut={signOut} />
      </div>
    );
  }

  return (
    <div className="app-root" data-screen-label={`${page}`} style={rootVars}>
      {densityStyle && <style>{densityStyle}</style>}
      <UtilityBar show={t.showUtilityBar !== false} />
      <Nav current={page} go={go} onStaffLogin={() => setLoginOpen(true)} />
      <main>{pages[page] || pages.home}</main>
      <Footer go={go} />
      {loginOpen && <LoginModal onClose={() => setLoginOpen(false)} onSuccess={signIn} />}

      <TweaksPanel title="VerityOne · Tweaks">
        <TweakSection label="Brand colour">
          <TweakColor
            label="Accent palette"
            value={t.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakSelect
            label="Headline"
            value={t.heroHeadline}
            options={[
              { value: 'confidence', label: 'Coverage with confidence' },
              { value: 'fast',       label: 'Insurance that pays. Fast.' },
              { value: 'steady',     label: 'We do the worrying' }
            ]}
            onChange={(v) => setTweak('heroHeadline', v)}
          />
        </TweakSection>

        <TweakSection label="Page chrome">
          <TweakToggle
            label="Top status bar"
            value={t.showUtilityBar !== false}
            onChange={(v) => setTweak('showUtilityBar', v)}
          />
          <TweakToggle
            label="Trust-badges row"
            value={t.showTrustBadges !== false}
            onChange={(v) => setTweak('showTrustBadges', v)}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            options={['regular', 'compact']}
            onChange={(v) => setTweak('density', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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