fix: restore automatic language flags

src/components/HeroControls.tsx

@@ -3,7 +3,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { portfolioPath } from '@/content/contracts';
 import Link from 'next/link';
-import { Check, Languages, Moon, Sun } from 'lucide-react';
+import Image from 'next/image';
+import { languageFlag } from '@/content/language-flags';
+import { Check, Globe, Languages, Moon, Sun } from 'lucide-react';
 import { useTheme } from '@/context/ThemeContext';
 import type { PortfolioProps } from '@/server/content';
 import styles from './HeroSection.module.css';
@@ -45,12 +47,17 @@ export function HeroControls({ portfolio }: PortfolioProps) {
           <Languages size={23} strokeWidth={1.9} aria-hidden="true" />
         </button>
         <div id="language-menu" className={styles.languageMenu} role="menu" aria-label={copy.languageMenuLabel} data-open={isOpen}>
-          {portfolio.languages.map(language => <Link key={language.code}
+          {portfolio.languages.map(language => {
+            const flag = languageFlag(language.code, language.flagCountry);
+            return <Link key={language.code}
             href={portfolioPath(language.code, portfolio.defaultLanguage)} hrefLang={language.code} role="menuitem"
             aria-current={locale === language.code ? 'page' : undefined} className={styles.languageOption}>
-            <span className={styles.languageOptionLabel} lang={language.code} dir={language.direction}>{language.name}</span>
+            <span className={styles.languageOptionLabel}>
+              {flag ? <Image src={flag} alt="" aria-hidden="true" width={20} height={20} unoptimized className={styles.languageFlag} /> : <Globe size={20} aria-hidden="true" className={styles.languageFlag} />}
+              <span lang={language.code} dir={language.direction}>{language.name}</span>
+            </span>
             {locale === language.code && <Check size={16} className={styles.selectedIcon} aria-hidden="true" />}
-          </Link>)}
+          </Link>; })}
         </div>
       </div>
     </div>