import s from './contacts.module.scss';
import { Button, 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';

export default function Contacts() {
  return (
    <section 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}>
        <div className={s.Offer}>
          <h3 className={s.Title}>Остались вопросы?</h3>
          <p className={s.SubTitle}>
            Наш эксперт свяжется с вами для уточнения подробностей и определения
            точной стоимости работ
          </p>
        </div>
        <div className={s.Inputs}>
          <input type='text' placeholder='Ваше имя' />
          <input type='text' placeholder='+79991234567' />
          <Button variant='orange'>Получить консультацию</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}>
            Мы <Mark>всегда</Mark> <br /> на связи
          </h3>
          <p className={s.Address}>
            Краснодарский край <br />
            г.Сочи <br />
            ТЦ «Атриум» <br />
            ул. Навагинская д.9«Д» <br />
            этаж 3, офис 35
          </p>
          <p className={s.Address}>+7 (988) 400 93 93</p>
          <p className={s.Address}>office@firecheck.ru</p>
        </div>
      </div>
    </section>
  );
}

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