import './App.css'
import { useState } from 'react'
import { ModuleTabs, type ModuleKey } from './components/ModuleTabs'
import { GlobalReading } from './modules/GlobalReading'
import { PhonicsPlay } from './modules/PhonicsPlay'
import { StoryLab } from './modules/StoryLab'
import { globalWords, highlightWords } from './data/globalWords'
import { phonemeDeck } from './data/phonemes'
import { storyPrompts } from './data/stories'
import { HelpCenter } from './components/HelpCenter'

const modules = [
  {
    key: 'global' as ModuleKey,
    title: 'Lectura global',
    emoji: '🚗',
    description: 'Tarjetas rápidas estilo Doman con palabras favoritas.',
    accent: '#ffcc33',
  },
  {
    key: 'phonics' as ModuleKey,
    title: 'Fonética Montessori',
    emoji: '🔤',
    description: 'Sílabas táctiles y retos de sonido.',
    accent: '#87d1ff',
  },
  {
    key: 'stories' as ModuleKey,
    title: 'Historias Reggio',
    emoji: '📚',
    description: 'Cuentos personalizados e ideas de conversación.',
    accent: '#ff8cc6',
  },
]

function App() {
  const [activeModule, setActiveModule] = useState<ModuleKey>('global')
  return (
    <div className="app-shell">
      <header className="hero">
        <div className="hero-top">
          <span className="badge">Doman + Montessori + Reggio Emilia</span>
          <h1 className="hero-title">Destino Lectura Milo</h1>
          <p className="hero-text">
            Tarjetas veloces como autos de carrera, fonética manos a la obra y cuentos con la
            Bombonera mágica. Todo desde el navegador para cualquier tablet.
          </p>
          <div className="hero-tags">
            {highlightWords.slice(0, 4).map((word) => (
              <span key={word.palabra} className="hero-tag">
                {word.palabra}
              </span>
            ))}
            <span className="hero-tag">Boca Juniors 💛💙</span>
          </div>
        </div>
        <div className="hero-card">
          <div className="hero-stat">
            <span>{globalWords.length}</span>
            palabras listas
          </div>
          <div className="hero-stat">
            <span>{phonemeDeck.length}</span>
            fonemas táctiles
          </div>
          <div className="hero-stat">
            <span>{storyPrompts.length}</span>
            historias guía
          </div>
        </div>
      </header>

      <ModuleTabs modules={modules} active={activeModule} onSelect={setActiveModule} />

      <div className="module-panel">
        {activeModule === 'global' && <GlobalReading />}
        {activeModule === 'phonics' && <PhonicsPlay />}
        {activeModule === 'stories' && <StoryLab />}
      </div>

      <HelpCenter />
    </div>
  )
}

export default App
