import styles from './DencoHelpsSection.module.css'
import {MessageBlock, MessageBlockProps} from "@/sections/DencoHelpsSection/components/MessageBlock/MessageBlock";
import {Container} from "@/shared/components/Container/Container";
import Image from "next/image";
import phone from '@/shared/assets/images/phone/телефон 1.png';
import phoneLight from '@/shared/assets/images/phone/phoneLight.svg'
import phoneShadow from '@/shared/assets/images/phone/phoneShadow.svg'

const messageItems: MessageBlockProps[] = [
    {
        boldText: 'Процесс закупки и недоступность хранения',
        regularText: 'партии товара.'
    },
    {
        boldText: 'Пугает риск потерять всё',
        regularText: 'из-за недостатка опыта.'
    },
    {
        boldText: 'Трудно найти поставщиков.',
    },
    {
        boldText: 'Отсутствие капитала',
        regularText: 'для старта.'
    },
    {
        boldText: 'Сложная организация процесса',
        regularText: 'от упаковки до доставки на МП.'
    },
    {
        boldText: 'Отсутствие',
        regularText: 'большого количества времени.'
    }
]

export function DencoHelpsSection() {
    return (
        <section className={styles.root}>
            <Container className={styles.container}>
                <ul className={styles.list}>
                    {messageItems.map((item, index) => <MessageBlock key={index} boldText={item.boldText} regularText={item.regularText}/>)}
                </ul>
                <div className={styles.dencoHelpsText}>
                    <p className={styles.firstParagraph}>DENCO помогает <span className={styles.blackText}>начинающим и опытным селлерам.</span></p>
                    <p>Мы сделаем за вас <span className={styles.blackText}>всю</span> рутинную работу <span
                        className={styles.blackText}>и</span> решим ряд ваших проблем!</p>
                    <div className={styles.tail}/>
                </div>
            </Container>
            <div className={styles.bgImageContainer}>
                <div className={styles.phoneContainer}>
                    <Image
                        src={phone}
                        alt={''}
                        sizes={'100vw'}
                        style={{
                            // objectFit: 'cover'
                        }}
                    />
                </div>
                <div className={styles.phoneLightContainer}>
                    <Image className={styles.phoneLight} src={phoneLight} alt={''}/>
                </div>
                <Image className={styles.phoneShadow} src={phoneShadow} alt={''}/>
            </div>
        </section>
    );
};