import { useSeoMeta } from '@unhead/react';
import { Layout } from '@/components/Layout';
import { Link } from 'react-router-dom';
import { Infinity, Scale } from 'lucide-react';

export default function LicensePage() {
  useSeoMeta({
    title: 'License - SkateSpots',
    description: 'SkateSpots license. You are free to skateboard.',
  });

  return (
    <Layout>
      <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">
            Skate, earn, have fun and spend Sats wherever you are.
          </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">
            SkateSpots contributors &amp; the community
          </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">License</p>

          <h2 className="text-3xl md:text-4xl font-black uppercase mb-6 leading-tight">
            <span className="neon-lime">YOU ARE FREE</span>
            <br />
            <span className="text-white">TO SKATEBOARD</span>
          </h2>

          <p className="text-gray-400 leading-relaxed max-w-md mx-auto mb-8">
            This project is open. Share it, fork it, build on it, skate it.
            The streets belong to everyone. So does this code.
            Keep skating, have fun, learn tricks, support the builders and keep skating again.
          </p>

          <div className="border-t border-gray-800 pt-6 space-y-2 text-sm text-gray-500">
            <p>Built with ❤️ on <span className="text-[#ff0040]">Nostr</span> · Powered by <span className="text-[#f7931a]">Bitcoin 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"
              >
                View source
              </a>
              {' '}&middot;{' '}
              <Link to="/about" className="text-[#ccff00]/70 hover:text-[#ccff00] transition-colors underline">
                About SkateSpots
              </Link>
              {' '}&middot;{' '}
              <Link to="/supporters" className="text-[#ccff00]/70 hover:text-[#ccff00] transition-colors underline">
                Supporters
              </Link>
            </p>
          </div>
        </div>


      </div>
    </Layout>
  );
}