"use client";

import { useState, useEffect } from "react";
import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function AwardsPage() {
  const [glitch, setGlitch] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setGlitch(true);
      setTimeout(() => setGlitch(false), 100);
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  const awards = [
    { year: "2025", title: "Best Market Infrastructure", winner: "The Candy Shop", icon: "🏆" },
    { year: "2024", title: "Most Secure Node", winner: "The Sanctuary", icon: "🛡️" },
    { year: "2024", title: "Innovation in Shared Entities", winner: "Darknet Ping Pong", icon: "🔮" },
    { year: "2023", title: "Excellence in OpSec Training", winner: "Arb Academy", icon: "🎓" },
  ];

  return (
    <ThemedLayout theme="mystic" title="The Shadow Awards">
      <div className={`max-w-5xl mx-auto pt-12 transition-all duration-75 ${glitch ? 'skew-x-1 scale-105 blur-[1px]' : ''}`}>
        <header className="text-center mb-20 relative">
          <div className="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
            <div className="text-[200px] font-black">S.A.</div>
          </div>
          <h1 className="text-7xl font-serif italic mb-4 relative z-10">The Shadow Awards</h1>
          <p className="text-xs uppercase tracking-[1em] opacity-40">Recognizing Excellence in the Void</p>
        </header>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-20">
          {awards.map((a, i) => (
            <div key={i} className="group border-2 border-[#d4af37]/20 p-12 bg-black/40 hover:border-[#d4af37]/60 transition-all relative overflow-hidden">
              <div className="absolute -right-4 -bottom-4 text-8xl opacity-5 group-hover:opacity-10 transition-opacity">
                {a.icon}
              </div>
              <div className="text-[#d4af37] text-xs font-bold mb-2">{a.year} Laureate</div>
              <h3 className="text-3xl font-serif mb-4">{a.title}</h3>
              <div className="text-white/60 text-sm italic">Awarded to:</div>
              <div className="text-xl font-bold text-white uppercase tracking-widest">{a.winner}</div>
            </div>
          ))}
        </div>

        <section className="border-t-2 border-[#d4af37]/20 pt-20 text-center">
          <h2 className="text-4xl font-serif mb-8 italic">Official Accreditation</h2>
          <div className="flex justify-center gap-12 opacity-40 grayscale hover:grayscale-0 transition-all">
            <img src="https://www.svgrepo.com/show/443364/award-badge.svg" className="h-24 invert" />
            <img src="https://www.svgrepo.com/show/443365/award-ribbon.svg" className="h-24 invert" />
            <img src="https://www.svgrepo.com/show/443366/award-star.svg" className="h-24 invert" />
          </div>
          <p className="mt-12 text-[10px] uppercase tracking-widest opacity-30 max-w-2xl mx-auto leading-loose">
            The Shadow Awards committee is comprised of anonymous delegates from the top 100 nodes. 
            Selection is based on uptime, security, and contribution to the network's growth.
          </p>
        </section>

        <div className="mt-32 text-center">
          <div className="text-[8px] opacity-20 uppercase tracking-[0.5em] mb-4">End of Official Record</div>
          <div className="text-red-500 text-[10px] font-bold"></div>
        </div>
      </div>
    </ThemedLayout>
  );
}