import React, { useState, useEffect } from 'react';
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-[70vh] 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 scale-110" />
            <div className="absolute inset-0 bg-black/40"></div>
          </div>
        ))}

        {/* Text - 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-5xl lg:text-6xl 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>
        </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">
            <div className="text-center group">
              <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 text-gray-700 mb-6 transition-all">
                <Camera size={40} strokeWidth={1.5} />
              </div>
              <h4 className="text-xl font-bold mb-3 text-brand-black">Qualidade Impecável</h4>
              <p className="text-gray-600 leading-relaxed">
                Equipamentos de última geração e profissionais premiados.
              </p>
            </div>

            <div className="text-center group">
              <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 text-gray-700 mb-6 transition-all">
                <Shield size={40} strokeWidth={1.5} />
              </div>
              <h4 className="text-xl font-bold mb-3 text-brand-black">Segurança Total</h4>
              <p className="text-gray-600 leading-relaxed">
                Backup duplo em nuvem e contratos transparentes.
              </p>
            </div>

            <div className="text-center group">
              <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 text-gray-700 mb-6 transition-all">
                <Heart size={40} strokeWidth={1.5} />
              </div>
              <h4 className="text-xl font-bold mb-3 text-brand-black">Atendimento Humanizado</h4>
              <p className="text-gray-600 leading-relaxed">
                Entendemos que seu evento é um sonho a ser realizado.
              </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>
  );
};