// import React from 'react';

// const IniciativasDestaque = () => {
//   const cards = [
//     {
//       titulo: "Aulas nas Escolas",
//       imagem: "/src/pages/Iniciativas/assets/destaque1.png", 
//     },
//     {
//       titulo: "Formações de Educadores",
//       imagem: "/src/pages/Iniciativas/assets/destaque2.png",
//     },
//     {
//       titulo: "Aulas no OcupaLab",
//       imagem: "/src/pages/Iniciativas/assets/destaque3.png",
//     }
//   ];

//   return (
//     <section className="w-full flex flex-col items-start px-6 md:px-[120px] py-16 md:py-[106px] gap-10 bg-gradient-to-r from-[#F90527] to-[#F50C52]">
      
//       {/* Título da Seção */}
//       <h2 className="text-white text-4xl md:text-[46px] font-bold leading-none font-['Barlow_Semi_Condensed']">
//         Principais Iniciativas
//       </h2>

//       {/* Container dos Cards */}
//       <div className="flex flex-col md:flex-row gap-[40px] items-start w-full">
//         {cards.map((card, index) => (
//           // Cada Card (Frame 42 / 46 do Figma)
//           <div key={index} className="flex flex-col items-start gap-[24px] flex-1 w-full">
            
//             {/* Caixa da Imagem (Rectangle 204/205) */}
//             <div 
//               className="w-full md:max-w-[378.67px] h-[186px] rounded-xl border-2 border-white bg-cover bg-center overflow-hidden relative"
//               style={{ backgroundImage: `url(${card.imagem})` }}
//             >
//               {/* Opcional: Se a imagem no Figma tiver aquele filtro vermelho por cima */}
//               <div className="absolute inset-0 bg-[#F90527]/30 mix-blend-multiply"></div>
//             </div>

//             {/* Título do Card */}
//             <h3 className="text-white text-[28px] font-bold leading-[38px] font-['Barlow_Semi_Condensed']">
//               {card.titulo}
//             </h3>
            
//             {/* Botão (Frame 47) */}
//             <button className="flex justify-center items-center px-[36px] py-[12px] border-2 border-white/50 rounded-2xl text-white font-bold text-[24px] leading-[29px] font-['Barlow_Semi_Condensed'] hover:bg-white/10 transition-colors">
//               Saiba mais
//             </button>
            
//           </div>
//         ))}
//       </div>
//     </section>
//   );
// };

// export default IniciativasDestaque;
import React from 'react';
import { Link } from 'react-router-dom';

const IniciativasDestaque = ({ iniciativas }) => {
  // Pega apenas as 3 primeiras iniciativas do JSON para o destaque
  const destaques = iniciativas.slice(0, 3);

  return (
    <section className="w-full flex flex-col items-start px-6 md:px-[120px] py-16 md:py-[106px] gap-10 bg-gradient-to-r from-[#F90527] to-[#F50C52]">
      
      {/* Título da Seção */}
      <h2 className="text-white text-4xl md:text-[56px] font-bold leading-none font-['Barlow_Semi_Condensed']">
        Principais Iniciativas
      </h2>

      {/* Container dos Cards */}
      <div className="flex flex-col md:flex-row gap-[40px] items-start w-full">
        {destaques.map((iniciativa) => (
          <div key={iniciativa.id} className="flex flex-col items-start gap-[24px] flex-1 w-full  p-4 rounded-xl">
            
            {/* Caixa da Imagem */}
            <div 
              className="w-full md:max-w-[378.67px] h-[186px] rounded-xl bg-cover bg-center overflow-hidden relative"
              style={{ backgroundImage: `url(${iniciativa.destaque})` }}
            >
              {/* Overlay vermelho para dar um efeito visual por cima da imagem */}
              <div className="absolute inset-0 bg-[#F90527]/10 mix-blend-multiply"></div>
            </div>

            {/* Título do Card */}
            <h3 className="text-white text-[24px] font-bold leading-[38px] font-['Barlow_Semi_Condensed'] text-center w-full">
              {iniciativa.titulo}
            </h3>
            
            {/* Link apontando para a página de Detalhes da Iniciativa específica */}
            <Link 
              to={`/iniciativas/${iniciativa.id}`}
              className="flex justify-center items-center px-[36px] py-[12px] border-2 border-white/50 rounded-2xl font-bold text-[24px] leading-[29px] font-['Barlow_Semi_Condensed'] bg-white text-[#AF1F16] w-full"
            >
              Saiba mais
            </Link>
            
          </div>
        ))}
      </div>
    </section>
  );
};

export default IniciativasDestaque;