import './new_a_propos.css'

const Features = () => {
  const values = [
    {
      icon: "/img/feature_innovation.png",
      title: "Innovation",
      description: "Nous anticipons vos besoins pour vous offrir des solutions adaptées."
    },
    {
      icon: "/img/feature_proximite.png",
      title: "Proximité",
      description: "Un accompagnement humain et personnalisé pour chaque client."
    },
    {
      icon: "/img/feature_excellence.png",
      title: "Excellence",
      description: "Des solutions fiables qui font leurs preuves au quotidien."
    },
    {
      icon: "/img/feature_transparence.png",
      title: "Transparence",
      description: "Nous construisons des relations basées sur la confiance."
    }
  ];

  return (
    <div className='new_a_propos_2025'>
      <div className="Features_container">

        <div className="Features_titleContainer">
          <span className="Features_subtitle">NOS VALEURS</span>
          <h2 className="Features_title">Des valeurs qui nous guident.</h2>
        </div>

        <div className="Features_cardContainer">
          {values.map((value, index) => (
            <div key={index} className="Features_card">
              <div className="Features_iconWrapper">
                <img src={value.icon} alt="" className="Features_icon" />
              </div>
              <div className="Features_content">
                <h3 className="Features_cardTitle">{value.title}</h3>
                <p className="Features_description">{value.description}</p>
              </div>
            </div>
          ))}
        </div>

        <button className="Features_button">
          Découvrir notre solution
        </button>
      </div>
    </div>
  );
};

const styles = {
  container: {
    padding: '100px 80px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '48px',
    background: '#ffffff',
  },
  titleContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '4px',
    width: '100%',
  },
  subtitle: {
    fontFamily: 'DM Sans',
    fontSize: '16px',
    fontWeight: 700,
    color: '#ecae49',
    textAlign: 'center',
    textTransform: 'uppercase',
    lineHeight: '16px',
  },
  title: {
    fontFamily: 'DM Sans',
    fontSize: '40px',
    fontWeight: 700,
    color: '#16274f',
    textAlign: 'center',
    lineHeight: '120%',
    margin: '20px 0 0 0',
  },
  cardContainer: {
    display: 'flex',
    flexDirection: 'row',
    gap: '24px',
    width: '100%',
    justifyContent: 'center',
  },
  card: {
    width: '270px',
    padding: '48px 16px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '24px',
    background: '#fdf6ec1a',
    borderRadius: '12px',
    border: '1px solid #ecae49',
  },
  iconWrapper: {
    width: '88px',
    height: '88px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    width: '88px',
    height: '88px',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '8px',
    width: '100%',
  },
  cardTitle: {
    fontFamily: 'DM Sans',
    fontSize: '20px',
    fontWeight: 700,
    color: '#16274f',
    textAlign: 'center',
    lineHeight: '24px',
    margin: 0,
  },
  description: {
    fontFamily: 'Inter',
    fontSize: '14px',
    fontWeight: 400,
    color: '#4b5162',
    textAlign: 'center',
    lineHeight: '160%',
    opacity: 0.8,
    margin: 0,
  },
  button: {
    padding: '12px 20px',
    borderRadius: '200px',
    border: '1px solid #c7c9ce',
    background: 'transparent',
    fontFamily: 'DM Sans',
    fontSize: '16px',
    fontWeight: 700,
    color: '#4b5162',
    cursor: 'pointer',
    transition: 'all 0.2s ease',
  },
};

export default Features;

