// Channels & integrations section — brand pills with real icons.

const CH_MESSENGERS = [
  { name: 'Telegram', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <circle cx="12" cy="12" r="12" fill="#229ED9"/>
      <path d="M5.5 11.7 17.6 7c.7-.3 1.3.2 1.1.9l-2.1 9.7c-.2.7-.7.9-1.3.5l-3.5-2.6-1.7 1.6c-.2.2-.4.3-.7.3l.3-3.7 6.7-6c.3-.3-.1-.4-.5-.2L7 12.7l-3.4-1.1c-.7-.2-.7-.7.4-1Z" fill="#fff"/>
    </svg>
  )},
  { name: 'WhatsApp', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <circle cx="12" cy="12" r="12" fill="#25D366"/>
      <path d="M16.7 13.5c-.3-.1-1.6-.8-1.8-.9-.2-.1-.4-.1-.6.2-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.8-.7-1.4-1.6-1.6-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.3-.8-1.8-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.4-.3.3-.9.9-.9 2.1s.9 2.5 1.1 2.7c.1.2 1.8 2.7 4.4 3.8.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.6-.6 1.8-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3Z" fill="#fff"/>
    </svg>
  )},
  { name: 'ВКонтакте', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <rect width="24" height="24" rx="5" fill="#0077FF"/>
      <path d="M13 17c-4.6 0-7.2-3.1-7.3-8.4h2.3c.1 3.9 1.8 5.5 3.2 5.9V8.6h2.2v3.4c1.4-.1 2.8-1.7 3.3-3.4h2.2c-.4 2.1-2 3.7-3.1 4.4 1.1.5 3 1.9 3.7 4.4h-2.4c-.5-1.7-1.8-3-3.7-3.2V17H13Z" fill="#fff"/>
    </svg>
  )},
  { name: 'Viber', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <circle cx="12" cy="12" r="12" fill="#7360F2"/>
      <path d="M16.4 6.3c-2.4-.5-4.7-.5-7.1 0-1.7.4-2.5 1.7-2.6 3.5v3.7c.1 1.5.8 2.6 2.1 3.2v2.1l1.9-1.5c1.9.3 3.8.3 5.7 0 1.7-.4 2.5-1.7 2.6-3.5V9.8c-.1-1.8-.9-3.1-2.6-3.5Z" fill="#fff"/>
    </svg>
  )},
];

const CH_CRM = [
  { name: 'Диспетчерская', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <rect width="24" height="24" rx="5" fill="#FC3F1D"/>
      <path d="M13.5 19h-2V8.7h-1c-1.5 0-2.4.8-2.4 2 0 1.4.6 2 1.7 2.7l1 .6L8 19H5.7l2.5-5.2c-1.4-1-2.2-2-2.2-3.7 0-2.2 1.5-3.6 4.4-3.6h3.1V19Z" fill="#fff"/>
    </svg>
  )},
  { name: 'Wazzup', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <rect width="24" height="24" rx="5" fill="#22C55E"/>
      <path d="m4 8 2.4 8h2L10 11l1.6 5h2L16 8h-2l-1.4 5.4L11 8H9l-1.6 5.4L6 8H4Z" fill="#fff"/>
    </svg>
  )},
  { name: 'amoCRM', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <rect width="24" height="24" rx="5" fill="#0090E5"/>
      <path d="M12 6c-3.3 0-6 2.6-6 5.9 0 1.5.6 2.9 1.5 4l-.7 2 2.1-.7c.9.5 2 .8 3.1.8 3.3 0 6-2.6 6-5.9S15.3 6 12 6Z" fill="#fff"/>
      <circle cx="9.6" cy="11.9" r="1" fill="#0090E5"/>
      <circle cx="12" cy="11.9" r="1" fill="#0090E5"/>
      <circle cx="14.4" cy="11.9" r="1" fill="#0090E5"/>
    </svg>
  )},
  { name: 'Битрикс24', icon: (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
      <rect width="24" height="24" rx="5" fill="#1FA8E0"/>
      <path d="M7 7h4.5c1.7 0 3 1.2 3 2.7 0 .9-.4 1.6-1.1 2 1 .4 1.6 1.3 1.6 2.4 0 1.7-1.4 2.9-3.3 2.9H7V7Zm2.2 1.9v2h2c.7 0 1.2-.4 1.2-1s-.5-1-1.2-1h-2Zm0 3.7v2.4h2.3c.8 0 1.4-.5 1.4-1.2 0-.8-.6-1.2-1.4-1.2H9.2Z" fill="#fff"/>
    </svg>
  )},
];

function Channels() {
  return (
    <section id="channels" className="bg-alt">
      <div className="wrap">
        <div className="section-head">
          <h2>Готов к работе <em>с вашими системами</em></h2>
        </div>
        <div className="channels-grid">
          <div className="ch-card">
            <div className="ch-card-title">Каналы общения с водителями</div>
            <div className="ch-card-sub">Все популярные мессенджеры</div>
            <div className="ch-pills">
              {CH_MESSENGERS.map((c, i) => (
                <span key={'m'+i} className="ch-pill ch-pill-icon">
                  {c.icon}
                  <span>{c.name}</span>
                </span>
              ))}
              <span key="m-any" className="ch-pill ch-pill-muted">Любой канал</span>
            </div>
          </div>
          <div className="ch-card">
            <div className="ch-card-title">Интеграция с вашими системами</div>
            <div className="ch-card-sub">Подключается за минуты</div>
            <div className="ch-pills">
              {CH_CRM.map((c, i) => (
                <span key={'c'+i} className="ch-pill ch-pill-icon">
                  {c.icon}
                  <span>{c.name}</span>
                </span>
              ))}
              <span key="c-any" className="ch-pill ch-pill-muted">Любая CRM</span>
            </div>
          </div>
        </div>
        <div className="channels-cta">
          <a className="btn btn-primary" href="#cta">Подключить Парк AI</a>
        </div>
      </div>
    </section>
  );
}
window.Channels = Channels;