import React from "react";
import Layout from "../Layout";
import { Row, Col, Image, Typography } from "antd";
import { HeaderImg } from "./Solution";
import { AdvantageTitle } from "../App";
import { SafeFooter } from "./Product";
import UsImg from '../static/web/org/arch/16.jpg';
import RowImg from '../static/web/org/arch/13.jpg';
import PeopleImg1 from '../static/web/org/hot/16.jpg';
import PeopleImg2 from '../static/web/org/ppl/18.jpg';
import PeopleImg3 from '../static/web/org/ppl/13.jpg';
import CertificateImg from '../static/web/org/arch/16.jpg';
import TextMore from "../utils/TextMore";
import './style/about_us.less';

const { Title, Paragraph } = Typography;
const content = `任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位`;
const Images = [
    PeopleImg1,
    PeopleImg2,
    PeopleImg3,
];
const JobList = [
    'CEO',
    'COO',
    'CMO',
];

const AboutUs = () => {

    return (<>
        <Layout>
            <HeaderImg />
            <div className="us_title">
                <Row>
                    <Col span={12}>
                        <Image src={UsImg} height={330} width={'100%'} preview={false} />
                    </Col>
                    <Col span={11} offset={1}>
                        <Title level={2} style={{ marginBottom: '48px' }}>关于我们</Title>
                        <Paragraph ellipsis={{ rows: 4 }} style={{ fontSize: '16px' }}>
                            {content}
                        </Paragraph>
                        <Paragraph ellipsis={{ rows: 4 }} style={{ fontSize: '18px' }}>
                            {content}
                        </Paragraph>
                    </Col>
                </Row>
            </div>
            <AdvantageTitle />
            <Image preview={false} width='100%' height={320} src={RowImg} />
            <>
                <Row justify='center' className="team_title">
                    <Title level={3}>专业管理团队为您保驾护航</Title>
                </Row>
                <Row justify='space-around'>
                    {new Array(3).fill(null).map((_, i) => <Col span={6} className='people' key={i}>
                        <Row>
                            <Col span={12}>
                                <Image preview={false} height={200} src={Images[i]} />
                            </Col>
                            <Col span={12} className='people_name'>
                                <div>摸鱼大师</div>
                                <div>{JobList[i]}</div>
                            </Col>
                        </Row>
                        <Row className="prople_desc">
                            <TextMore text={content} rows={5} />
                        </Row>
                    </Col>)}
                </Row>
            </>
            <>
                <Row justify='center' className="team_title">
                    <Title level={3}>资质证书</Title>
                </Row>
                <Row justify='space-around' className="certificate">
                    {new Array(4).fill(null).map((_, i) => <Col span={5} key={i}>
                        <Image
                            preview={false} src={CertificateImg} height={320}
                        />
                    </Col>)}
                </Row>
            </>
            <SafeFooter />
        </Layout>
    </>)
};

export default AboutUs;