import { useSeoMeta } from '@unhead/react';
import { Link } from 'react-router-dom';
import { Scale } from 'lucide-react';
import { useTranslation } from '@/contexts/language';

export default function LicensePage() {
  const { t } = useTranslation();
  useSeoMeta({
    title: t('settingsUi.license.seoTitle'),
    description: t('settingsUi.license.seoDescription'),
  });

  return (
    <>
      <div className="container max-w-2xl px-4 py-16 md:py-24">
        {/* Big skate emoji hero */}
        <div className="text-center mb-16">
          <div className="text-8xl mb-6 select-none" style={{ filter: 'drop-shadow(0 0 24px #ff0040)' }}>
            🛹
          </div>
          <h1 className="text-5xl md:text-7xl font-black uppercase mb-4 leading-none tracking-tight">
            <span className="neon-red">Skate</span>{' '}
            <span className="neon-lime">Spots</span>
          </h1>
          <p className="text-gray-400 text-lg">
            {t('settingsUi.license.tagline')}
          </p>
        </div>

        {/* Copyright */}
        <div className="text-center mb-12">
          <p className="text-gray-300 text-base">
            Copyright © 2025–
            <span className="neon-lime text-xl align-middle mx-1">∞</span>
          </p>
          <p className="text-gray-500 text-sm mt-1">
            {t('settingsUi.license.copyright')}
          </p>
        </div>

        {/* License card */}
        <div className="relative rounded-2xl border-2 border-[#ccff00]/40 bg-black/80 overflow-hidden shadow-[0_0_40px_rgba(204,255,0,0.1)] p-8 md:p-12 text-center">
          {/* Glow strip */}
          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[#ff0040] via-[#ff6600] to-[#ccff00]" />

          <div className="flex justify-center mb-6">
            <div className="w-16 h-16 rounded-2xl bg-[#ccff00]/10 border-2 border-[#ccff00]/40 flex items-center justify-center">
              <Scale className="h-8 w-8 text-[#ccff00]" />
            </div>
          </div>

          <p className="text-gray-400 text-sm uppercase tracking-widest mb-4 font-bold">{t('settingsUi.license.licenseLabel')}</p>

          <h2 className="text-3xl md:text-4xl font-black uppercase mb-6 leading-tight">
            <span className="neon-lime">{t('settingsUi.license.freeLine1')}</span>
            <br />
            <span className="text-white">{t('settingsUi.license.freeLine2')}</span>
          </h2>

          <p className="text-gray-400 leading-relaxed max-w-md mx-auto mb-8">
            {t('settingsUi.license.body')}
          </p>

          <div className="border-t border-gray-800 pt-6 space-y-2 text-sm text-gray-500">
            <p>{t('settingsUi.license.builtBefore')} <span className="text-[#ff0040]">Nostr</span> {t('settingsUi.license.builtMid')} <span className="text-[#f7931a]">{t('settingsUi.license.lightning')}</span></p>
            <p>
              <a
                href="https://nostrhub.io/naddr1qvzqqqrhnypzqg88e9f588nx7wyz4wt0ura23w3yd4hmztqrkr95utwyvgachjepqyd8wumn8ghj7emfwsh8x6rpddjhxur9v9ex2tnyd9uj7qq22d4kzar92dcx7arnhyhdwn"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#ccff00]/70 hover:text-[#ccff00] transition-colors underline"
              >
                {t('settingsUi.license.viewSource')}
              </a>
              {' '}&middot;{' '}
              <Link to="/about" className="text-[#ccff00]/70 hover:text-[#ccff00] transition-colors underline">
                {t('settingsUi.license.aboutSkateSpots')}
              </Link>
              {' '}&middot;{' '}
              <Link to="/supporters" className="text-[#ccff00]/70 hover:text-[#ccff00] transition-colors underline">
                {t('settingsUi.license.supporters')}
              </Link>
            </p>
          </div>
        </div>


      </div>
    </>
  );
}