fotospiel-app/resources/js/layouts/app/Footer.tsx

import React, { useMemo } from 'react';
import { Link } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useConsent } from '@/contexts/consent';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';

const Footer: React.FC = () => {
  const { t } = useTranslation(['marketing', 'legal', 'common']);
  const { openPreferences } = useConsent();
  const { localizedPath } = useLocalizedRoutes();

  const links = useMemo(() => ({
    home: localizedPath('/'),
    impressum: localizedPath('/impressum'),
    datenschutz: localizedPath('/datenschutz'),
    agb: localizedPath('/agb'),
    widerruf: localizedPath('/widerrufsbelehrung'),
    kontakt: localizedPath('/kontakt'),
    gift: localizedPath('/gutschein'),
  }), [localizedPath]);

  const currentYear = new Date().getFullYear();

  return (
    <footer className="mt-auto border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
          <div>
            <div className="flex items-center gap-4">
              <img src="/logo-transparent-md.png" alt="Logo der Fotospiel App" className="h-12 w-auto" />
              <div>
                <Link href={links.home} className="font-display text-2xl font-bold text-pink-500">
                  Die Fotospiel App
                </Link>
                <p className="mt-2 font-sans-marketing text-gray-600 dark:text-gray-300">
                  {t('marketing:footer.company', 'S.E.B. Fotografie')}
                </p>
              </div>
            </div>
            <div className="mt-4">
              <p className="text-sm font-semibold text-gray-900 dark:text-gray-50">
                {t('marketing:nav.gift', 'Paket verschenken (Gutschein)')}
              </p>
              <Link
                href={links.gift}
                className="text-sm text-pink-600 transition hover:text-pink-500 dark:text-pink-300 dark:hover:text-pink-200"
              >
                {t('marketing:nav.gift', 'Paket verschenken (Gutschein)')}
              </Link>
            </div>
          </div>

          <div>
            <h3 className="font-display mb-4 font-semibold text-gray-900 dark:text-gray-50">
              {t('legal:headline', 'Rechtliches')}
            </h3>
            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600 dark:text-gray-300">
              <li>
                <Link href={links.impressum} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                  {t('legal:impressum')}
                </Link>
              </li>
              <li>
                <Link href={links.datenschutz} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                  {t('legal:datenschutz')}
                </Link>
              </li>
              <li>
                <Link href={links.agb} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                  {t('legal:agb')}
                </Link>
              </li>
              <li>
                <Link href={links.widerruf} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                  {t('legal:widerrufsbelehrung')}
                </Link>
              </li>
              <li>
                <button
                  type="button"
                  onClick={openPreferences}
                  className="transition-colors hover:text-pink-500 dark:hover:text-pink-300"
                >
                  {t('common:consent.footer.manage_link')}
                </button>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="font-display mb-4 font-semibold text-gray-900 dark:text-gray-50">
              {t('marketing:footer.social', 'Social')}
            </h3>
            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600 dark:text-gray-300">
              <li>
                <Link href={links.kontakt} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                  {t('marketing:nav.contact')}
                </Link>
              </li>
              <li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">Instagram</a></li>
              <li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">Facebook</a></li>
              <li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">YouTube</a></li>
            </ul>
          </div>
        </div>

        <div className="font-sans-marketing mt-8 border-t border-gray-200 pt-8 text-center text-sm text-gray-500 dark:border-gray-800 dark:text-gray-400">
          &copy; {currentYear} Die Fotospiel App – {t('marketing:footer.rights_reserved', 'Alle Rechte vorbehalten')}.
        </div>
      </div>
    </footer>
  );
};

export default Footer;