import React, { useState } from 'react';
import PageHeader from '../components/PageHeader';
import { groupProjectsByCategory } from '../constants';
import { MapPin, ChevronDown } from 'lucide-react';

const ProjectsPage: React.FC = () => {
  const categories = groupProjectsByCategory();
  const [openCategories, setOpenCategories] = useState<{ [key: string]: boolean }>({});

  const toggleCategory = (categoryName: string) => {
    setOpenCategories(prev => ({
      ...prev,
      [categoryName]: !prev[categoryName]
    }));
  };

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Наши проекты" 
        description="Галерея реализованных объектов, которыми мы гордимся. Более 10 лет успешной работы на рынке."
        image="/media/images/headers/header-projects.png"
      />

      <div className="container mx-auto px-6 py-20">
        <div className="space-y-4">
          {categories.map((category) => (
            <div key={category.name} className="border border-gray-200 rounded-xl overflow-hidden">
              {/* Заголовок категории */}
              <button
                onClick={() => toggleCategory(category.name)}
                className="w-full flex items-center justify-between p-6 bg-gray-50 hover:bg-gray-100 transition-colors"
              >
                <div className="flex items-center gap-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-lg">
                    {category.projects.length}
                  </div>
                  <h2 className="text-xl font-bold text-gray-900">{category.name}</h2>
                </div>
                <ChevronDown 
                  size={24} 
                  className={`text-brand-orange transition-transform duration-300 ${
                    openCategories[category.name] ? 'rotate-180' : ''
                  }`}
                />
              </button>

              {/* Список проектов */}
              <div
                className={`transition-all duration-300 ${
                  openCategories[category.name] 
                    ? 'max-h-[10000px] opacity-100' 
                    : 'max-h-0 opacity-0 overflow-hidden'
                }`}
              >
                <div className="p-4 space-y-3 bg-white">
                  {category.projects.map((project, index) => (
                    <div 
                      key={project.id} 
                      className="group cursor-pointer bg-gray-50 hover:bg-gray-100 rounded-lg p-5 transition-all duration-300 border border-gray-200 hover:border-brand-orange"
                    >
                      <div className="flex items-start gap-4">
                        <div className="flex-shrink-0 w-10 h-10 bg-white border-2 border-brand-orange text-brand-orange rounded-lg flex items-center justify-center font-bold text-sm">
                          {index + 1}
                        </div>
                        <div className="flex-1">
                          <h3 className="text-base font-bold text-gray-900 mb-2 group-hover:text-brand-orange transition-colors">
                            {project.title}
                          </h3>
                          <div className="flex items-start gap-2 text-gray-600 text-sm">
                            <MapPin size={14} className="mt-1 flex-shrink-0 text-brand-orange" />
                            <span className="leading-relaxed">{project.description}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProjectsPage;