import s from './contacts.module.scss';
import { Button, Input, Mark } from '@shared/ui';
import Image from 'next/image';

import bogatyrLogo from '@public/images/logo-bogatyr.png';
import sochiparkLogo from '@public/images/logo-sochipark.png';
import chateauLogo from '@public/images/logo-chateau-de-talu.png';
import gazpromLogo from '@public/images/logo-gazprom.png';
import kraspolLogo from '@public/images/logo-kraspol.png';
import bgForm from '@public/images/bg-form.jpg';
import ledOn from '@public/svg/led-on.svg';
import phoneCall from '@public/svg/phone-call.svg';
import map from '@public/svg/map.svg';
import email from '@public/svg/email.svg';

export default function Contacts() {
  return (
    <section className={s.Container}>
      <div className={s.Contacts}>
        <h2 className={s.Header}>
          Клиенты, которые <Mark>нам доверяют</Mark>
        </h2>
        <div className={s.Clients}>
          {clientsLogos.map(({ logo }, idx) => (
            <div key={idx} className={s.Client}>
              <Image src={logo} alt='' />
            </div>
          ))}
        </div>

        <div className={s.Form}>
          <Image
            className={s.Background}
            src={bgForm}
            placeholder='blur'
            alt={''}
            quality={75}
            fill
            priority
          />
          <div className={s.Offer}>
            <h3 className={s.Title}>Остались вопросы?</h3>
            <p className={s.SubTitle}>
              Наш эксперт свяжется с вами для уточнения подробностей и
              определения точной стоимости работ
            </p>
          </div>
          <div className={s.Inputs}>
            <Input placeholder='Ваше имя' fullWidth />
            <Input type='text' placeholder='+79991234567' fullWidth />
            <Button variant='orange' fullWidth>
              Получить консультацию
            </Button>
          </div>
        </div>

        <div className={s.Map}>
          <iframe
            src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
            // width='100%'
            // height='620'
            frameBorder='0'
          ></iframe>

          <div className={s.Contacts}>
            <h3 className={s.Title}>
              <Image className={s.LedOn} src={ledOn} alt={''} />
              Мы <Mark>всегда</Mark> <br /> на связи
            </h3>
            <p className={s.Address}>
              <Image className={s.Icon} src={map} alt='' />
              Краснодарский край <br />
              г.Сочи <br />
              ТЦ «Атриум» <br />
              ул. Навагинская д.9«Д» <br />
              этаж 3, офис 35
            </p>
            <p className={s.Address}>
              <Image className={s.Icon} src={phoneCall} alt='' />
              +7 (988) 400 93 93
            </p>
            <p className={s.Address}>
              <Image className={s.Icon} src={email} alt='' />
              office@firecheck.ru
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

const clientsLogos = [
  { logo: bogatyrLogo },
  { logo: sochiparkLogo },
  { logo: chateauLogo },
  { logo: gazpromLogo },
  { logo: kraspolLogo },
];