import type { ReactNode } from 'react';
import { LanguageSwitcher } from '@/components/language-switcher';
import { Link } from '@/i18n/navigation';
import { useT } from '@/i18n/t';

export default function MarketingLayout({ children }: { children: ReactNode }) {
  const t = useT();
  return (
    <div className="flex min-h-dvh flex-col">
      <header className="mx-auto flex w-full max-w-5xl items-center justify-between px-5 py-4">
        <Link href="/" className="text-base font-semibold tracking-tight">
          {t('common.appName')}
        </Link>
        <div className="flex items-center gap-4">
          <LanguageSwitcher />
          <Link href="/login" className="text-sm font-medium text-accent-700 hover:underline">
            {t('auth.login.submit')}
          </Link>
        </div>
      </header>

      <main className="flex-1">{children}</main>

      <footer className="mx-auto flex w-full max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-8 text-sm text-[var(--text-muted)]">
        <span>{t('common.appName')}</span>
        <Link href="/legal/privacidad" className="hover:underline">
          {t('landing.footer.privacy')}
        </Link>
        <Link href="/legal/terminos" className="hover:underline">
          {t('landing.footer.terms')}
        </Link>
      </footer>
    </div>
  );
}