import Image from "next/image";
import {Container} from "@/shared/components/Container/Container";
import cooperation1 from "@/shared/assets/images/cooperation1.png";
import cooperation2 from "@/shared/assets/images/cooperation2.png";
import cooperation3 from "@/shared/assets/images/cooperation3.png";
import cooperation4 from "@/shared/assets/images/cooperation4.png";
import cooperation5 from "@/shared/assets/images/cooperation5.png";
import cooperation6 from "@/shared/assets/images/cooperation6.png";
import styles from './CooperationPlanSection.module.css';
import classNames from "classnames";

export function CooperationPlanSection() {
    return (
        <section className={styles.root}>
            <Container>
                <h3 className={styles.heading}>Схема нашего сотрудничества</h3>
                <div className={styles.innerContainer}>
                    <div className={styles.block1}>
                        <div className={styles.image1Block}>
                            <div className={styles.mask}></div>
                            <div className={styles.textBlock}>
                                <p className={styles.number}>1</p>
                                <p>Выбираете любые товары с нашего склада</p>
                            </div>
                            <Image className={classNames(styles.image)} placeholder={'blur'} fill src={cooperation1} sizes={'33vw'} alt={''}/>
                        </div>
                        <div className={styles.image2Block}>
                            <div className={styles.mask}></div>
                            <div className={styles.textBlock}>
                                <p className={styles.number}>4</p>
                                <p>Мы собираем и упаковываем ваши заказы</p>
                            </div>
                            <Image className={styles.image} placeholder={'blur'} src={cooperation4} fill sizes={'33vw'} alt={''}/>
                        </div>
                        <div className={styles.image3Block}>
                            <div className={styles.mask}></div>
                            <div className={styles.textBlock}>
                                <p className={styles.number}>5</p>
                                <p>Доставляем заказы на сортировочные центры МП</p>
                            </div>
                            <Image className={styles.image} placeholder={'blur'} src={cooperation5} fill sizes={'33vw'} alt={''}/>
                        </div>
                    </div>
                    <div className={styles.block2}>
                        <div className={styles.image4Block}>
                            <div className={styles.mask}></div>
                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
                                <p className={styles.number}>2</p>
                                <p>Добавляете товары на МП по системе FBS</p>
                            </div>
                            <Image className={styles.image} placeholder={'blur'} src={cooperation2} fill sizes={'33vw'} alt={''}/>
                        </div>
                        <div className={styles.image5Block}>
                            <div className={styles.mask}></div>
                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
                                <p className={styles.number}>3</p>
                                <p>Получайте заказы в личном кабинете</p>
                            </div>
                            <Image className={styles.image} placeholder={'blur'} src={cooperation3} fill sizes={'33vw'} alt={''}/>
                        </div>
                        <div className={styles.image6Block}>
                            <div className={styles.mask}></div>
                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
                                <p className={styles.number}>6</p>
                                <p>Маркетплейс переводит вам деньги</p>
                            </div>
                            <Image className={styles.image} placeholder={'blur'} src={cooperation6} fill sizes={'33vw'} alt={''}/>
                        </div>
                    </div>
                </div>
            </Container>
        </section>
    );
};