import { useState, useEffect } from 'react'; import { Navbar, NavTab, AgeGroup } from './components/Navbar'; import { StoryReader } from './components/StoryReader'; import { StoryboardView } from './components/StoryboardView'; import { ArtDirectionView } from './components/ArtDirectionView'; import { CharacterVault } from './components/CharacterVault'; import { AdaptabilityView } from './components/AdaptabilityView'; import { FormatStrategyView } from './components/FormatStrategyView'; import { ActivityCorner } from './components/ActivityCorner'; import { PitchDeckModal } from './components/PitchDeckModal'; import { BOOK_METADATA } from './data/storyData'; import { soundManager } from './utils/audio'; import { Heart } from 'lucide-react'; export function App() { const [activeTab, setActiveTab] = useState('reader'); const [ageGroup, setAgeGroup] = useState('pictureBook'); const [isBedtimeMode, setIsBedtimeMode] = useState(false); const [soundEnabled, setSoundEnabled] = useState(true); const [isPitchDeckOpen, setIsPitchDeckOpen] = useState(false); const [storyboardSceneId, setStoryboardSceneId] = useState(1); // Sync global .dark class on with Bedtime Mode so all dark: variants apply useEffect(() => { const root = document.documentElement; if (isBedtimeMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [isBedtimeMode]); const handleExploreStoryboard = (sceneId: number) => { soundManager.playPop(); setStoryboardSceneId(sceneId); setActiveTab('storyboard'); }; return (

{/* Top Navigation */} setIsPitchDeckOpen(true)} /> {/* Main View Router */}

{activeTab === 'reader' && ( )} {activeTab === 'storyboard' && ( )} {activeTab === 'art' && ( )} {activeTab === 'characters' && ( )} {activeTab === 'adaptability' && ( )} {activeTab === 'publishing' && ( setIsPitchDeckOpen(true)} /> )} {activeTab === 'activities' && ( )}

{/* Footer */} {/* Editorial Pitch Deck Modal */} setIsPitchDeckOpen(false)} />

); } export default App;