import { Mail } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@components/ui/button'
import { CONTACT_EMAIL, SOCIAL_LINKS } from '@lib/constants'
import type { FC } from 'react'

export const ContactSection: FC = () => {
  const { t } = useTranslation()

  return (
    <section id="contact" className="scroll-mt-20 bg-muted/30 px-6 py-24">
      <div className="mx-auto max-w-2xl text-center">
        <header>
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            {t('contact.title')}
          </h2>
          <p className="mt-2 text-muted-foreground">{t('contact.subtitle')}</p>
        </header>

        <div className="mt-10">
          <Button size="lg" asChild>
            <a href={`mailto:${CONTACT_EMAIL}`} className="gap-2">
              <Mail className="h-4 w-4" />
              {t('contact.send')}
            </a>
          </Button>
        </div>

        <div className="mt-8">
          <p className="text-sm text-muted-foreground">{t('contact.or')}</p>
          <nav
            className="mt-4 flex items-center justify-center gap-4"
            aria-label="Social links"
          >
            {SOCIAL_LINKS.map((link) => (
              <a
                key={link.label}
                href={link.href}
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-full border border-border/50 p-3 text-muted-foreground transition-all hover:border-primary/30 hover:bg-accent hover:text-foreground"
                aria-label={link.label}
              >
                <link.icon className="h-5 w-5" />
              </a>
            ))}
          </nav>
        </div>
      </div>
    </section>
  )
}