"use client";
import { Hammer, History, Target, Code2 } from "lucide-react";
import PageLayout from "@/components/PageLayout";

export default function ForgePage() {
  return (
    <PageLayout backLink="/" maxWidth="5xl">
      <header className="mb-20">
        <div className="flex items-center gap-3 mb-4">
          <Hammer className="text-orange-500 animate-pulse" size={24} />
          <h1 className="text-4xl font-bold tracking-tighter text-white uppercase">
            TheForge
          </h1>
        </div>
        <p className="text-neutral-500 max-w-2xl leading-relaxed text-sm font-mono">
          <br />
          The Forge is where I document my current engineering focus. This space
          reflects active builds, experimental prototypes and gives a taste of
          my next releases.
        </p>
      </header>

      {/* Main Project Card */}
      <section className="bg-neutral-900/40 border border-neutral-800 rounded-2xl p-8 mb-16">
        <div className="flex flex-wrap items-center justify-between gap-4 mb-8">
          <div>
            <h2 className="text-2xl font-bold text-white mb-2 italic">
              Project: PixelPals
            </h2>
            <div className="flex gap-4">
              <span className="text-[10px] text-orange-500 font-bold uppercase tracking-[0.2em]">
                Build Phase: Alpha 0.1
              </span>
              <span className="text-[10px] text-neutral-600 font-bold uppercase tracking-[0.2em]">
                Engine: Godot / GDScript
              </span>
            </div>
          </div>
          <div className="px-4 py-2 bg-orange-500/10 border border-orange-500/20 rounded-full">
            <span className="text-[10px] text-orange-500 font-bold uppercase tracking-widest">
              Active Focus
            </span>
          </div>
        </div>

        <p className="text-neutral-400 text-sm leading-relaxed mb-8">
          Exploring procedural generation and state-machine-driven AI behaviors.
          The goal is to bridge my experience in systems architecture with
          real-time game loops and interactive storytelling.
        </p>

        {/* Milestones / Changelog */}
        <div className="space-y-6">
          <h3 className="flex items-center gap-2 text-xs font-bold text-neutral-500 uppercase tracking-widest border-b border-neutral-800 pb-2">
            <History size={14} /> Development_Log
          </h3>
          <ul className="space-y-4">
            <li className="flex gap-4">
              <span className="text-xs text-neutral-600 font-mono mt-1 shrink-0">
                2026-02-02
              </span>
              <p className="text-xs text-neutral-400">
                Implemented dynamic weather patterns using custom shaders.
              </p>
            </li>
            <li className="flex gap-4">
              <span className="text-xs text-neutral-600 font-mono mt-1 shrink-0">
                2026-01-28
              </span>
              <p className="text-xs text-neutral-400">
                Optimized asset loading pipeline for faster initial scene entry.
              </p>
            </li>
          </ul>
        </div>
      </section>
    </PageLayout>
  );
}