'use client';
import Link from 'next/link';
import { ContactForm } from '@/components/ui';
import { CONTACTS_INFO, SOCIALS } from '@/data';

export const Contact = () => {
  return (
    <div className="flex flex-col gap-10 items-center justify-center mt-20 md:mt-24 md:flex-row md:gap-8 xl:gap-20 3xl:gap-28">
      <div className="space-y-12">
        <h2 className="uppercase text-[22px] md:text-[28px] xl:text-[32px] font-semibold md:indent-5 text-center md:text-start">
          Contact Form
        </h2>
        <ul className="flex flex-col gap-1">
          {CONTACTS_INFO.map(({ id, caption, href, icon }) => {
            return (
              <li key={id}>
                <Link
                  href={href}
                  target="_blank"
                  rel="noreferrer noopener"
                  className="flex items-center gap-4 group [&:hover_svg]:text-accent px-2 py-4 md:p-4 rounded-2xl border-[3px] border-transparent hover:bg-accent/20 hover:border-accent transition-all duration-300 ease-in-out text-[14px] md:text-[16px] font-medium"
                >
                  {icon}
                  <span className="max-w-[270px]">{caption}</span>
                </Link>
              </li>
            );
          })}
        </ul>
        <ul className="flex items-center justify-around">
          {SOCIALS.map(({ id, label, icon, link }) => {
            return (
              <li key={id}>
                <Link
                  href={link}
                  aria-label={label}
                  target="_blank"
                  rel="noreferrer noopener"
                >
                  {icon}
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="max-w-[550px] px-7 md:px-8 py-[26px] xl:px-[50px] space-y-[50px] max-h-[405px] rounded-3xl shadow-[0_4px_4px_0_rgba(0_0_0_/_25%)] bg-neutral-950/50">
        <h3 className="md:text-[18px] xl:text-[20px] font-medium leading-5 mx-auto w-fit">
          I’m interested in...
        </h3>
        <ContactForm />
      </div>
    </div>
  );
};