import { FolderKanban } from "lucide-react";

import { ProjectCreator } from "@/components/project-creator";
import { getProjectsRoot } from "@/lib/projects";

export default function Home() {
  return (
    <main className="relative min-h-screen overflow-hidden px-5 py-6 sm:px-8 lg:px-12">
      <div className="pointer-events-none absolute -right-36 -top-40 h-[30rem] w-[30rem] rounded-full bg-orange-200/40 blur-3xl" />
      <div className="pointer-events-none absolute -bottom-48 -left-36 h-[26rem] w-[26rem] rounded-full bg-stone-200/60 blur-3xl" />

      <div className="relative mx-auto flex min-h-[calc(100vh-3rem)] max-w-7xl flex-col">
        <header className="flex items-center justify-between border-b border-stone-300/70 pb-5">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-stone-950 text-orange-200 shadow-sm">
              <FolderKanban size={18} strokeWidth={2.2} />
            </div>
            <span className="font-mono text-sm font-semibold tracking-[0.18em] text-stone-950">
              FORGE
            </span>
          </div>
          <span className="font-mono text-[11px] uppercase tracking-[0.16em] text-stone-500">
            Local workspace utility
          </span>
        </header>

        <div className="grid flex-1 items-center gap-14 py-14 lg:grid-cols-[1.05fr_0.95fr] lg:gap-24">
          <section>
            <p className="mb-6 font-mono text-xs font-medium uppercase tracking-[0.24em] text-orange-700">
              Project / 001
            </p>
            <h1 className="max-w-xl text-balance text-5xl font-semibold leading-[0.98] tracking-[-0.055em] text-stone-950 sm:text-7xl">
              Start with a clean slate.
            </h1>
            <p className="mt-7 max-w-lg text-lg leading-8 text-stone-600">
              Create a local project workspace and initialize its Git history in one deliberate step.
            </p>

            <div className="mt-12 flex items-center gap-3 text-sm text-stone-500">
              <span className="h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.12)]" />
              Ready to create
            </div>
          </section>

          <ProjectCreator projectsRoot={getProjectsRoot()} />
        </div>

        <footer className="flex flex-col gap-2 border-t border-stone-300/70 pt-5 font-mono text-[11px] uppercase tracking-[0.14em] text-stone-500 sm:flex-row sm:items-center sm:justify-between">
          <span>Git initialization enabled</span>
          <span>v0.1 / Local only</span>
        </footer>
      </div>
    </main>
  );
}