import { motion } from 'motion/react';
import { SectionTitle } from '../ui/SectionTitle';

const steps = [
  { num: "01", title: "Анализ задачи", desc: "Брифинг, изучение ваших текущих бизнес-процессов и проблем в поддержке/продажах VK." },
  { num: "02", title: "Проектирование сценариев", desc: "Разработка карты диалогов, схем автоматизации и определение tone of voice для бота." },
  { num: "03", title: "Подготовка базы знаний", desc: "Сбор ваших документов и регламентов, оцифровка и загрузка в векторную RAG-базу." },
  { num: "04", title: "Разработка и интеграции", desc: "Программирование агента, подключение к API VK, интеграция с вашей CRM и таблицами." },
  { num: "05", title: "Запуск и развитие", desc: "Тестирование, деплой на боевые серверы и обучение ИИ на реальных диалогах пользователей." }
];

export default function Process() {
  return (
    <section className="py-32 bg-white relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionTitle 
          badge="Процесс"
          title="Как мы работаем"
          subtitle="Прозрачный процесс от первой встречи до запуска готового продукта без срыва сроков."
        />

        <div className="relative mt-16 max-w-4xl mx-auto">
          {/* Vertical line for desktop */}
          <div className="hidden md:block absolute left-[50px] top-4 bottom-4 w-1 bg-slate-100"></div>

          <div className="flex flex-col gap-12">
            {steps.map((step, i) => (
              <motion.div 
                key={i}
                initial={{ opacity: 0, x: -20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="relative flex flex-col md:flex-row gap-6 md:gap-12 items-start"
              >
                <div className="relative z-10 shrink-0 w-24 h-24 rounded-[2rem] bg-slate-50 border-2 border-slate-100 flex items-center justify-center text-3xl font-black text-slate-300 shadow-sm">
                   {step.num}
                   {/* Connection dot */}
                   <div className="hidden md:block absolute -right-3 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-blue-500 border-4 border-white shadow-sm"></div>
                </div>
                
                <div className="pt-2 bg-transparent">
                  <h4 className="text-2xl font-bold text-slate-900 mb-3">{step.title}</h4>
                  <p className="text-lg text-slate-500 font-medium leading-relaxed">{step.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}