'use client';

import { Phone, Mail, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { useLocale, useTranslations } from 'next-intl';

export function ContactInfo() {
  const locale = useLocale();
  const t = useTranslations('footer.sections.contact');

  return (
    <div className="pb-6 px-6 pt-4 bg-zinc-800/30 border border-zinc-800 rounded-lg mx-4 mt-2">
      <div className="space-y-4">
        <h3 className="text-sm font-medium text-white tracking-wider uppercase">
          {t('title')}
        </h3>

        <a
          href="tel:+491756950979"
          className="flex items-center space-x-3 text-sm text-zinc-400 hover:text-white transition-colors duration-200 group"
        >
          <Phone className="h-4 w-4 text-zinc-400 group-hover:text-white transition-colors duration-200" />
          <span>+49 175 695 0979</span>
        </a>

        <a
          href="mailto:info@damjan-savic.com"
          className="flex items-center space-x-3 text-sm text-zinc-400 hover:text-white transition-colors duration-200 group"
        >
          <Mail className="h-4 w-4 text-zinc-400 group-hover:text-white transition-colors duration-200" />
          <span>{t('email')}</span>
        </a>

        <Link
          href={`/${locale}/contact`}
          className="flex items-center justify-between mt-6 px-4 py-2 bg-zinc-800/50
                   hover:bg-zinc-800 rounded-full text-sm text-zinc-400 hover:text-white
                   transition-all duration-200 group border border-zinc-800 hover:border-zinc-700"
        >
          <span className="tracking-wide">Kontakt aufnehmen</span>
          <ArrowRight className="h-4 w-4 transform group-hover:translate-x-1 transition-transform duration-200" />
        </Link>
      </div>
    </div>
  );
}
