import type { Metadata } from "next";
import Link from "next/link";
import { ContactForm } from "@/components/ContactForm";
import { GlassCard } from "@/components/GlassCard";

export const metadata: Metadata = {
  title: "Kontakt",
  description: "Kontakt NinjaKernen om Ninja Nexus — feedback, support og samarbejde.",
  alternates: { canonical: "https://nexus.ninjakernen.info/kontakt" },
};

const cards = [
  {
    title: "POC feedback",
    desc: "Del oplevelser fra test af build 91 i C:\\NinjaNexusPOC.",
  },
  {
    title: "Bug report",
    desc: "Beskriv build, trin og fejl — vedhæft gerne log-stier fra support-siden.",
  },
  {
    title: "Demo / samarbejde",
    desc: "Forespørgsler om demo, partnerskab eller platform-retning.",
  },
];

export default function KontaktPage() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
      <h1 className="text-3xl font-bold text-nexus-navy">Kontakt</h1>
      <p className="mt-3 text-nexus-muted">
        NinjaKernen / Ninja Nexus — vi modtager gerne POC-feedback og bug reports.
      </p>

      <div className="mt-8 grid gap-4 sm:grid-cols-3">
        {cards.map((c) => (
          <GlassCard key={c.title}>
            <h2 className="font-semibold text-nexus-navy">{c.title}</h2>
            <p className="mt-2 text-sm text-nexus-muted">{c.desc}</p>
          </GlassCard>
        ))}
      </div>

      <GlassCard className="mt-8">
        <ContactForm />
      </GlassCard>

      <div className="mt-8 flex flex-wrap gap-4 text-sm text-nexus-muted">
        <Link href="/downloads" className="hover:text-nexus-navy hover:underline">
          Downloads
        </Link>
        <Link href="/support" className="hover:text-nexus-navy hover:underline">
          Support
        </Link>
        <Link href="/ideen-bag" className="hover:text-nexus-navy hover:underline">
          Status / roadmap
        </Link>
      </div>
    </div>
  );
}
