import React from 'react';
import { AccordionItem } from '../ui/AccordionItem';

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

export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
  <section className="relative bg-gradient-to-b from-banquise-blue-dark/15 to-banquise-blue-dark/20 backdrop-blur-lg py-24 px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border">
    <div className="max-w-4xl mx-auto">
      {/* Header */}
      <div className="text-center mb-20">
        <div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-8 rounded-full"></div>
        <h2 className="text-banquise-gray text-4xl mb-8 font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
          À Propos de La Banquise
        </h2>
        <p className="text-banquise-gray/90 text-xl max-w-3xl mx-auto leading-relaxed" style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)' }}>
          Une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
        </p>
      </div>

      {/* FAQ Section */}
      <div className="space-y-6">
        <h3 className="text-2xl font-bold text-banquise-gray mb-12 font-heading flex items-center justify-center">
          <span className="text-3xl mr-3">❓</span>
          Questions Fréquentes
        </h3>
        
        <AccordionItem
          title="🎯 Notre Mission"
          isOpen={openAccordion === "mission"}
          onToggle={() => toggleAccordion("mission")}
        >
          <div className="space-y-4">
            <p className="text-banquise-gray/90 leading-relaxed">
              Fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble.
            </p>
            <p className="text-banquise-gray/90 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-2 mt-4">
              <span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Collaboration</span>
              <span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Innovation</span>
              <span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Accessibilité</span>
            </div>
          </div>
        </AccordionItem>

        <AccordionItem
          title="🛠️ Nos Services"
          isOpen={openAccordion === "services"}
          onToggle={() => toggleAccordion("services")}
        >
          <div className="space-y-6">
            <div className="grid gap-4">
              <div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
                <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">📚</div>
                <div>
                  <h4 className="font-semibold text-banquise-gray mb-1">Wiki</h4>
                  <p className="text-banquise-gray/80 text-sm">Documentation collaborative et guides détaillés</p>
                </div>
              </div>
              
              <div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
                <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">🔧</div>
                <div>
                  <h4 className="font-semibold text-banquise-gray mb-1">Gitea</h4>
                  <p className="text-banquise-gray/80 text-sm">Gestion de versions Git auto-hébergée</p>
                </div>
              </div>
              
              <div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
                <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">🎮</div>
                <div>
                  <h4 className="font-semibold text-banquise-gray mb-1">Panel de Jeux</h4>
                  <p className="text-banquise-gray/80 text-sm">Interface de gestion pour serveurs de jeux</p>
                </div>
              </div>
            </div>
            <p className="text-banquise-gray/90 leading-relaxed mt-4">
              Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
            </p>
          </div>
        </AccordionItem>

        <AccordionItem
          title="🤝 Rejoindre la Communauté"
          isOpen={openAccordion === "community"}
          onToggle={() => toggleAccordion("community")}
        >
          <div className="space-y-6">
            <p className="text-banquise-gray/90 leading-relaxed">
              Rejoignez notre serveur Discord pour échanger avec la communauté, obtenir de l'aide et rester informé des dernières nouveautés.
            </p>
            
            <div className="bg-gradient-to-r from-banquise-blue-dark/20 to-banquise-blue/10 rounded-2xl p-6 border border-banquise-blue-lightest/30">
              <h4 className="font-semibold text-banquise-gray mb-3 flex items-center">
                <span className="text-xl mr-2">💬</span>
                Avantages de rejoindre
              </h4>
              <ul className="space-y-2 text-banquise-gray/80 text-sm mb-6">
                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Support technique prioritaire</li>
                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Accès aux bêta-tests</li>
                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Échanges avec les développeurs</li>
                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Annonces en avant-première</li>
              </ul>
              
              <a 
                href="https://discord.gg/labanquise"
                className="inline-flex items-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-3 px-6 rounded-xl no-underline font-bold transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:scale-105"
              >
                <span className="mr-3 text-lg">🚀</span>
                Rejoindre Discord
              </a>
            </div>
          </div>
        </AccordionItem>
      </div>
    </div>
  </section>
);