import React from 'react';
import { AccordionItem } from '@/components/ui/AccordionItem';
import { URLS } from '@/lib/config/constants';
import { Target, Settings, HelpCircle, Users, MessageCircle, Rocket, BookOpen, GitBranch, Gamepad2, Bird, Building, Mail, Cloud } from 'lucide-react';
import { useTranslation } from '@/lib/hooks/useTranslation';

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

export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => {
  const { t } = useTranslation();
  
  return (
    <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">
            {t.about.title}
          </h2>
          <p className="text-lg md:text-xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium">
            {t.about.subtitle}
          </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">
            <div className="mr-4 w-10 h-10 bg-gradient-to-r from-blue-600 to-blue-400 rounded-xl flex items-center justify-center">
              <HelpCircle className="w-6 h-6 text-white" strokeWidth={2} />
            </div>
            <span>{t.about.faqTitle}</span>
          </h3>
          
          <AccordionItem
            title={
              <div className="flex items-center">
                <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
                  <Target className="w-5 h-5" strokeWidth={2} />
                </div>
                {t.about.mission.title}
              </div>
            }
            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">
                {t.about.mission.description1}
              </p>
              <p className="text-gray-700 leading-relaxed">
                {t.about.mission.description2}
              </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">{t.about.mission.tags.collaboration}</span>
                <span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">{t.about.mission.tags.innovation}</span>
                <span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold border border-blue-200">{t.about.mission.tags.accessibility}</span>
              </div>
            </div>
          </AccordionItem>

        <AccordionItem
          title={
            <div className="flex items-center">
              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
                <Settings className="w-5 h-5" strokeWidth={2} />
              </div>
              {t.about.services.title}
            </div>
          }
          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 shadow-lg">
                  <BookOpen className="w-6 h-6" strokeWidth={2} />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">{t.about.services.wiki.title}</h4>
                  <p className="text-gray-600">{t.about.services.wiki.description}</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 shadow-lg">
                  <GitBranch className="w-6 h-6" strokeWidth={2} />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">{t.about.services.gitea.title}</h4>
                  <p className="text-gray-600">{t.about.services.gitea.description}</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 shadow-lg">
                  <Gamepad2 className="w-6 h-6" strokeWidth={2} />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">{t.about.services.panel.title}</h4>
                  <p className="text-gray-600">{t.about.services.panel.description}</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 shadow-lg">
                  <Bird className="w-6 h-6" strokeWidth={2} />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">{t.about.services.pelican.title}</h4>
                  <p className="text-gray-600">{t.about.services.pelican.description}</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 shadow-lg">
                  <Building className="w-6 h-6" strokeWidth={2} />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">{t.about.services.intranet.title}</h4>
                  <p className="text-gray-600">{t.about.services.intranet.description}</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 shadow-lg">
                  <Mail className="w-6 h-6" strokeWidth={2} />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">{t.about.services.mails.title}</h4>
                  <p className="text-gray-600">{t.about.services.mails.description}</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 shadow-lg">
                  <Cloud className="w-6 h-6" strokeWidth={2} />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900 mb-2 text-lg">{t.about.services.opencloud.title}</h4>
                  <p className="text-gray-600">{t.about.services.opencloud.description}</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 flex items-center">
                <Settings className="w-5 h-5 mr-2" strokeWidth={2} />
                {t.about.services.title}
              </strong> {t.about.services.note}
            </p>
          </div>
        </AccordionItem>

        <AccordionItem
          title={
            <div className="flex items-center">
              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
                <Users className="w-5 h-5" strokeWidth={2} />
              </div>
              {t.about.community.title}
            </div>
          }
          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">
              {t.about.community.description}
            </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">
                <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
                  <MessageCircle className="w-5 h-5" strokeWidth={2} />
                </div>
                {t.about.community.howToJoin}
              </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>
                  {t.about.community.steps.step1}
                </li>
                <li className="flex items-center text-lg">
                  <span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
                  {t.about.community.steps.step2}
                </li>
                <li className="flex items-center text-lg">
                  <span className="w-2 h-2 bg-blue-500 rounded-full mr-4"></span>
                  {t.about.community.steps.step3}
                </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"
              >
                <Rocket className="w-6 h-6 mr-3" strokeWidth={2} />
                {t.about.community.joinDiscord}
              </a>
            </div>
          </div>
        </AccordionItem>
      </div>
    </div>
  </section>
  );
};