import { useState, useEffect } from "react";
import { Calendar, Users, Camera, Video, Utensils, Palette, Gift, Music } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { ServicesSkeleton } from "@/components/ui/loading-skeletons";
import { Link } from "react-router-dom";

const Services = () => {
  const [isLoading, setIsLoading] = useState(true);

  // Simulate services loading
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1200);
    return () => clearTimeout(timer);
  }, []);
  const services = [
    {
      icon: Calendar,
      title: "Organização Completa",
      description: "Planejamos e executamos toda sua formatura, desde o primeiro contato até o último detalhe da festa.",
      features: ["Planejamento total", "Cronograma detalhado", "Coordenação no dia"],
      link: "/organizacao-completa-de-formaturas"
    },
    {
      icon: Users,
      title: "Cerimonial Profissional",
      description: "Equipe especializada para conduzir toda a cerimônia com elegância e protocolo adequado.",
      features: ["Mestre de cerimônias", "Protocolo oficial", "Organização dos formandos"],
      link: "/cerimonial-profissional"
    },
    {
      icon: Camera,
      title: "Fotografia Profissional",
      description: "Capturamos cada momento especial com equipamentos de última geração e técnicas profissionais.",
      features: ["Alta resolução", "Edição profissional", "Entrega rápida"],
      link: "/fotografia-profissional"
    },
    {
      icon: Video,
      title: "Filmagem 4K",
      description: "Registramos toda a cerimônia em ultra alta definição, preservando cada emoção e discurso.",
      features: ["Qualidade 4K", "Múltiplas câmeras", "Edição cinematográfica"],
      link: "/filmagem-4k"
    },
    {
      icon: Utensils,
      title: "Buffet e Catering",
      description: "Cardápios personalizados para recepções, coquetéis e festas, com opções para todos os gostos.",
      features: ["Cardápio personalizado", "Serviço completo", "Opções veganas/vegetarianas"],
      link: "/buffet-catering"
    },
    {
      icon: Palette,
      title: "Decoração e Ambientação",
      description: "Criamos ambientes únicos e elegantes que combinam com o estilo da sua formatura.",
      features: ["Design personalizado", "Flores e arranjos", "Iluminação especial"],
      link: "/decoracao-ambientacao"
    },
    {
      icon: Gift,
      title: "Convites e Lembranças",
      description: "Desenvolvemos convites personalizados e lembranças especiais para marcar este momento único.",
      features: ["Design exclusivo", "Impressão premium", "Lembranças personalizadas"],
      link: "/convites-lembrancas"
    },
    {
      icon: Music,
      title: "Som e Entretenimento",
      description: "Sistema de som profissional e opções de entretenimento para tornar sua festa inesquecível.",
      features: ["Equipamentos profissionais", "DJ especializado", "Playlist personalizada"],
      link: "/som-entretenimento"
    }
  ];

  const graduationTypes = [
    {
      type: "Ensino Médio",
      description: "Celebre a conclusão desta importante etapa com uma festa à altura da conquista.",
      features: ["Cerimônia de colação de grau", "Festa de confraternização", "Álbum da turma"]
    },
    {
      type: "Graduação",
      description: "O momento mais esperado da vida acadêmica merece uma celebração especial e memorável.",
      features: ["Cerimônia solene", "Recepção para família", "Fotografia oficial"]
    },
    {
      type: "Pós-Graduação",
      description: "Especializações, mestrados e doutorados também merecem ser celebrados com elegância.",
      features: ["Protocolo acadêmico", "Evento intimista", "Registro profissional"]
    }
  ];

  return (
    <main id="servicos" className="py-20 bg-gradient-subtle" role="main" itemScope itemType="https://schema.org/Service">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6" itemProp="name">
            Organização Completa
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto" itemProp="description">
            Somos especialistas em organizar formaturas completas para ensino médio, graduação e pós-graduação. 
            Cuidamos de cada detalhe para que você só precise se preocupar em celebrar sua conquista.
          </p>
        </div>

        {/* Tipos de Formatura */}
        <div className="mb-20">
          <h3 className="text-3xl font-bold text-primary text-center mb-12">
            Atendemos Todos os Tipos de Formatura
          </h3>
          {isLoading ? (
            <ServicesSkeleton />
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {graduationTypes.map((gradType, index) => (
                <Card key={index} className="text-center border-0 shadow-elegant hover:shadow-gold transition-all duration-300 animate-in fade-in duration-500" style={{animationDelay: `${index * 150}ms`}}>
                  <CardContent className="p-8">
                    <h4 className="text-2xl font-bold text-primary mb-4">{gradType.type}</h4>
                    <p className="text-muted-foreground mb-6 leading-relaxed">{gradType.description}</p>
                    <div className="space-y-2">
                      {gradType.features.map((feature, featureIndex) => (
                        <div key={featureIndex} className="flex items-center justify-center space-x-2">
                          <div className="w-2 h-2 bg-accent rounded-full"></div>
                          <span className="text-sm font-medium text-primary">{feature}</span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>

        {/* Serviços Completos */}
        <div className="mb-16">
          <h3 className="text-3xl font-bold text-primary text-center mb-12">
            Nossos Serviços Completos
          </h3>
          {isLoading ? (
            <ServicesSkeleton />
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {services.map((service, index) => {
                const IconComponent = service.icon;
                
                const ServiceCard = (
                  <Card 
                    className={`group hover:shadow-elegant transition-all duration-300 hover:-translate-y-2 border-0 shadow-md animate-in fade-in duration-500 ${service.link ? 'cursor-pointer hover:bg-blue-50' : ''}`}
                    style={{animationDelay: `${index * 100}ms`}}
                  >
                    <CardContent className="p-6 text-center">
                      <div className="mb-4">
                        <div className="w-14 h-14 mx-auto bg-gradient-accent rounded-full flex items-center justify-center mb-3 group-hover:shadow-gold transition-all duration-300">
                          <IconComponent className="h-7 w-7 text-accent-foreground" />
                        </div>
                        <h4 className="text-lg font-bold text-primary mb-3">
                          {service.title}
                          {service.link && <span className="text-blue-600 ml-1">→</span>}
                        </h4>
                        <p className="text-muted-foreground text-sm mb-4 leading-relaxed">
                          {service.description}
                        </p>
                      </div>
                      
                      <div className="space-y-2">
                        {service.features.map((feature, featureIndex) => (
                          <div 
                            key={featureIndex}
                            className="flex items-center justify-center space-x-2"
                          >
                            <div className="w-1.5 h-1.5 bg-accent rounded-full"></div>
                            <span className="text-xs font-medium text-primary">
                              {feature}
                            </span>
                          </div>
                        ))}
                      </div>
                      {service.link && (
                        <div className="mt-4">
                          <span className="text-xs text-blue-600 font-medium">Clique para saber mais</span>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                );

                return (
                  <div key={index}>
                    {service.link ? (
                      <Link to={service.link}>
                        {ServiceCard}
                      </Link>
                    ) : (
                      ServiceCard
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Call to Action */}
        <div className="text-center">
          <div className="bg-card rounded-2xl p-8 shadow-elegant max-w-4xl mx-auto border border-border">
            <h3 className="text-3xl font-bold text-primary mb-4">
              Pronto para organizar sua formatura dos sonhos?
            </h3>
            <p className="text-xl text-muted-foreground mb-8">
              Nossa equipe especializada está pronta para transformar sua formatura em um evento inesquecível.
            </p>
            <div className="mb-8">
              <Link 
                to="/organizacao-completa-de-formaturas"
                className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
              >
                Ver Organização Completa
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center">
                <div className="text-2xl font-bold text-accent">Orçamento Gratuito</div>
                <div className="text-muted-foreground">Sem compromisso</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-accent">Atendimento 24/7</div>
                <div className="text-muted-foreground">Sempre disponível</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-accent">Garantia Total</div>
                <div className="text-muted-foreground">Satisfação garantida</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
};

export default Services;