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

const cases = [
  {
    id: "edu",
    title: "Онлайн-школы",
    desc: "Бот выполняет роль первой линии поддержки учеников.",
    details: "Мгновенно отвечает на вопросы по расписанию, выдает доступы к GetCourse, проверяет простые домашние задания через промпты и прогревает новые лиды бесплатными материалами."
  },
  {
    id: "med",
    title: "Клиники и Салоны",
    desc: "Автоматизация записи и разгрузка регистратуры.",
    details: "Распознает симптомы или запросы пациента, консультирует по наличию врачей и ценам, интегрируется с YClients/Medialog для создания прямых записей в календарь."
  },
  {
    id: "ecom",
    title: "E-commerce & Ритейл",
    desc: "Умный каталог и поддержка заказов.",
    details: "Поиск товаров из прайс-листа через RAG, оформление корзины внутри чата VK, проверка статуса доставки через API курьерских служб и кросс-сейл подходящих товаров."
  },
  {
    id: "b2b",
    title: "B2B Сервисы",
    desc: "Глубокая квалификация и сбор брифов.",
    details: "Бот не тратит время сейлзов на нецелевые контакты. Он собирает бюджет, потребности, ИНН компании, формирует сводку и пушит задачу в AmoCRM на нужного менеджера."
  }
];

export default function UseCases() {
  const [active, setActive] = useState(cases[0].id);

  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="Наш AI-агент адаптируется под тональность (Tone of Voice) вашего бренда и специфику бизнес-процессов отрасли."
        />

        <div className="flex flex-col lg:flex-row gap-12">
          <div className="lg:w-1/3 flex flex-col gap-4">
            {cases.map((c) => (
              <button
                key={c.id}
                onClick={() => setActive(c.id)}
                className={`text-left px-8 py-6 rounded-[2rem] border-2 transition-all duration-300 ${active === c.id ? 'border-blue-600 bg-blue-50/50 shadow-lg shadow-blue-900/5' : 'border-slate-100 bg-white hover:border-slate-200'}`}
              >
                <h4 className={`text-xl font-bold mb-2 ${active === c.id ? 'text-blue-900' : 'text-slate-900'}`}>{c.title}</h4>
                <p className={`text-sm font-medium ${active === c.id ? 'text-blue-700' : 'text-slate-500'}`}>{c.desc}</p>
              </button>
            ))}
          </div>

          <div className="lg:w-2/3 bg-slate-900 rounded-[3rem] p-10 md:p-16 flex flex-col justify-center min-h-[400px] relative overflow-hidden">
            {/* Background elements */}
            <div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
            
            <AnimatePresence mode="wait">
              {cases.map((c) => (
                c.id === active && (
                  <motion.div
                    key={c.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.3 }}
                    className="relative z-10"
                  >
                    <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-500/20 text-blue-300 text-sm font-bold tracking-widest uppercase mb-8 border border-blue-500/30">
                      UseCase: {c.id}
                    </div>
                    <h3 className="text-3xl md:text-5xl font-black text-white mb-6 leading-tight tracking-tight">
                      {c.title}
                    </h3>
                    <p className="text-xl text-slate-300 leading-relaxed font-medium">
                      {c.details}
                    </p>
                  </motion.div>
                )
              ))}
            </AnimatePresence>
          </div>
        </div>
      </div>
    </section>
  );
}