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

const HERO_IMAGES = [
  "https://images.unsplash.com/photo-1511285560982-1351cdeb9821?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80",
  "https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80",
  "https://images.unsplash.com/photo-1472653431158-6364773b2710?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
];

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>
        ))}
        
        <div className="absolute inset-0 flex items-center justify-center text-center px-4">
          <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="lg" 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>
  );
};