// app.jsx — Router, Tweaks integration, App root

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#6366f1",
  "ctaStyle": "filled"
}/*EDITMODE-END*/;

const PALETTES = {
  '#6366f1': { a400: '#818cf8', a500: '#6366f1', a600: '#4f46e5', a700: '#4338ca' },
  '#8b5cf6': { a400: '#a78bfa', a500: '#8b5cf6', a600: '#7c3aed', a700: '#6d28d9' },
  '#06b6d4': { a400: '#22d3ee', a500: '#06b6d4', a600: '#0891b2', a700: '#0e7490' },
};

function applyAccent(color) {
  const p = PALETTES[color] || PALETTES['#6366f1'];
  const r = document.documentElement;
  r.style.setProperty('--color-brand-400', p.a400);
  r.style.setProperty('--color-brand-500', p.a500);
  r.style.setProperty('--color-brand-600', p.a600);
  r.style.setProperty('--color-brand-700', p.a700);
}

function NotFoundPage() {
  useSEO("Page Not Found — Vela", "The page you are looking for does not exist.");
  return (
    <div style={{ paddingTop: '64px', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '64px 1.5rem 4rem' }}>
      <div>
        <div style={{ fontSize: '7rem', fontWeight: 800, color: 'var(--color-border-hover)', lineHeight: 1, marginBottom: '1rem', fontFamily: 'var(--font-mono)', letterSpacing: '-0.05em' }}>404</div>
        <h1 style={{ fontWeight: 700, fontSize: '1.5rem', marginBottom: '0.75rem' }}>Page not found</h1>
        <p style={{ color: 'var(--color-muted)', marginBottom: '2rem' }}>The page you're looking for doesn't exist.</p>
        <Btn variant="primary" size="md" to="/">← Back to home</Btn>
      </div>
    </div>
  );
}

function Router() {
  const route = usePathRoute();

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [route]);

  if (route === '/' || route === '')   return <HomePage />;
  if (route === '/features')           return <FeaturesPage />;
  if (route === '/integrations')       return <IntegrationsPage />;
  if (route === '/about')              return <AboutPage />;
  if (route === '/security')           return <SecurityPage />;
  if (route === '/blog' || route.startsWith('/blog/')) return <BlogPage />;
  if (route.startsWith('/docs'))       return <DocsPage />;
  if (route === '/privacy')            return <PrivacyPage />;
  if (route === '/terms')              return <TermsPage />;
  return <NotFoundPage />;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyAccent(t.accentColor); }, [t.accentColor]);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-cta', t.ctaStyle);
  }, [t.ctaStyle]);

  return (
    <>
      <Nav />
      <Router />
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand color" />
        <TweakColor
          label="Accent"
          value={t.accentColor}
          options={['#6366f1', '#8b5cf6', '#06b6d4']}
          onChange={v => setTweak('accentColor', v)}
        />
        <TweakSection label="CTA style" />
        <TweakRadio
          label="Button"
          value={t.ctaStyle}
          options={['filled', 'outline', 'gradient']}
          onChange={v => setTweak('ctaStyle', v)}
        />
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const AuthProvider = window.AuthProvider || (({ children }) => <>{children}</>);

root.render(
  <AuthProvider>
    <App />
  </AuthProvider>
);