import React, { useState } from 'react';
import { HeroSection } from './components/hero/HeroSection';
import { ConsoleShowcase } from './components/console/ConsoleShowcase';
import { PartnerShowcase } from './components/partner/PartnerShowcase';
import { LifecycleSimulator } from './components/simulator/LifecycleSimulator';
import { CampaignDeckGallery } from './components/gallery/CampaignDeckGallery';
import { DualExperienceComparison } from './components/comparison/DualExperienceComparison';
import { ArchitectureAssurance } from './components/architecture/ArchitectureAssurance';
import { ImpactRoiCalculator } from './components/calculator/ImpactRoiCalculator';
import { Footer } from './components/layout/Footer';
import { ScreenshotViewerModal } from './components/modal/ScreenshotViewerModal';
import { PosterModal } from './components/modal/PosterModal';
import { ScreenshotItem, PosterItem } from './data/showcaseData';

export function App() {
  const [selectedScreenshot, setSelectedScreenshot] = useState<ScreenshotItem | null>(null);
  const [selectedPoster, setSelectedPoster] = useState<PosterItem | null>(null);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col selection:bg-cyan-500/20 selection:text-cyan-300">
      {/* Main Content Area */}
      <main className="flex-1">
        {/* 1. Hero Section & Interactive Dual-Device Showcase with spacious Brand Header */}
        <HeroSection
          onOpenScreenshot={(item) => setSelectedScreenshot(item)}
        />

        {/* 2. PFM Console Showcase (Executive Funder Backoffice) */}
        <ConsoleShowcase
          onOpenScreenshot={(item) => setSelectedScreenshot(item)}
        />

        {/* 3. PFM Partner Showcase (Grantee Field Delivery & Evidence) */}
        <PartnerShowcase
          onOpenScreenshot={(item) => setSelectedScreenshot(item)}
        />

        {/* 4. Interactive 5-Phase Fiduciary Lifecycle Simulator */}
        <LifecycleSimulator />

        {/* 5. Strategic 6-Poster Campaign Deck Gallery */}
        <CampaignDeckGallery
          onOpenPosterModal={(poster) => setSelectedPoster(poster)}
        />

        {/* 6. Dual Experience Comparison Matrix */}
        <DualExperienceComparison />

        {/* 7. Enterprise Architecture & 10 Cardinal Business Rules */}
        <ArchitectureAssurance />

        {/* 8. Interactive Governance & ROI Calculator */}
        <ImpactRoiCalculator />
      </main>

      {/* Footer */}
      <Footer />

      {/* Interactive Lightboxes & Modals */}
      <ScreenshotViewerModal
        item={selectedScreenshot}
        onClose={() => setSelectedScreenshot(null)}
      />

      <PosterModal
        poster={selectedPoster}
        onClose={() => setSelectedPoster(null)}
      />
    </div>
  );
}

export default App;