import { PRODUCT_INFO } from '@/shared/constants/data';
import { navSocialIcons } from '@/widgets/navbar/lib/data';
import Link from 'next/link';
import React from 'react';
import CallBackForm from './CallBackForm';

const ContactTop = () => {
  return (
    <div className="flex justify-between gap-4 max-lg:flex-col">
      <div className="flex-1 bg-muted-foreground min-h-[250px] max-h-[250px] lg:min-h-[350px] lg:max-h-[350px] rounded-md overflow-hidden">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29064.89577041885!2d117.83500026589725!3d24.4121772855663!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3413809f23736df3%3A0x204a725453675235!2sHaicheng%2C%20Fujian%2C%20Longhai%20City%2C%20Zhangzhou%2C%20Fujian%2C%20China%2C%20363102!5e0!3m2!1sen!2s!4v1749816644886!5m2!1sen!2s"
          width="100%"
          height="250px"
          className="min-h-full"
        ></iframe>
      </div>
      <div className="flex-1 flex justify-around flex-col gap-1">
        <div>
          <div className="text-primary font-bold">Контакты</div>
          <hr />
          <div className="font-semibold">{PRODUCT_INFO.logoTitle}</div>
        </div>
        <div className="flex justify-start items-center gap-2">
          <div className="text-[35px] text-secondary">
            <span className="icon-help"></span>
          </div>
          <div className="text-[14px]">
            <div className="font-medium text-muted">Есть вопросы?</div>
            <CallBackForm />
          </div>
        </div>
        <div className="flex justify-start items-center gap-2">
          <div className="text-[35px] text-secondary">
            <span className="icon-mailbox"></span>
          </div>
          <div className="text-[14px]">
            <div className="font-medium text-muted">Отправить письмо</div>
            <Link
              href={`mailto:${PRODUCT_INFO.contact.email}`}
              className="font-semibold hover:text-primary"
            >
              {PRODUCT_INFO.contact.email}
            </Link>
          </div>
        </div>
        <div className="flex justify-start items-center gap-2">
          <div className="text-[35px] text-secondary">
            <span className="icon-maps-and-flags"></span>
          </div>
          <div className="text-[14px]">
            <div className="font-medium text-muted">Перейти в магазин</div>
            <div className="font-semibold">{PRODUCT_INFO.contact.address}</div>
          </div>
        </div>
        <div className="flex gap-2 mt-[10px]">
          {navSocialIcons.map(({ id, icon: Icon, link, color }) => (
            <div key={id}>
              <Link href={link} target="blank">
                <div
                  style={{ backgroundColor: color }}
                  className={`duration-150 text-[16px] size-[28px] ${color === '#0088cc' ? 'pr-[2px]' : 'pr-0'} rounded-full text-white flex justify-center items-center hover:brightness-110`}
                >
                  <Icon />
                </div>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ContactTop;
