import { useI18n, tk } from '../lib/i18n';

function Logo({ className }: { className: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2L2 7l10 5 10-5-10-5z" />
      <path d="M2 17l10 5 10-5" />
      <path d="M2 12l10 5 10-5" />
    </svg>
  );
}

export function MobileBranding() {
  const { t } = useI18n();

  return (
    <div className="lg:hidden text-center mb-8">
      <div className="w-11 h-11 rounded-xl bg-accent mx-auto flex items-center justify-center mb-4 shadow-md">
        <Logo className="w-5 h-5 text-white" />
      </div>
      <h1 className="text-xl font-semibold text-text-primary tracking-[-0.01em]">{t('auth.productName')}</h1>
      <p className="text-[13px] text-text-muted mt-1">{t('auth.slogan')}</p>
    </div>
  );
}

export default function AuthBranding() {
  const { t } = useI18n();

  return (
    <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden items-center justify-center p-12"
      style={{ background: 'linear-gradient(135deg, var(--fox-amber), var(--fox-orange))' }}>
      <div className="absolute -top-24 -left-24 w-96 h-96 rounded-full opacity-10 bg-white" />
      <div className="absolute -bottom-32 -right-32 w-[500px] h-[500px] rounded-full opacity-10 bg-white" />

      <div className="relative z-10 max-w-md text-white">
        <div className="w-20 h-20 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-8 shadow-lg">
          <Logo className="w-10 h-10 text-white" />
        </div>

        <h1 className="text-4xl font-bold tracking-tight mb-3">
          {t('auth.productName')}
        </h1>

        <p className="text-xl text-white/90 mb-10 leading-relaxed">
          {t('auth.slogan')}
        </p>

        <div className="space-y-4">
          {['auth.feature1', 'auth.feature2', 'auth.feature3'].map((key) => (
            <div key={key} className="flex items-start gap-3">
              <div className="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
                <svg className="w-3 h-3 text-white" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                </svg>
              </div>
              <span className="text-white/90 text-[15px] leading-snug">{t(tk(key))}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}