import React, { useState, useEffect } from 'react';
import { Camera, Heart, Shield, Star, BookOpen } 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>

      {/* Albums Section */}
      <section className="py-24 relative overflow-hidden" style={{ backgroundColor: '#ffffff' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row items-center gap-16">
            {/* Left side - Icon and Text */}
            <div className="lg:w-1/2 text-left fade-in">
              <div className="inline-flex items-center justify-center w-36 h-36 mb-8 transform transition-transform duration-300 hover:scale-110 hover:rotate-3">
                <img src="/HOME_17.png" alt="Álbuns" className="w-full h-full object-contain drop-shadow-2xl" />
              </div>
              
              <h2 className="text-5xl md:text-6xl font-bold mb-8 leading-tight" style={{color: '#B9CF33'}}>
                ÁLBUNS<br/>PERSONALIZADOS
              </h2>
              
              <div className="space-y-3 text-gray-700">
                <p className="text-lg leading-relaxed">
                  Escolha a cor, tamanho, tecido, acabamento, modelo,
                </p>
                <p className="text-lg leading-relaxed">
                  laminação, tipo de impressão e muito mais!
                </p>
                <p className="text-xl font-semibold text-brand-black mt-4">
                  Tenha seu álbum exclusivo e de acordo com o seu gosto.
                </p>
              </div>
            </div>

            {/* Right side - CTA */}
            <div className="lg:w-2/8 flex flex-col items-center lg:items-start justify-center ml-40 slide-up">
              <div className="bg-white rounded-lg shadow-2xl p-10 border-t-4 transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2" style={{ borderColor: '#B9CF33' }}>
                <div className="flex justify-center mb-6">
                  <div className="w-29 h-29 transform transition-transform duration-300 hover:scale-110">
                    <img src="/logo.png" alt="Cadastrar" className="w-full h-full object-contain drop-shadow-lg" />
                  </div>
                </div>
                <p className="text-gray-700 text-xl mb-5 text-center font-medium leading-relaxed">
                  Faça parte da Photum e cadastre sua formatura.
                </p>
                <button
                  onClick={onEnter}
                  className="w-full px-10 py-5 text-white font-bold text-lg rounded-md transition-all duration-300 transform hover:scale-105 hover:shadow-2xl active:scale-95"
                  style={{ backgroundColor: '#B9CF33' }}
                >
                  Cadastrar Formatura
                </button>
              </div>
            </div>
          </div>
        </div>
        
        {/* Decorative elements */}
        <div className="absolute top-10 right-10 w-32 h-32 rounded-full opacity-10" style={{ backgroundColor: '#B9CF33' }}></div>
        <div className="absolute bottom-10 left-10 w-24 h-24 rounded-full opacity-10" style={{ backgroundColor: '#C2388B' }}></div>
      </section>

      {/* Contact Section */}
      <section className="py-24 relative overflow-hidden" style={{ backgroundColor: '#492E61' }}>
        <div className="max-w-7xl mx-auto px-8 sm:px-12 lg:px-20">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-wide">ENTRE EM CONTATO</h2>
            <p className="text-white/90 text-lg">Envie sua mensagem, ligue ou faça uma visita em nossa empresa!</p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-start max-w-6xl mx-auto">
            {/* Left side - Contact Info */}
            <div className="space-y-6 text-white">
              <div className="group">
                <div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                  </div>
                  <div className="flex-1">
                    <p className="font-semibold mb-1">Rua Bom Recreio, 305</p>
                    <p className="text-white/80 text-sm">Jd. Boer II • Americana SP</p>
                    <p className="text-white/80 text-sm mb-1">CEP 13477-720</p>
                    <a 
                      href="https://goo.gl/maps/4EwukztUUXP2" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-xs underline hover:text-white/70 transition-colors inline-flex items-center gap-1"
                    >
                      Ver no mapa →
                    </a>
                  </div>
                </div>
              </div>

              <div className="group">
                <div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                  </div>
                  <div className="flex-1">
                    <p>(19) 3405.5024</p>
                    <p>(19) 3621.4621</p>
                  </div>
                </div>
              </div>

              <div className="group">
                <div className="flex items-start gap-4 p-3 rounded-lg transition-all duration-300 hover:bg-white/10">
                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  </div>
                  <div className="flex-1">
                    <a href="mailto:contato@photum.com.br" className="hover:text-white/70 transition-colors">
                      contato@photum.com.br
                    </a>
                  </div>
                </div>
              </div>
            </div>

            {/* Right side - Contact Form */}
            <div className="space-y-5 bg-white/5 p-6 rounded-xl backdrop-blur-sm">
              <input
                type="text"
                placeholder="Nome"
                className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors"
              />
              <input
                type="tel"
                placeholder="Telefone"
                className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors"
              />
              <textarea
                placeholder="Mensagem"
                rows={4}
                className="w-full px-3 py-3 bg-transparent border-b-2 border-white/30 text-white placeholder-white/60 focus:border-white focus:outline-none transition-colors resize-none"
              ></textarea>
              <button
                className="w-full px-8 py-3 bg-white text-brand-black font-bold rounded-lg hover:bg-white/90 transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg"
              >
                enviar
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};