import React, { useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import Navbar from "../../components/Navbar";
import Footer from '../HomePage/Footer'; // Verifique se o caminho do import está correto
import { iniciativas } from './iniciativasData';

const IniciativaDetalhe = () => {
  const { id } = useParams();

  // Scroll para o topo ao carregar a página
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [id]);

  const iniciativa = iniciativas.find((item) => item.id === id);

  // Tratamento caso a iniciativa não exista
  if (!iniciativa) {
    return (
      <div className="w-full min-h-screen bg-white flex flex-col items-center justify-center gap-6">
        <h1 className="text-3xl font-bold font-['Barlow_Semi_Condensed']">Iniciativa não encontrada.</h1>
        <Link to="/iniciativas" className="px-8 py-3 bg-[#F90527] text-white rounded-2xl font-bold font-['Barlow_Semi_Condensed'] hover:bg-red-700 transition-colors">
          Voltar para Iniciativas
        </Link>
      </div>
    );
  }

  return (
    <div className="w-full min-h-screen bg-white">
      
      <Navbar />
      
      {/* Header / Hero da Iniciativa com o Cover */}
      {/* pt-[220px] compensa a altura do Navbar (181px) + 40px de respiro */}
      <section className="w-full bg-gradient-to-r from-[#F90527] to-[#F50C52] pt-[220px] pb-16 px-6 md:px-[120px] flex flex-col-reverse md:flex-row items-center justify-between gap-8 md:gap-12 text-white">
        <div className="flex-1 flex flex-col gap-4">
          <h1 className="text-4xl md:text-[56px] font-bold leading-tight font-['Barlow_Semi_Condensed']">
            {iniciativa.titulo}
          </h1>
          <h2 className="text-2xl md:text-[32px] font-semibold font-['Barlow_Semi_Condensed'] opacity-90">
            {iniciativa.subtitulo}
          </h2>
          <p className="text-lg md:text-xl font-['Lato'] max-w-2xl mt-2 leading-relaxed">
            {iniciativa.descricaoResumida}
          </p>
        </div>
        
        {/* Imagem Cover no Hero */}
        <div className="flex-1 flex justify-center md:justify-end w-full max-w-[300px] md:max-w-[400px]">
          <img 
            src={iniciativa.cover} 
            alt={iniciativa.titulo} 
            className="w-full h-auto object-contain drop-shadow-2xl" 
          />
        </div>
      </section>

      {/* Conteúdo Dinâmico Intercalado */}
      <section className="w-full py-16 px-6 md:px-[120px] flex flex-col gap-24">
        
        {/* Bloco 1 */}
        <div className="flex flex-col md:flex-row gap-10 md:gap-16 items-center">
          
          <div className="flex-1 w-full rounded-2xl border-2 border-[#F9A01B] overflow-hidden aspect-video relative bg-[#F9A01B]">
            <img 
              src={iniciativa.foto1} 
              alt="Foto 1" 
              className="w-full h-full object-cover opacity-70" 
            />
          </div>
          
          <div className="flex-1 flex flex-col gap-6">
            <div className="w-[79px] h-2 bg-[#F9A01B] rounded-full" />
            <p className="text-2xl font-['Lato'] text-[#201D1E] leading-relaxed">
              {iniciativa.texto1}
            </p>
          </div>
        </div>

        {/* Bloco 2 */}
        <div className="flex flex-col md:flex-row-reverse gap-10 md:gap-16 items-center">
          
          <div className="flex-1 w-full rounded-2xl border-2 border-[#F90527] overflow-hidden aspect-video relative bg-[#F90527]">
            <img 
              src={iniciativa.foto2} 
              alt="Foto 2" 
              className="w-full h-full object-cover opacity-70" 
            />
          </div>
          
          <div className="flex-1 flex flex-col gap-6">
            <div className="w-[79px] h-2 bg-[#F90527] rounded-full" />
            <p className="text-2xl font-['Lato'] text-[#201D1E] leading-relaxed">
              {iniciativa.texto2}
            </p>
          </div>
        </div>

        {/* Bloco 3 */}
        <div className="flex flex-col md:flex-row gap-10 md:gap-16 items-center">
          
          <div className="flex-1 w-full rounded-2xl border-2 border-[#D7DF23] overflow-hidden aspect-video relative bg-[#D7DF23]">
            <img 
              src={iniciativa.foto3} 
              alt="Foto 3" 
              className="w-full h-full object-cover opacity-70" 
            />
          </div>
          
          <div className="flex-1 flex flex-col gap-6">
            <div className="w-[79px] h-2 bg-[#D7DF23] rounded-full" />
            <p className="text-2xl font-['Lato'] text-[#201D1E] leading-relaxed">
              {iniciativa.texto3}
            </p>
          </div>
        </div>

      </section>

      {/* Botão de Voltar para Iniciativas */}
      <section className="px-6 md:px-[120px] pb-24">
        <Link 
          to="/iniciativas" 
          className="inline-block px-[36px] py-[12px] bg-[#242527] text-white font-bold text-[24px] rounded-2xl font-['Barlow_Semi_Condensed'] hover:bg-[#F90527] transition-colors"
        >
          Voltar para Iniciativas
        </Link>
      </section>

      <Footer />
      
    </div>
  );
};

export default IniciativaDetalhe;