import { AuthLayout } from '@/features/auth/components/AuthLayout';
import { Button } from '@/components/ui/button';
import { useNavigate } from '@tanstack/react-router';
import { useTranslation } from '@/i18n/TranslationProvider';

export function GatePage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const landingUrl = import.meta.env.VITE_LANDING_URL || '';

  return (
    <AuthLayout>
      <div className="flex flex-col items-center text-center space-y-4">
        <h1 className="text-2xl font-semibold tracking-tight">
          {t('gate.title')}
        </h1>
        <p className="text-muted-foreground leading-relaxed">
          {t('gate.message')}
        </p>

        {landingUrl && (
          <a
            href={landingUrl}
            className="text-sm text-primary hover:text-primary/80 transition-colors"
          >
            {t('gate.backToHomepage')}
          </a>
        )}

        <Button
          variant="outline"
          size="sm"
          className="mt-4"
          onClick={() => navigate({ to: '/login' })}
        >
          {t('gate.proceedToLogin')}
        </Button>
      </div>
    </AuthLayout>
  );
}