/**
 * 底部的评价及合作品牌
 */

import React, { Component } from 'react';
import IceImg from '@ali/ice-img';
import { Grid, Button, Icon } from '@icedesign/base';
import './Cooperation.less';

const { Row, Col } = Grid;

export default class Cooperation extends Component {
  render() {
    const evaluates = [
      {
        name: '赤炎',
        team: '淘宝技术部',
        avatar:
          'https://gw.alicdn.com/tfs/TB1ulIqllfH8KJjy1XbXXbLdXXa-80-80.jpg',
        content:
          'ICE 是一个赋能服务端开发写 web 页面的强大工具平台，尤其是适合用来快速搭建运营后台和小二后台。ICE 具备强大的组件库，有专属前端团队维护和支持。',
      },
      {
        name: '诗棋',
        team: '搜索事业部',
        avatar:
          'https://gw.alicdn.com/tfs/TB1YXBtlwvD8KJjy0FlXXagBFXa-80-80.jpg',
        content:
          'ICE 拥有很完善的组件库，这让即使是没有前端基础的 java 程序员，也可以利用它快速地搭建出前端页面，而不用陷入到 js、css 的繁琐调试中。',
      },
      {
        name: '宣杭',
        team: '淘宝运营平台',
        avatar:
          'https://gw.alicdn.com/tfs/TB1ReVplxrI8KJjy0FpXXb5hVXa-80-78.jpg',
        content:
          '从长远的开发角度来说，ICE 是一套节省成本，功能、视觉风格统一且实用的应用解决方案。运营平台管理中心就是基于 ICE 搭建，相信 ICE 可以越来越好。',
      },
    ];

    return (
      <div className="home-cooperation">
        <div className="cooperation-container">
          <h2 style={styles.cooperationTitle}>专业的选择</h2>
          <p style={styles.cooperationDescription}>
            270 多个项目正在使用，持续可靠的稳定，即时有效的服务
          </p>
          <div className="cooperation-projects">
            {[
              '//img.alicdn.com/tfs/TB1aJpRmrYI8KJjy0FaXXbAiVXa-342-120.png',
              '//img.alicdn.com/tfs/TB1G568mlfH8KJjy1XbXXbLdXXa-417-144.png',
              '//img.alicdn.com/tfs/TB1gJpRmrYI8KJjy0FaXXbAiVXa-406-112.png',
              '//img.alicdn.com/tfs/TB1pTXTmr_I8KJjy1XaXXbsxpXa-498-116.png',
              '//img.alicdn.com/tfs/TB1tDXTmr_I8KJjy1XaXXbsxpXa-498-147.png',
              '//img.alicdn.com/tfs/TB1mtpRmrYI8KJjy0FaXXbAiVXa-339-140.png',
              '//img.alicdn.com/tfs/TB1DV0bmxrI8KJjy0FpXXb5hVXa-333-126.png',
              '//img.alicdn.com/tfs/TB1IF0bmxrI8KJjy0FpXXb5hVXa-528-103.png',
              '//img.alicdn.com/tfs/TB14LUmmhTI8KJjSspiXXbM4FXa-560-109.png',
              '//img.alicdn.com/tfs/TB19vUmmhTI8KJjSspiXXbM4FXa-442-143.png',
              '//img.alicdn.com/tfs/TB1.LUmmhTI8KJjSspiXXbM4FXa-384-144.png',
              '//img.alicdn.com/tfs/TB1iNBLmDvI8KJjSspjXXcgjXXa-396-145.png',
              '//img.alicdn.com/tfs/TB1kxBLmDvI8KJjSspjXXcgjXXa-236-111.png',
              '//img.alicdn.com/tfs/TB1NF0bmxrI8KJjy0FpXXb5hVXa-541-125.png',
            ].map((imgUrl, i) => {
              return <img key={i} src={imgUrl} style={styles.showcaseImg} />;
            })}

            <div style={{ textAlign: 'center', marginTop: '30px' }}>
              <a
                target="_blank"
                href="https://github.com/alibaba/ice/issues/156"
              >
                <Button shape="ghost" size="large">
                  <Icon type="add" />
                  提交您的案例
                </Button>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  cooperationTitle: {
    marginBottom: '32px',
    textAlign: 'center',
    fontSize: '38px',
    color: '#262626',
    fontWeight: '500',
  },
  cooperationDescription: {
    textAlign: 'center',
    fontSize: '16px',
    color: '#595959',
    marginBottom: '40px',
  },
  showcaseImg: {
    height: 30,
    margin: 20,
  },
};