import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";

const cyan = "#00f5ff";

function Icon({ type = "terminal", className = "" }) {
  const common = { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
  const paths = {
    home: <><path d="m3 11 9-8 9 8"/><path d="M5 10v10h14V10"/><path d="M9 20v-6h6v6"/></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-5"/></>,
    code: <><path d="m8 8-4 4 4 4"/><path d="m16 8 4 4-4 4"/><path d="m14 4-4 16"/></>,
    monitor: <><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8"/><path d="M12 16v4"/></>,
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>,
    user: <><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></>,
    tools: <><path d="m14.7 6.3 3-3a2.1 2.1 0 0 1 3 3l-3 3"/><path d="m11 10 8 8"/><path d="m5 19 6-6"/><path d="m2 22 3-3"/><path d="m7 8-5 5"/></>,
    briefcase: <><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 12h18"/></>,
    folder: <><path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></>,
    starshield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m12 8 1.1 2.3 2.5.4-1.8 1.8.4 2.5-2.2-1.2L9.8 15l.4-2.5-1.8-1.8 2.5-.4Z"/></>,
    server: <><rect x="4" y="4" width="16" height="6" rx="1"/><rect x="4" y="14" width="16" height="6" rx="1"/><path d="M7 7h.01M7 17h.01"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20"/><path d="M12 2a15 15 0 0 0 0 20"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></>,
    lock: <><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    brain: <><path d="M9 4a3 3 0 0 0-3 3v1a3 3 0 0 0-2 3 3 3 0 0 0 2 3v1a3 3 0 0 0 3 3"/><path d="M15 4a3 3 0 0 1 3 3v1a3 3 0 0 1 2 3 3 3 0 0 1-2 3v1a3 3 0 0 1-3 3"/><path d="M9 4v14M15 4v14M9 9h6M9 14h6"/></>,
    fingerprint: <><path d="M12 11c0 3.5-1.5 5.5-3 7"/><path d="M15 18c.7-1.6 1-3.6 1-6a4 4 0 0 0-8 0"/><path d="M18.5 15.5c.3-1.1.5-2.3.5-3.5a7 7 0 0 0-14 0"/><path d="M8.5 21c1.6-1.8 2.5-4.7 2.5-9a1 1 0 0 1 2 0c0 4.2-.6 7.2-2 9"/></>,
    download: <><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></>,
    github: <><path d="M12 2a10 10 0 0 0-3 19v-3c-3 .6-4-1-4-1-.5-1-1-1.5-1-1.5 1 0 2 1 2 1 1 2 3 1.5 3 1 .1-.7.4-1.2.7-1.5-2.4-.3-4.7-1.2-4.7-5A4 4 0 0 1 6 8c-.2-.5-.5-1.8.2-3 0 0 1-.3 3 1a10 10 0 0 1 5.6 0c2-1.3 3-1 3-1 .7 1.2.4 2.5.2 3a4 4 0 0 1 1 2.8c0 3.8-2.3 4.7-4.7 5 .4.4.7 1 .7 2v3A10 10 0 0 0 12 2Z"/></>,
    linkedin: <><path d="M4 9h4v11H4Z"/><path d="M6 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/><path d="M11 9h4v2a4 4 0 0 1 7 3v6h-4v-5c0-1.5-.5-2.5-1.8-2.5S15 13.5 15 15v5h-4Z"/></>,
    youtube: <><rect x="3" y="7" width="18" height="10" rx="3"/><path d="m10 10 5 2-5 2Z"/></>,
    cube: <><path d="m12 2 8 4.5v9L12 20l-8-4.5v-9Z"/><path d="m4 6.5 8 4.5 8-4.5"/><path d="M12 11v9"/></>,
  };
  return <svg {...common}>{paths[type] || paths.terminal}</svg>;
}

const certs = [
  { name: "ISC2 Certified in Cybersecurity (CC)", issuer: "ISC2", date: "Oct 2025", expires: "Oct 2029", logo: "ISC²", accent: "cyan" },
  { name: "LPIC-1", issuer: "Linux Professional Institute", date: "Oct 2016", expires: "Never Expires", logo: "L", accent: "yellow" },
  { name: "Google Cybersecurity Specialization", issuer: "Google", date: "Sep 2024", expires: "Active", logo: "G", accent: "cyan" },
  { name: "AWS Cloud Solutions Architect", issuer: "AWS", date: "Oct 2023", expires: "Active", logo: "aws", accent: "orange" },
];

const skills = [
  ["Linux / Sysadmin", 95, "cyan"],
  ["Cybersecurity", 95, "cyan"],
  ["Threat Hunting", 90, "cyan"],
  ["DFIR / Forensics", 90, "cyan"],
  ["Penetration Testing", 90, "purple"],
  ["Cloud Security", 85, "purple"],
  ["AI / AI Security", 80, "orange"],
  ["Networking", 75, "orange"],
  ["Automation", 85, "cyan"],
];

const nav = [
  ["home", "Home"], ["user", "About"], ["starshield", "Certifications"], ["code", "Skills"],
  ["monitor", "Projects"], ["tools", "Tools"], ["briefcase", "Experience"], ["file", "Blog"], ["mail", "Contact"],
];

function MatrixRain() {
  const columns = useMemo(() => Array.from({ length: 88 }, (_, i) => ({ id: i, left: i * 1.2, delay: -(i % 18), speed: 8 + (i % 8) })), []);
  return <div className="pointer-events-none fixed inset-0 overflow-hidden bg-[#010506]">
    <div className="absolute inset-0 bg-[radial-gradient(circle_at_22%_18%,rgba(0,245,255,.15),transparent_28%),radial-gradient(circle_at_80%_84%,rgba(168,85,247,.12),transparent_30%),radial-gradient(circle_at_85%_55%,rgba(255,132,0,.08),transparent_30%)]" />
    <div className="absolute inset-0 opacity-[.08] [background-image:linear-gradient(rgba(0,245,255,.45)_1px,transparent_1px),linear-gradient(90deg,rgba(0,245,255,.45)_1px,transparent_1px)] [background-size:34px_34px]" />
    {columns.map((c) => <motion.div key={c.id} className="absolute -top-96 font-mono text-[13px] leading-5 text-cyan-300/25" style={{ left: `${c.left}%` }} animate={{ y: [0, 1500] }} transition={{ duration: c.speed, repeat: Infinity, ease: "linear", delay: c.delay }}>
      {Array.from({ length: 60 }, (_, i) => <div key={i}>{Math.random() > .5 ? "1" : "0"}</div>)}
    </motion.div>)}
    <div className="absolute inset-x-0 bottom-0 h-48 bg-[radial-gradient(ellipse_at_bottom,rgba(0,245,255,.18),transparent_60%)]" />
  </div>;
}

function HudPanel({ children, className = "" }) {
  return <div className={`relative border border-cyan-300/45 bg-black/45 backdrop-blur-xl shadow-[0_0_28px_rgba(0,245,255,.18),inset_0_0_28px_rgba(0,245,255,.045)] ${className}`} style={{ clipPath: "polygon(0 16px,16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px))" }}>
    <span className="absolute left-0 top-6 h-14 w-px bg-cyan-200 shadow-[0_0_14px_#00f5ff]" />
    <span className="absolute right-0 top-8 h-10 w-px bg-cyan-200 shadow-[0_0_14px_#00f5ff]" />
    {children}
  </div>;
}

function HackerAvatar() {
  return <div className="relative mx-auto mt-4 grid h-36 w-36 place-items-center">
    <motion.div className="absolute inset-0 rounded-full border-2 border-cyan-300/70 shadow-[0_0_28px_rgba(0,245,255,.85)]" animate={{ rotate: 360 }} transition={{ duration: 18, repeat: Infinity, ease: "linear" }} />
    <motion.div className="absolute inset-3 rounded-full border border-cyan-300/30" animate={{ rotate: -360 }} transition={{ duration: 12, repeat: Infinity, ease: "linear" }} />
    <div className="absolute -left-7 top-16 h-px w-10 bg-cyan-300/70" /><div className="absolute -right-7 top-16 h-px w-10 bg-cyan-300/70" />
    <div className="relative h-24 w-24 overflow-hidden rounded-full border border-cyan-300/30 bg-gradient-to-b from-cyan-400/20 to-black shadow-[inset_0_0_25px_rgba(0,245,255,.25)]">
      <div className="absolute left-1/2 top-2 h-20 w-20 -translate-x-1/2 rounded-t-full border-x-[22px] border-t-[28px] border-x-transparent border-t-slate-950" />
      <div className="absolute left-1/2 top-11 h-16 w-16 -translate-x-1/2 rounded-full bg-black" />
      <div className="absolute left-[34px] top-[54px] h-3 w-3 rotate-45 border-b-2 border-r-2 border-cyan-300" />
      <div className="absolute right-[34px] top-[54px] h-3 w-3 rotate-45 border-b-2 border-r-2 border-cyan-300" />
    </div>
  </div>;
}

function WorldMap() {
  const points = useMemo(() => Array.from({ length: 420 }, (_, i) => {
    const x = Math.random() * 100;
    const y = Math.random() * 70 + 6;
    const band = Math.sin(x / 7) * 12 + 38;
    const inLand = Math.abs(y - band) < 18 || (x > 10 && x < 30 && y > 15 && y < 50) || (x > 45 && x < 70 && y > 8 && y < 42) || (x > 68 && x < 94 && y > 20 && y < 58);
    return { x, y, show: inLand || Math.random() > .72 };
  }).filter(p => p.show), []);
  return <div className="absolute inset-y-0 right-0 hidden w-[58%] overflow-hidden lg:block">
    <div className="absolute inset-0 opacity-35 [background-image:linear-gradient(rgba(0,245,255,.22)_1px,transparent_1px),linear-gradient(90deg,rgba(0,245,255,.22)_1px,transparent_1px)] [background-size:30px_30px]" />
    <div className="absolute inset-0">
      {points.map((p, i) => <motion.span key={i} className="absolute h-1 w-1 rounded-full bg-cyan-300 shadow-[0_0_8px_rgba(0,245,255,.9)]" style={{ left: `${p.x}%`, top: `${p.y}%` }} animate={{ opacity: [.25, 1, .25] }} transition={{ duration: 2 + (i % 5), repeat: Infinity, delay: i * .01 }} />)}
    </div>
    <div className="absolute left-[22%] top-[46%] h-28 w-28 rounded-full border border-cyan-300/45 shadow-[0_0_30px_rgba(0,245,255,.35)]" />
    <div className="absolute left-[25%] top-[52%] h-4 w-4 rounded-full bg-cyan-200 shadow-[0_0_25px_#00f5ff]" />
    <div className="absolute right-[16%] top-[38%] h-24 w-24 rounded-full border border-cyan-300/35 shadow-[0_0_25px_rgba(0,245,255,.3)]" />
    <div className="absolute left-[8%] top-[20%] h-px w-[85%] bg-cyan-300/20" />
  </div>;
}

function TopNav() {
  const top = [["home", "Home"], ["starshield", "Certifications"], ["code", "Skills"], ["monitor", "Projects"], ["file", "Resume"], ["mail", "Contact"]];
  return <HudPanel className="ml-auto flex min-h-[66px] min-w-[980px] items-center justify-between px-6">
    <div className="flex flex-wrap gap-3">
      {top.map(([icon, label], i) => <a key={label} href="#" className={`flex items-center gap-2 rounded-xl px-4 py-3 font-mono text-[12px] uppercase tracking-wide ${i === 0 ? "bg-cyan-300/10 text-cyan-100 shadow-[0_0_18px_rgba(0,245,255,.28)]" : "text-slate-300 hover:text-cyan-100"}`}><Icon type={icon} className="h-4 w-4" />{label}</a>)}
    </div>
    <div className="hidden items-center gap-2 font-mono text-[11px] uppercase tracking-[.18em] text-slate-400 xl:flex"><span>System Status:</span><span className="text-green-300">Online</span><span className="h-2 w-2 animate-pulse rounded-full bg-green-300" /></div>
  </HudPanel>;
}

function Sidebar() {
  return <aside className="hidden w-[300px] shrink-0 xl:block">
    <HudPanel className="min-h-[calc(100vh-32px)] p-5 pb-32">
      <h1 className="text-center font-mono text-4xl font-black uppercase tracking-[.12em] text-cyan-200 drop-shadow-[0_0_20px_rgba(0,245,255,.9)]">XE1PHIX</h1>
      <p className="mt-1 text-center font-mono text-[12px] uppercase tracking-[.42em] text-cyan-300">System Access</p>
      <HackerAvatar />
      <nav className="mt-8 space-y-2">
        {nav.map(([icon, label], i) => <a key={label} href="#" className={`group flex items-center justify-between rounded-lg border px-4 py-3 font-mono text-[14px] uppercase tracking-wide transition ${i === 0 ? "border-cyan-300/70 bg-cyan-300/16 text-cyan-100 shadow-[0_0_20px_rgba(0,245,255,.35)]" : "border-transparent text-slate-300 hover:border-cyan-300/35 hover:bg-cyan-300/8 hover:text-cyan-100"}`}>
          <span className="flex items-center gap-3"><Icon type={icon} className="h-5 w-5" />{label}</span><span className="text-cyan-300/45">›</span>
        </a>)}
      </nav>
      <div className="mt-10 border-t border-cyan-300/12 pt-6">
        <div className="font-mono text-[13px] uppercase tracking-[.18em] text-cyan-300">› Access Level</div>
        <div className="mt-3 flex items-center gap-3"><div className="h-2 flex-1 rounded-full bg-slate-800"><div className="h-2 w-[72%] rounded-full bg-cyan-300 shadow-[0_0_14px_#00f5ff]" /></div><span className="font-mono text-xs text-cyan-100">ROOT</span></div>
      </div>
      <div className="mt-7 flex gap-3 text-cyan-300">
        {["github", "linkedin", "mail", "youtube", "cube"].map(t => <a key={t} href="#" className="grid h-8 w-8 place-items-center rounded-md hover:bg-cyan-300/10"><Icon type={t} className="h-5 w-5" /></a>)}
      </div>
      <div className="absolute bottom-5 left-5 right-5 font-mono text-[11px] uppercase leading-6 tracking-wider text-slate-500">© XE1PHIX 2025<br/>All systems secure</div>
    </HudPanel>
  </aside>;
}

function CertPanel() {
  return <HudPanel className="p-5">
    <div className="mb-4 flex items-center justify-between"><h2 className="flex items-center gap-2 font-mono text-xl uppercase tracking-[.13em] text-cyan-200"><Icon type="starshield" className="h-6 w-6" />Certifications</h2><button className="rounded-md border border-cyan-300/35 px-3 py-2 font-mono text-[11px] uppercase text-cyan-200">View All</button></div>
    <div className="space-y-3">
      {certs.map(c => <div key={c.name} className="grid grid-cols-[64px_1fr_60px] items-center gap-3 rounded-lg border border-cyan-300/20 bg-black/35 p-2 hover:border-cyan-300/55">
        <div className={`grid h-14 w-14 place-items-center rounded-lg border text-xl font-black ${c.accent === "orange" ? "border-orange-400 text-orange-300" : c.accent === "yellow" ? "border-yellow-300 text-yellow-300" : "border-cyan-300 text-cyan-100"}`}>{c.logo}</div>
        <div><h3 className="font-mono text-sm text-cyan-200">{c.name}</h3><p className="mt-1 text-xs text-slate-400">{c.issuer}</p><p className="text-[11px] text-slate-500">Issued: {c.date} • {c.expires}</p></div>
        <span className="rounded-md border border-cyan-300/35 bg-cyan-300/10 px-2 py-1 text-center font-mono text-[10px] text-cyan-200">ACTIVE</span>
      </div>)}
    </div>
  </HudPanel>;
}

function SkillsPanel() {
  return <HudPanel className="p-5">
    <h2 className="mb-5 flex items-center gap-2 font-mono text-xl uppercase tracking-[.13em] text-cyan-200"><Icon type="code" className="h-6 w-6" />Skills Matrix</h2>
    <div className="space-y-3">
      {skills.map(([name, val, color]) => <div key={name} className="grid grid-cols-[150px_1fr_42px] items-center gap-3 text-sm">
        <span className="text-slate-300">{name}</span><div className="h-2 rounded-full bg-slate-800"><motion.div className={`h-2 rounded-full ${color === "purple" ? "bg-purple-500" : color === "orange" ? "bg-orange-400" : "bg-cyan-300"} shadow-[0_0_14px_currentColor]`} initial={{ width: 0 }} whileInView={{ width: `${val}%` }} viewport={{ once: true }} /></div><span className="font-mono text-cyan-200">{val}%</span>
      </div>)}
    </div>
  </HudPanel>;
}

function StatsPanel() {
  const stats = [["starshield", "150+", "Certifications", "cyan"], ["server", "12+", "Platforms", "cyan"], ["globe", "20+", "Domains", "purple"], ["clock", "5000+", "Hours Invested", "purple"], ["code", "10+", "Active Projects", "purple"], ["target", "100%", "Pass Rate", "cyan"]];
  return <HudPanel className="p-5">
    <h2 className="mb-5 flex items-center gap-2 font-mono text-xl uppercase tracking-[.13em] text-cyan-200"><Icon type="target" className="h-6 w-6" />Quick Stats</h2>
    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
      {stats.map(([icon, num, label, color]) => <div key={label} className="grid min-h-[112px] place-items-center rounded-lg border border-cyan-300/15 bg-black/35 p-3 text-center">
        <Icon type={icon} className={`h-9 w-9 ${color === "purple" ? "text-purple-400" : "text-cyan-300"}`} />
        <div className={`font-mono text-3xl font-black ${color === "purple" ? "text-purple-400" : "text-cyan-300"}`}>{num}</div>
        <div className="text-xs text-slate-300">{label}</div>
      </div>)}
    </div>
  </HudPanel>;
}

function Projects() {
  const cards = [["terminal", "Threat Hunting Lab", "End-to-end threat hunting lab using ELK, Sigma, YARA & Zeek.", "Threat Hunting", "cyan"], ["lock", "Linux Hardening Suite", "Automated Linux hardening scripts for secure baseline configurations.", "Linux", "cyan"], ["fingerprint", "DFIR Case Studies", "Digital forensics case walkthroughs and analysis with real-world scenarios.", "DFIR", "purple"], ["brain", "AI Security Research", "Exploring AI security, prompt injection, and adversarial AI threats.", "AI Security", "orange"]];
  return <HudPanel className="p-5">
    <div className="mb-4 flex items-center justify-between"><h2 className="flex items-center gap-2 font-mono text-xl uppercase tracking-[.13em] text-cyan-200"><Icon type="folder" className="h-6 w-6" />Featured Projects</h2><button className="rounded-md border border-cyan-300/35 px-3 py-2 font-mono text-[11px] uppercase text-cyan-200">View All Projects</button></div>
    <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-4">
      {cards.map(([icon, title, text, tag, color]) => <div key={title} className={`rounded-lg border bg-black/35 p-5 ${color === "orange" ? "border-orange-400/45" : color === "purple" ? "border-purple-400/45" : "border-cyan-300/35"}`}>
        <Icon type={icon} className={`mb-3 h-12 w-12 ${color === "orange" ? "text-orange-400" : color === "purple" ? "text-purple-400" : "text-cyan-300"}`} />
        <h3 className={`font-mono text-lg ${color === "orange" ? "text-orange-300" : color === "purple" ? "text-purple-300" : "text-cyan-200"}`}>{title}</h3>
        <p className="mt-2 text-sm leading-5 text-slate-300">{text}</p>
        <div className={`mt-4 inline-block rounded bg-black/50 px-2 py-1 font-mono text-[11px] uppercase ${color === "orange" ? "text-orange-300" : color === "purple" ? "text-purple-300" : "text-cyan-300"}`}>{tag}</div>
      </div>)}
    </div>
  </HudPanel>;
}

export default function XE1PHIXPortfolio() {
  return <main className="min-h-screen overflow-x-hidden bg-black p-4 text-slate-100 antialiased">
    <MatrixRain />
    <div className="relative z-10 mx-auto flex max-w-[1780px] gap-6">
      <Sidebar />
      <section className="min-w-0 flex-1 space-y-5">
        <div className="overflow-x-auto pb-1"><TopNav /></div>
        <HudPanel className="relative min-h-[430px] p-8 xl:p-10">
          <WorldMap />
          <div className="relative z-10 max-w-[720px] pr-0 xl:pr-[360px] 2xl:pr-0">
            <p className="font-mono text-sm uppercase tracking-[.22em] text-cyan-300">Welcome to the system</p>
            <h1 className="mt-4 font-mono text-5xl font-black uppercase tracking-[.09em] text-cyan-200 drop-shadow-[0_0_24px_rgba(0,245,255,.95)] md:text-6xl 2xl:text-7xl">XE1PHIX<span className="animate-pulse">_</span></h1>
            <h2 className="mt-5 font-mono text-2xl uppercase tracking-[.14em] text-slate-100">Cybersecurity Engineer</h2>
            <p className="mt-3 max-w-3xl font-mono text-base uppercase tracking-[.14em] text-slate-200 2xl:text-lg">Linux Specialist <span className="text-cyan-300">•</span> Threat Hunter <span className="text-cyan-300">•</span> <span className="text-purple-300">AI</span> Enthusiast</p>
            <p className="mt-6 max-w-xl text-lg leading-8 text-slate-300">I secure systems. Hunt threats. Automate the future.<br/>Linux is my foundation. Security is my mission.</p>
            <div className="mt-8 flex flex-wrap gap-4">
              <button className="flex items-center gap-3 rounded-lg border border-cyan-300/70 bg-cyan-300/12 px-6 py-4 font-mono text-sm uppercase text-cyan-100 shadow-[0_0_20px_rgba(0,245,255,.35)]"><Icon type="starshield" className="h-5 w-5" />View Certifications</button>
              <button className="flex items-center gap-3 rounded-lg border border-purple-400/65 bg-purple-400/10 px-6 py-4 font-mono text-sm uppercase text-purple-200 shadow-[0_0_20px_rgba(168,85,247,.25)]"><Icon type="folder" className="h-5 w-5" />View Projects</button>
              <button className="flex items-center gap-3 rounded-lg border border-orange-400/65 bg-orange-400/10 px-6 py-4 font-mono text-sm uppercase text-orange-300 shadow-[0_0_20px_rgba(249,115,22,.25)]"><Icon type="mail" className="h-5 w-5" />Contact Me</button>
            </div>
          </div>
          <div className="relative z-20 mt-8 w-full max-w-[340px] rounded-lg xl:absolute xl:bottom-8 xl:right-8 xl:mt-0 border border-cyan-300/65 bg-black/60 p-5 font-mono text-sm leading-6 text-green-300 shadow-[0_0_26px_rgba(0,245,255,.45)]">
            <p>› whoami</p><p>xe1phix@root:~$ specialist in</p><p>linux, cybersecurity, dfir, threat</p><p>hunting, automation & ai security</p><p className="mt-3">› access_granted <span className="animate-pulse">█</span></p>
          </div>
        </HudPanel>
        <div className="grid gap-5 2xl:grid-cols-[1fr_.86fr_1.1fr]"><CertPanel /><SkillsPanel /><StatsPanel /></div>
        <Projects />
      </section>
    </div>
  </main>;
}