import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Star, Building2, MapPin } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

interface Testimonial {
  id: number;
  cliente: string;
  responsavel: string;
  cargo?: string;
  segmento: string;
  cidade: string;
  quote: string;
  destaque: string;
  icone: string;
}

const testimonials: Testimonial[] = [
  {
    id: 1,
    cliente: "Moraes & Moraes Advogados",
    responsavel: "Edilson Fernando de Moraes",
    segmento: "Advocacia",
    cidade: "São Paulo",
    quote: "Evitamos um investimento de mais de R$ 15.000 com a solução aplicada.",
    destaque: "Economia de R$ 15.000",
    icone: "⚖️"
  },
  {
    id: 2,
    cliente: "Divas Car",
    responsavel: "Joelma Rodrigues",
    segmento: "Centro Automotivo",
    cidade: "Guarulhos",
    quote: "Hoje todo o sistema está estruturado com backup em nuvem e funcionando perfeitamente.",
    destaque: "Backup em nuvem implementado",
    icone: "🚘"
  },
  {
    id: 3,
    cliente: "Toyota Arquitetura",
    responsavel: "Elio Toyota",
    segmento: "Arquitetura",
    cidade: "Guarulhos",
    quote: "Fui atendido prontamente, mesmo fora do horário, salvando um contrato importante.",
    destaque: "Atendimento fora do horário",
    icone: "🪵"
  },
  {
    id: 4,
    cliente: "R2 Car",
    responsavel: "R2 Car Centro Automotivo",
    segmento: "Pintura Automotiva",
    cidade: "Guarulhos",
    quote: "Em menos de uma hora todos os problemas foram resolvidos e tudo voltou a funcionar perfeitamente.",
    destaque: "Resolvido em menos de 1 hora",
    icone: "🚗"
  },
  {
    id: 5,
    cliente: "Simpercom Impermeabilizações",
    responsavel: "João de Paula",
    segmento: "Impermeabilização",
    cidade: "Guarulhos",
    quote: "O problema foi resolvido com excelência, fortalecendo ainda mais nossa parceria.",
    destaque: "Resolvido com excelência",
    icone: "🧱"
  },
  {
    id: 6,
    cliente: "Summa Desenvolvimento Humano",
    responsavel: "Silvia Pedrosa Luiz",
    segmento: "Coaching",
    cidade: "São Paulo",
    quote: "Os problemas foram resolvidos com rapidez e eficiência, mesmo para quem não entende de tecnologia.",
    destaque: "Rapidez e eficiência",
    icone: "🧠"
  },
  {
    id: 7,
    cliente: "Visão Contabilidade",
    responsavel: "Antonio Gonçalves",
    segmento: "Contabilidade",
    cidade: "Guarulhos",
    quote: "Passei a indicar os serviços com total confiança pela qualidade e agilidade.",
    destaque: "Total confiança",
    icone: "📊"
  },
  {
    id: 8,
    cliente: "SEG1 Corretora de Seguros",
    responsavel: "Jorge Luiz Braga",
    segmento: "Seguros",
    cidade: "Guarulhos",
    quote: "Melhoramos todos os computadores com apenas 10% do investimento necessário.",
    destaque: "90% de economia",
    icone: "🛡️"
  },
  {
    id: 9,
    cliente: "Apoio 24 Horas",
    responsavel: "Roberto",
    cargo: "Sócio Proprietário",
    segmento: "Segurança / Monitoramento",
    cidade: "Guarulhos",
    quote: "Garantimos a operação 24h mesmo com falhas de internet e energia, graças à estrutura implementada pela Avanzato.",
    destaque: "Operação 24h garantida",
    icone: "🛡️"
  },
  {
    id: 10,
    cliente: "Lucio Seguros",
    responsavel: "Lucio Benevenuto",
    segmento: "Seguros",
    cidade: "Guarulhos",
    quote: "O equipamento ganhou performance e o atendimento foi rápido e eficiente.",
    destaque: "Performance melhorada",
    icone: "🛡️"
  },
  {
    id: 11,
    cliente: "Caroni Reis Advogados",
    responsavel: "Jorge Paulo Caroni Reis",
    segmento: "Advocacia",
    cidade: "Guarulhos",
    quote: "Fui atendido com dedicação e profissionalismo, sempre dentro do prazo e orçamento.",
    destaque: "Dentro do prazo",
    icone: "⚖️"
  },
  {
    id: 12,
    cliente: "Trilha Empregos",
    responsavel: "Suelia Luz",
    segmento: "Recrutamento",
    cidade: "Guarulhos",
    quote: "Superou minhas expectativas com um atendimento atencioso, competente e eficiente.",
    destaque: "Superou expectativas",
    icone: "🧩"
  }
];

// Lista de empresas que confiam na Avanzato (logos/nomes no final da seção)
const empresasQueConfiam = [
  "Apoio24horas",
  "GateOneServitel", 
  "Alamo",
  "Quantica",
  "Mourad Nadi",
  "RMA",
  "Ganiko",
  "Dcarvalho",
  "Divas Car",
  "Thalls",
  "Garuppy",
  "Moraes",
  "Dellacont",
  "Madri",
  "EFLAW",
  "BST Security",
  "Piso.com",
  "RollPrime"
];

// Schema.org JSON-LD para SEO
const generateSchemaOrg = () => {
  const reviews = testimonials.map(t => ({
    "@type": "Review",
    "author": {
      "@type": "Person",
      "name": t.responsavel
    },
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": 5,
      "bestRating": 5
    },
    "reviewBody": t.quote,
    "publisher": {
      "@type": "Organization",
      "name": t.cliente
    }
  }));

  return {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Avanzato Tecnologia",
    "url": "https://avanzato.com.br",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "5",
      "bestRating": "5",
      "ratingCount": String(reviews.length),
      "reviewCount": String(reviews.length)
    },
    "review": reviews
  };
};

const TestimonialCard = ({ testimonial }: { testimonial: Testimonial }) => {
  return (
    <div className="testimonial-card bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300 h-full flex flex-col">
      {/* Icon and stars */}
      <div className="flex items-center justify-between mb-4">
        <span className="text-2xl">{testimonial.icone}</span>
        <div className="flex gap-0.5">
          {[...Array(5)].map((_, i) => (
            <Star key={i} className="w-4 h-4 text-[#cbf400] fill-[#cbf400]" />
          ))}
        </div>
      </div>

      {/* Quote */}
      <blockquote className="text-gray-300 text-sm leading-relaxed mb-4 flex-1">
        "{testimonial.quote}"
      </blockquote>

      {/* Destaque badge */}
      <div className="mb-4">
        <span className="inline-block px-3 py-1 bg-[#cbf400]/10 text-[#cbf400] text-xs font-medium rounded-full border border-[#cbf400]/20">
          {testimonial.destaque}
        </span>
      </div>

      {/* Client info */}
      <div className="flex items-center gap-3 pt-4 border-t border-white/5">
        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#cbf400]/20 to-[#cbf400]/5 flex items-center justify-center text-[#cbf400] font-bold">
          {testimonial.responsavel.charAt(0)}
        </div>
        <div className="min-w-0">
          <p className="text-white font-semibold text-sm truncate">{testimonial.responsavel}</p>
          <div className="flex items-center gap-2 text-gray-500 text-xs">
            <Building2 className="w-3 h-3 flex-shrink-0" />
            <span className="truncate">{testimonial.cliente}</span>
          </div>
          <div className="flex items-center gap-2 text-gray-600 text-xs">
            <MapPin className="w-3 h-3 flex-shrink-0" />
            <span>{testimonial.cidade}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const Testimonials = () => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const cardsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        titleRef.current,
        { y: 50, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.8,
          ease: 'expo.out',
          scrollTrigger: {
            trigger: titleRef.current,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      const cards = cardsRef.current?.querySelectorAll('.testimonial-card');
      if (cards) {
        gsap.fromTo(
          cards,
          { y: 60, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.7,
            stagger: 0.08,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: cardsRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  const schemaData = generateSchemaOrg();

  return (
    <section
      id="depoimentos"
      ref={sectionRef}
      className="section-padding bg-[#0e0e0e] relative overflow-hidden"
    >
      {/* Schema.org JSON-LD */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
      />

      {/* Background decoration */}
      <div className="absolute top-0 left-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2" />
      <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-3xl translate-y-1/2 translate-x-1/2" />

      <div className="container-custom relative z-10">
        {/* Section header */}
        <div ref={titleRef} className="text-center max-w-3xl mx-auto mb-16">
          <span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
            Depoimentos
          </span>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">
            O que nossos <span className="text-gradient">clientes dizem</span>
          </h2>
          <p className="text-gray-400 text-lg">
            Mais de 500 empresas confiam na Avanzato para cuidar da sua tecnologia. 
            Veja o que dizem sobre nossos serviços.
          </p>
        </div>

        {/* Stats bar */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
          {[
            { valor: "500+", label: "Clientes atendidos" },
            { valor: "11", label: "Anos de experiência" },
            { valor: "4.9", label: "Nota média" },
            { valor: "98%", label: "Taxa de satisfação" },
          ].map((stat, i) => (
            <div key={i} className="text-center bg-[#1a1a1a] rounded-xl p-6 border border-white/5">
              <div className="text-3xl md:text-4xl font-black text-[#cbf400] mb-1">{stat.valor}</div>
              <div className="text-gray-500 text-sm">{stat.label}</div>
            </div>
          ))}
        </div>

        {/* Testimonials grid */}
        <div
          ref={cardsRef}
          className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"
        >
          {testimonials.map((testimonial) => (
            <TestimonialCard key={testimonial.id} testimonial={testimonial} />
          ))}
        </div>

        {/* Client logos section */}
        <div className="mt-20">
          <p className="text-center text-gray-500 text-sm mb-8 uppercase tracking-wider">
            Empresas que confiam na Avanzato
          </p>
          <div className="flex flex-wrap justify-center items-center gap-x-8 gap-y-4 opacity-60">
            {empresasQueConfiam.map((empresa, i) => (
              <span key={i} className="text-gray-400 font-medium text-sm hover:text-[#cbf400] transition-colors">
                {empresa}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Testimonials;