import React from 'react';

// Define interface directly in the component file
interface Service {
  name: string;
  url: string;
  image: string;
  description: string;
  features: string[];
  icon: string;
}

interface PopupProps {
  service: Service;
  onClose: () => void;
}

export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
  <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-banquise-blue-dark rounded-3xl max-w-5xl w-full max-h-[90vh] overflow-y-auto shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20">
      
      {/* Header */}
      <div className="relative bg-gradient-to-r from-banquise-blue to-banquise-blue-light p-6 sm:p-8 text-white">
        <button
          onClick={onClose}
          className="absolute top-4 sm:top-6 right-4 sm:right-6 bg-white/20 hover:bg-white/30 border-0 text-xl sm:text-2xl cursor-pointer text-white flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-200 backdrop-blur-sm hover:scale-110 active:scale-95"
        >
          ×
        </button>
        
        <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-5xl mt-0 mb-3 lg:mb-4 leading-tight">
              {service.name}
            </h2>
            <div className="text-white/90 text-base sm:text-lg lg:text-xl font-medium">
              Service d'hébergement professionnel
            </div>
            <div className="mt-4 lg:mt-6 flex flex-wrap gap-2">
              <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 - Layout simplifié */}
      <div className="p-6 sm:p-8">
        {/* Description */}
        <h3 className="text-lg sm:text-xl lg:text-2xl font-bold text-banquise-blue-dark mb-4 lg:mb-6 font-heading flex items-center">
          <span className="text-xl sm:text-2xl lg:text-3xl mr-3">📋</span>
          Description détaillée
        </h3>
        <div className="bg-gradient-to-br from-banquise-blue/5 to-banquise-blue-light/5 rounded-2xl p-4 lg:p-6 border border-banquise-blue/10 mb-8">
          <p className="text-banquise-blue-dark/80 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/60 rounded-xl border border-banquise-blue/10">
              <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">
                ✓
              </div>
              <div>
                <div className="font-semibold text-banquise-blue-dark text-sm">99.9% Uptime</div>
                <div className="text-banquise-blue-dark/70 text-xs">Disponibilité garantie</div>
              </div>
            </div>
            <div className="flex items-center p-3 bg-white/60 rounded-xl border border-banquise-blue/10">
              <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">
                🔒
              </div>
              <div>
                <div className="font-semibold text-banquise-blue-dark text-sm">Sécurisé</div>
                <div className="text-banquise-blue-dark/70 text-xs">SSL & Backups</div>
              </div>
            </div>
          </div>
        </div>

        {/* Fonctionnalités en colonnes */}
        <h3 className="text-lg sm:text-xl lg:text-2xl font-bold text-banquise-blue-dark mb-4 lg:mb-6 font-heading flex items-center">
          <span className="text-xl sm:text-2xl lg:text-3xl mr-3">⚡</span>
          Fonctionnalités principales
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
          {service.features.map((feature, index) => (
            <div key={index} className="flex items-start bg-banquise-blue/5 rounded-xl p-4 border border-banquise-blue/10 hover:bg-banquise-blue/10 transition-colors duration-200 group">
              <div className="w-6 h-6 bg-gradient-to-br from-banquise-blue to-banquise-blue-light 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-banquise-blue-dark/90 font-medium text-sm lg:text-base leading-relaxed">{feature}</span>
            </div>
          ))}
        </div>

        {/* Call to action simplifié */}
        <div className="pt-6 lg:pt-8 border-t border-banquise-blue/10">
          <a
            href={service.url}
            target="_blank"
            rel="noopener noreferrer"
            className="w-full inline-flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light 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-banquise-blue-light text-base lg:text-lg hover:scale-[1.02] active:scale-95"
          >
            <span className="mr-3 text-xl lg:text-2xl">🚀</span>
            <span>Accéder à {service.name}</span>
          </a>
          
          <p className="text-center text-sm text-banquise-blue-dark/60 mt-4">
            Besoin d'aide ? Rejoignez notre <a href="https://discord.gg/labanquise" className="text-banquise-blue hover:text-banquise-blue-dark transition-colors duration-200 font-medium">Discord</a> pour obtenir du support
          </p>
        </div>
      </div>

      {/* Decorative elements - améliorés pour desktop */}
      <div className="absolute top-0 right-0 w-24 h-24 lg:w-40 lg:h-40 bg-banquise-blue-lightest/10 rounded-full -translate-y-12 translate-x-12 lg:-translate-y-20 lg:translate-x-20 hidden sm:block"></div>
      <div className="absolute bottom-0 left-0 w-16 h-16 lg:w-32 lg:h-32 bg-banquise-blue/5 rounded-full translate-y-8 -translate-x-8 lg:translate-y-16 lg:-translate-x-16 hidden sm:block"></div>
      <div className="absolute top-1/2 left-0 w-20 h-20 lg:w-28 lg:h-28 bg-banquise-blue-light/5 rounded-full -translate-x-10 lg:-translate-x-14 hidden lg:block"></div>
    </div>
  </div>
);