'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useTranslations, useLocale } from 'next-intl';
import { Container } from './ui';
import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events';

export default function Footer() {
  const t = useTranslations('Footer');
  const navT = useTranslations('Navigation');
  const { trackEvent } = useAnalytics();
  const locale = useLocale();
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-primary text-white py-14 md:py-24 relative overflow-hidden content-visibility-auto">
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />

      <Container>
        <h2 className="sr-only">Footer Navigation</h2>
        <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-12 gap-10 md:gap-16 mb-12 md:mb-20">
          {/* Brand Column – full width on mobile */}
          <div className="col-span-2 md:col-span-2 lg:col-span-4 space-y-6 md:space-y-8">
            <Link
              href={`/${locale}`}
              className="inline-block group"
              onClick={() =>
                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
                  target: 'home_logo',
                  location: 'footer',
                })
              }
            >
              <Image
                src="/logo-white.svg"
                alt="KLZ Vertriebs GmbH"
                width={150}
                height={40}
                style={{ width: 'auto' }}
                className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
              />
            </Link>
            <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-sm">
              {t('tagline')}
            </p>
            <div className="flex gap-4">
              <a
                href="https://www.linkedin.com/company/klz-vertriebs-gmbh/"
                target="_blank"
                rel="noopener noreferrer"
                onClick={() =>
                  trackEvent(AnalyticsEvents.LINK_CLICK, {
                    type: 'social',
                    target: 'linkedin',
                    location: 'footer',
                  })
                }
                className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10"
              >
                <span className="sr-only">LinkedIn</span>
                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
                </svg>
              </a>
            </div>
          </div>

          {/* Legal Column */}
          <div className="col-span-1 lg:col-span-2">
            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
              {t('legal')}
            </h3>
            <ul className="space-y-4 text-white/70 list-none m-0 p-0">
              <li>
                <Link
                  href={`/${locale}/${t('legalNoticeSlug')}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: t('legalNotice'),
                      href: t('legalNoticeSlug'),
                      location: 'footer_legal',
                    })
                  }
                >
                  {t('legalNotice')}
                </Link>
              </li>
              <li>
                <Link
                  href={`/${locale}/${t('privacyPolicySlug')}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: t('privacyPolicy'),
                      href: t('privacyPolicySlug'),
                      location: 'footer_legal',
                    })
                  }
                >
                  {t('privacyPolicy')}
                </Link>
              </li>
              <li>
                <Link
                  href={`/${locale}/${t('termsSlug')}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: t('terms'),
                      href: t('termsSlug'),
                      location: 'footer_legal',
                    })
                  }
                >
                  {t('terms')}
                </Link>
              </li>
            </ul>
          </div>

          {/* Company Column */}
          <div className="col-span-1 lg:col-span-2">
            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
              {t('company')}
            </h3>
            <ul className="space-y-4 text-white/70 list-none m-0 p-0">
              <li>
                <Link
                  href={`/${locale}/team`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: navT('team'),
                      href: '/team',
                      location: 'footer_company',
                    })
                  }
                >
                  {navT('team')}
                </Link>
              </li>
              <li>
                <Link
                  href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: navT('products'),
                      href: locale === 'de' ? '/produkte' : '/products',
                      location: 'footer_company',
                    })
                  }
                >
                  {navT('products')}
                </Link>
              </li>
              <li>
                <Link
                  href={`/${locale}/blog`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: navT('blog'),
                      href: '/blog',
                      location: 'footer_company',
                    })
                  }
                >
                  {navT('blog')}
                </Link>
              </li>
              <li>
                <Link
                  href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: navT('contact'),
                      href: locale === 'de' ? '/kontakt' : '/contact',
                      location: 'footer_company',
                    })
                  }
                >
                  {navT('contact')}
                </Link>
              </li>
            </ul>
          </div>

          {/* Recent Posts Column – full width on mobile */}
          <div className="col-span-2 md:col-span-2 lg:col-span-4">
            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
              {t('recentPosts')}
            </h3>
            <ul className="space-y-6 list-none m-0 p-0">
              {[
                {
                  title:
                    locale === 'de'
                      ? 'Windparkbau im Fokus: drei typische Kabelherausforderungen'
                      : 'Focus on wind farm construction: three typical cable challenges',
                  slug:
                    locale === 'de'
                      ? 'windparkbau-im-fokus-drei-typische-kabelherausforderungen'
                      : 'focus-on-wind-farm-construction-three-typical-cable-challenges',
                },
                {
                  title:
                    locale === 'de'
                      ? 'Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist'
                      : 'Why the N2XS(F)2Y is the ideal cable for your energy project',
                  slug:
                    locale === 'de'
                      ? 'n2xsf2y-mittelspannungskabel-energieprojekt'
                      : 'why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project',
                },
              ].map((post, i) => (
                <li key={i}>
                  <Link
                    href={`/${locale}/blog/${post.slug}`}
                    className="group block text-white/80"
                    onClick={() =>
                      trackEvent(AnalyticsEvents.BLOG_POST_VIEW, {
                        title: post.title,
                        slug: post.slug,
                        location: 'footer_recent',
                      })
                    }
                  >
                    <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                      {post.title}
                    </p>
                    <span className="text-xs text-white/70 uppercase tracking-widest">
                      {t('readArticle')} &rarr;
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
          <p>{t('copyright', { year: currentYear })}</p>
          <div className="flex gap-8">
            <Link
              href="/en"
              className="hover:text-white transition-colors"
              onClick={() =>
                trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
                  type: 'language',
                  from: locale,
                  to: 'en',
                  location: 'footer',
                })
              }
            >
              English
            </Link>
            <Link
              href="/de"
              className="hover:text-white transition-colors"
              onClick={() =>
                trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
                  type: 'language',
                  from: locale,
                  to: 'de',
                  location: 'footer',
                })
              }
            >
              Deutsch
            </Link>
          </div>
        </div>
      </Container>
    </footer>
  );
}