import { Link } from 'react-router-dom';
import { Ship, FileText, MapPin, BarChart3, Clock, Globe, Shield, Zap } from 'lucide-react';

const HomePage: React.FC = () => {
  const stats = [
    { name: 'Expéditions traitées', value: '12,543', icon: Ship },
    { name: 'Devis générés', value: '8,921', icon: FileText },
    { name: 'Ports desservis', value: '450+', icon: Globe },
    { name: 'Clients satisfaits', value: '2,100+', icon: BarChart3 },
  ];

  const features = [
    {
      name: 'Devis instantané',
      description: 'Obtenez un devis en quelques secondes pour vos expéditions maritimes.',
      icon: Zap,
      href: '/quote',
    },
    {
      name: 'Suivi en temps réel',
      description: 'Suivez vos expéditions en temps réel avec notre système de tracking avancé.',
      icon: MapPin,
      href: '/tracking',
    },
    {
      name: 'Gestion simplifiée',
      description: 'Gérez toutes vos expéditions depuis un tableau de bord unifié.',
      icon: BarChart3,
      href: '/dashboard',
    },
    {
      name: 'Sécurité garantie',
      description: 'Vos données et expéditions sont protégées par nos systèmes sécurisés.',
      icon: Shield,
      href: '#',
    },
  ];

  return (
    <div className="space-y-12">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        <div className="maritime-gradient rounded-2xl px-8 py-16 text-center text-white">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            Votre plateforme maritime
            <span className="block text-blue-200">nouvelle génération</span>
          </h1>
          <p className="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto">
            Simplifiez vos expéditions maritimes avec notre solution SaaS complète : 
            devis instantané, suivi en temps réel et gestion centralisée.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              to="/quote"
              className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-4 rounded-lg font-semibold text-lg transition-colors inline-flex items-center justify-center"
            >
              <FileText className="h-5 w-5 mr-2" />
              Demander un devis
            </Link>
            <Link
              to="/tracking"
              className="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg transition-colors inline-flex items-center justify-center"
            >
              <MapPin className="h-5 w-5 mr-2" />
              Suivre une expédition
            </Link>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <div key={stat.name} className="maritime-card p-6 text-center">
              <Icon className="h-8 w-8 text-blue-600 mx-auto mb-4" />
              <div className="text-3xl font-bold text-gray-900 mb-2">{stat.value}</div>
              <div className="text-gray-600">{stat.name}</div>
            </div>
          );
        })}
      </div>

      {/* Features Section */}
      <div>
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">
            Pourquoi choisir Xpeditis ?
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Notre plateforme vous offre tous les outils nécessaires pour optimiser 
            vos opérations de transport maritime.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {features.map((feature) => {
            const Icon = feature.icon;
            return (
              <div key={feature.name} className="maritime-card p-8 hover:shadow-xl transition-shadow">
                <div className="flex items-start">
                  <div className="flex-shrink-0">
                    <Icon className="h-8 w-8 text-blue-600" />
                  </div>
                  <div className="ml-6">
                    <h3 className="text-xl font-semibold text-gray-900 mb-3">
                      {feature.name}
                    </h3>
                    <p className="text-gray-600 mb-4">
                      {feature.description}
                    </p>
                    {feature.href !== '#' && (
                      <Link
                        to={feature.href}
                        className="text-blue-600 hover:text-blue-700 font-medium inline-flex items-center"
                      >
                        En savoir plus
                        <svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                      </Link>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* CTA Section */}
      <div className="maritime-card p-8 text-center">
        <h2 className="text-2xl font-bold text-gray-900 mb-4">
          Prêt à optimiser vos expéditions ?
        </h2>
        <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
          Rejoignez plus de 2,100 entreprises qui font confiance à Xpeditis 
          pour leurs opérations de transport maritime.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link
            to="/quote"
            className="maritime-button"
          >
            Commencer maintenant
          </Link>
          <button className="border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-lg font-medium transition-colors">
            Planifier une démo
          </button>
        </div>
      </div>
    </div>
  );
};

export default HomePage;