'use client';

import * as React from 'react';
import { Bookmark, Headphones, Mail, MapPin, UserRound } from 'lucide-react';
import Link from 'next/link';

import * as Avatar from '@/components/ui/avatar';
import * as AvatarGroupCompact from '@/components/ui/avatar-group-compact';
import * as Badge from '@/components/ui/badge';
import * as Checkbox from '@/components/ui/checkbox';
import * as FancyButton from '@/components/ui/fancy-button';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as Select from '@/components/ui/select';
import * as Textarea from '@/components/ui/textarea';
import { cn } from '@/utils/cn';

const contactDetails = [
  {
    icon: Mail,
    text: 'contact@company.com',
    href: 'mailto:contact@company.com',
  },
  {
    icon: MapPin,
    text: '430 Madison Ave, NY, 10022',
    href: 'https://maps.google.com/?q=430+Madison+Ave+NY+10022',
  },
  {
    icon: Headphones,
    text: '+1 (888) 123-4567',
    href: 'tel:+18881234567',
  },
];

const reasons = [
  { value: 'careers', label: 'Careers' },
  { value: 'partnership', label: 'Partnership' },
  { value: 'support', label: 'Support' },
  { value: 'other', label: 'Other' },
];

const avatars = [
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-1.png',
    alt: 'Customer profile 1',
    bg: 'bg-neutral-200',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-2.png',
    alt: 'Customer profile 2',
    bg: 'bg-yellow-200',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-3.png',
    alt: 'Customer profile 3',
    bg: 'bg-blue-200',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-4.png',
    alt: 'Customer profile 4',
    bg: 'bg-sky-200',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-5.png',
    alt: 'Customer profile 5',
    bg: 'bg-purple-200',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-6.png',
    alt: 'Customer profile 6',
    bg: 'bg-red-200',
  },
];

export default function CreativeCollaborationContactForm() {
  const uniqueId = React.useId();

  return (
    <section className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='mx-auto flex w-full max-w-[1016px] flex-col gap-8 lg:flex-row lg:items-center lg:gap-16'>
          <div className='flex min-w-0 flex-1 flex-col gap-8 lg:gap-12'>
            <div className='flex flex-col gap-4 lg:gap-6'>
              <div className='flex flex-col gap-3 lg:gap-4'>
                <Badge.Root
                  variant='lighter'
                  className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
                >
                  Join our global team
                </Badge.Root>
                <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h3 font-[550]'>
                  Create meaningful ideas that inspire change
                </h2>
              </div>
              <p className='text-paragraph-md text-text-soft-400'>
                By working as one, we tackle problems and achieve{' '}
                <br className='hidden lg:block' />
                <span className='text-text-sub-600'>
                  meaningful outcomes for every partner.
                </span>
              </p>
            </div>

            <address className='flex w-full flex-col items-start gap-2.5 not-italic lg:gap-4'>
              {contactDetails.map((item) => (
                <Link
                  key={item.text}
                  href={item.href}
                  className='bg-bg-weak-25 group hover:bg-bg-weak-50 flex w-full items-center gap-2.5 rounded-full py-1.5 pr-4 pl-1.5 transition-colors lg:w-fit'
                >
                  <span className='bg-bg-white-0 shadow-custom-input-4 flex size-8 shrink-0 items-center justify-center rounded-full'>
                    <item.icon
                      className='text-text-sub-600 group-hover:text-primary-base size-4 transition-colors'
                      aria-hidden='true'
                    />
                  </span>
                  <span className='text-label-sm text-text-sub-600 group-hover:text-text-strong-950 transition-colors'>
                    {item.text}
                  </span>
                </Link>
              ))}
            </address>

            <div className='flex w-full flex-col justify-end gap-7 lg:w-[392px]'>
              <p className='text-label-sm text-text-sub-600'>
                Collaborate with leading teams worldwide,{' '}
                <span className='text-text-soft-400'>
                  grow your skills, and create meaningful work that lasts.
                </span>
              </p>
              <div className='flex items-center gap-1'>
                <AvatarGroupCompact.Root size='24' className='bg-transparent'>
                  <AvatarGroupCompact.Stack className='-space-x-1 *:ring-3'>
                    {avatars.map((avatar) => (
                      <Avatar.Root
                        key={avatar.src}
                        className={cn('size-5', avatar.bg)}
                      >
                        <Avatar.Image src={avatar.src} alt={avatar.alt} />
                      </Avatar.Root>
                    ))}
                  </AvatarGroupCompact.Stack>
                </AvatarGroupCompact.Root>
                <p className='text-label-sm text-text-sub-600'>
                  <span className='text-text-disabled-300'>—</span> 4.9/5 based
                  on 312 ratings
                </p>
              </div>
            </div>
          </div>

          <div className='bg-bg-weak-50 mx-[-16px] flex w-[calc(100%+32px)] shrink-0 flex-col gap-0.5 rounded-3xl p-0.5 lg:mx-0 lg:w-[456px] lg:rounded-[28px]'>
            <form className='bg-bg-white-0 shadow-custom-input-3 flex w-full flex-col gap-6 rounded-[22px] p-6 lg:rounded-[26px] lg:p-7'>
              <div className='flex flex-col gap-4'>
                <div className='flex flex-col gap-1.5'>
                  <Label.Root
                    htmlFor={`${uniqueId}-name`}
                    className='text-label-sm text-text-sub-600'
                  >
                    Your full name
                  </Label.Root>
                  <Input.Root className='shadow-custom-input h-10 rounded-xl before:content-none'>
                    <Input.Wrapper>
                      <Input.Icon
                        as={UserRound}
                        className='group-has-[:placeholder-shown]:text-text-disabled-300 size-5'
                      />
                      <Input.Input
                        id={`${uniqueId}-name`}
                        name='name'
                        type='text'
                        autoComplete='name'
                        required
                        placeholder='Type your full name...'
                        className='text-label-sm text-text-strong-950 placeholder:text-label-sm placeholder:text-text-soft-400'
                      />
                    </Input.Wrapper>
                  </Input.Root>
                </div>

                <div className='flex flex-col gap-1.5'>
                  <Label.Root
                    htmlFor={`${uniqueId}-email`}
                    className='text-label-sm text-text-sub-600'
                  >
                    Work email
                  </Label.Root>
                  <Input.Root className='shadow-custom-input h-10 rounded-xl before:content-none'>
                    <Input.Wrapper>
                      <Input.Icon
                        as={Mail}
                        className='group-has-[:placeholder-shown]:text-text-disabled-300 size-5'
                      />
                      <Input.Input
                        id={`${uniqueId}-email`}
                        name='email'
                        type='email'
                        autoComplete='email'
                        required
                        placeholder='Enter your work email...'
                        className='text-label-sm text-text-strong-950 placeholder:text-label-sm placeholder:text-text-soft-400'
                      />
                    </Input.Wrapper>
                  </Input.Root>
                </div>

                <div className='flex flex-col gap-1.5'>
                  <Label.Root className='text-label-sm text-text-sub-600'>
                    Reason
                  </Label.Root>
                  <Select.Root name='reason'>
                    <Select.Trigger
                      aria-label='Reason'
                      className='text-label-sm shadow-custom-input text-text-sub-600 data-[placeholder]:text-text-soft-400 h-10 rounded-xl ring-0 before:content-none'
                    >
                      <Select.TriggerIcon
                        as={Bookmark}
                        className='group-data-[placeholder]/trigger:text-text-disabled-300 size-5'
                      />
                      <Select.Value placeholder='Pick a reason...' />
                    </Select.Trigger>
                    <Select.Content>
                      {reasons.map((item) => (
                        <Select.Item
                          key={item.value}
                          value={item.value}
                          className='text-label-sm text-text-soft-400'
                        >
                          {item.label}
                        </Select.Item>
                      ))}
                    </Select.Content>
                  </Select.Root>
                </div>

                <div className='flex flex-col gap-1.5'>
                  <Label.Root
                    htmlFor={`${uniqueId}-message`}
                    className='text-label-sm text-text-sub-600'
                  >
                    Message
                  </Label.Root>
                  <Textarea.Root
                    simple
                    id={`${uniqueId}-message`}
                    name='message'
                    required
                    placeholder='Write your message...'
                    className='text-label-sm shadow-custom-input text-text-strong-950 placeholder:text-label-sm placeholder:text-text-soft-400 h-26 min-h-0 rounded-[14px] px-4 py-3 ring-0 before:content-none'
                  />
                </div>
              </div>

              <div className='flex items-center gap-3'>
                <Checkbox.Root
                  id={`${uniqueId}-agree`}
                  className='size-5'
                  defaultChecked
                />
                <Label.Root
                  className='text-paragraph-sm text-text-sub-600 flex flex-wrap gap-0.5'
                  htmlFor={`${uniqueId}-agree`}
                >
                  I agree to the{' '}
                  <Link
                    href='/privacy-policy'
                    className='text-paragraph-sm text-text-sub-600 mx-0.5 underline underline-offset-3'
                  >
                    Privacy Policy
                  </Link>{' '}
                  and{' '}
                  <Link
                    href='/terms-of-service'
                    className='text-paragraph-sm text-text-sub-600 mx-0.5 underline underline-offset-3'
                  >
                    User Terms
                  </Link>
                </Label.Root>
              </div>

              <FancyButton.Root
                type='submit'
                variant='primary'
                size='medium'
                className='w-full cursor-pointer rounded-xl'
              >
                Submit your inquiry
              </FancyButton.Root>
            </form>

            <div className='flex w-full items-center justify-center py-4'>
              <p className='text-paragraph-sm text-text-sub-600 max-w-[262px] text-center lg:max-w-none'>
                All rights reserved. <br className='block lg:hidden' /> This
                site uses cookies for analytics.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}