import React from 'react';
import { AccordionItem } from '@/components/ui/AccordionItem';
import { URLS } from '@/lib/config/constants';

interface AboutSectionProps {
  openAccordion: string | null;
  toggleAccordion: (title: string) => void;
}

export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
  <section id="about" className="py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-white">
    <div className="max-w-6xl mx-auto">
      {/* Header de section moderne */}
      <div className="text-center mb-20">
        {/* Séparateur visuel */}
        <div className="w-24 h-1.5 bg-gradient-to-r from-blue-600 to-blue-400 rounded-full mx-auto mb-8" />
        
        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
          À Propos de La Banquise
        </h2>
        <p className="text-lg md:text-xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium">
          Une communauté passionnée qui propose des services d&apos;hébergement et des outils collaboratifs pour les développeurs et les gamers.
        </p>
      </div>

      {/* Section FAQ avec design moderne */}
      <div className="space-y-8">
        <h3 className="text-2xl md:text-3xl font-bold text-gray-800 mb-12 flex items-center justify-center">
          <span className="text-3xl mr-4 bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">❓</span>
          <span>Questions Fréquentes</span>
        </h3>
        
        <AccordionItem
          title="🎯 Notre Mission"
          isOpen={openAccordion === "mission"}
          onToggle={() => toggleAccordion("mission")}
        >
          <div className="space-y-6 p-6 bg-gray-50 rounded-xl">
            <p className="text-gray-700 leading-relaxed">
              Former les étudiants au déploiement et à la gestion d&apos;une infrastructure, et de maîtriser des technologies entreprise grade.
              Cela permet de fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble !
            </p>
            <p className="text-gray-700 leading-relaxed">
              Nous croyons en la puissance de la collaboration et mettons à disposition des outils modernes pour faciliter le travail en équipe.
            </p>
            <div className="flex flex-wrap gap-3 mt-6">
              <span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">Collaboration</span>
              <span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">Innovation</span>
              <span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">Accessibilité</span>
            </div>
          </div>
        </AccordionItem>

        <AccordionItem
          title="🛠️ Nos Services"
          isOpen={openAccordion === "services"}
          onToggle={() => toggleAccordion("services")}
        >
          <div className="space-y-6 p-6 bg-gray-50 rounded-xl">
            <div className="grid gap-6 md:grid-cols-2">
              {/* Cartes de services avec design moderne */}
              <div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl font-bold shadow-lg">📚</div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">Wiki</h4>
                  <p className="text-gray-600">Documentation collaborative et guides détaillés</p>
                </div>
              </div>
              
              <div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl font-bold shadow-lg">🔧</div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">Gitea</h4>
                  <p className="text-gray-600">Gestion de versions Git auto-hébergée</p>
                </div>
              </div>
              
              <div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl font-bold shadow-lg">🎮</div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">Panel de Jeux</h4>
                  <p className="text-gray-600">Interface de gestion pour serveurs de jeux</p>
                </div>
              </div>

              <div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl font-bold shadow-lg">🐧</div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">Pelican</h4>
                  <p className="text-gray-600">Générateur de sites statiques</p>
                </div>
              </div>

              <div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl font-bold shadow-lg">🏢</div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">Intranet</h4>
                  <p className="text-gray-600">Espace privé de l&apos;association</p>
                </div>
              </div>

              <div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl font-bold shadow-lg">📧</div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">Webmail</h4>
                  <p className="text-gray-600">Service de messagerie électronique</p>
                </div>
              </div>

              <div className="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-lg border border-gray-200 hover:shadow-xl transition-all duration-300 md:col-span-2">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl font-bold shadow-lg">☁️</div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">OpenCloud</h4>
                  <p className="text-gray-600">Plateforme cloud collaborative pour tous vos besoins</p>
                </div>
              </div>
            </div>
            <p className="text-gray-600 mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
              <strong className="text-blue-800">💡 Tous nos services</strong> sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
            </p>
          </div>
        </AccordionItem>

        <AccordionItem
          title="🤝 Rejoindre l'association"
          isOpen={openAccordion === "community"}
          onToggle={() => toggleAccordion("community")}
        >
          <div className="space-y-8 p-6 bg-gray-50 rounded-xl">
            <p className="text-gray-700 text-lg leading-relaxed">
              Rejoignez notre serveur Discord pour rejoindre l&apos;asso, échanger avec nous, obtenir de l&apos;aide et rester informé des dernières nouveautés !
            </p>
            
            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-8">
              <h4 className="font-bold text-gray-900 mb-6 flex items-center text-xl">
                <span className="text-2xl mr-3">💬</span>
                Comment rejoindre l&apos;asso ?
              </h4>
              <ul className="space-y-4 text-gray-700 mb-8">
                <li className="flex items-center text-lg">
                  <span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
                  Créez un ticket banquise
                </li>
                <li className="flex items-center text-lg">
                  <span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
                  Donnez votre login EPITA ou expliquez votre situation
                </li>
                <li className="flex items-center text-lg">
                  <span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
                  Un modérateur validera votre demande et vous donnera accès aux salons discord de l&apos;asso !
                </li>
              </ul>
              
              <a 
                href={URLS.social.discord}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-gradient-to-r from-blue-600 to-blue-500 rounded-xl shadow-xl hover:shadow-2xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 transform hover:scale-105 border-2 border-blue-600/20"
              >
                <span className="mr-3 text-xl">🚀</span>
                Rejoindre Discord
              </a>
            </div>
          </div>
        </AccordionItem>
      </div>
    </div>
  </section>
);