'use client';

import dynamic from 'next/dynamic';
import Navigation from '@/components/Navigation';
import LunarCalendar from '@/components/LunarCalendar';
import FullMoonDescriptions from '@/components/FullMoonDescriptions';
import PhaseSimulator from '@/components/PhaseSimulator';
import Quiz from '@/components/Quiz';
import Articles from '@/components/Articles';
import PDFDownload from '@/components/PDFDownload';
import { useLocale } from '@/components/LocaleProvider';
import { ts } from '@/lib/i18n';

// Lazy-load heavy canvas/3D components with loading placeholders
const LoadingPlaceholder = () => (
  <div className="section-container flex items-center justify-center min-h-75">
    <div className="text-white/30 text-lg animate-pulse">🌙 Loading...</div>
  </div>
);
const HeroSection = dynamic(() => import('@/components/HeroSection'), { ssr: false });
const VisibilityMap = dynamic(() => import('@/components/VisibilityMap'), { ssr: false, loading: LoadingPlaceholder });
const Infographics = dynamic(() => import('@/components/Infographics'), { ssr: false, loading: LoadingPlaceholder });

export default function Home() {
  const { locale } = useLocale();

  return (
    <>
      <a
        href="#main-content"
        style={{
          position: 'fixed',
          top: '-100%',
          left: '0.5rem',
          zIndex: 9999,
          background: 'white',
          color: 'black',
          padding: '0.5rem 1rem',
          borderRadius: '0.375rem',
          fontWeight: 600,
          transition: 'top 0.2s',
          textDecoration: 'none',
        }}
        onFocus={(e) => (e.currentTarget.style.top = '0.5rem')}
        onBlur={(e) => (e.currentTarget.style.top = '-100%')}
      >
        Skip to content
      </a>
      <Navigation />
      <main id="main-content" role="main" itemScope itemType="https://schema.org/WebPage">
        <HeroSection />

        <LunarCalendar />

        <FullMoonDescriptions />

        <PhaseSimulator />

        <VisibilityMap />

        <Infographics />

        <Quiz />

        <Articles />

        <PDFDownload />
      </main>

      <footer className="border-t border-white/10 py-12 px-4 text-center pb-28 md:pb-12" role="contentinfo">
        <div className="max-w-4xl mx-auto">
          <p className="text-3xl mb-3" aria-hidden="true">🌕</p>
          <p className="text-lg font-semibold text-white/80 mb-2">{ts('footer_text', locale)}</p>
          <p className="text-sm text-white/40 mb-6">{ts('footer_description', locale)}</p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-6 text-white/30 text-sm">
            <span>© {new Date().getFullYear()} Moon Phases</span>
            <span className="hidden sm:inline" aria-hidden="true">·</span>
            <span>Next.js + Three.js</span>
            <span className="hidden sm:inline" aria-hidden="true">·</span>
            <span>11 {locale === 'fr' ? 'langues' : 'languages'}</span>
          </div>
        </div>
      </footer>
    </>
  );
}