import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { GallerySkeleton } from "@/components/ui/loading-skeletons";
import AdvancedImage from "@/components/AdvancedImage";
import { Eye, ArrowRight } from "lucide-react";
import gallery1 from '@/assets/gallery-1.jpg';
import emocoes from '@/assets/emocoes.jpg';
import gallery3 from '@/assets/gallery-3.jpg';
import gallery4 from '@/assets/gallery-2.jpg';
import gallery5 from '@/assets/empresa-de-formaturas-florianopolis.jpg';
import heroGraduation from '@/assets/hero-graduation.jpg';

const Gallery = () => {
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const galleryImages = [
    {
      id: 1,
      src: heroGraduation,
      alt: "Cerimônia de formatura profissional",
      title: "Cerimônia Elegante",
      description: "Momentos solenes da cerimônia de formatura"
    },
    {
      id: 2,
      src: gallery4,
      alt: "Fotos em grupo com famílias",
      title: "Celebração em Família",
      description: "Alegria compartilhada com os entes queridos"
    },
    {
      id: 3,
      src: gallery3,
      alt: "Momento da entrega do diploma",
      title: "Momento da Conquista",
      description: "O momento mais esperado da jornada acadêmica"
    },
    {
      id: 4,
      src: gallery1,
      alt: "Portfolio adicional 1",
      title: "Detalhes Únicos",
      description: "Cada detalhe capturado com perfeição"
    },
    {
      id: 5,
      src: emocoes,
      alt: "Portfolio adicional 2",
      title: "Emoções Genuínas",
      description: "Expressões autênticas de felicidade"
    },
    {
      id: 6,
      src: gallery5,
      alt: "Portfolio adicional 3",
      title: "Momentos Eternos",
      description: "Lembranças que durarão para sempre"
    }
  ];

  // Simulate gallery loading
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 800);
    return () => clearTimeout(timer);
  }, []);

  const testimonials = [
    {
      name: "Maria Silva",
      course: "Medicina - FURB",
      text: "A Memorizze capturou perfeitamente todos os momentos especiais da minha formatura. Qualidade excepcional!",
      rating: 5
    },
    {
      name: "João Santos",
      course: "Engenharia - UFSC",
      text: "Profissionais incríveis! As fotos ficaram lindas e a entrega foi super rápida. Recomendo muito!",
      rating: 5
    },
    {
      name: "Ana Costa",
      course: "Direito - UNISUL",
      text: "Serviço impecável do início ao fim. Nossa família ficou emocionada com o resultado das fotos.",
      rating: 5
    }
  ];

  return (
    <section id="galeria" className="py-20 bg-gradient-subtle">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">
            Nossa Galeria
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Veja alguns dos momentos especiais que tivemos o privilégio de capturar. 
            Cada imagem conta uma história única de conquista e celebração.
          </p>
        </div>

        {/* Gallery Grid */}
        {isLoading ? (
          <GallerySkeleton />
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
            {galleryImages.map((image, index) => (
              <Card 
                key={image.id} 
                className="group overflow-hidden border-0 shadow-elegant hover:shadow-gold transition-all duration-300 hover:-translate-y-2"
              >
                <div className="relative overflow-hidden">
                  <AdvancedImage
                    src={image.src}
                    alt={image.alt}
                    width={400}
                    height={256}
                    priority={false}
                    responsive={true}
                    loading="lazy"
                    className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    breakpoints={{
                      mobile: 640,
                      tablet: 512,
                      desktop: 400
                    }}
                    onLoad={() => {}}
                  />
                  <div className="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <Button
                      size="sm"
                      onClick={() => setSelectedImage(image.src)}
                      className="bg-white/20 backdrop-blur-sm text-white border-white/30 hover:bg-white/30"
                    >
                      <Eye className="h-4 w-4 mr-2" />
                      Ver Mais
                    </Button>
                  </div>
                </div>
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold text-primary mb-2">
                    {image.title}
                  </h3>
                  <p className="text-muted-foreground">
                    {image.description}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

        {/* Testimonials */}
        <div className="mb-16">
          <h3 className="text-3xl font-bold text-primary text-center mb-12">
            O que nossos clientes dizem
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="border-0 shadow-elegant">
                <CardContent className="p-8 text-center">
                  <div className="flex justify-center mb-4">
                    {[...Array(5)].map((_, i) => (
                      <span key={i} className="text-accent text-xl">★</span>
                    ))}
                  </div>
                  <p className="text-muted-foreground mb-6 italic leading-relaxed">
                    &ldquo;{testimonial.text}&rdquo;
                  </p>
                  <div>
                    <h4 className="font-bold text-primary">{testimonial.name}</h4>
                    <p className="text-sm text-muted-foreground">{testimonial.course}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="text-center">
          <div className="bg-card rounded-2xl p-8 shadow-elegant max-w-2xl mx-auto border border-border">
            <h3 className="text-3xl font-bold text-primary mb-4">
              Gostou do nosso trabalho?
            </h3>
            <p className="text-lg text-muted-foreground mb-8">
              Entre em contato conosco e vamos conversar sobre como podemos 
              tornar sua formatura inesquecível.
            </p>
            <Button
              size="lg"
              className="bg-gradient-accent text-accent-foreground hover:shadow-gold transition-bounce"
              onClick={() => window.open('https://wa.me/5549988340246?text=vim%20do%20site%20grupo%20memorizze', '_blank')}
            >
              Solicitar Orçamento
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </div>
        </div>
      </div>

      {/* Modal for enlarged image */}
      {selectedImage && (
        <div 
          className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
          onClick={() => setSelectedImage(null)}
        >
          <div className="relative max-w-4xl max-h-full">
            <AdvancedImage
              src={selectedImage}
              alt="Imagem ampliada"
              className="max-w-full max-h-full object-contain rounded-lg"
              priority={true}
              width={1200}
              height={800}
            />
            <Button
              onClick={() => setSelectedImage(null)}
              className="absolute top-4 right-4 bg-black/50 hover:bg-black/70 text-white"
              size="sm"
            >
              ✕
            </Button>
          </div>
        </div>
      )}
    </section>
  );
};

export default Gallery;