import React from 'react';

const IllustrationSection = ({ style = {} }) => {
  return (
    <div style={{ ...style, padding: '20px', boxSizing: 'border-box' }}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        width: '100%',
        maxWidth: '1136px',
        minHeight: '338px',
        margin: '0 auto',
        flexWrap: 'wrap'
      }}>
        {/* First illustration */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '35px',
          width: '256px',
          boxSizing: 'border-box',
          margin: '10px'
        }}>
          <div style={{
            width: '188px',
            height: '157px',
            marginLeft: '34px'
          }}>
            <img 
              src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/illustra.png" 
              alt="Configuration"
              style={{ width: '100%', height: '100%' }}
            />
          </div>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
            width: '100%'
          }}>
            <h3 style={{
              fontFamily: 'DM Sans',
              fontSize: '20px',
              fontWeight: 700,
              lineHeight: '130%',
              color: '#16274f',
              textAlign: 'center',
              margin: 0,
              padding: '0 8px'
            }}>
              Configuration<br />de votre espace
            </h3>
            <p style={{
              fontFamily: 'Inter',
              fontSize: '14px',
              fontWeight: 400,
              lineHeight: '160%',
              color: '#4b5162',
              opacity: 0.8,
              textAlign: 'center',
              margin: 0
            }}>
              Nous vous accompagnons dans la création et paramétrage de votre espace.
            </p>
          </div>
        </div>

        {/* Divider 1 */}
        <div style={{
          width: '150px',
          height: '20px',
          borderTop: '2px solid #3e6ee3',
          margin: '105px 0'
        }} />

        {/* Second illustration */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '29px',
          width: '256px',
          boxSizing: 'border-box',
          margin: '10px'
        }}>
          <div style={{
            width: '183px',
            height: '169px',
            marginLeft: '36.5px',
            position: 'relative'
          }}>
            <div style={{
              width: '170px',
              height: '128px',
              backgroundColor: '#ffffff',
              borderRadius: '6px',
              padding: '20px'
            }}>
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '10px'
              }}>
                <div style={{
                  fontSize: '18px',
                  fontFamily: 'Chivo',
                  fontWeight: 700,
                  color: '#060c3c',
                  lineHeight: '120%'
                }}>
                  1200+
                </div>
                <div style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '8px'
                }}>
                  <div style={{
                    width: '65px',
                    height: '6px',
                    backgroundColor: '#b4b6c4',
                    borderRadius: '6px'
                  }} />
                  <div style={{
                    width: '65px',
                    height: '6px',
                    backgroundColor: '#b4b6c4',
                    borderRadius: '6px'
                  }} />
                  <div style={{
                    width: '130px',
                    height: '20px',
                    backgroundColor: '#0aa690',
                    borderRadius: '6px'
                  }} />
                </div>
              </div>
            </div>
          </div>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
            width: '100%'
          }}>
            <h3 style={{
              fontFamily: 'DM Sans',
              fontSize: '20px',
              fontWeight: 700,
              lineHeight: '130%',
              color: '#16274f',
              textAlign: 'center',
              margin: 0,
              padding: '0 8px'
            }}>
              Gestion<br />de vos formations
            </h3>
            <p style={{
              fontFamily: 'Inter',
              fontSize: '14px',
              fontWeight: 400,
              lineHeight: '160%',
              color: '#4b5162',
              opacity: 0.8,
              textAlign: 'center',
              margin: 0
            }}>
              Organisez vos formations, suivez les progrès de vos apprenants, et automatisez vos tâches administratives.
            </p>
          </div>
        </div>

        {/* Divider 2 */}
        <div style={{
          width: '150px',
          height: '20px',
          borderTop: '2px solid #3e6ee3',
          margin: '108px 0'
        }} />

        {/* Third illustration */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '35px',
          width: '256px',
          boxSizing: 'border-box',
          margin: '10px'
        }}>
          <div style={{
            width: '192px',
            height: '156px',
            marginLeft: '32px',
            position: 'relative'
          }}>
            <img 
              src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/group-33.png" 
              alt="Analytics"
              style={{
                width: '170px',
                height: '128px',
                position: 'absolute',
                top: '28px',
                left: '22px'
              }}
            />
            <img 
              src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/group-91.png" 
              alt="Chart"
              style={{
                width: '72px',
                height: '58px',
                position: 'absolute',
                top: 0,
                left: 0
              }}
            />
            <div style={{
              position: 'absolute',
              top: '34px',
              right: '8px',
              width: '70px',
              height: '38px',
              backgroundColor: '#0aa690',
              borderRadius: '4px',
              padding: '6px'
            }}>
              <div style={{
                color: '#ffffff',
                fontSize: '14px',
                fontFamily: 'Chivo',
                lineHeight: '110%'
              }}>
                40%
              </div>
              <img 
                src="https://dashboard.codeparrot.ai/api/image/Z7B1E49nxTWt8i5i/group-87.png" 
                alt="Icon"
                style={{
                  width: '14px',
                  height: '14px',
                  position: 'absolute',
                  top: '9px',
                  right: '8px'
                }}
              />
            </div>
          </div>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
            width: '100%'
          }}>
            <h3 style={{
              fontFamily: 'DM Sans',
              fontSize: '20px',
              fontWeight: 700,
              lineHeight: '130%',
              color: '#16274f',
              textAlign: 'center',
              margin: 0,
              padding: '0 66px'
            }}>
              Développez<br />vos activités
            </h3>
            <p style={{
              fontFamily: 'Inter',
              fontSize: '14px',
              fontWeight: 400,
              lineHeight: '160%',
              color: '#4b5162',
              opacity: 0.8,
              textAlign: 'center',
              margin: 0
            }}>
              Exploitez les données et fonctionnalités avancées pour améliorer vos offres.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default IllustrationSection;

