import React from 'react';
import { AccordionItem } from '@/components/ui/AccordionItem';
import { SectionHeader } from '@/components/ui/SectionHeader';
import { ServiceCardAbout } from '@/components/ui/ServiceCardAbout';
import { AccordionTitle } from '@/components/ui/AccordionTitle';
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';
import { cn, commonClasses } from '@/lib/utils';

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 - factorisation */}
        <SectionHeader 
          title={t.about.title}
          subtitle={t.about.subtitle}
        />

        {/* 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={<AccordionTitle icon={Target} title={t.about.mission.title} />}
            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={<AccordionTitle icon={Settings} title={t.about.services.title} />}
            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 - factorisation */}
                <ServiceCardAbout
                  icon={BookOpen}
                  title={t.about.services.wiki.title}
                  description={t.about.services.wiki.description}
                />
                
                <ServiceCardAbout
                  icon={GitBranch}
                  title={t.about.services.gitea.title}
                  description={t.about.services.gitea.description}
                />
                
                <ServiceCardAbout
                  icon={Gamepad2}
                  title={t.about.services.panel.title}
                  description={t.about.services.panel.description}
                />

                <ServiceCardAbout
                  icon={Bird}
                  title={t.about.services.pelican.title}
                  description={t.about.services.pelican.description}
                />

                <ServiceCardAbout
                  icon={Building}
                  title={t.about.services.intranet.title}
                  description={t.about.services.intranet.description}
                />

                <ServiceCardAbout
                  icon={Mail}
                  title={t.about.services.mails.title}
                  description={t.about.services.mails.description}
                />

                <ServiceCardAbout
                  icon={Cloud}
                  title={t.about.services.opencloud.title}
                  description={t.about.services.opencloud.description}
                  colSpan={true}
                />
              </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={<AccordionTitle icon={Users} title={t.about.community.title} />}
            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={cn(
                    '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',
                    commonClasses.transition,
                    commonClasses.hoverScale,
                    '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>
  );
};