import React, { Suspense, lazy, memo } from 'react';
import { Link } from 'react-router-dom';
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { speechTypes } from '@/utils/speechConfig';
import { SEOHead, structuredDataTemplates } from '@/components/SEOHead';
import CriticalInlineStyles from '@/components/CriticalInlineStyles';
import { initCriticalResources } from '@/components/CriticalResourceLoader';

// Lazy load non-critical components for better LCP
const Header = lazy(() => import('@/components/Header'));
const Footer = lazy(() => import('@/components/Footer'));

// Critical above-the-fold speech cards (first 4 only)
const CriticalSpeechCard = memo(({ speechType }: { speechType: any }) => (
  <Card className="bg-white border border-gray-200 rounded-lg shadow-sm card-hover h-full">
    <CardHeader className="pb-3">
      <CardTitle className="text-lg font-bold text-ink text-center font-display">
        {speechType.title}
      </CardTitle>
    </CardHeader>
    <CardContent className="pt-0">
      <CardDescription className="text-ink/70 mb-4 text-sm leading-relaxed text-center">
        {speechType.description}
      </CardDescription>
      <Button asChild className="w-full bg-rose-500 hover:bg-rose-600 text-white">
        <Link to={`/generator/${speechType.id}`}>
          Create {speechType.title}
        </Link>
      </Button>
    </CardContent>
  </Card>
));

// Lazy load non-critical sections
const LazyRestOfContent = lazy(() => Promise.resolve({
  default: () => (
    <>
      {/* Additional Speech Types */}
      {speechTypes.length > 4 && (
        <section className="py-8 px-4">
          <div className="container mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
              {speechTypes.slice(4, 8).map((speechType) => (
                <CriticalSpeechCard key={speechType.id} speechType={speechType} />
              ))}
            </div>
            
            <div className="text-center mt-8">
              <Button variant="outline" asChild>
                <Link to="/pricing">
                  View All {speechTypes.length} Speech Types
                </Link>
              </Button>
            </div>
          </div>
        </section>
      )}

      {/* How It Works Section */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold text-ink mb-4 font-display">How Our AI Speech Generator Works</h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div className="text-center p-6">
              <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-primary">1</span>
              </div>
              <h3 className="text-xl font-semibold text-ink mb-2 font-display">Choose Your Speech Type</h3>
              <p className="text-ink/70">Select from wedding speeches, birthday toasts, graduation addresses, and more.</p>
            </div>
            
            <div className="text-center p-6">
              <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-primary">2</span>
              </div>
              <h3 className="text-xl font-semibold text-ink mb-2 font-display">Answer Quick Questions</h3>
              <p className="text-ink/70">Share your personal stories and preferred tone in just a few minutes.</p>
            </div>
            
            <div className="text-center p-6">
              <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-primary">3</span>
              </div>
              <h3 className="text-xl font-semibold text-ink mb-2 font-display">Get Perfect Speech</h3>
              <p className="text-ink/70">Receive a ready-to-deliver speech that captures your unique voice.</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-gradient-to-r from-primary to-coral-500">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6 font-display">
            Create Professional Speeches Today
          </h2>
          <p className="text-xl text-white/90 mb-8 max-w-3xl mx-auto">
            Start creating your personalized AI-generated speech in minutes!
          </p>
          <Button size="lg" variant="secondary" asChild className="bg-white text-primary hover:bg-gray-100">
            <Link to="/generator/wedding-speech">
              Start Creating Your Perfect Speech
            </Link>
          </Button>
        </div>
      </section>
    </>
  )
}));

const OptimizedIndex = () => {
  return (
    <div className="min-h-screen feminine-gradient">
      <CriticalInlineStyles />
      {/* Critical resources loaded via initCriticalResources() in main.tsx */}
      <SEOHead
        title="Love Letter Lab – AI Speech Generator for Wedding, Birthday & All Occasions"
        description="Create heartfelt speeches in seconds with Love Letter Lab's AI-powered speech generator. Perfect for weddings, birthdays, farewells, and 15+ occasions. Free & easy to use."
        keywords="AI speech generator, wedding speech generator, birthday speech generator, graduation speech generator, retirement speech generator, personalized speeches, AI writing tool, wedding toast generator, best man speech, maid of honor speech"
        structuredData={structuredDataTemplates.homePage}
      />
      
      <Suspense fallback={<div className="h-16 bg-white"></div>}>
        <Header />
      </Suspense>
      
      {/* Critical Hero Section for LCP */}
      <section className="py-20 px-4">
        <div className="container mx-auto text-center">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold hero-gradient mb-6 font-display leading-tight hero-title">
            AI Speech Generator for Wedding Toast, Birthday Wishes & More
          </h1>
          <p className="text-xl text-ink/70 mb-8 max-w-3xl mx-auto">
            <strong>Love Letter Lab</strong> is your <strong>AI-powered speechwriting assistant</strong> for every occasion. Create <strong>heartfelt professional speeches</strong> in minutes.
          </p>
          <div className="flex flex-row gap-3 justify-center items-center flex-wrap">
            <Button size="lg" asChild className="flex-shrink-0">
              <Link to="/generator/wedding-speech">
                Generate Speech Now
              </Link>
            </Button>
            <Button variant="outline" size="lg" asChild className="flex-shrink-0">
              <Link to="/pricing">
                View Pricing
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Critical Speech Types - First 4 only for LCP */}
      <section className="py-12 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold text-ink mb-4 font-display">
              Popular Speech Generators
            </h2>
            <p className="text-lg text-ink/70 max-w-2xl mx-auto">
              Choose from our collection of <strong>AI-powered speech generators</strong> for <strong>special occasions</strong>.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 card-grid">
            {speechTypes.slice(0, 4).map((speechType) => (
              <CriticalSpeechCard key={speechType.id} speechType={speechType} />
            ))}
          </div>
        </div>
      </section>

      {/* Lazy load everything else */}
      <Suspense fallback={<div className="py-8"></div>}>
        <LazyRestOfContent />
      </Suspense>

      <Suspense fallback={<div className="h-16 bg-gray-100"></div>}>
        <Footer />
      </Suspense>
    </div>
  );
};

export default OptimizedIndex;