import SEO from '../components/SEO';
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ArrowRight, TrendingUp, Users, Clock, Check, Star, MapPin, Building2 } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

// Cases reais baseados nos testemunhos
const casesReais = [
  {
    id: 1,
    cliente: 'Moraes & Moraes Advogados',
    responsavel: 'Edilson Fernando de Moraes',
    segmento: 'Advocacia',
    cidade: 'São Paulo',
    icone: '⚖️',
    servico: 'TI Gerenciada + Consultoria',
    desafio: 'Computadores lentos e problemas constantes faziam cogitar a troca de toda a frota, com custo estimado de R$ 15.000.',
    solucao: 'Diagnóstico completo, otimização dos equipamentos existentes e implementação de políticas de manutenção preventiva.',
    resultados: [
      'Economia de mais de R$ 15.000',
      'Máquinas recuperadas e otimizadas',
      'Profissionalismo ímpar no atendimento',
    ],
    quote: 'Evitamos um investimento de mais de R$ 15.000 com a solução aplicada.',
    destaque: 'Economia de R$ 15.000',
  },
  {
    id: 2,
    cliente: 'Divas Car',
    responsavel: 'Joelma Rodrigues',
    segmento: 'Centro Automotivo',
    cidade: 'Guarulhos',
    icone: '🚘',
    servico: 'Infraestrutura + Backup em Nuvem',
    desafio: 'Sistema da oficina não estava no servidor, ficando nas CPUs dos computadores, sem backup adequado.',
    solucao: 'Migração do sistema para o servidor corporativo e implementação de backup automatizado em nuvem.',
    resultados: [
      'Sistema centralizado no servidor',
      'Backup em nuvem implementado',
      'Funcionando perfeitamente',
    ],
    quote: 'Hoje todo o sistema está estruturado com backup em nuvem e funcionando perfeitamente.',
    destaque: 'Backup em nuvem',
  },
  {
    id: 3,
    cliente: 'Toyota Arquitetura',
    responsavel: 'Elio Toyota',
    segmento: 'Arquitetura',
    cidade: 'Guarulhos',
    icone: '🪵',
    servico: 'Suporte Técnico Emergencial',
    desafio: 'Notebook parou de funcionar em final de semana, com contrato importante para fechar.',
    solucao: 'Atendimento emergencial em final de semana, recuperação de dados e projetos do cliente.',
    resultados: [
      'Atendimento fora do horário comercial',
      'Dados recuperados com sucesso',
      'Contrato salvo e fechado no prazo',
    ],
    quote: 'Fui atendido prontamente, mesmo fora do horário, salvando um contrato importante.',
    destaque: 'Atendimento emergencial',
  },
  {
    id: 4,
    cliente: 'SEG1 Corretora de Seguros',
    responsavel: 'Jorge Luiz Braga',
    segmento: 'Seguros',
    cidade: 'Guarulhos',
    icone: '🛡️',
    servico: 'Otimização de Equipamentos',
    desafio: 'Computadores lentos afetando a produtividade da equipe de vendas.',
    solucao: 'Upgrade estratégico de hardware e otimização do sistema operacional.',
    resultados: [
      'Melhoria em todos os computadores',
      'Apenas 10% do investimento previsto',
      '90% de economia no projeto',
    ],
    quote: 'Melhoramos todos os computadores com apenas 10% do investimento necessário.',
    destaque: '90% de economia',
  },
];

// Todos os depoimentos
const todosDepoimentos = [
  {
    cliente: 'R2 Car',
    responsavel: 'R2 Car Centro Automotivo',
    segmento: 'Pintura Automotiva',
    cidade: 'Guarulhos',
    icone: '🚗',
    quote: 'Em menos de uma hora todos os problemas foram resolvidos e tudo voltou a funcionar perfeitamente.',
    destaque: 'Resolvido em < 1 hora',
  },
  {
    cliente: 'Simpercom',
    responsavel: 'João de Paula',
    segmento: 'Impermeabilização',
    cidade: 'Guarulhos',
    icone: '🧱',
    quote: 'O problema foi resolvido com excelência, fortalecendo ainda mais nossa parceria.',
    destaque: 'Excelência no serviço',
  },
  {
    cliente: 'Summa',
    responsavel: 'Silvia Pedrosa Luiz',
    segmento: 'Coaching',
    cidade: 'São Paulo',
    icone: '🧠',
    quote: 'Os problemas foram resolvidos com rapidez e eficiência, mesmo para quem não entende de tecnologia.',
    destaque: 'Rapidez e eficiência',
  },
  {
    cliente: 'Visão Contabilidade',
    responsavel: 'Antonio Gonçalves',
    segmento: 'Contabilidade',
    cidade: 'Guarulhos',
    icone: '📊',
    quote: 'Passei a indicar os serviços com total confiança pela qualidade e agilidade.',
    destaque: 'Total confiança',
  },
  {
    cliente: 'Lucio Seguros',
    responsavel: 'Lucio Benevenuto',
    segmento: 'Seguros',
    cidade: 'Guarulhos',
    icone: '🛡️',
    quote: 'O equipamento ganhou performance e o atendimento foi rápido e eficiente.',
    destaque: 'Performance melhorada',
  },
  {
    cliente: 'Caroni Reis Advogados',
    responsavel: 'Jorge Paulo Caroni Reis',
    segmento: 'Advocacia',
    cidade: 'Guarulhos',
    icone: '⚖️',
    quote: 'Fui atendido com dedicação e profissionalismo, sempre dentro do prazo e orçamento.',
    destaque: 'Dentro do prazo',
  },
  {
    cliente: 'Trilha Empregos',
    responsavel: 'Suelia Luz',
    segmento: 'Recrutamento',
    cidade: 'Guarulhos',
    icone: '🧩',
    quote: 'Superou minhas expectativas com um atendimento atencioso, competente e eficiente.',
    destaque: 'Superou expectativas',
  },
];

const estatisticas = [
  { valor: '+500', label: 'Clientes atendidos', icon: <Users className="w-6 h-6" /> },
  { valor: '99.9%', label: 'Uptime médio', icon: <Clock className="w-6 h-6" /> },
  { valor: 'R$ 15K', label: 'Economia média', icon: <TrendingUp className="w-6 h-6" /> },
];

const Cases = () => {
  const heroRef = useRef<HTMLDivElement>(null);
  const casesRef = useRef<HTMLDivElement>(null);
  const depoimentosRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      const heroItems = heroRef.current?.querySelectorAll('.animate-item');
      if (heroItems?.length) {
        gsap.fromTo(heroItems, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, stagger: 0.1, ease: 'expo.out' });
      }

      const caseCards = casesRef.current?.querySelectorAll('.case-card');
      if (caseCards?.length) {
        gsap.fromTo(caseCards, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, stagger: 0.15, ease: 'back.out(1.7)', scrollTrigger: { trigger: casesRef.current, start: 'top 80%' } });
      }

      const depoCards = depoimentosRef.current?.querySelectorAll('.depo-card');
      if (depoCards?.length) {
        gsap.fromTo(depoCards, { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, stagger: 0.08, ease: 'expo.out', scrollTrigger: { trigger: depoimentosRef.current, start: 'top 80%' } });
      }
    });

    return () => ctx.revert();
  }, []);

  // Schema.org para SEO
  const schemaData = {
    "@context": "https://schema.org",
    "@type": "ItemList",
    "itemListElement": casesReais.map((c, i) => ({
      "@type": "ListItem",
      "position": i + 1,
      "item": {
        "@type": "Review",
        "author": { "@type": "Person", "name": c.responsavel },
        "reviewRating": { "@type": "Rating", "ratingValue": 5, "bestRating": 5 },
        "reviewBody": c.quote,
        "publisher": { "@type": "Organization", "name": c.cliente }
      }
    }))
  };

  return (
    <div className="bg-[#0e0e0e] min-h-screen">
      <SEO
        title="Cases de Sucesso"
        description="Veja os cases de sucesso da Avanzato Tecnologia. Projetos realizados para empresas de diversos segmentos em Sao Paulo."
      />
      {/* Schema.org JSON-LD */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} />

      {/* Hero */}
      <section ref={heroRef} className="pt-32 pb-20 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
        <div className="container-custom relative z-10">
          <div className="text-center max-w-3xl mx-auto">
            <span className="animate-item inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-6 border border-[#cbf400]/20">
              Cases de Sucesso
            </span>
            <h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">
              Resultados que <span className="text-gradient">falam</span> por si
            </h1>
            <p className="animate-item text-xl text-gray-400 mb-12">
              Histórias reais de empresas que transformaram sua TI com a Avanzato.
            </p>
            <div className="animate-item grid grid-cols-3 gap-8">
              {estatisticas.map((stat, i) => (
                <div key={i} className="text-center">
                  <div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mx-auto mb-3 text-[#cbf400]">{stat.icon}</div>
                  <div className="text-3xl md:text-4xl font-black text-[#cbf400]">{stat.valor}</div>
                  <div className="text-gray-500 text-sm">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Cases Detalhados */}
      <section ref={casesRef} className="py-20">
        <div className="container-custom">
          <h2 className="text-3xl md:text-4xl font-black text-white text-center mb-16">
            Cases de <span className="text-gradient">Sucesso</span>
          </h2>
          <div className="space-y-16">
            {casesReais.map((caseItem, index) => (
              <div key={caseItem.id} className={`case-card grid lg:grid-cols-2 gap-8 items-center ${index % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}>
                <div className={index % 2 === 1 ? 'lg:order-2' : ''}>
                  <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-white/5">
                    <div className="flex items-center gap-4 mb-6">
                      <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#cbf400]/20 to-[#cbf400]/5 flex items-center justify-center text-3xl">
                        {caseItem.icone}
                      </div>
                      <div>
                        <h3 className="text-xl font-bold text-white">{caseItem.cliente}</h3>
                        <div className="flex items-center gap-2 text-gray-400 text-sm">
                          <Building2 className="w-3 h-3" />
                          <span>{caseItem.segmento}</span>
                          <span>•</span>
                          <MapPin className="w-3 h-3" />
                          <span>{caseItem.cidade}</span>
                        </div>
                      </div>
                    </div>
                    <div className="space-y-4">
                      <div>
                        <span className="text-[#cbf400] text-sm font-medium">Serviço:</span>
                        <p className="text-white">{caseItem.servico}</p>
                      </div>
                      <div>
                        <span className="text-gray-500 text-sm">Desafio:</span>
                        <p className="text-gray-300">{caseItem.desafio}</p>
                      </div>
                      <div>
                        <span className="text-gray-500 text-sm">Solução:</span>
                        <p className="text-gray-300">{caseItem.solucao}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={index % 2 === 1 ? 'lg:order-1' : ''}>
                  <div className="bg-gradient-to-br from-[#cbf400]/10 to-transparent rounded-2xl p-8 border border-[#cbf400]/20">
                    <h4 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
                      <TrendingUp className="w-5 h-5 text-[#cbf400]" />
                      Resultados
                    </h4>
                    <ul className="space-y-4 mb-8">
                      {caseItem.resultados.map((r, i) => (
                        <li key={i} className="flex items-center gap-3">
                          <div className="w-6 h-6 rounded-full bg-[#cbf400]/20 flex items-center justify-center flex-shrink-0"><Check className="w-4 h-4 text-[#cbf400]" /></div>
                          <span className="text-white">{r}</span>
                        </li>
                      ))}
                    </ul>
                    <div className="bg-[#0e0e0e] rounded-xl p-6">
                      <div className="flex gap-1 mb-3">
                        {[...Array(5)].map((_, i) => <Star key={i} className="w-4 h-4 text-[#cbf400] fill-[#cbf400]" />)}
                      </div>
                      <p className="text-2xl mb-3">{caseItem.icone}</p>
                      <p className="text-gray-300 italic mb-4">"{caseItem.quote}"</p>
                      <div className="text-white font-medium text-sm">{caseItem.responsavel}</div>
                      <div className="text-gray-500 text-xs">{caseItem.cliente}</div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mais Depoimentos */}
      <section className="py-20 bg-[#1a1a1a]">
        <div className="container-custom">
          <h2 className="text-3xl md:text-4xl font-black text-white text-center mb-4">
            Mais <span className="text-gradient">Depoimentos</span>
          </h2>
          <p className="text-gray-400 text-center mb-12 max-w-2xl mx-auto">
            Veja o que outros clientes dizem sobre nossos serviços.
          </p>
          <div ref={depoimentosRef} className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {todosDepoimentos.map((d, i) => (
              <div key={i} className="depo-card bg-[#0e0e0e] rounded-2xl p-6 border border-white/5">
                <div className="flex items-center justify-between mb-4">
                  <span className="text-2xl">{d.icone}</span>
                  <div className="flex gap-0.5">
                    {[...Array(5)].map((_, j) => <Star key={j} className="w-4 h-4 text-[#cbf400] fill-[#cbf400]" />)}
                  </div>
                </div>
                <p className="text-gray-300 text-sm mb-4 italic">"{d.quote}"</p>
                <span className="inline-block px-3 py-1 bg-[#cbf400]/10 text-[#cbf400] text-xs rounded-full mb-4">{d.destaque}</span>
                <div className="pt-4 border-t border-white/5">
                  <p className="text-white font-medium text-sm">{d.responsavel}</p>
                  <p className="text-gray-500 text-xs">{d.cliente} • {d.cidade}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20">
        <div className="container-custom">
          <div className="bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl p-12 text-center border border-[#cbf400]/20">
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Quer ser nosso próximo case de sucesso?</h2>
            <p className="text-gray-400 mb-8 max-w-2xl mx-auto">Entre em contato e descubra como podemos ajudar sua empresa.</p>
            <div className="flex flex-wrap justify-center gap-4">
              <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20conhecer%20cases%20de%20sucesso" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Falar com consultor<ArrowRight className="w-5 h-5" /></a>
              <a href="/contato" className="btn-secondary">Solicitar proposta</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Cases;
