import { lazy, Suspense, startTransition, useDeferredValue } from "react";
import Header from "../components/Header";
import Hero from "../components/Hero";

// Aggressive code splitting for better TTI
const About = lazy(() => 
  import("../components/About").then(module => ({
    default: module.default
  }))
);

const Services = lazy(() => 
  new Promise(resolve => {
    // Defer loading to improve TTI
    if ('scheduler' in window && 'postTask' in (window as any).scheduler) {
      (window as any).scheduler.postTask(() => {
        resolve(import("../components/Services"));
      }, { priority: 'background' });
    } else {
      setTimeout(() => resolve(import("../components/Services")), 100);
    }
  }).then((module: any) => ({ default: module.default }))
);

const BestOfPmb = lazy(() => import("../components/BestOfPmb"));
const ClientVideos = lazy(() => import("../components/ClientVideos"));
const BeforeAfter = lazy(() => import("../components/BeforeAfter"));
const SocialStrip = lazy(() => import("../components/SocialStrip"));
const Special = lazy(() => import("../components/Special"));
const Experience = lazy(() => import("../components/Experience"));
const Gallery = lazy(() => import("../components/Gallery"));
const WigCollectionPromo = lazy(() => import("../components/WigCollectionPromo"));
const Owner = lazy(() => import("../components/Owner"));
const Location = lazy(() => import("../components/Location"));
const Footer = lazy(() => import("../components/Footer"));


// Enhanced loading component that doesn't block main thread
const OptimizedSuspense = ({ children, fallback, priority = 'normal' }: { 
  children: React.ReactNode; 
  fallback: React.ReactNode;
  priority?: 'high' | 'normal' | 'low';
}) => {
  const deferredChildren = useDeferredValue(children);
  
  return (
    <Suspense fallback={fallback}>
      {priority === 'low' ? deferredChildren : children}
    </Suspense>
  );
};

const Index = () => {
  return (
    <div className="min-h-screen bg-luxury-white">
      <Header />
      <Hero />

      {/* Best of Pmb & Midlands nomination — straight after the hero */}
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="high">
        <BestOfPmb />
      </OptimizedSuspense>

      {/* High priority - loads immediately after hero */}
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="high">
        <About />
      </OptimizedSuspense>

      {/* Services first — the salon's core offering */}
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="high">
        <Services />
      </OptimizedSuspense>

      {/* Wig shop — surfaced high so the collection is impossible to miss */}
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="high">
        <WigCollectionPromo />
      </OptimizedSuspense>

      {/* Low priority - deferred loading for better TTI */}
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="low">
        <Gallery />
      </OptimizedSuspense>

      {/* Social presence — Instagram/TikTok strip */}
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="low">
        <SocialStrip />
      </OptimizedSuspense>

      {/* Current special — hidden until a promo is enabled */}
      <OptimizedSuspense fallback={null} priority="low">
        <Special />
      </OptimizedSuspense>

      {/* Drag-to-reveal transformation slider */}
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="low">
        <BeforeAfter />
      </OptimizedSuspense>

      {/* Client video showcase — hidden until clips are added */}
      <OptimizedSuspense fallback={null} priority="low">
        <ClientVideos />
      </OptimizedSuspense>

      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="low">
        <Owner />
      </OptimizedSuspense>

      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="low">
        <Experience />
      </OptimizedSuspense>
      
      
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="low">
        <Location />
      </OptimizedSuspense>
      
      <OptimizedSuspense fallback={<div className="h-20" aria-hidden="true"></div>} priority="low">
        <Footer />
      </OptimizedSuspense>
    </div>
  );
};

export default Index;