iiEasy/components/AboutUsSection.tsx

import React, { useEffect } from 'react';
import { SECTION_IDS } from '../constants';
import { SparklesIcon } from './icons'; // Using an icon for principles

const principlesData = [
  { 
    title: "Технологическое Лидерство", 
    content: "Мы не следуем трендам — мы стремимся их создавать, применяя самые передовые и эффективные подходы для решения задач." 
  },
  { 
    title: "Ответственность и Этика", 
    content: "Мы осознаем влияние ИИ и разрабатываем безопасные, прозрачные и надежные системы, которые приносят пользу обществу." 
  },
  { 
    title: "Фокус на Результате", 
    content: "Каждое наше решение, будь то сайт, приложение или сложная ИИ-модель, должно приносить измеримую пользу нашему партнеру. Мы ориентированы на ROI и практическую ценность." 
  },
  { 
    title: "Открытое Партнерство", 
    content: "Великие проекты создаются в синергии. Мы открыты к сотрудничеству с государственными структурами, корпорациями, университетами и технологическими стартапами." 
  },
  { 
    title: "Развитие Экосистемы", 
    content: "Наш вклад — это не только наши проекты, но и развитие ИИ-сообщества в Уфе и Башкортостане. Мы делимся знаниями, чтобы растить рынок вместе." 
  },
];

const approachData = [
    {
      title: "1. Прикладные ИИ-Решения",
      content: "Мы разрабатываем и внедряем кастомные ИИ-решения для бизнеса и государства. <strong>Для государства:</strong> улучшение обработки обращений граждан, предиктивная аналитика. <strong>Для бизнеса:</strong> оптимизация логистики, персонализация продаж, автоматизация документооборота."
    },
    {
      title: "2. Исследования и Разработки (R&D)",
      content: "Адаптируем и дообучаем передовые модели для локальных задач. Особый фокус — развитие языковых моделей для русского и башкирского языков, создание датасетов и сохранение культурного наследия."
    },
    {
      title: "3. Развитие Сообщества и Образование",
      content: "Мы стремимся стать центром притяжения для талантов в Уфе. Организуем митапы, воркшопы и образовательные программы, формируя кадровый резерв для ИИ-индустрии региона."
    }
];


const PrincipleItem: React.FC<{ title: string; children: React.ReactNode; index: number }> = ({ title, children, index }) => (
  <li 
    className="flex items-start scroll-animate"
    style={{ transitionDelay: `${index * 100}ms` }}
  >
    <div className="flex-shrink-0">
      <SparklesIcon className="w-6 h-6 text-slate-500 mt-1" />
    </div>
    <div className="ml-4">
      <h4 className="text-xl font-semibold font-quicksand text-slate-800">{title}</h4>
      <p className="mt-1 text-slate-600">{children}</p>
    </div>
  </li>
);


const AboutUsSection: React.FC = () => {
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('scroll-animate-visible');
            observer.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.1,
      }
    );

    const elements = document.querySelectorAll('.scroll-animate');
    elements.forEach((el) => observer.observe(el));

    return () => observer.disconnect();
  }, []);

  return (
    <section 
      id={SECTION_IDS.aboutUsPage} 
      className="py-16 md:py-24 bg-white min-h-screen overflow-x-hidden"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
        {/* Header */}
        <header className="mb-12 md:mb-16 text-center scroll-animate">
          <h1 className="font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900 leading-tight">
            iiEasy: Создаем Будущее с Помощью Искусственного Интеллекта.
          </h1>
          <p className="mt-4 text-2xl sm:text-3xl font-quicksand text-slate-600">Сделано в Уфе.</p>
        </header>

        {/* Intro */}
        <div className="prose prose-lg max-w-none font-inter text-slate-700 mb-12 md:mb-16 scroll-animate" style={{ transitionDelay: '100ms' }}>
          <p>Добро пожаловать в iiEasy — центр передовых разработок и исследований в области искусственного интеллекта. Мы — команда инженеров, исследователей и стратегов из Уфы, объединенных миссией по решению сложных задач для бизнеса и государства с помощью технологий. Мы не просто создаем сайты и приложения; мы проектируем интеллектуальные системы, которые оптимизируют процессы, улучшают принятие решений и открывают новые возможности для роста.</p>
          <p>Наша работа основана на синтезе фундаментальной экспертизы в программной инженерии и глубокого понимания современных ИИ-архитектур, включая большие языковые модели (LLM), компьютерное зрение (CV) и предиктивную аналитику.</p>
        </div>
        
        <figure className="my-12 md:my-16 scroll-animate" style={{ transitionDelay: '200ms' }}>
          <img src="https://picsum.photos/seed/iieasy-team-work/1200/800" alt="Команда iiEasy за работой в современном офисе в Уфе, обсуждает проект на фоне доски с диаграммами и кодом. Атмосфера сфокусированной совместной работы." className="rounded-lg shadow-xl aspect-video object-cover"/>
          <figcaption className="text-center text-sm text-slate-500 mt-3 italic">Команда iiEasy в Уфе: от идеи к реализации.</figcaption>
        </figure>

        {/* Mission */}
        <div className="my-16 md:my-24 text-center scroll-animate" style={{ transitionDelay: '100ms' }}>
          <h2 className="font-quicksand text-3xl sm:text-4xl font-bold text-slate-800">Наша Миссия</h2>
          <div className="prose prose-xl max-w-3xl mx-auto font-inter text-slate-700 mt-6">
            <p className="font-semibold text-slate-800">Сделать Башкортостан лидирующим регионом в области искусственного интеллекта.</p>
            <p>Мы стремимся к этой цели через решение практически значимых задач, создание продуктов мирового уровня и формирование сильного ИИ-сообщества. Мы верим, что технологии ИИ — это ключ к повышению эффективности экономики, улучшению качества жизни граждан и созданию устойчивого будущего для нашего региона.</p>
          </div>
        </div>

        {/* Approach */}
        <div className="my-16 md:my-24 scroll-animate" style={{ transitionDelay: '200ms' }}>
          <h2 className="font-quicksand text-3xl sm:text-4xl font-bold text-slate-800 mb-8 text-center">Наш Подход</h2>
          <div className="prose prose-lg max-w-none font-inter text-slate-700 mb-6">
            <p>Наша деятельность строится на трех ключевых направлениях:</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {approachData.map((item, index) => (
                <div key={item.title} className="bg-white p-6 rounded-lg scroll-animate" style={{ transitionDelay: `${index * 100}ms` }}>
                    <h3 className="font-quicksand text-xl font-semibold text-slate-800 mb-2">{item.title}</h3>
                    <p className="text-slate-600" dangerouslySetInnerHTML={{ __html: item.content }}></p>
                </div>
            ))}
          </div>
        </div>

        <figure className="my-12 md:my-16 scroll-animate" style={{ transitionDelay: '200ms' }}>
          <img src="https://picsum.photos/seed/iieasy-code/1200/800" alt="Крупный план экрана с кодом или дашбордом предиктивной аналитики. На заднем плане — сфокусированный взгляд разработчика, отражающийся в мониторе." className="rounded-lg shadow-xl aspect-video object-cover"/>
          <figcaption className="text-center text-sm text-slate-500 mt-3 italic">Глубокая техническая работа — основа наших решений.</figcaption>
        </figure>

        {/* Team */}
        <div className="my-16 md:my-24 scroll-animate" style={{ transitionDelay: '100ms' }}>
          <h2 className="font-quicksand text-3xl sm:text-4xl font-bold text-slate-800 mb-6 text-center">Наша Команда</h2>
          <div className="prose prose-lg max-w-none font-inter text-slate-700">
            <p>Команда iiEasy — это сплав системного мышления, инженерной прагматичности и стратегического видения. В наших рядах — высококвалифицированные специалисты по машинному обучению, NLP, CV, анализу данных и разработке высоконагруженных систем. Нас объединяет культура постоянного самосовершенствования, нацеленность на результат и презрение к поверхностным решениям. Мы ценим скорость, смысл и ответственность за конечный продукт.</p>
          </div>
        </div>

        <figure className="my-12 md:my-16 scroll-animate" style={{ transitionDelay: '200ms' }}>
          <img src="https://picsum.photos/seed/iieasy-team-group/1200/800" alt="Групповой снимок команды iiEasy. Разнообразные лица, уверенные и дружелюбные улыбки. Неформальная, но профессиональная обстановка." className="rounded-lg shadow-xl aspect-video object-cover"/>
          <figcaption className="text-center text-sm text-slate-500 mt-3 italic">Наша команда — наш главный актив.</figcaption>
        </figure>

        {/* Principles */}
        <div className="my-16 md:my-24 scroll-animate" style={{ transitionDelay: '100ms' }}>
          <h2 className="font-quicksand text-3xl sm:text-4xl font-bold text-slate-800 mb-10 text-center">Наши Принципы</h2>
          <ul className="space-y-8">
            {principlesData.map((p, index) => (
                <PrincipleItem key={p.title} title={p.title} index={index}>
                    {p.content}
                </PrincipleItem>
            ))}
          </ul>
        </div>
        
        <figure className="mt-12 md:my-16 scroll-animate" style={{ transitionDelay: '200ms' }}>
          <img src="https://picsum.photos/seed/iieasy-ufa-view/1200/800" alt="Панорамный вид на Уфу с акцентом на современные здания (например, Конгресс-холл Торатау), символизирующий связь компании с городом и ее нацеленность на будущее развитие региона." className="rounded-lg shadow-xl aspect-video object-cover"/>
           <figcaption className="text-center text-sm text-slate-500 mt-3 italic">Нацелены на будущее развитие нашего региона.</figcaption>
        </figure>
      </div>
    </section>
  );
};

export default AboutUsSection;