function Icon({ name, fill }: { name: string; fill?: boolean }) {
  return (
    <span
      className="material-symbols-outlined"
      style={
        fill ? { fontVariationSettings: "'FILL' 1" } : undefined
      }
    >
      {name}
    </span>
  );
}

export default function Home() {
  return (
    <>
      {/* Top App Bar */}
      <header className="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-background border-b-2 border-primary/10">
        <div className="text-2xl font-black text-primary tracking-tighter font-headline">
          COREWORLDS.IO
        </div>
        <nav className="hidden md:flex gap-8 items-center">
          <a
            className="font-headline tracking-tighter uppercase font-bold text-sm text-primary border-b-2 border-primary pb-1"
            href="#"
          >
            PROJECTS
          </a>
          <a
            className="font-headline tracking-tighter uppercase font-bold text-sm text-slate-500 hover:text-primary/70 transition-all duration-150 ease-linear"
            href="#"
          >
            TERMINAL
          </a>
          <a
            className="font-headline tracking-tighter uppercase font-bold text-sm text-slate-500 hover:text-primary/70 transition-all duration-150 ease-linear"
            href="#"
          >
            ARCHIVE
          </a>
          <a
            className="font-headline tracking-tighter uppercase font-bold text-sm text-slate-500 hover:text-primary/70 transition-all duration-150 ease-linear"
            href="#"
          >
            SYSTEM
          </a>
        </nav>
        <div className="flex items-center gap-4">
          <button className="p-2 text-primary hover:bg-surface-bright transition-all duration-150 ease-linear active:translate-x-0.5 active:translate-y-0.5">
            <Icon name="sensors" />
          </button>
          <button className="p-2 text-primary hover:bg-surface-bright transition-all duration-150 ease-linear active:translate-x-0.5 active:translate-y-0.5">
            <Icon name="settings_input_component" />
          </button>
          <button className="bg-primary text-on-primary px-4 py-1 text-xs font-black tracking-widest font-headline hover:bg-primary-dim transition-colors">
            TERMINAL_INIT
          </button>
        </div>
      </header>

      {/* Side Nav Bar */}
      <aside className="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container hidden lg:flex flex-col border-r border-primary/5">
        <div className="p-6 border-b border-primary/10 bg-background">
          <span className="font-headline text-[10px] tracking-[0.3em] text-slate-500 block mb-1">
            01 // LAB_MODULES
          </span>
          <h2 className="font-headline text-xs font-black tracking-widest text-primary">
            DIRECTORY
          </h2>
        </div>
        <nav className="flex-grow py-4 overflow-y-auto">
          <div className="group flex items-center bg-primary text-on-primary font-bold p-3 font-headline text-xs tracking-widest">
            <Icon name="psychology" fill />
            <span className="ml-3">NEURAL_NETS</span>
          </div>
          {[
            { icon: "rocket_launch", label: "ORBITAL_MECHANICS" },
            { icon: "ac_unit", label: "CRYO_STORAGE" },
            { icon: "memory", label: "QUANTUM_LOGS" },
            { icon: "fingerprint", label: "BIOMETRICS" },
          ].map((item) => (
            <a
              key={item.label}
              className="group flex items-center text-slate-400 p-3 hover:bg-surface-bright hover:text-primary transition-colors duration-100 font-headline text-xs tracking-widest hover:border-l-4 border-primary"
              href="#"
            >
              <Icon name={item.icon} />
              <span className="ml-3">{item.label}</span>
            </a>
          ))}
        </nav>
        <div className="p-4 bg-background">
          <button className="w-full py-4 border-2 border-primary text-primary font-headline font-black text-xs tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all">
            INITIALIZE_BUILD
          </button>
        </div>
      </aside>

      {/* Main Canvas */}
      <main className="lg:ml-64 mt-16 p-6 lg:p-12 min-h-screen">
        {/* Hero Section */}
        <section className="grid grid-cols-12 gap-6 mb-12">
          <div className="col-span-12 xl:col-span-8 relative bg-surface-container p-8 lg:p-12 monolith-border flex flex-col justify-end min-h-[500px] overflow-hidden">
            <div className="absolute top-0 right-0 p-4 font-headline text-[10px] text-primary/30 tracking-widest">
              SYS_STATUS: OPTIMAL
              <br />
              UPLINK: ACTIVE_088
            </div>
            <div className="absolute inset-0 opacity-20 mix-blend-screen pointer-events-none">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                alt="Technical abstract digital geometric lines and data points"
                className="w-full h-full object-cover"
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCR_KCcE02_UJsE6Pyhimm1rRIXp-qCInzqAFOL4MMvw4vorg-PWYZmxaJduHvjqvEA21gY0MbiadLCkb84slM0QKrhhYr99dx0PmG4MimuVe3ZqF5uEDAA4mgWO7vIFIFEt9vLgttTgDcrJBj4YCtPIXgJykmBj7yVxswa7C9fOHzq7e8CNa7ZhyQI_6nXFu_yPWbeuBnF4d8yKE8V6xYpSoQI9-AUcVvwrOjLXsgXZHU63hq5uTAo3JRkgE03cty2LuLhGqgIffw"
              />
            </div>
            <div className="relative z-10">
              <div className="flex items-center gap-2 mb-4">
                <span className="px-2 py-0.5 bg-primary text-on-primary font-headline text-[10px] font-black tracking-widest">
                  ESTABLISHED 2024
                </span>
                <span className="text-primary font-headline text-[10px] tracking-widest">
                  {"// SECURE_NODE_7"}
                </span>
              </div>
              <h1 className="font-headline text-5xl lg:text-7xl font-black tracking-tighter text-on-surface leading-[0.9] mb-6 uppercase italic">
                The Tactical <br />
                <span className="text-primary">Monolith</span>
              </h1>
              <p className="max-w-xl text-on-surface-variant font-body text-lg leading-relaxed mb-8">
                Interface with the Coreworlds terminal. A high-clearance orbital
                research module designed for precision system management and
                orbital asset deployment.
              </p>
              <div className="flex flex-wrap gap-4">
                <button className="px-8 py-4 bg-primary text-on-primary font-headline font-black tracking-widest hover:translate-x-1 hover:translate-y-1 transition-transform">
                  EXECUTE_PROTOCOL
                </button>
                <button className="px-8 py-4 border border-outline-variant text-on-surface font-headline font-black tracking-widest hover:bg-secondary hover:text-on-secondary transition-all">
                  SYSTEM_SPECS
                </button>
              </div>
            </div>
          </div>

          {/* Bento Status Cards */}
          <div className="col-span-12 xl:col-span-4 grid grid-rows-2 gap-6">
            <div className="bg-surface-container-high p-6 monolith-border flex flex-col justify-between">
              <div>
                <div className="flex justify-between items-start mb-4">
                  <h3 className="font-headline text-xs font-black tracking-widest text-primary">
                    CORE_TEMP
                  </h3>
                  <span
                    className="material-symbols-outlined text-primary"
                    style={{ fontVariationSettings: "'FILL' 1" }}
                  >
                    thermostat
                  </span>
                </div>
                <div className="text-4xl font-headline font-black text-on-surface tracking-tighter">
                  32.4
                  <span className="text-primary-container text-xl italic">
                    °C
                  </span>
                </div>
              </div>
              <div className="w-full bg-surface-container-lowest h-1.5 mt-4">
                <div className="bg-primary h-full w-[65%]" />
              </div>
              <div className="mt-2 text-[10px] font-headline text-on-surface-variant tracking-widest flex justify-between">
                <span>STABLE_STATE</span>
                <span>0XFF241</span>
              </div>
            </div>

            <div className="bg-surface-container-high p-6 monolith-border relative overflow-hidden">
              <div className="absolute -right-4 -bottom-4 opacity-10">
                <span className="material-symbols-outlined text-9xl">
                  memory
                </span>
              </div>
              <h3 className="font-headline text-xs font-black tracking-widest text-secondary mb-4">
                ACTIVE_PROCESSES
              </h3>
              <ul className="space-y-2 relative z-10">
                {[
                  { name: "NEURAL_SYNC_V2", status: "RUNNING", color: "text-primary" },
                  { name: "CRYPTO_MESH_04", status: "RUNNING", color: "text-primary" },
                  { name: "RADAR_SWEEP", status: "STANDBY", color: "text-secondary" },
                  { name: "ORBITAL_ALIGN", status: "FAILURE", color: "text-error" },
                ].map((proc, i, arr) => (
                  <li
                    key={proc.name}
                    className={`flex justify-between font-headline text-[10px] tracking-widest ${i < arr.length - 1 ? "border-b border-outline-variant/20 pb-1" : ""}`}
                  >
                    <span className="text-on-surface">{proc.name}</span>
                    <span className={proc.color}>{proc.status}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

        {/* Project Showcase Section */}
        <section className="mb-24">
          <div className="flex flex-col md:flex-row justify-between items-end mb-8 gap-4">
            <div>
              <span className="font-headline text-xs text-secondary font-black tracking-[0.4em] uppercase">
                Phase_02
              </span>
              <h2 className="font-headline text-4xl font-black tracking-tighter text-on-surface">
                LAB_MODULES
              </h2>
            </div>
            <div className="text-[10px] font-headline text-on-surface-variant tracking-widest text-right">
              TOTAL_BUILD_COUNT: 12
              <br />
              REVISION: STABLE_V.4.2
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-1">
            {/* Module Card 1 — Primary */}
            <div className="bg-surface-container p-6 group hover:bg-surface-bright transition-colors cursor-pointer border border-outline-variant/10">
              <div className="flex justify-between items-start mb-8">
                <div className="w-12 h-12 bg-primary flex items-center justify-center">
                  <Icon name="hexagon" />
                </div>
                <span className="text-[10px] font-headline text-primary opacity-50 font-bold">MOD_01</span>
              </div>
              <h3 className="font-headline text-xl font-black text-on-surface mb-2 tracking-tight group-hover:text-primary transition-colors">VANGUARD_CORE</h3>
              <p className="text-sm text-on-surface-variant mb-6 font-body leading-relaxed">
                High-density logic processing unit for sub-orbital navigation arrays and tactical mapping.
              </p>
              <div className="flex items-center gap-4 pt-4 border-t border-outline-variant/20">
                <div className="flex flex-col">
                  <span className="text-[9px] font-headline text-on-surface-variant">THROUGHPUT</span>
                  <span className="text-xs font-headline font-black text-on-surface">1.2 TB/S</span>
                </div>
                <div className="flex flex-col">
                  <span className="text-[9px] font-headline text-on-surface-variant">LATENCY</span>
                  <span className="text-xs font-headline font-black text-primary">0.04 MS</span>
                </div>
              </div>
            </div>

            {/* Module Card 2 — Secondary */}
            <div className="bg-surface-container p-6 group hover:bg-surface-bright transition-colors cursor-pointer border border-outline-variant/10">
              <div className="flex justify-between items-start mb-8">
                <div className="w-12 h-12 bg-secondary flex items-center justify-center">
                  <Icon name="waves" />
                </div>
                <span className="text-[10px] font-headline text-secondary opacity-50 font-bold">MOD_02</span>
              </div>
              <h3 className="font-headline text-xl font-black text-on-surface mb-2 tracking-tight group-hover:text-secondary transition-colors">NEON_PULSE</h3>
              <p className="text-sm text-on-surface-variant mb-6 font-body leading-relaxed">
                Signal amplification module utilizing mercury-cooled superconductors for long-range comms.
              </p>
              <div className="flex items-center gap-4 pt-4 border-t border-outline-variant/20">
                <div className="flex flex-col">
                  <span className="text-[9px] font-headline text-on-surface-variant">FREQ_RANGE</span>
                  <span className="text-xs font-headline font-black text-on-surface">900 GHZ</span>
                </div>
                <div className="flex flex-col">
                  <span className="text-[9px] font-headline text-on-surface-variant">STATUS</span>
                  <span className="text-xs font-headline font-black text-secondary">ACTIVE</span>
                </div>
              </div>
            </div>

            {/* Module Card 3 — Tertiary */}
            <div className="bg-surface-container p-6 group hover:bg-surface-bright transition-colors cursor-pointer border border-outline-variant/10">
              <div className="flex justify-between items-start mb-8">
                <div className="w-12 h-12 bg-tertiary flex items-center justify-center">
                  <span className="material-symbols-outlined text-on-tertiary text-2xl">shield</span>
                </div>
                <span className="text-[10px] font-headline text-tertiary opacity-50 font-bold">MOD_03</span>
              </div>
              <h3 className="font-headline text-xl font-black text-on-surface mb-2 tracking-tight group-hover:text-tertiary transition-colors">AEGIS_LOGIC</h3>
              <p className="text-sm text-on-surface-variant mb-6 font-body leading-relaxed">
                Cryptographic defense layer for multi-tenant cloud architectures and quantum threat mitigation.
              </p>
              <div className="flex items-center gap-4 pt-4 border-t border-outline-variant/20">
                <div className="flex flex-col">
                  <span className="text-[9px] font-headline text-on-surface-variant">ENCRYPTION</span>
                  <span className="text-xs font-headline font-black text-on-surface">AES_512Q</span>
                </div>
                <div className="flex flex-col">
                  <span className="text-[9px] font-headline text-on-surface-variant">UPTIME</span>
                  <span className="text-xs font-headline font-black text-tertiary">99.99%</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Technical Data Section */}
        <section className="grid grid-cols-12 gap-6 mb-12">
          <div className="col-span-12 lg:col-span-4 bg-surface-container-low p-8 monolith-border">
            <h4 className="font-headline text-xs font-black tracking-widest text-primary mb-6">
              SYSTEM_INTEGRITY
            </h4>
            <div className="space-y-6">
              {[
                { label: "MEM_LOAD", value: "88%", width: "88%", color: "bg-primary" },
                { label: "CPU_STRESS", value: "42%", width: "42%", color: "bg-secondary" },
                { label: "STORAGE_CAP", value: "12PB", width: "60%", color: "bg-on-surface" },
              ].map((bar) => (
                <div key={bar.label}>
                  <div className="flex justify-between text-[10px] font-headline text-on-surface mb-2 tracking-widest">
                    <span>{bar.label}</span>
                    <span>{bar.value}</span>
                  </div>
                  <div className="w-full h-1 bg-surface-container-highest">
                    <div
                      className={`h-full ${bar.color}`}
                      style={{ width: bar.width }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="col-span-12 lg:col-span-8 bg-surface-container-highest monolith-border p-1 relative overflow-hidden">
            <div className="bg-surface p-6 h-full flex flex-col justify-between">
              <div className="flex justify-between items-center mb-4">
                <div className="flex gap-2">
                  <div className="w-2 h-2 bg-error" />
                  <div className="w-2 h-2 bg-primary" />
                  <div className="w-2 h-2 bg-secondary" />
                </div>
                <span className="font-headline text-[10px] text-on-surface-variant tracking-[0.2em]">
                  LIVE_FEED // TERMINAL_LOG
                </span>
              </div>
              <div className="font-headline text-[11px] text-primary/80 space-y-1 overflow-hidden h-40">
                <p>&gt; INITIALIZING_CORE_BOOT...</p>
                <p>&gt; [OK] LOADING_KERNEL_MODULES</p>
                <p>&gt; [OK] MOUNTING_FS_ORBITAL</p>
                <p>&gt; [WARN] LATENCY_SPIKE_DETECTED_SECTOR_04</p>
                <p>&gt; RE-ROUTING_TRAFFIC_VIA_ARCHIVE_NODE</p>
                <p>&gt; [OK] HANDSHAKE_ESTABLISHED_TERMINAL_B</p>
                <p>&gt; ACCESS_GRANTED: USER_LEVEL_05</p>
                <p className="animate-pulse">&gt; _</p>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="w-full py-8 px-12 flex flex-col md:flex-row justify-between items-center gap-4 bg-surface-container-lowest border-t-4 border-surface-container">
        <div className="text-primary font-bold font-headline text-[10px] uppercase tracking-[0.2em]">
          &copy; 2024 COREWORLDS_TERMINAL. ALL RIGHTS RESERVED.
          [STABLE_BUILD_V4.2]
        </div>
        <div className="flex gap-8">
          {["DOCS", "API_REF", "SENSORS", "UPLINK"].map((link) => (
            <a
              key={link}
              className="font-headline text-[10px] uppercase tracking-[0.2em] text-slate-600 hover:text-secondary transition-colors duration-150 hover:skew-x-2"
              href="#"
            >
              {link}
            </a>
          ))}
        </div>
      </footer>
    </>
  );
}