1  'use client';
 2  
 3  import Link from 'next/link';
 4  import { useTranslation } from '@/lib/i18n';
 5  
 6  function LogoMark() {
 7    return (
 8      <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
 9        <defs>
10          <linearGradient id="flogo" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
11            <stop offset="0%" stopColor="#3B82F6"/>
12            <stop offset="100%" stopColor="#06B6D4"/>
13          </linearGradient>
14        </defs>
15        <rect width="32" height="32" rx="8" fill="#111113"/>
16        <rect x="1" y="1" width="30" height="30" rx="7" stroke="url(#flogo)" strokeWidth="1.5" fill="none" opacity="0.4"/>
17        <path d="M9 16 L14 21 L23 11" stroke="url(#flogo)" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
18      </svg>
19    );
20  }
21  
22  export default function Footer() {
23    const { t } = useTranslation();
24  
25    return (
26      <footer className="relative border-t border-white/[0.04]">
27        <div className="max-w-container mx-auto px-4 sm:px-6 py-12 sm:py-16">
28          <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
29            {/* Logo + brand */}
30            <div className="flex items-center gap-3">
31              <LogoMark />
32              <span className="text-base font-semibold text-text-primary font-display tracking-tight">
33                Gap<span className="text-gradient">Zero</span>
34              </span>
35            </div>
36  
37            {/* Links */}
38            <div className="flex items-center gap-6 text-sm text-text-tertiary flex-wrap justify-center">
39              <Link href="/#features" className="hover:text-text-secondary transition-colors">
40                {t('common.features')}
41              </Link>
42              <Link href="/#how-it-works" className="hover:text-text-secondary transition-colors">
43                {t('common.howItWorks')}
44              </Link>
45              <Link href="/analyze" className="hover:text-text-secondary transition-colors">
46                {t('common.analyzeMyCareer')}
47              </Link>
48              <Link href="/terms" className="hover:text-text-secondary transition-colors">
49                {t('common.terms')}
50              </Link>
51              <Link href="/privacy" className="hover:text-text-secondary transition-colors">
52                {t('common.privacy')}
53              </Link>
54            </div>
55  
56            {/* Credits */}
57            <div className="text-sm text-text-tertiary flex items-center gap-1.5">
58              {t('common.builtBy')}{' '}
59              <a
60                href="https://linkedin.com/in/florinpatrascu"
61                target="_blank"
62                rel="noopener noreferrer"
63                className="text-text-secondary hover:text-primary transition-colors font-medium"
64              >
65                Florin Pătrascu
66              </a>
67            </div>
68          </div>
69        </div>
70      </footer>
71    );
72  }