import s from './contacts.module.scss';
import { Mark } from '@shared/ui';
import { ContactsForm } from '@/widgets';
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 sochiAdmLogo from '@public/svg/sochi-adm-logo.svg';
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>

        <ContactsForm />

        <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='' />
              <a href='tel:+79884009393'>+7 (988) 400-93-93</a>
            </p>
            <p className={s.Address}>
              <Image className={s.Icon} src={email} alt='' />
              <a href='mailto:spo-71@yandex.ru'>spo-71@yandex.ru</a>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

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