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

import { Button } from '@shared/ui';
import { ConsultationOrder } from '@/entities/home/ConsultationOrder';
import Image from 'next/image';

import bgStart from '@public/images/bg-start-desktop.jpg';
import waIcon from '@public/svg/whatsapp.svg';
import tgIcon from '@public/svg/telegram.svg';
import callBtn from '@public/svg/phone-calling.svg';

export default function Main() {
  return (
    <section className={s.Main}>
      <div className={s.Main_BgWrapper}>
        <Image
          src={bgStart}
          placeholder='blur'
          alt={''}
          sizes='100vw'
          quality={75}
          fill
          priority
        />
      </div>
      <div className={s.Header}>
        <div className={s.Logo}>Пожарная экспертиза</div>
        <div className={s.Buttons}>
          <Image className={s.Icon} src={waIcon} alt='whatsapp' />
          <Image className={s.Icon} src={tgIcon} alt='telegram' />
          <Button className={s.Button}>
            <Image src={callBtn} alt='Call' />
            Обратный звонок
          </Button>
        </div>
      </div>
      <div className={s.Info}>
        <div className={s.Content}>
          <h1 className={s.Title}>
            Полное обследование объекта на соответствие требованиям пожарной
            безопасности
          </h1>
          <ul className={s.List}>
            <li className={s.ListItem}>
              Пожарно-техническое обследование (пожарный аудит)
            </li>
            <li className={s.ListItem}>Расчёт пожарного риска</li>
            <li className={s.ListItem}>
              Сокращение затрат на модернизацию пожарных систем
            </li>
          </ul>
        </div>
        <div className={s.Phone}>
          <p className={s.Title}>+7 988 400 93 93</p>
          <ConsultationOrder />
        </div>
      </div>
    </section>
  );
}