import ContactCard from '@/components/contact/ContactCard.tsx';
import { Mail, MapPin, Phone } from 'lucide-react';
import StaticPageScaffold from '@/components/layout/StaticPageScaffold.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';

const ContactPage = () => {
  const { t } = useTranslation();

  return (
    <StaticPageScaffold title={t('footer.links.contact')}>
      <p className="lead">{t('contactPage.lead')}</p>

      <div className="grid md:grid-cols-3 gap-8 mt-16">
        <ContactCard
          icon={<MapPin className="h-4 h-7 text-current w-4 w-7" />}
          title={t('contactPage.cards.office.title')}
        >
          <p>{t('contactPage.cards.office.line1')}</p>
          <p>{t('contactPage.cards.office.line2')}</p>
        </ContactCard>

        <ContactCard
          icon={<Mail className="h-4 h-7 text-current w-4 w-7" />}
          title={t('contactPage.cards.email.title')}
        >
          <p>{t('contactPage.cards.email.line1')}</p>
          <a
            href={`mailto:${t('contactPage.cards.email.line2')}`}
            className="text-primary hover:underline break-all"
          >
            {t('contactPage.cards.email.line2')}
          </a>
        </ContactCard>

        <ContactCard
          icon={<Phone className="h-4 h-7 text-current w-4 w-7" />}
          title={t('contactPage.cards.phone.title')}
        >
          <p>{t('contactPage.cards.phone.line1')}</p>
          <a
            href={`tel:${t('contactPage.cards.phone.line2')}`}
            className="text-primary hover:underline"
          >
            {t('contactPage.cards.phone.line2')}
          </a>
        </ContactCard>
      </div>
    </StaticPageScaffold>
  );
};

export default ContactPage;