'use client';

import * as React from 'react';
import {
  RiBookmark3Fill,
  RiCustomerServiceFill,
  RiMailFill,
  RiMap2Fill,
  RiUser3Fill,
} from '@remixicon/react';
import Link from '@repo/registry/next-link-mock';

import * as AvatarGroupCompact from '@/components/ui/avatar-group-compact';
import * as Avatar from '@/components/ui/avatar';
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: RiMailFill, text: 'contact@company.com' },
  { icon: RiMap2Fill, text: '430 Madison Ave, NY, 10022' },
  { icon: RiCustomerServiceFill, text: '+1 (888) 123-4567' },
];

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: 'Avatar 1', bg: 'bg-neutral-200' },
  { src: 'https://alignui.com/images/blocks/hero-3-avatar-2.png', alt: 'Avatar 2', bg: 'bg-yellow-200' },
  { src: 'https://alignui.com/images/blocks/hero-3-avatar-3.png', alt: 'Avatar 3', bg: 'bg-blue-200' },
  { src: 'https://alignui.com/images/blocks/hero-3-avatar-4.png', alt: 'Avatar 4', bg: 'bg-sky-200' },
  { src: 'https://alignui.com/images/blocks/hero-3-avatar-5.png', alt: 'Avatar 5', bg: 'bg-purple-200' },
  { src: 'https://alignui.com/images/blocks/hero-3-avatar-6.png', alt: 'Avatar 6', bg: 'bg-red-200' },
];

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

  return (
    <div className='bg-bg-white-0 py-10 lg:py-24 w-full'>
      <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-text-sub-600 text-label-sm h-7 w-fit rounded-[9px] px-2.5 normal-case'
                >
                  Join our global team
                </Badge.Root>
                <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550]'>
                  Innovative jobs for driven dreamers join us.
                </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>

            <div className='flex flex-col gap-4 lg:gap-7'>
              {contactDetails.map((item) => (
                <div key={item.text} className='flex items-center gap-2.5'>
                  <item.icon className='text-primary-base size-[18px] shrink-0' />
                  <span className='text-label-sm text-text-sub-600'>
                    {item.text}
                  </span>
                </div>
              ))}
            </div>

            <div className='flex w-full flex-col justify-end gap-7 lg:h-[174px] lg:w-[392px]'>
              <p className='text-label-sm text-text-sub-600'>
                Partner with leading companies worldwide,{' '}
                <span className='text-text-soft-400'>
                  boost your impact, and elevate your journey.
                </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} />
                      </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 flex w-full shrink-0 flex-col gap-0.5 rounded-[24px] p-0.5 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={RiUser3Fill}
                        className='group-has-[:placeholder-shown]:text-text-disabled-300 size-5'
                      />
                      <Input.Input
                        id={`${uniqueId}-name`}
                        type='text'
                        placeholder='Type your full name...'
                        className='text-label-sm text-text-strong-950 placeholder:text-text-soft-400 placeholder:text-label-sm'
                      />
                    </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={RiMailFill}
                        className='group-has-[:placeholder-shown]:text-text-disabled-300 size-5'
                      />
                      <Input.Input
                        id={`${uniqueId}-email`}
                        type='email'
                        placeholder='Enter your work email...'
                        className='text-label-sm text-text-strong-950 placeholder:text-text-soft-400 placeholder:text-label-sm'
                      />
                    </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>
                    <Select.Trigger 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={RiBookmark3Fill}
                        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`}
                    placeholder='Write your message...'
                    className='text-label-sm shadow-custom-input text-text-strong-950 placeholder:text-text-soft-400 placeholder:text-label-sm 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'
                  checked
                />
                <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='/'
                    className='text-paragraph-sm text-text-sub-600 mx-0.5 underline underline-offset-3'
                  >
                    Privacy Policy
                  </Link>{' '}
                  and{' '}
                  <Link
                    href='/'
                    className='text-paragraph-sm text-text-sub-600 mx-0.5 underline underline-offset-3'
                  >
                    User Terms
                  </Link>
                </Label.Root>
              </div>

              <FancyButton.Root
                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. This site uses cookies for analytics.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Contact

Contact 01

Contact 02

Contact 03

Contact 04

Contact 05NEW

Contact 06NEW

Contact 07NEW

Contact 05
NEW

Contact 06
NEW

Contact 07
NEW
