import Hero from '../components/Hero'
import TraineePath from '../components/TraineePath'
import StatusCard from '../components/StatusCard'
import InfoCards from '../components/InfoCards'
import GroupsList from '../components/GroupsList'
import { useStorage } from '../context/StorageContext'

export default function Home() {
  const { data } = useStorage()
  const { program } = data

  const getCurrentStage = () => {
    if (program.examEnabled) return 4
    if (program.groupsFormed) return 3
    if (program.collectionOpen) return 1
    return 2
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <Hero title={program.title} description={program.description} />
      
      <div className="mt-8">
        <TraineePath currentStage={getCurrentStage()} />
        
        <StatusCard program={program} />
        
        <InfoCards />
        
        <GroupsList />
      </div>
    </div>
  )
}