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

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

export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
  <section id="about" className="relative py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 w-full box-border">
    <div className="max-w-4xl mx-auto">
      {/* Header */}
      <div className="text-center mb-12 sm:mb-16 md:mb-20">
        <h2 className={`${commonStyles.text.headingXl} mb-6 sm:mb-8 px-2`} style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
          À Propos de La Banquise
        </h2>
        <p className={`${commonStyles.text.muted} text-lg sm:text-xl max-w-3xl mx-auto px-2`} 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-4 sm:space-y-6">
        <h3 className={`${commonStyles.text.headingLg} mb-8 sm:mb-12 flex items-center justify-center px-2`}>
          <span className="text-2xl sm:text-3xl mr-3">❓</span>
          <span className="text-center">Questions Fréquentes</span>
        </h3>
        
        <AccordionItem
          title="🎯 Notre Mission"
          isOpen={openAccordion === "mission"}
          onToggle={() => toggleAccordion("mission")}
        >
          <div className="space-y-4">
            <p className={commonStyles.text.muted}>
              Former les étudiants au déploiment et a la gestion d'une infra, et de maitriser 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={commonStyles.text.muted}>
              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 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} 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 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} 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 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} 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 className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>🐧</div>
                <div>
                  <h4 className="font-semibold text-banquise-gray mb-1">Pelican</h4>
                  <p className="text-banquise-gray/80 text-sm">Générateur de sites statiques</p>
                </div>
              </div>

              <div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>🏢</div>
                <div>
                  <h4 className="font-semibold text-banquise-gray mb-1">Intranet</h4>
                  <p className="text-banquise-gray/80 text-sm">Espace privé de l'association</p>
                </div>
              </div>

              <div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>📧</div>
                <div>
                  <h4 className="font-semibold text-banquise-gray mb-1">Webmail</h4>
                  <p className="text-banquise-gray/80 text-sm">Service de messagerie électronique</p>
                </div>
              </div>

              <div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>☁️</div>
                <div>
                  <h4 className="font-semibold text-banquise-gray mb-1">OpenCloud</h4>
                  <p className="text-banquise-gray/80 text-sm">Plateforme cloud collaborative</p>
                </div>
              </div>
            </div>
            <p className={`${commonStyles.text.muted} 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 l'association"
          isOpen={openAccordion === "community"}
          onToggle={() => toggleAccordion("community")}
        >
          <div className="space-y-6">
            <p className={commonStyles.text.muted}>
              Rejoignez notre serveur Discord pour rejoindre l'asso, échanger avec nous, obtenir de l'aide et rester informé des dernières nouveautés !
            </p>
            
            <div className={`${commonStyles.cards.base} bg-gradient-to-r from-banquise-blue-dark/20 to-banquise-blue/10 rounded-2xl p-6`}>
              <h4 className="font-semibold text-banquise-gray mb-3 flex items-center">
                <span className="text-xl mr-2">💬</span>
                Comment rejoindre l'asso ?
              </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> Creez un ticket banquise</li>
                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Donnez votre login EPITA ou expliquez votre situation</li>
                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Un moderateur validera votre demande et vous donnera acces aux salons discord de l'asso !</li>
              </ul>
              
              <a 
                href={URLS.social.discord}
                className={`${commonStyles.buttons.primary} ${commonStyles.gradients.primary} py-3 px-6 rounded-xl`}
              >
                <span className="mr-3 text-lg">🚀</span>
                Rejoindre Discord
              </a>
            </div>
          </div>
        </AccordionItem>
      </div>
    </div>
  </section>
);