import { useAudioPlayer } from './hooks/useAudioPlayer'
import Navbar from './components/Navbar/Navbar'
import Hero from './components/Hero/Hero'
import FloatingScene from './components/FloatingScene/FloatingScene'
import FeaturedAlbums from './components/FeaturedAlbums/FeaturedAlbums'
import NewReleases from './components/NewReleases/NewReleases'
import WaveSection from './components/WaveSection/WaveSection'
import TrendingTracks from './components/TrendingTracks/TrendingTracks'
import GenreExplorer from './components/GenreExplorer/GenreExplorer'
import MoodSection from './components/MoodSection/MoodSection'
import ArtistSpotlight from './components/ArtistSpotlight/ArtistSpotlight'
import StatsSection from './components/StatsSection/StatsSection'
import Footer from './components/Footer/Footer'
import PlayerBar from './components/Player/PlayerBar'

export default function App() {
  const player = useAudioPlayer()

  return (
    <div className="min-h-screen" style={{ background: 'var(--dark-base)', paddingBottom: '80px' }}>
      <Navbar />
      <Hero isPlaying={player.isPlaying} onTogglePlay={player.togglePlay} />
      <FloatingScene />
      <FeaturedAlbums onPlay={player.play} currentTrack={player.currentTrack} />
      <NewReleases />
      <WaveSection />
      <TrendingTracks currentTrack={player.currentTrack} onPlay={player.play} />
      <GenreExplorer />
      <MoodSection />
      <ArtistSpotlight />
      <StatsSection />
      <Footer />
      <PlayerBar
        currentTrack={player.currentTrack}
        isPlaying={player.isPlaying}
        progress={player.progress}
        volume={player.volume}
        onToggle={player.togglePlay}
        onNext={player.next}
        onPrev={player.prev}
        onSeek={player.setProgress}
        onVolume={player.setVolume}
      />
    </div>
  )
}