import { createRoot } from 'react-dom/client';
import { LearnLayout } from './LearnLayout';
import { LearnIndex } from './LearnIndex';
import { LessonView } from './LessonView';
import { LESSONS } from './lessons';
// Same base styles as the landing — design tokens and self-hosted IBM Plex. Like
// the landing, this entry wires no store, no persistence, and no service worker:
// the learning pages stay uncontrolled and always-fresh (the SW is scoped to
// /app/), and indexable.
import '../../styles/base.css';
import '../../styles/chart-fonts.css';

// Each lesson is its own URL — `/learn/<slug>/`, a generated static shell; the index
// is `/learn/`. One entry renders the right view from the path. An unknown slug
// falls back to the index.
const slug = /\/learn\/([a-z0-9-]+)\/?$/.exec(location.pathname)?.[1];
const lesson = slug ? LESSONS.find((l) => l.slug === slug) : undefined;

createRoot(document.getElementById('root')!).render(
  <LearnLayout>
    {(config) =>
      lesson ? <LessonView lesson={lesson} config={config} /> : <LearnIndex lessons={LESSONS} />
    }
  </LearnLayout>,
);
