import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { useAuth } from '@/contexts/AuthContext';
import { Link } from 'wouter';
import { 
  User,
  Building2,
  Bike,
  Mail,
  LogIn,
  UserPlus,
  Cross
} from 'lucide-react';

/**
 * MediFlash SOS+ Landing Page
 * Professional landing page for emergency medication delivery service
 * Built with React, TypeScript, and TailwindCSS
 */
export default function Landing() {
  const { isAuthenticated } = useAuth();
  
  // Stats data for the metrics section
  const stats = [
    { number: '+1000', label: 'Clients secourus' },
    { number: '20', label: 'Pharmacies partenaires' },
    { number: '5', label: 'Coursiers disponibles' },
    { number: '500 F CFA', label: 'Frais de service' }
  ];

  // How it works process steps
  const steps = [
    {
      icon: User,
      title: 'Patient',
      description: 'Remplissez le formulaire, indiquez le médicament dont vous avez besoin.'
    },
    {
      icon: Building2,
      title: 'Pharmacie', 
      description: 'Une pharmacie confirme la disponibilité et prépare le médicament.'
    },
    {
      icon: Bike,
      title: 'Coursier',
      description: 'Un coursier récupère et livre rapidement à votre porte.'
    }
  ];

  return (
    <div className="min-h-screen bg-white" data-testid="landing-page">
      {/* ===== HERO SECTION ===== */}
      <section className="bg-gradient-to-br from-blue-500 to-blue-600 text-white">
        <div className="container mx-auto px-4 py-16 lg:py-20">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Hero Content */}
            <div className="text-center lg:text-left space-y-8">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                Demandez un médicament en urgence
              </h1>
              <p className="text-xl lg:text-2xl text-blue-50 leading-relaxed">
                Pharmacies disponibles immédiatement, livraison rapide à domicile
              </p>
              
              {/* CTA Button */}
              <div className="pt-4">
                <Link href={isAuthenticated ? "/client" : "/register"}>
                  <Button 
                    size="lg" 
                    className="bg-blue-900 hover:bg-blue-800 text-white px-8 py-4 text-lg font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl" 
                    data-testid="hero-sos-button"
                  >
                    Demander un SOS
                  </Button>
                </Link>
              </div>
            </div>

            {/* Hero Illustration - Female Doctor + Phone */}
            <div className="flex justify-center lg:justify-end">
              <div className="relative">
                {/* Main illustration container */}
                <div className="w-80 h-80 lg:w-96 lg:h-96 bg-blue-400 rounded-3xl flex items-center justify-center relative overflow-hidden shadow-2xl">
                  {/* Female doctor representation */}
                  <div className="text-center z-10">
                    <div className="w-24 h-24 bg-white rounded-full mx-auto mb-4 flex items-center justify-center shadow-lg">
                      <User className="h-14 w-14 text-blue-600" />
                    </div>
                    <div className="text-white text-base font-medium bg-blue-600/30 px-4 py-2 rounded-full backdrop-blur-sm">
                      Médecin disponible
                    </div>
                  </div>
                  
                  {/* Phone screen mockup */}
                  <div className="absolute right-6 top-6 w-20 h-40 bg-gray-900 rounded-3xl p-1.5 shadow-2xl">
                    <div className="w-full h-full bg-white rounded-2xl flex items-center justify-center relative overflow-hidden">
                      <Cross className="h-8 w-8 text-blue-600" />
                      {/* Screen notch */}
                      <div className="absolute top-2 left-1/2 transform -translate-x-1/2 w-12 h-1 bg-gray-800 rounded-full"></div>
                    </div>
                  </div>
                  
                  {/* Background gradient */}
                  <div className="absolute inset-0 bg-gradient-to-br from-blue-300/40 via-transparent to-blue-700/40 rounded-3xl"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== STATS SECTION - Horizontal Cards ===== */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
            {stats.map((stat, index) => (
              <Card key={index} className="text-center p-6 hover:shadow-lg transition-shadow duration-200 border-0 shadow-md">
                <CardContent className="p-0 space-y-2">
                  <div className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">
                    {stat.number}
                  </div>
                  <div className="text-sm md:text-base text-gray-600 font-medium">
                    {stat.label}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ===== HOW IT WORKS SECTION - 3 Steps with Icons ===== */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          {/* Section Header */}
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
              Comment ça marche
            </h2>
          </div>

          {/* 3 Steps Grid */}
          <div className="grid md:grid-cols-3 gap-12 lg:gap-16">
            {steps.map((step, index) => (
              <div key={index} className="text-center group">
                {/* Step Icon */}
                <div className="w-20 h-20 md:w-24 md:h-24 bg-blue-100 rounded-2xl mx-auto mb-6 flex items-center justify-center group-hover:bg-blue-200 transition-colors duration-200">
                  <step.icon className="h-10 w-10 md:h-12 md:w-12 text-blue-600" />
                </div>
                
                {/* Step Title */}
                <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-4">
                  {step.title}
                </h3>
                
                {/* Step Description */}
                <p className="text-gray-600 leading-relaxed text-base md:text-lg">
                  {step.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== BONUS SECTION - Call to Action ===== */}
      {!isAuthenticated && (
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h3 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
                Obtenez encore plus avec un compte
              </h3>
              <p className="text-xl text-gray-600 mb-10 leading-relaxed">
                Suivez vos demandes, enregistrez vos informations et plus encore.
              </p>
              
              {/* CTA Button */}
              <Link href="/register">
                <Button 
                  size="lg" 
                  className="bg-blue-600 hover:bg-blue-700 text-white px-10 py-4 text-xl font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200" 
                  data-testid="cta-register"
                >
                  Créer un compte
                </Button>
              </Link>
            </div>
          </div>
        </section>
      )}

      {/* ===== FOOTER SECTION ===== */}
      <footer className="bg-white border-t border-gray-200 py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 gap-8 mb-8">
            
            {/* Liens rapides */}
            <div>
              <h4 className="text-lg font-semibold text-gray-900 mb-4">Liens rapides</h4>
              <div className="space-y-3">
                <Link href="/" className="block text-gray-600 hover:text-blue-600 transition-colors duration-200 font-medium">
                  Accueil
                </Link>
                <Link href="/tracking" className="block text-gray-600 hover:text-blue-600 transition-colors duration-200 font-medium">
                  Suivi de commande
                </Link>
                <Link href="/register" className="block text-gray-600 hover:text-blue-600 transition-colors duration-200 font-medium">
                  Créer un compte
                </Link>
              </div>
            </div>
            
            {/* Contact */}
            <div>
              <h4 className="text-lg font-semibold text-gray-900 mb-4">Contact</h4>
              <div className="flex items-center gap-3 text-gray-600">
                <Mail className="h-5 w-5 text-blue-600" />
                <a href="mailto:info@mediflash.com" className="hover:text-blue-600 transition-colors duration-200 font-medium">
                  info@mediflash.com
                </a>
              </div>
            </div>
          </div>
          
          {/* Copyright */}
          <div className="border-t border-gray-200 pt-8 text-center">
            <p className="text-gray-500">
              &copy; 2024 MediFlash. Tous droits réservés.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}
