import React from "react";
import styled from "styled-components";
import { FaLinkedin } from "react-icons/fa6"; // Correct social media icons

import leaders from "../../data/leaders"; // Import leader data

// Styled components for the Organization Leaders section
const LeadersContainer = styled.section`
  padding: 4rem 2rem;
  background-color: #121212; // Dark background
  color: white;
  text-align: center;
`;

const LeadersTitle = styled.h2`
  font-size: 3rem;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  color: #3267B9;  // Blue color for the title
  margin-bottom: 2rem;
`;

const LeadersWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
  }
`;

const LeaderCard = styled.div`
  background-color: #2d3748;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  border: 3px solid #3267B9;
  border-radius: 12px;  
`;

const LeaderImage = styled.div`
  width: 100%;
  padding-top: 100%; // 16:9 aspect ratio
  position: relative;
  background-image: url(${(props) => props.src});
  background-size: cover;
  background-position: center;
  border-radius: 12px 12px 0 0; // Rounded top corners
`;

const LeaderContent = styled.div`
  padding: 2rem;
  text-align: left; // Align text to the left
  flex-grow: 1; // Allow content to grow
  display:flex-column;
  justify-content:center;
  align-items: center;
`;

const LeaderName = styled.h3`
  font-size: 1.75rem;
  flex-grow: 1;
  color: #e2e8f0;
  font-weight: bold;
  margin-bottom: 0.5rem;
`;

const LeaderTitle = styled.p`
  font-size: 1rem;
  background-clip: text;
  -webkit-background-clip: text;
  color: #3267B9;  // Blue color for the title
  font-weight: 500;
  margin-bottom: 1rem;
`;

const LeaderBio = styled.p`
  font-size: 0.875rem;  // Reduced text size
  color: #e2e8f0;
  line-height: 1.5;
  margin-bottom: 1.5rem;
`;

const SocialLinks = styled.div`
  display: flex;
  justify-content: center;
  gap: 1rem;

  a {
    color: #d5d5d5;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
      fill: #d5d5d5; // Default icon color
      transition: fill 0.3s ease;
    }

    &:hover svg {
      fill: #3267B9; // Apply gradient on hover
    }
  }
`;


const OrganizationLeaders = () => {

  return (
    <LeadersContainer>
      <LeadersTitle>Meet Our Visionaries</LeadersTitle>
      <LeadersWrapper>
        {leaders.map((leader, index) => (
          <LeaderCard key={index} data-testid={`leader-card-${index}`}>
          <LeaderImage src={leader.image} role="img" />
          <LeaderContent>
            <LeaderName>{leader.name}</LeaderName>
            <LeaderTitle>{leader.title}</LeaderTitle>
            <LeaderBio>{leader.bio}</LeaderBio>
            <SocialLinks>
              {leader.social.linkedin && (
                <a
                  href={leader.social.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  data-testid={`linkedin-link-${index}`}
                >
                  <FaLinkedin />
                </a>
              )}
            </SocialLinks>
          </LeaderContent>
        </LeaderCard>
        
        ))}
      </LeadersWrapper>
    </LeadersContainer>
  );
};

export default OrganizationLeaders;