/* NeuralVault — App.jsx
   Top-level composition. */

const { useState } = React;

function App() {
  const [activeStoryId, setActiveStoryId] = useState(null);

  const activeStory = activeStoryId
    ? STORIES.find((s) => s.id === activeStoryId)
    : null;

  return (
    <ThemeProvider>
      <Nav />
      <Hero />
      <Verticals />
      <Stories onOpenStory={setActiveStoryId} />
      <Portal />
      <Footer />
      {activeStory && (
        <DossierPage
          dossier={{
            ref: activeStory.ref,
            tag: activeStory.tag,
            title: activeStory.title,
            subtitle: activeStory.snippet,
            date: activeStory.date,
            minutes: activeStory.minutes,
            author: activeStory.author,
            sections: activeStory.sections,
          }}
          onClose={() => setActiveStoryId(null)}
        />
      )}
    </ThemeProvider>
  );
}

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