import React from 'react';
import { SECTION_IDS, mockAcceleratorFeatures, ACCELERATOR_ABOUT_CONTENT } from '../constants'; // Import constants
import { AcceleratorFeature } from '../types'; // Import AcceleratorFeature type
import BoldIdeasCarousel from './BoldIdeasCarousel'; // Import the new component
// Icons for contact methods are now part of ACCELERATOR_ABOUT_CONTENT.contactMethods

interface FeatureCardProps {
  icon: React.ElementType;
  title: string;
  description: string;
}

const FeatureCard: React.FC<FeatureCardProps> = ({ icon: Icon, title, description }) => (
  <div className="bg-white p-6 rounded-xl">
    <div className="flex items-center text-slate-700 mb-4">
      <Icon className="w-8 h-8 mr-3" />
      <h3 className="font-quicksand text-xl font-semibold text-slate-800">{title}</h3>
    </div>
    <p className="font-inter text-slate-600 leading-relaxed">
      {description}
    </p>
  </div>
);

const BOLD_IDEAS_1 = [
  "Создать ИИ-систему для мониторинга экологии Башкортостана",
  "Разработать приложение для изучения башкирского языка с ИИ-помощником",
  "Автоматизировать документооборот в государственных учреждениях",
  "Платформа для предиктивной аналитики в сельском хозяйстве региона",
];

const BOLD_IDEAS_2 = [
  "ИИ-ассистент для туристов, путешествующих по Уфе и окрестностям",
  "Система компьютерного зрения для контроля качества на производстве",
  "Адаптивная образовательная платформа для школьников",
  "Разработать ИИ для оптимизации городской логистики в Уфе"
];


const AcceleratorAboutSection: React.FC = () => {
  return (
    <section 
      id={SECTION_IDS.acceleratorAboutPage} 
      className="py-16 md:py-24 bg-white min-h-screen"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <header className="mb-12 md:mb-16">
          <h1 className="font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900">
            {ACCELERATOR_ABOUT_CONTENT.title}
          </h1>
          <p className="mt-4 text-lg md:text-xl text-slate-700 max-w-3xl">
            {ACCELERATOR_ABOUT_CONTENT.subtitle}
          </p>
        </header>
        
        <div className="prose prose-lg max-w-none font-inter text-slate-700 mb-12">
          <h2 className="font-quicksand text-2xl sm:text-3xl font-semibold mt-0 mb-4 text-slate-800">{ACCELERATOR_ABOUT_CONTENT.whatWeOfferTitle}</h2>
          <p>
            {ACCELERATOR_ABOUT_CONTENT.whatWeOfferParagraph}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
          {mockAcceleratorFeatures.map((feature: AcceleratorFeature) => (
            <FeatureCard 
              key={feature.title} 
              icon={feature.icon} 
              title={feature.title} 
              description={feature.description} 
            />
          ))}
        </div>

        {/* New "Bold Ideas" Section */}
        <div className="my-16 md:my-20">
          <h2 className="text-center font-quicksand text-3xl sm:text-4xl font-semibold text-slate-700 mb-10">
            У вас есть смелые идеи?
          </h2>
          <div className="space-y-3">
            <BoldIdeasCarousel ideas={BOLD_IDEAS_1} direction="reverse" duration="80s" />
            <BoldIdeasCarousel ideas={BOLD_IDEAS_2} direction="normal" duration="90s" />
          </div>
        </div>

        <div className="text-center bg-white p-8 md:p-12 rounded-xl">
            <h2 className="text-3xl font-quicksand font-semibold text-slate-800 mb-6">
                {ACCELERATOR_ABOUT_CONTENT.ctaTitle}
            </h2>
            <p className="font-inter text-lg text-slate-600 mb-8 max-w-xl mx-auto">
                {ACCELERATOR_ABOUT_CONTENT.ctaSubtitle}
            </p>
            <div className="flex flex-col sm:flex-row flex-wrap justify-center items-center gap-4 sm:gap-6">
              {ACCELERATOR_ABOUT_CONTENT.contactMethods.map((method) => (
                <a 
                  key={method.id}
                  href={method.href}
                  target="_blank" 
                  rel="noopener noreferrer"
                  className={`group inline-flex items-center justify-center px-6 py-3 text-base font-medium text-slate-800 ${method.bgColor} ${method.hoverBgColor} rounded-full focus:outline-none focus:ring-2 ${method.ringColor} focus:ring-offset-2 transition-all duration-150 ease-in-out font-quicksand w-full sm:w-auto sm:min-w-[180px]`}
                  aria-label={method.ariaLabel}
                >
                  <method.icon className="w-5 h-5" />
                  <span className="ml-2.5">{method.name}</span>
                </a>
              ))}
            </div>
        </div>

      </div>
    </section>
  );
};

export default AcceleratorAboutSection;