import React from 'react';
import './ClientRelationManagement.css';

const ClientRelationManagement = ({ style }) => {
  return (
    <div className="crm-container" style={style}>
      <div className="header">
        <h2>Gestion relation client (CRM)</h2>
        <img src="/img/market_place_img_arrow1.png" alt="arrow down" className="arrow-icon" />
      </div>
      
      <div className="content-row">
        <div className="features-column">
          <div className="feature-item">Gestion clients & Contacts</div>
          <div className="feature-item">Affectation et Suivi tâches</div>
          <div className="feature-item">Catalogue prix clients</div>
          <div className="feature-item">Devis & Commandes (envoi électronique)</div>
          <div className="feature-item">Facturation</div>
        </div>

        <div className="pricing-column">
          <div className="price-header">
            <img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/04-2.png" alt="Price 1" className="price-image" />
          </div>
          <div className="price-content">
            <div className="check-item">
              <div className="check-circle">
                <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
              </div>
            </div>
          </div>
        </div>

        <div className="pricing-column">
          <div className="price-header">
            <img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/16-2.png" alt="Price 2" className="price-image" />
          </div>
          <div className="price-content">
            <div className="check-item">
              <div className="check-circle">
                <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
              </div>
            </div>
          </div>
        </div>

        <div className="pricing-column">
          <div className="price-header highlight">
            <div className="check-item">
              <div className="check-circle">
                <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
              </div>
            </div>
          </div>
          <div className="price-content">
            <div className="check-item">
              <div className="check-circle">
                <img src="/img/market_place_img_check.png" alt="check" className="check-icon" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

ClientRelationManagement.defaultProps = {
  style: {}
};

export default ClientRelationManagement;

 