import React, { useEffect } from 'react';
import AppBar from './components/AppBar';
import SectionHeader from './components/SectionHeader';
import TechUpdateCard from './components/TechUpdateCard';
import Footer from './components/Footer';
import CookieConsentBanner from './components/CookieConsentBanner';
import AdSection from './components/AdSection';
import InlineAd from './components/InlineAd';
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 type { TechUpdate } from './types';

// Tech update data - Breaking Tech News & Updates
const softwareUpdates: TechUpdate[] = [
  {
    id: '1',
    title: 'iOS 19 Beta Leak: Revolutionary AI Camera Features Spotted',
    description: 'Exclusive leak reveals Apple\'s next-generation AI photography system with real-time scene enhancement and advanced computational photography capabilities.',
    date: 'July 20, 2025',
    category: 'iOS Updates'
  },
  {
    id: '2',
    title: 'Android 16 Developer Preview: Desktop Mode Gets Major Overhaul',
    description: 'First look at Google\'s enhanced desktop experience with improved window management, multi-monitor support, and seamless app continuity across devices.',
    date: 'July 19, 2025',
    category: 'Android News'
  },
  {
    id: '3',
    title: 'Windows 12 Insider Build: AI-Powered File System Revolution',
    description: 'New builds show Microsoft\'s intelligent file organization system that automatically categorizes and suggests files using advanced machine learning.',
    date: 'July 18, 2025',
    category: 'Windows Updates'
  },
  {
    id: '4',
    title: 'Chrome 130 Beta: Revolutionary Security Architecture Unveiled',
    description: 'Google introduces post-quantum cryptography and enhanced site isolation in the latest Chrome beta, setting new standards for web security.',
    date: 'July 17, 2025',
    category: 'Browser Updates'
  },
  {
    id: '5',
    title: 'macOS Sequoia 14.7: Hidden Performance Optimizations Discovered',
    description: 'Deep dive analysis reveals Apple\'s silent performance improvements that boost M-series chip efficiency by up to 15% in specific workloads.',
    date: 'July 16, 2025',
    category: 'macOS Updates'
  }
];

const hardwareUpdates: TechUpdate[] = [
  {
    id: '6',
    title: 'iPhone 17 Pro Leak: Ultra-Wide Camera with Variable Aperture',
    description: 'Exclusive manufacturing details reveal Apple\'s next flagship will feature professional-grade camera control with f/1.2-f/4.0 variable aperture on ultra-wide lens.',
    date: 'July 15, 2025',
    category: 'iPhone Leaks'
  },
  {
    id: '7',
    title: 'MacBook Pro M4 Max: 40-Core GPU Benchmarks Surface',
    description: 'Leaked Geekbench scores show Apple\'s M4 Max chip delivering 65% faster graphics performance than M3 Max, rivaling dedicated gaming GPUs.',
    date: 'July 14, 2025',
    category: 'Mac Hardware'
  },
  {
    id: '8',
    title: 'Samsung Galaxy S26 Ultra: 200MP Periscope Zoom Confirmed',
    description: 'Industry sources confirm Samsung\'s 2026 flagship will feature a revolutionary 200MP periscope telephoto camera with 10x optical zoom capabilities.',
    date: 'July 13, 2025',
    category: 'Android Hardware'
  },
  {
    id: '9',
    title: 'NVIDIA RTX 5090: Specs Leak Shows 32GB GDDR7 Memory',
    description: 'Alleged specifications reveal NVIDIA\'s next-gen flagship GPU with massive 32GB GDDR7 memory buffer and 20% performance increase over RTX 4090.',
    date: 'July 12, 2025',
    category: 'PC Hardware'
  },
  {
    id: '10',
    title: 'Meta Quest 4: Mixed Reality Breakthrough with 8K Per Eye',
    description: 'Internal documents suggest Meta\'s next VR headset will feature 8K resolution per eye and revolutionary mixed reality capabilities surpassing Apple Vision Pro.',
    date: 'July 11, 2025',
    category: 'VR/AR Hardware'
  }
];

// Section Component
const Section: React.FC<{ title: string; updates: TechUpdate[]; id?: string }> = ({ title, updates, id }) => (
  <section className="mb-16" id={id}>
    <SectionHeader title={title} />
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
      {updates.map((update, index) => (
        <TechUpdateCard key={update.id} update={update} delay={index} />
      ))}
    </div>
  </section>
);

export default function App() {
  useEffect(() => {
    // Set document title and meta tags
    document.title = 'Ansispace - Latest Tech News, Updates & Reviews | Technology Insights';
    
    // Set meta description
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Breaking tech leaks, exclusive product news, and comprehensive troubleshooting guides for iOS, Android, Windows, and computing. Your trusted source for timely tech insights and expert reviews.');
    }
    
    // Set meta keywords
    const metaKeywords = document.querySelector('meta[name="keywords"]');
    if (metaKeywords) {
      metaKeywords.setAttribute('content', 'tech leaks, breaking tech news, iOS leaks, Android updates, Windows troubleshooting, hardware leaks, smartphone leaks, product reviews, tech analysis, troubleshooting guides, tech insights');
    }
  }, []);

  return (
    <SecurityProvider>
      <PageReloadManager enableShimmer={false} minimumLoadTime={100}>
      <div className="min-h-screen bg-gray-50 transition-colors duration-200">
        <AppBar />

        {/* Main Content */}
        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Enhanced Hero Section with Live News */}
          <HeroSection />

          {/* Live Tech News Section */}
          <TechNewsSection />

          {/* Ad Section */}
          <AdSection title="Partner Spotlight" useApi={true} />

          {/* User Journey Section */}
          <section className="py-24 bg-gradient-to-b from-blue-50 to-white">
            <div className="max-w-6xl mx-auto px-6">
              <div className="text-center mb-20">
                <h2 className="text-4xl md:text-5xl font-light text-gray-900 mb-8">
                  Your journey, <span className="text-blue-600 font-medium">amplified</span>
                </h2>
                <p className="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                  From breaking leaks to in-depth analysis, we&apos;re here to keep you ahead of the curve
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
                <div className="text-center group">
                  <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-200 transition-colors duration-200">
                    <span className="material-icons text-3xl text-blue-600">flash_on</span>
                  </div>
                  <h3 className="text-2xl font-medium text-gray-900 mb-4">Breaking First</h3>
                  <p className="text-gray-600 leading-relaxed">
                    Get exclusive tech leaks and breaking news before anyone else. Our insider network delivers the latest updates directly to you.
                  </p>
                </div>

                <div className="text-center group">
                  <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-200 transition-colors duration-200">
                    <span className="material-icons text-3xl text-blue-600">analytics</span>
                  </div>
                  <h3 className="text-2xl font-medium text-gray-900 mb-4">Deep Analysis</h3>
                  <p className="text-gray-600 leading-relaxed">
                    Beyond the headlines - comprehensive analysis and expert insights that help you understand what tech developments really mean.
                  </p>
                </div>

                <div className="text-center group">
                  <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-200 transition-colors duration-200">
                    <span className="material-icons text-3xl text-blue-600">support_agent</span>
                  </div>
                  <h3 className="text-2xl font-medium text-gray-900 mb-4">Expert Guides</h3>
                  <p className="text-gray-600 leading-relaxed">
                    Detailed troubleshooting guides and how-to content from tech experts who understand your challenges and provide real solutions.
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* Content Sections with improved spacing */}
          <div className="space-y-20 py-20">
            <Section title="Software Updates & OS News" updates={softwareUpdates} id="software-updates" />
            
            {/* Inline Ad */}
            <InlineAd />
            
            <Section title="Hardware Leaks & Device News" updates={hardwareUpdates} id="hardware-updates" />
            
            {/* YouTube Reviews Section */}
            <YouTubeReviewsSection />
          </div>

          {/* Final Ad Section */}
          <div className="py-12">
            <AdSection title="Featured Partners" useApi={true} />
          </div>
        </main>

        <Footer />
        
        {/* Cookie Consent Banner */}
        <CookieConsentBanner />
      </div>
    </PageReloadManager>
    </SecurityProvider>
  );
}