'use client'

import { Clock, MapIcon, OfficeBuildIcon } from '@/components/icons/common'
import {
  FaceBookIcon,
  InstagramIcon,
  TelegramIcon,
  TikTokkIcon,
  WhatsAppIcon,
  YoutubeIcon,
} from '@/components/icons/socials'
import { ContactForm } from '@/components/shared/form/ContactForm'
import { Button } from '@/components/ui/button'
import { Section } from '@/components/ui/section'
import ImageLoader from '@/lib/utils/ImageLoader'
import { ContactForm as TContactForm } from '@/payload-types'

import { Mail, PhoneIcon } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import customMap from '@/public/custom-map/map_new.png'
import customPin from '@/public/custom-map/pin.png'
import FadeInText from '@/components/shared/FadeInText'
import { useI18n } from '@/locales/client'
import { Footer as TFooter } from '@/payload-types'

export const ContactSectionBlock = ({ title, phone, mail, address, bg }: TContactForm) => {
  const t = useI18n()
  return (
    <Section id="contact" sectionClass="py-10 bg-base-black">
      <div className="relative min-h-[650px]">
        <ImageLoader
          media={bg}
          alt="bg"
          className="absolute top-0 left-0 object-cover w-full h-full"
        />
        <div
          className="absolute inset-0"
          style={{
            background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
          }}
        />
        <div className="py-8 px-3 tablet:p-[40px] lg:p-4 lg:pl-10 relative z-10 flex flex-col-reverse lg:flex-row items-center justify-between gap-y-8">
          {/* Название внутри инфоблока, как в ContactSectionBlockPage */}
          <div className="w-full lg:w-[500px] flex flex-col gap-8 py-[28px] flex-1">
            <div className="max-lg:hidden h4-medium text-base-white mb-2">
              <FadeInText text={title} />
            </div>
            <div className="flex flex-col tablet:flex-row lg:flex-col gap-6 tablet:gap-4 lg:gap-6">
              <div className="flex gap-4 tablet:flex-col tablet:items-start lg:flex-row lg:items-center flex-1">
                <div className="size-10 bg-transparent-brown-40 rounded-xl flex items-center justify-center">
                  <PhoneIcon className="size-6 stroke-grey-100" />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="label-medium-semibold text-grey-100">
                    <FadeInText text={t('contactForm.telephone')} />
                  </div>
                  <div className="label-medium-regular text-grey-200">
                    <FadeInText text={phone} />
                  </div>
                </div>
              </div>
              <div className="flex gap-4 tablet:flex-col tablet:items-start lg:flex-row lg:items-center flex-1">
                <div className="size-10 bg-transparent-brown-40 rounded-xl flex items-center justify-center">
                  <Mail className="size-6 stroke-grey-100" />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="label-medium-semibold text-grey-100">
                    <FadeInText text={t('contactForm.email')} />
                  </div>
                  <div className="label-medium-regular text-grey-200">
                    <FadeInText text={mail} />
                  </div>
                </div>
              </div>
              <div className="flex gap-4 tablet:flex-col tablet:items-start lg:flex-row lg:items-center flex-1">
                <div className="size-10 bg-transparent-brown-40 rounded-xl flex items-center justify-center">
                  <OfficeBuildIcon className="size-6" />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="text-label-medium-semibold text-grey-100">
                    <FadeInText text={t('contactForm.address')} />
                  </div>
                  <div className="text-label-medium-regular text-grey-200">
                    <FadeInText text={address} />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="w-full flex-1">
            <div className="min-lg:hidden mb-8">
              <div className="h4 text-base-white mb-2">
                <FadeInText text={title} />
              </div>
            </div>
            <div className="w-full lg:w-[596px] h-full overflow-y-auto rounded-xl gradient-border gradient-border--white-light bg-[#05050547] backdrop-blur-[50px] px-5 py-10 md:px-25 md:py-15">
              <ContactForm />
            </div>
          </div>
        </div>
      </div>
    </Section>
  )
}

type Props = TContactForm & TFooter

export const ContactSectionBlockPage = ({
  title,
  phone,
  mail,
  address,
  bg,
  workingHours,
  telegram,
  facebook,
  instagram,
  tiktok,
  whatsapp,
  youtube,
}: Props) => {
  const t = useI18n()
  return (
    <Section id="contact" sectionClass="py-10 bg-base-black mt-[80px]">
      <div className="relative min-h-[750px]  flex items-center">
        <ImageLoader
          media={bg}
          alt="bg"
          className="absolute top-0 left-0 object-cover w-full h-full z-10"
        />
        <div
          className="absolute left-[-1px] z-20 w-[101%] h-full"
          style={{
            background:
              'linear-gradient(284.57deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.5) 54.47%, #111111 100%)',
          }}
        />
        <div className="py-8 px-3 tablet:p-6 lg:p-4 lg:pl-10 relative z-30 flex flex-col-reverse lg:flex-row items-center justify-between gap-8 w-full">
          <div className="w-full lg:w-[500px] flex flex-col gap-8 py-[28px] flex-1">
            <div className="max-lg:hidden">
              <div className="h4-medium text-base-white mb-2">
                <FadeInText text={t('contactForm.titlePage')} />
              </div>
              <div className="b2-regular text-grey-100">
                <FadeInText text={t('contactForm.subtitle')} />
              </div>
            </div>
            <div className="grid grid-cols-1 tablet:grid-cols-2 xl:grid-cols-1 gap-6">
              <div className="flex gap-4 items-center">
                <div className="size-10 bg-transparent-brown-40 rounded-xl flex items-center justify-center">
                  <PhoneIcon className="size-6 stroke-grey-100" />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="label-medium-semibold text-grey-100">
                    <FadeInText text={t('contactForm.telephone')} />
                  </div>
                  <div className="label-medium-regular text-grey-200">
                    <FadeInText text={phone} />
                  </div>
                </div>
              </div>
              <div className="flex gap-4 items-center">
                <div className="size-10 bg-transparent-brown-40 rounded-xl flex items-center justify-center">
                  <Mail className="size-6 stroke-grey-100" />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="label-medium-semibold text-grey-100">
                    <FadeInText text={t('contactForm.email')} />
                  </div>
                  <div className="label-medium-regular text-grey-200">
                    <FadeInText text={mail} />
                  </div>
                </div>
              </div>
              <div className="flex gap-4 items-center">
                <div className="size-10 bg-transparent-brown-40 rounded-xl flex items-center justify-center">
                  <OfficeBuildIcon className="size-6" />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="text-label-medium-semibold text-grey-100">
                    <FadeInText text={t('contactForm.address')} />
                  </div>
                  <div className="text-label-medium-regular text-grey-200">
                    <FadeInText text={address} />
                  </div>
                </div>
              </div>
              <div className="flex gap-4 items-center">
                <div className="size-10 bg-transparent-brown-40 rounded-xl flex items-center justify-center">
                  <Clock className="size-6" />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="text-label-medium-semibold text-grey-100">
                    <FadeInText text={t('contactForm.workingHours')} />
                  </div>
                  <div className="text-label-medium-regular text-grey-200">
                    <FadeInText text={workingHours} />
                  </div>
                </div>
              </div>
            </div>
            <div className="h-[200px] w-full relative p-3 border border-[#FCFCFC33] flex items-end rounded-lg overflow-hidden">
              <Image src={customMap.src} alt="" fill />
              <Image
                src={customPin.src}
                alt=""
                // fill
                width={82}
                height={82}
                className="w-[82px] h-[82px] object-cover absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 "
              />

              <Button
                className="z-10"
                asChild
                variant="primary"
                sizes="btn-sm"
                LeftIcon={<MapIcon className="size-6" />}
              >
                <Link target="_blank" href={'https://maps.app.goo.gl/7p1chwK9sJFF34r19'}>
                  google maps
                </Link>
              </Button>
            </div>
            {/* <div className="flex gap-2">
              <Button
                iconOnly
                icon={<TikTokkIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
                variant="icon-only"
                sizes="icon-btn-md"
                className="w-fit "
              />
              <Button
                iconOnly
                icon={<InstagramIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
                variant="icon-only"
                sizes="icon-btn-md"
                className="w-fit "
              />
              <Button
                iconOnly
                icon={<FaceBookIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
                variant="icon-only"
                sizes="icon-btn-md"
                className="w-fit "
              />
              <Button
                iconOnly
                icon={<TelegramIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
                variant="icon-only"
                sizes="icon-btn-md"
                className="w-fit "
              />
              <Button
                iconOnly
                icon={<WhatsAppIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
                variant="icon-only"
                sizes="icon-btn-md"
                className="w-fit "
              />
              <Button
                iconOnly
                icon={<YoutubeIcon className=" " width={20} height={20} fill={'#F6ECE5'} />}
                variant="icon-only"
                sizes="icon-btn-md"
                className="w-fit "
              />
            </div> */}
            <div className="flex gap-2">
              {tiktok && (
                <Link href={tiktok} target="_blank" rel="noopener noreferrer">
                  <Button
                    className="w-fit"
                    iconOnly
                    icon={<TikTokkIcon className="w-fit" width={20} height={20} fill={'#F6ECE5'} />}
                    variant="icon-only"
                  />
                </Link>
              )}
              {instagram && (
                <Link href={instagram} target="_blank" rel="noopener noreferrer">
                  <Button
                    className="w-fit"
                    iconOnly
                    icon={
                      <InstagramIcon className="w-fit" width={20} height={20} fill={'#F6ECE5'} />
                    }
                    variant="icon-only"
                  />
                </Link>
              )}
              {facebook && (
                <Link href={facebook} target="_blank" rel="noopener noreferrer">
                  <Button
                    className="w-fit"
                    iconOnly
                    icon={
                      <FaceBookIcon className="w-fit" width={20} height={20} fill={'#F6ECE5'} />
                    }
                    variant="icon-only"
                  />
                </Link>
              )}
              {telegram && (
                <Link href={telegram} target="_blank" rel="noopener noreferrer">
                  <Button
                    className="w-fit"
                    iconOnly
                    icon={
                      <TelegramIcon className="w-fit" width={20} height={20} fill={'#F6ECE5'} />
                    }
                    variant="icon-only"
                  />
                </Link>
              )}
              {whatsapp && (
                <Link href={whatsapp} target="_blank" rel="noopener noreferrer">
                  <Button
                    className="w-fit"
                    iconOnly
                    icon={
                      <WhatsAppIcon className="w-fit" width={20} height={20} fill={'#F6ECE5'} />
                    }
                    variant="icon-only"
                  />
                </Link>
              )}
              {youtube && (
                <Link href={youtube} target="_blank" rel="noopener noreferrer">
                  <Button
                    className="w-fit"
                    iconOnly
                    icon={<YoutubeIcon className="w-fit" width={20} height={20} fill={'#F6ECE5'} />}
                    variant="icon-only"
                  />
                </Link>
              )}
            </div>
          </div>
          <div className="w-full flex-1">
            <div className="min-lg:hidden mb-8">
              <div className="h4 text-base-white mb-2">Contact us</div>
              <div className="b3-regular tablet:b2-regular text-grey-100">
                Make your holiday or business trip unforgettable - rent a Tesla today!
              </div>
            </div>
            <div className="w-full lg:w-[596px] h-full rounded-xl gradient-border gradient-border--white-light bg-[#05050547] backdrop-blur-[50px] px-5 py-10 md:px-25 md:py-15">
              <ContactForm />
            </div>
          </div>
        </div>
      </div>
    </Section>
  )
}
