'use client';

import { Facebook, Instagram, MessageCircle } from 'lucide-react';
import {
  FACEBOOK_URL,
  INSTAGRAM_URL,
  WHATSAPP_URL,
} from '@/lib/constants';
import { useTranslation } from '@/hooks/useTranslation';

const socialLinks = [
  {
    key: 'facebook',
    href: FACEBOOK_URL,
    icon: Facebook,
    className:
      'border-blue-600/20 bg-blue-600/10 text-blue-700 hover:border-blue-600/40 hover:bg-blue-600/15',
  },
  {
    key: 'instagram',
    href: INSTAGRAM_URL,
    icon: Instagram,
    className:
      'border-pink-600/20 bg-pink-600/10 text-pink-700 hover:border-pink-600/40 hover:bg-pink-600/15',
  },
  {
    key: 'whatsapp',
    href: WHATSAPP_URL,
    icon: MessageCircle,
    className:
      'border-green-600/20 bg-green-600/10 text-green-700 hover:border-green-600/40 hover:bg-green-600/15',
  },
] as const;

export default function SocialFollow() {
  const { t } = useTranslation();

  return (
    <section className="py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="rounded-3xl border border-cream-300/80 bg-white px-8 py-12 text-center shadow-premium sm:px-16">
          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
            {t('social.label')}
          </span>
          <h2 className="section-heading mb-3">{t('social.title')}</h2>
          <p className="mx-auto mb-8 max-w-xl text-gray-500">{t('social.subtitle')}</p>

          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            {socialLinks.map(({ key, href, icon: Icon, className }) => (
              <a
                key={key}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                className={`inline-flex items-center gap-2 rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all ${className}`}
              >
                <Icon className="h-5 w-5" />
                {t(`social.${key}`)}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}