import type { Metadata } from "next";
import { GlassCard } from "@/components/GlassCard";
import { ProgressPill } from "@/components/ProgressPill";
import { StatusRoadmap } from "@/components/StatusRoadmap";
import { roadmap } from "@/lib/status";

export const metadata: Metadata = {
  title: "Ideen bag",
  description: "Visionen bag Ninja Nexus — fra POC til fremtidig platform.",
  alternates: { canonical: "https://nexus.ninjakernen.info/ideen-bag" },
};

const sections = [
  { key: "nu" as const, title: "Nu", variant: "brand" as const },
  { key: "naeste" as const, title: "Næste", variant: "blue" as const },
  { key: "senere" as const, title: "Senere", variant: "muted" as const },
  { key: "vision" as const, title: "Vision", variant: "blue" as const },
];

export default function IdeenBagPage() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
      <h1 className="text-3xl font-bold text-nexus-navy">Ideen bag Nexus</h1>
      <p className="mt-3 max-w-3xl text-lg text-nexus-muted">
        Virksomheder skal kunne styre PC&apos;er uden at drukne i kompleksitet — og medarbejdere
        skal se en ren, fokuseret desktop med præcis de apps og værktøjer de har brug for.
      </p>

      <div className="mt-8 space-y-4 text-nexus-muted">
        <p>
          Admin får overblik over devices, politikker, apps og updates. Nexus skal gøre det
          nemmere at sætte en arbejds-PC op — fra første login til software deployment.
        </p>
        <p>
          På sigt: device onboarding, policies, software deployment, remote admin actions,
          logs/diagnostics, support mode og valgfri kiosk/company mode — alt sammen trin for trin.
        </p>
      </div>

      <div className="mt-8">
        <StatusRoadmap />
      </div>

      <GlassCard className="mt-10 border-l-4 border-l-[#A855F7]">
        <ProgressPill label="Ærlig status" variant="brand" />
        <p className="mt-3 text-nexus-muted">
          Nexus bygges trin for trin. Lige nu er det en POC med fungerende installer, update-kanal,
          identity foundation og platform UI — ikke en færdig enterprise-løsning.
        </p>
      </GlassCard>

      <section className="mt-12">
        <h2 className="text-2xl font-bold text-nexus-navy">Roadmap</h2>
        <div className="mt-6 grid gap-6 md:grid-cols-2">
          {sections.map(({ key, title, variant }) => (
            <GlassCard key={key}>
              <ProgressPill label={title} variant={variant} />
              <ul className="mt-4 list-inside list-disc space-y-2 text-sm text-nexus-muted">
                {roadmap[key].map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </GlassCard>
          ))}
        </div>
      </section>
    </div>
  );
}
