'use client';

import { useState, useEffect } from 'react';
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import HeroSlider from "@/components/HeroSlider";
import QuickMenuCards from "@/components/QuickMenuCards";
import LiveStreamSection from "@/components/LiveStreamSection";
import NewsSection from "@/components/NewsSection";
import MetroLine from "@/components/MetroLine";

export default function Home() {
  const [showLiveStream, setShowLiveStream] = useState(false);
  const [showNews, setShowNews] = useState(false);
  const [showDocuments, setShowDocuments] = useState(false);
  const [showMediaGallery, setShowMediaGallery] = useState(false);
  const [showComplaintForm, setShowComplaintForm] = useState(false);
  const [showContact, setShowContact] = useState(false);

  // Modal açıldığında yukarı kaydır
  useEffect(() => {
    if (showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm || showContact) {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }, [showLiveStream, showNews, showDocuments, showMediaGallery, showComplaintForm, showContact]);

  return (
    <div className="min-h-screen bg-[#003366]">
      <Header />
      
      {/* Hero Slider Section */}
      <HeroSlider />

      {/* Quick Menu Cards */}
      <QuickMenuCards
        onLiveStreamClick={() => setShowLiveStream(!showLiveStream)}
        onNewsClick={() => setShowNews(!showNews)}
        onDocumentsClick={() => setShowDocuments(!showDocuments)}
        onMediaClick={() => setShowMediaGallery(!showMediaGallery)}
        onComplaintClick={() => setShowComplaintForm(!showComplaintForm)}
        onContactClick={() => setShowContact(!showContact)}
      />

      {/* Live Stream Section */}
      <LiveStreamSection 
        show={showLiveStream}
        onClose={() => setShowLiveStream(false)}
      />

      {/* News Section */}
      <NewsSection
        show={showNews}
        onClose={() => setShowNews(false)}
        showLiveStream={showLiveStream}
      />

      {/* Metro Line Section - Ana içerik */}
      <main className={`${showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm || showContact ? 'pt-8' : 'pt-8 md:pt-64'} pb-16`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <MetroLine />
        </div>
      </main>

      <Footer />
    </div>
  );
}