import { useEffect } from 'react';
import AppBar from './components/AppBar';
import TechUpdateCard from './components/TechUpdateCard';
import Footer from './components/Footer';
import CookieConsentBanner from './components/CookieConsentBanner';
import AdSection from './components/AdSection';
import PageReloadManager from './components/PageReloadManager';
import YouTubeReviewsSection from './components/YouTubeReviewsSection';
import TechNewsSection from './components/TechNewsSection';
import HeroSection from './components/HeroSection';
import SecurityProvider from './components/SecurityProvider';
import { softwareUpdates, hardwareUpdates } from './data/mockData';

function App() {
  useEffect(() => {
    // Initialize analytics or tracking if needed
    console.log('Tech News Hub initialized');
  }, []);

  return (
    <SecurityProvider>
      <PageReloadManager>
        <div className="App bg-white">
          <AppBar />
          
          {/* Hero Section */}
          <HeroSection />
          
          {/* Latest Tech News Section */}
          <section id="latest-tech-news" className="py-16 bg-gray-50">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-3xl font-bold text-gray-900">Latest Tech News</h2>
                <div className="h-px bg-gray-300 flex-1 ml-8"></div>
              </div>
              <TechNewsSection />
            </div>
          </section>

          {/* Software Updates & OS News */}
          <section id="software-updates" className="py-16 bg-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-3xl font-bold text-gray-900">Software Updates & OS News</h2>
                <div className="h-px bg-gray-300 flex-1 ml-8"></div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {softwareUpdates.map((update) => (
                  <TechUpdateCard key={update.id} update={update} />
                ))}
              </div>
            </div>
          </section>

          {/* Hardware Leaks & Device News */}
          <section id="hardware-news" className="py-16 bg-gray-50">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-3xl font-bold text-gray-900">Hardware Leaks & Device News</h2>
                <div className="h-px bg-gray-300 flex-1 ml-8"></div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {hardwareUpdates.map((update) => (
                  <TechUpdateCard key={update.id} update={update} />
                ))}
              </div>
            </div>
          </section>

          {/* In-Depth Reviews & Troubleshooting */}
          <section id="reviews-troubleshooting" className="py-16 bg-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-3xl font-bold text-gray-900">In-Depth Reviews & Troubleshooting</h2>
                <div className="h-px bg-gray-300 flex-1 ml-8"></div>
              </div>
              <YouTubeReviewsSection />
            </div>
          </section>

          {/* Featured Partners */}
          <section id="featured-partners" className="py-16 bg-gray-50">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-3xl font-bold text-gray-900">Featured Partners</h2>
                <div className="h-px bg-gray-300 flex-1 ml-8"></div>
              </div>
              <AdSection />
            </div>
          </section>

          {/* Partner Spotlight */}
          <section id="partner-spotlight" className="py-16 bg-white border-t border-gray-200">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-gray-900 mb-4">Partner Spotlight</h2>
                <p className="text-lg text-gray-600 max-w-2xl mx-auto">
                  Discover cutting-edge technology products and exclusive deals from our trusted partners
                </p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div className="bg-white border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-lg">
                  <div className="aspect-video bg-gradient-to-br from-blue-50 to-blue-100">
                    <img
                      src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=300&fit=crop"
                      alt="MacBook Pro M4"
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="p-6">
                    <div className="mb-3">
                      <span className="inline-block px-3 py-1 text-xs font-semibold bg-blue-600 text-white uppercase tracking-wide">
                        Apple Store
                      </span>
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">MacBook Pro M4 - Up to $200 Off</h3>
                    <p className="text-gray-600 mb-4">
                      Get exclusive tech leaks and breaking news before anyone else. Our insider network delivers the latest updates directly to you.
                    </p>
                    <button
                      onClick={() => window.open('#', '_blank')}
                      className="w-full px-6 py-3 bg-blue-600 text-white font-medium hover:bg-blue-700 hover:text-white transition-all duration-200"
                    >
                      Shop Now
                    </button>
                  </div>
                </div>

                <div className="bg-white border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-lg">
                  <div className="aspect-video bg-gradient-to-br from-gray-50 to-gray-100">
                    <img
                      src="https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400&h=300&fit=crop"
                      alt="Samsung Galaxy S25"
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="p-6">
                    <div className="mb-3">
                      <span className="inline-block px-3 py-1 text-xs font-semibold bg-gray-800 text-white uppercase tracking-wide">
                        Samsung
                      </span>
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">Galaxy S25 Ultra Pre-Order</h3>
                    <p className="text-gray-600 mb-4">
                      Experience the future of mobile technology with AI-powered features and revolutionary camera system.
                    </p>
                    <button
                      onClick={() => window.open('#', '_blank')}
                      className="w-full px-6 py-3 bg-gray-800 text-white font-medium hover:bg-gray-900 hover:text-white transition-all duration-200"
                    >
                      Pre-Order Now
                    </button>
                  </div>
                </div>

                <div className="bg-white border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-lg">
                  <div className="aspect-video bg-gradient-to-br from-green-50 to-green-100">
                    <img
                      src="https://images.unsplash.com/photo-1591488320449-011701bb6704?w=400&h=300&fit=crop"
                      alt="NVIDIA RTX 5090"
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="p-6">
                    <div className="mb-3">
                      <span className="inline-block px-3 py-1 text-xs font-semibold bg-green-600 text-white uppercase tracking-wide">
                        NVIDIA
                      </span>
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">RTX 5090 - Ultimate Gaming</h3>
                    <p className="text-gray-600 mb-4">
                      Unleash next-generation gaming performance with ray tracing and DLSS 4 technology.
                    </p>
                    <button
                      onClick={() => window.open('#', '_blank')}
                      className="w-full px-6 py-3 bg-green-600 text-white font-medium hover:bg-green-700 hover:text-white transition-all duration-200"
                    >
                      Learn More
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <Footer />
          <CookieConsentBanner />
        </div>
      </PageReloadManager>
    </SecurityProvider>
  );
}

export default App;