website-front/banquise-website/components/ui/Popup.tsx

import React, { useEffect } from 'react';
import { URLS } from '@/lib/config/constants';
import type { Service } from '@/types/service';
import type { Translation } from '@/types/i18n';
import { ClipboardList, Zap, Check, Lock, Rocket } from 'lucide-react';

interface PopupProps {
  service: Service;
  onClose: () => void;
  translations: Translation['common'];
}

export const Popup: React.FC<PopupProps> = ({ service, onClose, translations }) => {
  // Empêcher le scroll du body quand la popup est ouverte
  useEffect(() => {
    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = 'unset';
    };
  }, []);

  return (
    <div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn">
      <div className="bg-white text-gray-800 rounded-3xl max-w-4xl w-full max-h-[90vh] shadow-2xl relative animate-slideUp border border-gray-200 overflow-hidden">

        {/* Bouton de fermeture fixe au-dessus du contenu */}
        <div className="absolute top-4 right-4 z-50">
          <button
            onClick={onClose}
            className="bg-white/90 hover:bg-white border border-gray-300 text-xl cursor-pointer text-gray-700 flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-200 hover:scale-110 active:scale-95 shadow-lg backdrop-blur-sm"
            aria-label={translations.close}
          >
            ×
          </button>
        </div>

        {/* Contenu avec scroll vertical uniquement */}
        <div className="overflow-y-auto overflow-x-hidden max-h-[90vh] popup-content">
          {/* Header */}
          <div className="relative bg-gradient-to-r from-blue-600 to-blue-500 p-6 sm:p-8 text-white pr-16 sm:pr-20">
            <div className="flex flex-col lg:flex-row items-center lg:items-start mb-4">
              <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-white/20 rounded-3xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl mb-4 lg:mb-0 lg:mr-8 backdrop-blur-sm">
                {service.icon}
              </div>
              <div className="text-center lg:text-left flex-1">
                <h2 className="font-heading text-2xl sm:text-3xl lg:text-4xl mt-0 mb-3 lg:mb-4 leading-tight font-bold text-white">
                  {service.name}
                </h2>
                <div className="text-white/90 text-base sm:text-lg lg:text-xl font-medium">
                  Service d&apos;hébergement professionnel
                </div>
                <div className="mt-4 lg:mt-6 flex flex-wrap gap-2 justify-center lg:justify-start">
                  <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Haute disponibilité</span>
                  <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Open Source</span>
                  <span className="bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Communautaire</span>
                </div>
              </div>
            </div>
          </div>

          {/* Content - Forcer le fond blanc */}
          <div className="p-6 sm:p-8 bg-white">
            {/* Description */}
            <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-gray-800 font-heading font-bold flex items-center">
              <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
                <ClipboardList className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2} />
              </div>
              Description détaillée
            </h3>
            <div className="bg-gradient-to-br from-blue-50 to-blue-100/50 rounded-2xl p-4 lg:p-6 border border-blue-200 mb-8">
              <p className="text-gray-700 leading-relaxed text-base sm:text-lg lg:text-xl mb-4">
                {service.description}
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
                <div className="flex items-center p-3 bg-white/80 rounded-xl border border-gray-200 shadow-sm">
                  <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center text-white mr-3">
                    <Check className="w-5 h-5" strokeWidth={2} />
                  </div>
                  <div>
                    <div className="font-semibold text-gray-800 text-sm">99.9% Uptime</div>
                    <div className="text-gray-600 text-xs">Disponibilité garantie</div>
                  </div>
                </div>
                <div className="flex items-center p-3 bg-white/80 rounded-xl border border-gray-200 shadow-sm">
                  <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
                    <Lock className="w-5 h-5" strokeWidth={2} />
                  </div>
                  <div>
                    <div className="font-semibold text-gray-800 text-sm">Sécurisé</div>
                    <div className="text-gray-600 text-xs">SSL & Backups</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Fonctionnalités */}
            <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-gray-800 font-heading font-bold flex items-center">
              <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
                <Zap className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2} />
              </div>
              {translations.discoverFeatures}
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
              {service.features.map((feature, index) => (
                <div key={index} className="flex items-start bg-blue-50 rounded-xl p-4 border border-blue-200 hover:bg-blue-100 transition-colors duration-200 group">
                  <div className="w-6 h-6 bg-gradient-to-br from-blue-600 to-blue-500 rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform duration-200">
                    <div className="w-2 h-2 bg-white rounded-full"></div>
                  </div>
                  <span className="text-gray-700 font-medium text-sm lg:text-base leading-relaxed">{feature}</span>
                </div>
              ))}
            </div>

            {/* Call to action */}
            <div className="pt-6 lg:pt-8 border-t border-gray-200">
              <a
                href={service.url}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full inline-flex items-center justify-center bg-gradient-to-r from-blue-600 to-blue-500 text-white border-0 py-4 px-6 sm:px-8 rounded-2xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 text-base lg:text-lg hover:scale-[1.02] active:scale-95"
              >
                <Rocket className="w-6 h-6 lg:w-7 lg:h-7 mr-3" strokeWidth={2} />
                <span>Accéder à {service.name}</span>
              </a>

              <p className="text-center text-sm text-gray-500 mt-4">
                Besoin d&apos;aide ? Rejoignez notre <a href={URLS.social.discord} className="text-blue-600 hover:text-blue-700 transition-colors duration-200 font-medium">Discord</a> pour obtenir du support
              </p>
            </div>
          </div>
        </div>

        {/* Decorative elements */}
        <div className="absolute top-0 right-0 w-16 h-16 sm:w-24 sm:h-24 lg:w-32 lg:h-32 bg-blue-100/30 rounded-full -translate-y-8 translate-x-8 sm:-translate-y-12 sm:translate-x-12 lg:-translate-y-16 lg:translate-x-16 hidden sm:block pointer-events-none"></div>
        <div className="absolute bottom-0 left-0 w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 bg-blue-50 rounded-full translate-y-6 -translate-x-6 sm:translate-y-8 sm:-translate-x-8 lg:translate-y-12 lg:-translate-x-12 hidden sm:block pointer-events-none"></div>
      </div>
    </div>
  );
};