import { useState } from "react";
import { FlaskConical, Github, Menu, X, Download } from "lucide-react";
import { PROJECT } from "@/lib/project-config";

const LINKS: Array<{ href: string; label: string }> = [
  { href: "#kpis", label: "Overview" },
  { href: "#workflow", label: "Workflow" },
  { href: "#reactor", label: "Reactor" },
  { href: "#catalyst", label: "Catalyst" },
  { href: "#experiments", label: "Experiments" },
  { href: "#kinetics", label: "Kinetics" },
  { href: "#butanone", label: "Butanone" },
  { href: "#model", label: "Model" },
  { href: "#methodology", label: "Methodology" },
  { href: "#qa", label: "QA" },
];

export function TopNav() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-40 border-b border-border/60 bg-background/70 backdrop-blur-xl">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3">
        <a href="#top" className="flex items-center gap-3">
          <span
            className="grid h-10 w-10 place-items-center rounded-xl shadow-md"
            style={{
              background:
                "linear-gradient(135deg, oklch(0.78 0.11 210), oklch(0.74 0.12 188), oklch(0.74 0.16 158))",
            }}
            aria-hidden
          >
            <FlaskConical className="h-5 w-5 text-[oklch(0.16_0.03_250)]" />
          </span>
          <span className="leading-tight">
            <span className="block text-sm font-semibold text-foreground">
              {PROJECT.name}
            </span>
            <span className="block text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
              VOC KINETICS CASE STUDY
            </span>
          </span>
        </a>
        <nav className="hidden items-center gap-5 xl:flex">
          {LINKS.map((l) => (
            <a
              key={l.href}
              href={l.href}
              className="text-xs text-muted-foreground transition-colors hover:text-foreground"
            >
              {l.label}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <a
            href={PROJECT.githubUrl}
            target="_blank"
            rel="noreferrer"
            className="hidden items-center gap-1.5 rounded-md border border-border bg-background/40 px-3 py-1.5 text-xs text-foreground transition-colors hover:border-[color:var(--primary)]/60 sm:inline-flex"
          >
            <Github className="h-3.5 w-3.5" /> GitHub
          </a>
          <button
            aria-label="Toggle navigation"
            className="grid h-9 w-9 place-items-center rounded-md border border-border bg-background/40 xl:hidden"
            onClick={() => setOpen((v) => !v)}
          >
            {open ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
          </button>
        </div>
      </div>
      {open && (
        <div className="border-t border-border/60 bg-background/95 xl:hidden">
          <div className="mx-auto grid max-w-7xl grid-cols-2 gap-2 px-6 py-4">
            {LINKS.map((l) => (
              <a
                key={l.href}
                href={l.href}
                onClick={() => setOpen(false)}
                className="rounded-md border border-border/60 bg-background/40 px-3 py-2 text-xs text-foreground"
              >
                {l.label}
              </a>
            ))}
            <a
              href={PROJECT.packageUrl}
              download
              className="col-span-2 inline-flex items-center justify-center gap-1.5 rounded-md border border-border bg-background/40 px-3 py-2 text-xs text-foreground"
            >
              <Download className="h-3.5 w-3.5" /> Download package
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

export function Footer() {
  return (
    <footer className="mx-auto max-w-7xl px-6 pb-16">
      <div className="section-divider" />
      <div className="mt-8 flex flex-col items-start justify-between gap-4 text-xs text-muted-foreground sm:flex-row">
        <div className="space-y-1">
          <div className="text-foreground">
            {PROJECT.name} — gas-phase VOC photocatalysis and kinetic modelling case study.
          </div>
          <div>
            Laboratory-scale data · transparent source normalisation · reproducible local assets.
          </div>
        </div>
        <div className="space-y-1 sm:text-right">
          <div>
            v{PROJECT.version} · {PROJECT.projectReference}
          </div>
          <a
            href={PROJECT.githubUrl}
            target="_blank"
            rel="noreferrer"
            className="text-foreground hover:text-[color:var(--primary)]"
          >
            GitHub repository
          </a>
          <div>© {new Date().getFullYear()}</div>
        </div>
      </div>
    </footer>
  );
}
