import { useEffect, useState } from 'react'
import Head from 'next/head'
import AdBanner from '../components/AdBanner'
import NewsSection from '../components/NewsSection'
import TendersSection from '../components/TendersSection'
import ProjectsSection from '../components/ProjectsSection'
import Sidebar from '../components/Sidebar'
import { fetchHomeData } from '../lib/api'

export default function Home() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const loadData = async () => {
      const result = await fetchHomeData()
      setData(result)
      setLoading(false)
    }
    loadData()
  }, [])

  if (loading) return <div className="text-center py-20">Loading...</div>

  return (
    <div className="container mx-auto px-4">
      <AdBanner slot="top_leaderboard" />
      
      <div className="flex flex-col lg:flex-row gap-8">
        <main className="lg:w-2/3">
          <NewsSection articles={data.news} />
          <AdBanner slot="middle_rectangle" />
          <ProjectsSection projects={data.projects} />
        </main>
        
        <aside className="lg:w-1/3">
          <Sidebar />
          <TendersSection tenders={data.tenders} />
          <AdBanner slot="sidebar" />
        </aside>
      </div>
    </div>
  )
}