import React, { useState, useEffect } from 'react';
import { Button } from '../components/Button';
import { Camera, Heart, Shield, Star } from 'lucide-react';

const HERO_IMAGES = [
  "/banner2.jpg",
  "/HOME_01.jpg"
];

interface HomeProps {
  onEnter: () => void;
}

export const Home: React.FC<HomeProps> = ({ onEnter }) => {
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % HERO_IMAGES.length);
    }, 5000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <div className="relative h-screen w-full overflow-hidden">
        {HERO_IMAGES.map((img, idx) => (
          <div
            key={idx}
            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${idx === currentSlide ? 'opacity-100' : 'opacity-0'}`}
          >
            <img src={img} alt="Hero" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-black/40"></div>
          </div>
        ))}

        {/* Text and Buttons - Only visible on first slide */}
        <div className={`absolute inset-0 flex items-center justify-center text-center px-4 transition-opacity duration-500 ${currentSlide === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
          <div className="max-w-4xl space-y-6 slide-up">
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-serif text-white leading-tight">
              Eternizando Momentos <br />
              <span className="text-brand-gold italic">Únicos</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-200 font-light max-w-2xl mx-auto tracking-wide">
              Gestão completa para eventos inesquecíveis. Do planejamento à entrega do álbum perfeito.
            </p>
            <div className="pt-8 space-x-4">
              <Button size="xl" variant="secondary" onClick={onEnter}>
                Área do Cliente
              </Button>
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-black">
                Ver Portfólio
              </Button>
            </div>
          </div>
        </div>

        {/* Carousel Dots */}
        <div className="absolute bottom-10 left-0 right-0 flex justify-center space-x-3">
          {HERO_IMAGES.map((_, idx) => (
            <button
              key={idx}
              className={`w-2 h-2 rounded-full transition-all ${idx === currentSlide ? 'bg-brand-gold w-8' : 'bg-white/50'}`}
              onClick={() => setCurrentSlide(idx)}
            />
          ))}
        </div>
      </div>

      {/* Features Section */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-sm font-bold tracking-widest text-brand-gold uppercase mb-2">Por que nós?</h2>
            <h3 className="text-3xl md:text-4xl font-serif text-brand-black">Excelência em cada detalhe</h3>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {[
              { icon: <Camera size={32} />, title: "Qualidade Impecável", desc: "Equipamentos de última geração e profissionais premiados." },
              { icon: <Shield size={32} />, title: "Segurança Total", desc: "Backup duplo em nuvem e contratos transparentes." },
              { icon: <Heart size={32} />, title: "Atendimento Humanizado", desc: "Entendemos que seu evento é um sonho a ser realizado." }
            ].map((feature, idx) => (
              <div key={idx} className="text-center group p-6 rounded-lg hover:bg-gray-50 transition-colors">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-brand-black mb-6 group-hover:bg-brand-gold group-hover:text-white transition-colors">
                  {feature.icon}
                </div>
                <h4 className="text-xl font-medium mb-3">{feature.title}</h4>
                <p className="text-gray-500 font-light leading-relaxed">{feature.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 bg-brand-black text-white">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <Star className="text-brand-gold mx-auto mb-6" size={40} fill="#c5a059" />
          <blockquote className="text-2xl md:text-3xl font-serif italic leading-relaxed mb-8">
            "A equipe do Photum superou todas as expectativas. O sistema de acompanhamento nos deixou tranquilos durante todo o processo e as fotos ficaram incríveis."
          </blockquote>
          <cite className="not-italic">
            <span className="font-bold block text-brand-gold">Mariana & Pedro</span>
            <span className="text-sm text-gray-400 uppercase tracking-widest">Casamento em Campos do Jordão</span>
          </cite>
        </div>
      </section>
    </div>
  );
};