'use client';

import { useTheme } from '@/lib/theme-context';
import { LandingNav } from './LandingNav';
import { HeroSection } from './HeroSection';
import { FeaturesSection } from './FeaturesSection';
import { DemoSection } from './DemoSection';
import { CTASection } from './CTASection';
import { LandingFooter } from './LandingFooter';
import { usePWAInstall } from '@/hooks/usePWAInstall';

export function LandingPage() {
  const { theme, toggleTheme } = useTheme();
  const pwaInstall = usePWAInstall();

  return (
    <div className="min-h-screen bg-background">
      {/* Skip link for accessibility */}
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-white focus:rounded-lg"
      >
        Skip to main content
      </a>

      <LandingNav theme={theme} toggleTheme={toggleTheme} />

      <main id="main-content" role="main">
        <HeroSection pwaInstall={pwaInstall} />
        <FeaturesSection />
        <DemoSection />
        <CTASection pwaInstall={pwaInstall} />
      </main>

      <LandingFooter />
    </div>
  );
}
