import { Icon } from '@/components/uikit/icons';

const TouchUs = () => {
  return (
    <div className="w-full p-8 md:w-1/2">
      <h1 className="mb-4 text-3xl font-light text-gray-800 md:text-5xl">
        Get in touch{' '}
        <span className="text-3xl font-light md:text-5xl md:font-bold">
          with us
        </span>
      </h1>
      <p className="mb-6 text-base font-normal text-gray-600">
        Reach out for any inquiries, support, or feedback—we’d love to hear from
        you!
      </p>

      <div className="flex flex-col justify-between space-y-4">
        <div className="flex items-center">
          <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
            <Icon name="phone" className="text-white" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-800">Contact</h3>
            <p className="text-gray-600">+44 (0) 20 1234 5678</p>
          </div>
        </div>

        <div className="flex items-center">
          <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
            <Icon name="email" className="text-white" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-800">Email</h3>
            <p className="text-gray-600">support@mybusiness.com</p>
          </div>
        </div>

        <div className="flex items-center">
          <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
            <Icon name="location" className="text-white" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-800">Our Address</h3>
            <p className="text-gray-600">
              123 Business Street, London EC1A 1BB, UK
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TouchUs;