'use client';

import type { LucideIcon } from 'lucide-react';
import { Headphones, Mail, MapPin } from 'lucide-react';

import * as Badge from '@/components/ui/badge';
const contactData: {
  id: string;
  icon: LucideIcon;
  title: string;
  description: string;
  value: string;
}[] = [
  {
    id: 'contact1',
    icon: Mail,
    title: 'Support email',
    description: 'Our dedicated staff will assist you soon.',
    value: 'hello@company.com',
  },
  {
    id: 'contact2',
    icon: MapPin,
    title: 'Office address',
    description: "You're welcome anytime at our main hub.",
    value: '1290 Sunset Blvd, LA, 90026 / USA',
  },
  {
    id: 'contact3',
    icon: Headphones,
    title: 'Contact phone',
    description: 'Weekdays from 9am to 6pm.',
    value: '+1 (900) 555-0182',
  },
];

export default function CollaborationSupportContactCards() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 md:px-7 lg:items-center lg:gap-10'>
        <div className='flex flex-col gap-4 lg:items-center'>
          <div className='flex flex-col gap-3 lg:items-center'>
            <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'
            >
              Reach our support
            </Badge.Root>
            <h3 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550] lg:text-center'>
              We&rsquo;re here to make collaboration effortless
            </h3>
          </div>
          <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
            Dedicated support for every stage of your journey.
          </p>
        </div>

        <div className='flex w-full flex-col gap-3 lg:flex-row'>
          {contactData.map((contact) => (
            <div
              key={contact.id}
              className='bg-bg-weak-50 flex flex-1 flex-col items-start gap-6 rounded-[24px] p-6 lg:items-center lg:rounded-[28px] lg:p-8 lg:text-center'
            >
              <div className='bg-bg-white-0 shadow-custom-input-4 flex items-center justify-center rounded-full p-3'>
                <contact.icon className='text-primary-base size-6' />
              </div>
              <div className='flex w-full flex-col gap-1'>
                <div className='text-label-md text-text-strong-950'>
                  {contact.title}
                </div>
                <div className='text-paragraph-sm text-text-sub-600'>
                  {contact.description}
                </div>
              </div>
              <div className='text-label-md text-text-sub-600'>
                {contact.value}
              </div>
            </div>
          ))}
        </div>

        <p className='text-paragraph-md text-text-soft-400 mx-auto w-full lg:text-center'>
          Empower your workflow with skilled teams delivering{' '}
          <br className='hidden lg:block' />
          <span className='text-label-md text-text-sub-600'>
            value and fresh perspectives.
          </span>
        </p>
      </div>
    </div>
  );
}