import Link from 'next/link';

export default function Home() {
  return (
    <main className="min-h-[100dvh] bg-black text-white selection:bg-white/20 selection:text-white font-sans p-4 md:p-6 lg:p-8 flex flex-col overflow-hidden">
      


      {/* Strict Architectural Grid Container */}
      <div className="flex-1 w-full grid grid-cols-1 lg:grid-cols-12 gap-px bg-zinc-800 border border-zinc-800 rounded-sm overflow-hidden relative shadow-2xl">
        
        {/* Left Side: Massive Branding (8 columns) */}
        <div className="lg:col-span-8 lg:col-start-1 bg-black p-6 sm:p-8 md:p-12 lg:p-16 flex flex-col justify-between relative group min-h-[50vh] lg:min-h-0">
          
          <div className="flex-1 flex flex-col justify-center max-w-full overflow-hidden">
            {/* Fluid Typography using clamp and vw to perfectly fit without wrapping/overflowing */}
            <h1 className="font-bold tracking-tighter leading-[0.85] uppercase text-white w-full">
              <span className="block text-[15vw] lg:text-[7vw] xl:text-[8vw] 2xl:text-[9rem]">Wyvern</span>
              <span className="block text-[15vw] lg:text-[7vw] xl:text-[8vw] 2xl:text-[9rem] text-zinc-600">Softworks</span>
            </h1>
            
            <p className="font-mono text-[10px] sm:text-xs md:text-sm text-zinc-400 max-w-xl mt-8 md:mt-12 lg:mt-16 leading-relaxed tracking-wide">
              Premium software drops, zero-day scripts, and enterprise cracks. Architected with industrial precision and void of unnecessary aesthetics. Access requires clearance.
            </p>
          </div>

          <div className="font-mono text-[9px] sm:text-[10px] text-zinc-600 tracking-widest mt-8">
            A PROJECT BY APRK // EST. 2026
          </div>
        </div>

        {/* Right Side: Navigation Grid (4 columns) */}
        <div className="lg:col-span-4 bg-black flex flex-col lg:h-full lg:overflow-y-auto border-t lg:border-t-0 border-zinc-900">
          
          <div className="p-8 border-b border-zinc-900 shrink-0 bg-black sticky top-0 z-10">
            <div className="flex flex-col gap-1">
              <span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
              <span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
            </div>
          </div>

          <div className="flex-1 flex flex-col">
            {[
              { id: 'sources', label: 'Sources', index: '01', desc: 'Resource Directory' },
              { id: 'cracks', label: 'Cracks', index: '02', desc: 'Bypass Protocols' },
              { id: 'scripts', label: 'Scripts', index: '03', desc: 'Automated Logic' },
              { id: 'tools', label: 'Tools', index: '04', desc: 'Utility Suite' },
            ].map((mod) => (
              <Link 
                key={mod.id} 
                href={`/${mod.id}`} 
                className="flex-1 min-h-[100px] p-8 border-b border-zinc-900 flex flex-col justify-center gap-2 group hover:bg-white transition-all duration-500"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <span className="font-mono text-[10px] text-zinc-800 group-hover:text-black/30 transition-colors">
                      {mod.index}
                    </span>
                    <span className="font-black text-xl tracking-tighter uppercase italic group-hover:text-black transition-colors">
                      {mod.label}
                    </span>
                  </div>
                  <span className="font-mono text-zinc-800 group-hover:text-black transition-colors">→</span>
                </div>
                <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase group-hover:text-black/60 transition-colors">
                  {mod.desc}
                </p>
              </Link>
            ))}

            <Link href="/vip" className="flex-1 min-h-[120px] p-8 bg-zinc-950 flex flex-col justify-center gap-2 group hover:bg-white transition-all duration-500 relative overflow-hidden">
              <div className="absolute top-0 left-0 w-2 h-full bg-white -translate-x-full group-hover:translate-x-0 transition-transform duration-500" />
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <span className="font-mono text-[10px] text-zinc-800 group-hover:text-black/30 transition-colors">
                    EXP
                  </span>
                  <span className="font-black text-xl tracking-tighter uppercase text-white group-hover:text-black transition-colors italic">
                    VIP Access
                  </span>
                </div>
                <div className="w-2 h-2 bg-white rounded-full group-hover:bg-black transition-colors shadow-[0_0_10px_rgba(255,255,255,0.5)] group-hover:shadow-none animate-pulse" />
              </div>
              <p className="font-mono text-[9px] tracking-widest text-zinc-500 uppercase group-hover:text-black/60 transition-colors">
                Clearance Elevation Required
              </p>
            </Link>
          </div>

        </div>

      </div>

    </main>
  );
}