'use client';

import { useTranslations } from 'next-intl';
import Image from 'next/image';
import Link from 'next/link';
import { Container } from '@/components/ui/container';
import { BrandName } from '@/components/ui/brand-name';
import { siteConfig } from '@/data/site-config';
import type { Locale } from '@/i18n/config';

export function Footer({ locale }: { locale: Locale }) {
  return (
    <footer className="relative overflow-hidden bg-graphite-950 text-paper-100">
      <Container className="relative grid gap-10 py-16 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <div className="flex items-center gap-2.5">
            <Image
              src="/images/logo-square.jpg"
              alt={`${siteConfig.companyName} logo`}
              width={36}
              height={36}
              className="h-9 w-9 rounded-full object-cover ring-2 ring-paper-100/10"
            />
            <p className="font-display text-lg font-semibold text-paper-50">
              <BrandName className="text-paper-50" accentClass="text-copper-400" />
            </p>
          </div>
          <p className="mt-3 max-w-xs text-sm text-paper-100/60">
            {locale === 'ar' ? siteConfig.seo.defaultDescriptionAr : siteConfig.seo.defaultDescriptionFr}
          </p>
        </div>
        <FooterLinks locale={locale} />
        <ServicesLinks locale={locale} />
        <LegalLinks locale={locale} />
      </Container>
      <Container className="relative border-t border-paper-100/10 py-6 text-xs text-paper-100/50">
        © {new Date().getFullYear()} {siteConfig.companyName}.
      </Container>
    </footer>
  );
}

function FooterLinks({ locale }: { locale: Locale }) {
  const t = useTranslations('nav');
  const t2 = useTranslations('footer');
  return (
    <div>
      <p className="text-sm font-semibold text-paper-50">{t2('quickLinks')}</p>
      <ul className="mt-3 space-y-2 text-sm text-paper-100/60">
        <li><Link href={`/${locale}/about`}>{t('about')}</Link></li>
        <li><Link href={`/${locale}/projects`}>{t('projects')}</Link></li>
        <li><Link href={`/${locale}/blog`}>{t('blog')}</Link></li>
        <li><Link href={`/${locale}/faq`}>{t('faq')}</Link></li>
      </ul>
    </div>
  );
}

function ServicesLinks({ locale }: { locale: Locale }) {
  const t = useTranslations('nav');
  return (
    <div>
      <p className="text-sm font-semibold text-paper-50">{t('services')}</p>
      <ul className="mt-3 space-y-2 text-sm text-paper-100/60">
        <li><Link href={`/${locale}/services`}>{t('services')}</Link></li>
        <li><Link href={`/${locale}/products`}>{t('products')}</Link></li>
        <li><Link href={`/${locale}/devis`}>{t('quote')}</Link></li>
      </ul>
    </div>
  );
}

function LegalLinks({ locale }: { locale: Locale }) {
  const t = useTranslations('footer');
  return (
    <div>
      <p className="text-sm font-semibold text-paper-50">{t('legal')}</p>
      <ul className="mt-3 space-y-2 text-sm text-paper-100/60">
        <li><Link href={`/${locale}/mentions-legales`}>{t('legal')}</Link></li>
        <li><Link href={`/${locale}/confidentialite`}>{t('privacy')}</Link></li>
      </ul>
    </div>
  );
}