import s from './offer.module.scss';

import { Button, Mark } from '@shared/ui';
import Image from 'next/image';

import arrow from '@public/svg/arrow-tile.svg';
import gridOne from '@public/images/grid-1.png';
import gridTwo from '@public/images/grid-2.png';
import gridThree from '@public/images/grid-3.png';
import gridFour from '@public/images/grid-4.png';
import gridFive from '@public/images/grid-5.png';
import gridSix from '@public/images/grid-6.png';
import bgForm from '@public/images/bg-form.jpg';

export default function Offer() {
  return (
    <section className={s.Offer}>
      <h2 className={s.Title}>
        Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
        систему Охранно-Пожарной <br />
        сигнализации <Mark> в соответствие </Mark> со всеми нормативами
      </h2>
      <p className={s.Text}>Методика работы:</p>
      <ul className={s.List}>
        <li className={s.ListItem}>
          Экспертиза (аудит) выявляет нарушения ОПС
        </li>
        <li className={s.ListItem}>
          На основании экспертизы оформляется заключение
        </li>
        <li className={s.ListItem}>
          На основании выявленных нарушений производится устранение недостатков
        </li>
        <li className={s.ListItem}>
          Производится проверка проекта по замене старых пожарных систем на
          новые, что позволяет сократить стоимость сметы на модернизацию.
        </li>
      </ul>
      <div className={s.RowForm}>
        <input type='text' placeholder='+79991234567' />
        <input type='text' placeholder='Ваше имя' />
        <Button>Узнать подробности</Button>
      </div>
      <div className={s.Inner}>
        <h2 className={s.Title}>
          Возьмем <Mark>на себя</Mark> все заботы
        </h2>
        <div className={s.Grid}>
          {tileList.map(({ title, description, image }, idx) => (
            <div key={idx} className={s.Tile}>
              <Image
                className={s.Background}
                src={image}
                placeholder='blur'
                alt={''}
                quality={75}
                fill
                priority
              />
              <h3 className={s.Title}> {title} </h3>
              <p className={s.Description}> {description} </p>
              <Image className={s.Arrow} src={arrow} alt='' />
            </div>
          ))}
        </div>
      </div>
      <div className={s.Form}>
        <Image
          className={s.Background}
          src={bgForm}
          placeholder='blur'
          alt={''}
          quality={75}
          fill
          priority
        />
        <p className={s.SubTitle}>Нужна помощь?</p>
        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
        <input className={s.Input} type='text' placeholder='+79991234567' />
      </div>
    </section>
  );
}

const tileList = [
  {
    title: 'Минимизация затрат',
    description:
      'Консультации по минимизации затрат на выполнение мероприятий в области пожарной безопасности',
    image: gridOne,
  },
  {
    title: 'Проверка на соответствие требованиям',
    description:
      'Проверка на соответствие требованиям пожарной безопасности зданий и помещений',
    image: gridTwo,
  },
  {
    title: 'Оценка пожарного риска',
    description:
      'Определение расчетной величины пожарного риска в соответствии с действующими Методиками',
    image: gridThree,
  },
  {
    title: 'Консультации по соответствию требованиям',
    description:
      'Оказание консультаций по соответствию требованиям пожарной безопасности зданий и помещений',
    image: gridFour,
  },
  {
    title: 'Расчет категорий взрывопожарной и пожарной опасности',
    description:
      'Проведение расчета категорий по взрывопожарной и пожарной опасности для помещений, зданий производственного и складского назначения',
    image: gridFive,
  },
  {
    title: 'Монтаж, техническое обслуживание и ремонт систем',
    description:
      'Монтаж, техническое обслуживание и ремонт систем оповещения и эвакуации при пожаре и их элементов, включая диспетчеризацию и проведение пусконаладочных работ',
    image: gridSix,
  },
];
