frontend/src/pages/Home.jsx

import React, { useState, useEffect, lazy, Suspense } from 'react';
import { Link } from 'react-router-dom';

// Lazy load components for better performance
const FeatureCard = lazy(() => import('../components/FeatureCard'));
const TestimonialCard = lazy(() => import('../components/TestimonialCard'));

const Home = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    // Set mounted state to ensure component is mounted
    setMounted(true);
    
    // Simulate loading state with skeleton screen
    const timer = setTimeout(() => {
      setIsLoading(false);
      setIsVisible(true);
    }, 800);

    return () => clearTimeout(timer);
  }, []);

  // Enhanced features with more compelling descriptions
  const features = [
    {
      title: "Smart Content Scheduling",
      description: "Plan and schedule your LinkedIn posts with AI-powered optimal timing for maximum engagement and reach.",
      icon: "📅",
      isNew: true
    },
    {
      title: "Multi-Account Management",
      description: "Seamlessly manage multiple LinkedIn accounts from a unified dashboard with advanced team collaboration features.",
      icon: "👥",
      isPopular: true
    },
    {
      title: "Advanced Analytics & Insights",
      description: "Gain deep insights into your performance with comprehensive analytics and AI-driven recommendations for growth.",
      icon: "📊",
      isPremium: true
    },
    {
      title: "AI Content Generation",
      description: "Create compelling, platform-optimized content with our advanced AI writing assistant and content ideation tools.",
      icon: "🤖",
      isNew: true
    }
  ];

  // Enhanced testimonials with more specific results
  const testimonials = [
    {
      name: "Alex Johnson",
      role: "Marketing Director",
      company: "TechCorp Solutions",
      content: "Lin has completely transformed how we manage our LinkedIn presence. The smart scheduling alone saves us 15+ hours weekly, and our engagement has increased by 200%.",
      avatar: "AJ",
      rating: 5
    },
    {
      name: "Sarah Williams",
      role: "Content Creator",
      company: "Digital Growth Agency",
      content: "The analytics dashboard provides insights we never had before. Our client engagement has increased by 150% since implementing Lin's recommendations.",
      avatar: "SW",
      rating: 5
    },
    {
      name: "Michael Chen",
      role: "Startup Founder",
      company: "InnovateLab",
      content: "Managing multiple accounts was a nightmare until we found Lin. The team collaboration features have been a game-changer for our growing startup.",
      avatar: "MC",
      rating: 5
    }
  ];

  // Enhanced loading skeleton with modern design
  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-secondary-50 via-accent-50 to-secondary-100">
        {/* Hero Skeleton */}
        <section className="py-8 md:py-16 lg:py-24 relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-r from-primary-50/20 to-accent-50/20"></div>
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div className="animate-pulse">
              <div className="bg-primary-200 h-12 sm:h-16 w-4/5 mx-auto rounded-lg mb-4 sm:mb-6"></div>
              <div className="bg-secondary-200 h-6 sm:h-8 w-3/4 mx-auto rounded-lg mb-6 sm:mb-10"></div>
              <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
                <div className="bg-primary-200 h-12 sm:h-14 w-32 sm:w-48 rounded-xl"></div>
                <div className="bg-secondary-200 h-12 sm:h-14 w-28 sm:w-44 rounded-xl"></div>
              </div>
            </div>
          </div>
        </section>

        {/* Features Skeleton */}
        <section className="py-12 sm:py-16 lg:py-20 bg-white/90 backdrop-blur-sm relative">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative">
            <div className="text-center mb-12 sm:mb-16 lg:mb-20">
              <div className="animate-pulse">
                <div className="bg-secondary-200 h-10 sm:h-12 w-2/3 mx-auto rounded-lg mb-4 sm:mb-6"></div>
                <div className="bg-secondary-200 h-5 sm:h-6 w-1/2 mx-auto rounded-lg"></div>
              </div>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="animate-pulse">
                  <div className="bg-secondary-200 h-14 sm:h-16 w-14 sm:w-16 rounded-xl mx-auto mb-3 sm:mb-4"></div>
                  <div className="bg-secondary-200 h-5 sm:h-6 w-3/4 mx-auto rounded mb-2 sm:mb-2"></div>
                  <div className="bg-secondary-200 h-3 sm:h-4 w-full rounded"></div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-secondary-50 via-accent-50 to-secondary-100">
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        {/* Background with enhanced gradient and pattern */}
        <div className="absolute inset-0 bg-gradient-to-br from-primary-50/30 via-accent-50/20 to-secondary-50/30"></div>
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM5MTAwMjkiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
        
        {/* Hero content with enhanced typography and spacing */}
        <div className="relative z-10 py-12 md:py-16 lg:py-20 xl:py-24 2xl:py-32">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-4xl sm:max-w-5xl lg:max-w-6xl">
            {/* Badge */}
            <div className={`inline-flex items-center px-3 sm:px-4 py-2 bg-primary-100 text-primary-800 rounded-full text-xs sm:text-sm font-medium mb-6 sm:mb-8 transition-all duration-700 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-4'
            }`} style={{ animationDelay: '0.1s' }}>
              <span className="w-2 h-2 bg-primary-600 rounded-full mr-2 animate-pulse"></span>
              Professional LinkedIn Management Platform
            </div>

            {/* Main heading with enhanced typography */}
            <h1 className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl font-bold text-gray-900 mb-6 sm:mb-8 transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.2s' }}>
              Elevate Your <span className="text-primary-600">LinkedIn</span> Presence
            </h1>

            {/* Subheading with enhanced styling */}
            <p className={`text-lg sm:text-xl md:text-2xl lg:text-3xl text-secondary-700 mb-8 sm:mb-12 max-w-3xl sm:max-w-4xl mx-auto leading-relaxed transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.3s' }}>
              Transform your LinkedIn strategy with AI-powered scheduling, advanced analytics, and comprehensive account management—all in one unified platform.
            </p>

            {/* Enhanced CTA buttons */}
            <div className={`flex flex-col sm:flex-row justify-center gap-4 sm:gap-6 transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.4s' }}>
              <Link
                to="/register"
                className="group relative overflow-hidden bg-primary-600 hover:bg-primary-700 text-white font-bold py-3 px-6 sm:py-4 sm:px-8 lg:py-5 lg:px-10 rounded-2xl transition-all duration-300 transform hover:-translate-y-2 shadow-lg hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-primary-300 focus:ring-offset-4 active:scale-95 touch-manipulation"
                aria-label="Get started with Lin for free"
              >
                <span className="relative z-10 flex items-center justify-center">
                  Get Started Free
                  <svg className="ml-2 w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </span>
                <div className="absolute inset-0 bg-gradient-to-r from-primary-700 to-primary-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </Link>
              <Link
                to="/login"
                className="group relative bg-white hover:bg-secondary-50 text-secondary-900 font-bold py-3 px-6 sm:py-4 sm:px-8 lg:py-5 lg:px-10 rounded-2xl transition-all duration-300 border-2 border-secondary-200 shadow-md hover:shadow-lg hover:border-secondary-300 focus:outline-none focus:ring-4 focus:ring-secondary-300 focus:ring-offset-4 active:scale-95 touch-manipulation"
                aria-label="Sign in to your Lin account"
              >
                <span className="relative z-10 flex items-center justify-center">
                  Sign In
                  <svg className="ml-2 w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                  </svg>
                </span>
              </Link>
            </div>

          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="relative py-12 sm:py-16 lg:py-24 bg-white/80 backdrop-blur-sm">
        {/* Background gradient */}
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-white to-secondary-50/50"></div>
        
        <div className="relative container mx-auto px-4 sm:px-6 lg:px-8">
          {/* Section header */}
          <div className="text-center mb-12 sm:mb-16 lg:mb-20">
            <div className={`inline-flex items-center px-3 sm:px-4 py-2 bg-accent-100 text-accent-800 rounded-full text-xs sm:text-sm font-medium mb-4 sm:mb-6 transition-all duration-700 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-4'
            }`} style={{ animationDelay: '0.1s' }}>
              Powerful Features
            </div>
            <h2 className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-4 sm:mb-6 transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.2s' }}>
              Everything You Need for <span className="text-primary-600">LinkedIn Success</span>
            </h2>
            <p className={`text-lg sm:text-xl text-secondary-600 max-w-2xl sm:max-w-3xl mx-auto transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.3s' }}>
              Comprehensive tools designed to streamline your LinkedIn management and drive exceptional results.
            </p>
          </div>
          
          {/* Features grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
            <Suspense fallback={<div className="col-span-full flex items-center justify-center py-8">Loading...</div>}>
              {features.map((feature, index) => (
                <FeatureCard
                  key={index}
                  icon={feature.icon}
                  title={feature.title}
                  description={feature.description}
                  delay={`${index * 150}ms`}
                  isVisible={isVisible}
                  isNew={feature.isNew}
                  isPopular={feature.isPopular}
                  isPremium={feature.isPremium}
                />
              ))}
            </Suspense>
          </div>
        </div>
      </section>

      {/* Enhanced CTA Section */}
      <section className="relative py-12 sm:py-16 lg:py-24 bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 overflow-hidden">
        {/* Background effects */}
        <div className="absolute inset-0 bg-gradient-to-br from-primary-700/50 via-primary-800/50 to-primary-900/50"></div>
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYwMDUiIGZpbGwtb3BhY2l0eT0iMC41Ij5DcmVhdGVkIEJveDwvZz48L2c+PC9zdmc+')] opacity-30"></div>
        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white to-transparent opacity-20"></div>
        
        <div className="relative container mx-auto px-4 sm:px-6 lg:px-8 text-center">
          {/* Section content */}
          <div className="max-w-4xl mx-auto">
            <div className={`inline-flex items-center px-3 sm:px-4 py-2 bg-white/20 text-white rounded-full text-xs sm:text-sm font-medium mb-6 sm:mb-8 backdrop-blur-sm transition-all duration-700 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-4'
            }`} style={{ animationDelay: '0.1s' }}>
              Limited Time Offer
            </div>
            
            <h2 className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 sm:mb-8 transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.2s' }}>
              Ready to Transform Your <span className="text-accent-200">LinkedIn Presence</span>?
            </h2>
            
            <p className={`text-lg sm:text-xl text-white/90 mb-8 sm:mb-12 max-w-2xl sm:max-w-3xl mx-auto leading-relaxed transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.3s' }}>
              Join thousands of professionals who are already using Lin to grow their network, increase engagement, and achieve remarkable results on LinkedIn.
            </p>

            {/* Enhanced CTA button */}
            <div className={`transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.4s' }}>
              <Link
                to="/register"
                className="group relative inline-flex items-center justify-center overflow-hidden bg-white hover:bg-secondary-50 text-primary-700 font-bold py-4 px-8 sm:py-5 sm:px-10 lg:py-6 lg:px-12 rounded-3xl transition-all duration-300 transform hover:-translate-y-2 shadow-2xl hover:shadow-3xl focus:outline-none focus:ring-4 focus:ring-white/30 focus:ring-offset-4 focus:ring-offset-primary-600 active:scale-95 touch-manipulation"
                aria-label="Start your free trial with Lin"
              >
                <span className="relative z-10 flex items-center justify-center text-base sm:text-lg lg:text-xl">
                  Start Your Free Trial
                  <svg className="ml-2 w-5 h-5 sm:w-6 sm:h-6 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </span>
                <div className="absolute inset-0 bg-gradient-to-r from-primary-600 to-primary-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div className="absolute inset-0 bg-white/20 blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </Link>
            </div>

            {/* Additional trust signals */}
            <div className={`mt-8 sm:mt-12 grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 text-white/80 transition-all duration-1000 ${
              isVisible ? 'animate-slide-up opacity-100' : 'opacity-0 translate-y-8'
            }`} style={{ animationDelay: '0.5s' }}>
              <div className="text-center">
                <div className="text-2xl sm:text-3xl font-bold text-white mb-1 sm:mb-2">14-Day</div>
                <div className="text-xs sm:text-sm">Free Trial</div>
              </div>
              <div className="text-center">
                <div className="text-2xl sm:text-3xl font-bold text-white mb-1 sm:mb-2">No Credit Card</div>
                <div className="text-xs sm:text-sm">Required</div>
              </div>
              <div className="text-center">
                <div className="text-2xl sm:text-3xl font-bold text-white mb-1 sm:mb-2">24/7</div>
                <div className="text-xs sm:text-sm">Support</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;