"use client";

import { useState } from "react";
import Link from "next/link";

export default function AboutPage() {
  const [platformName, setPlatformName] = useState("JUMPA.ID");
  const version = "v4.2.0-ULTRA";

  const handleSave = () => {
    alert("SYSTEM INJECTION SUCCESS: Platform identity propagated to all nodes.");
  };

  return (
    <div className="min-h-screen bg-[#050b14] p-6 md:p-12 text-white font-sans selection:bg-amber-500/30">
      <div className="max-w-5xl mx-auto space-y-12">
        
        {/* HEADER */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-white/5 pb-8">
          <div className="space-y-1">
             <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(168,85,247,0.5)]">
                   <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <h1 className="text-3xl font-black tracking-tighter uppercase">System Anatomy</h1>
             </div>
             <p className="text-gray-500 text-sm font-medium">Core engine specifications and multiverse lineage.</p>
          </div>
          <div className="flex items-center gap-4">
            <Link href="/supreme-admin" className="px-5 py-2.5 glass-panel border border-white/10 hover:bg-white/5 rounded-xl font-bold transition-all text-xs uppercase tracking-widest">
              Dashboard
            </Link>
            <span className="px-4 py-2 bg-amber-500/10 text-amber-500 text-[10px] font-black tracking-[0.2em] rounded-full border border-amber-500/20 uppercase">
              {version}
            </span>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
          
          {/* LEFT COL: WHITE LABEL */}
          <div className="lg:col-span-2 space-y-8">
            <div className="glass-panel p-8 rounded-[2rem] border border-white/10 relative overflow-hidden group">
              <div className="absolute top-0 left-0 w-2 h-full bg-blue-500"></div>
              <h2 className="text-xl font-black text-blue-400 mb-6 flex items-center gap-2">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
                Identity Morphing (White Label)
              </h2>
              <p className="text-gray-400 text-sm mb-8 leading-relaxed">
                Injeksi identitas global. Mengubah parameter ini akan mendistorsi branding JUMPA.ID di seluruh layer (IAM, XCU, XTM) secara simultan.
              </p>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-gray-500 text-[10px] font-black mb-3 uppercase tracking-[0.2em]">Master Platform Alias</label>
                  <div className="flex gap-4">
                    <input 
                      type="text" 
                      value={platformName}
                      onChange={(e) => setPlatformName(e.target.value)}
                      className="flex-1 bg-white/5 text-white px-5 py-4 rounded-2xl border border-white/10 outline-none focus:border-blue-500/50 transition-all font-mono text-sm"
                      placeholder="e.g. ULTRA_MEET"
                    />
                    <button onClick={handleSave} className="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black transition-all shadow-[0_0_20px_rgba(37,99,235,0.3)] active:scale-95 text-xs uppercase tracking-widest">
                      INJECT
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* TECH STACK VISUAL */}
            <div className="glass-panel p-8 rounded-[2rem] border border-white/10 bg-white/[0.02]">
               <h2 className="text-sm font-black text-gray-500 mb-6 uppercase tracking-[0.2em]">Quantum Stack Integrity</h2>
               <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                  {[
                    { label: 'ENGINE', val: 'XCU RUST', color: 'text-orange-400' },
                    { label: 'ORCHESTRA', val: 'NEXT.JS 15', color: 'text-white' },
                    { label: 'DATABASE', val: 'POSTGRES', color: 'text-blue-400' },
                    { label: 'TRANSPORT', val: 'QUIC/H3', color: 'text-emerald-400' }
                  ].map((t, i) => (
                    <div key={i} className="p-4 rounded-2xl bg-white/5 border border-white/5 text-center">
                       <div className="text-[8px] font-black text-gray-600 mb-1">{t.label}</div>
                       <div className={`text-[10px] font-bold ${t.color}`}>{t.val}</div>
                    </div>
                  ))}
               </div>
            </div>
          </div>

          {/* RIGHT COL: CHANGELOG */}
          <div className="space-y-6">
             <div className="glass-panel p-8 rounded-[2rem] border border-white/10 relative overflow-hidden h-full">
                <div className="absolute top-0 left-0 w-2 h-full bg-purple-500"></div>
                <h2 className="text-lg font-black text-purple-400 mb-8 uppercase tracking-widest">Evolution Logs</h2>
                
                <div className="space-y-10 relative before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[2px] before:bg-white/5">
                   {[
                     { 
                       v: 'V.4.2', 
                       t: 'QUANTUM BILLING', 
                       d: 'Mei 2026', 
                       c: 'bg-purple-500', 
                       items: ['Xendit Live Integration', '101 Module Matrix', 'Auto-Pilot v2.0'] 
                     },
                     { 
                       v: 'V.4.0', 
                       t: 'OMNIVERSAL CORE', 
                       d: 'April 2026', 
                       c: 'bg-emerald-500', 
                       items: ['eBPF Kernel Bypass', 'MoQ Transport', 'Deep-Twin AI'] 
                     },
                     { 
                       v: 'V.3.0', 
                       t: 'BONE SEPARATION', 
                       d: 'Maret 2026', 
                       c: 'bg-gray-700', 
                       items: ['Microservices Split', 'Multi-Tenant IAM', 'Rust SFU Alpha'] 
                     }
                   ].map((log, i) => (
                     <div key={i} className="relative pl-8">
                        <div className={`absolute left-0 top-1.5 w-4 h-4 rounded-full ${log.c} shadow-[0_0_15px_rgba(168,85,247,0.3)] z-10 border-4 border-[#050b14]`}></div>
                        <div className="text-[10px] font-black text-gray-500 mb-1">{log.d} — {log.v}</div>
                        <h3 className="text-sm font-black text-white mb-3 tracking-tight">{log.t}</h3>
                        <ul className="space-y-2">
                           {log.items.map((item, idx) => (
                             <li key={idx} className="text-[10px] text-gray-500 flex items-center gap-2">
                                <span className="w-1 h-1 bg-gray-700 rounded-full"></span>
                                {item}
                             </li>
                           ))}
                        </ul>
                     </div>
                   ))}
                </div>
             </div>
          </div>

        </div>

      </div>
    </div>
  );
}