import type { Metadata } from "next";
import Link from "next/link";
import { ArrowUpRight, Box, Check, Code2, Puzzle, Terminal } from "lucide-react";
import Nav from "@/components/nav";
import Footer from "@/components/footer";

function GithubIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 0 6 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
      <path d="M9 18c-4.51 2-5-2-7-2" />
    </svg>
  );
}

export const metadata: Metadata = {
  title: "Decision Kit – Developer Suite",
  description: "Open-Source-Tools von Entscheidomat: Repository, VS Code Extension, Chrome Extension, npm-Paket, Python SDK und GitHub Action.",
  openGraph: {
    title: "Decision Kit – Developer Suite | Entscheidomat",
    description: "Zufalls-Entscheidungstools für VS Code, Chrome, Node.js, Python und GitHub Actions.",
    url: "https://entscheidomat.com/developer",
  },
};

type Asset = {
  title: string;
  eyebrow: string;
  description: string;
  icon: typeof Puzzle;
  action?: string;
  href?: string;
  snippet?: string;
  status: string;
};

const assets: Asset[] = [
  {
    title: "GitHub Repository",
    eyebrow: "Open Source · MIT",
    description: "Der vollständige Decision-Kit-Quellcode mit Releases, Issues und Contribution Guide – die zentrale Anlaufstelle für Entwickler.",
    icon: Code2,
    action: "Repository öffnen",
    href: "https://github.com/knuthtimo-lab/decision-kit",
    snippet: "git clone https://github.com/knuthtimo-lab/decision-kit.git",
    status: "knuthtimo-lab/decision-kit",
  },
  {
    title: "Decision Kit für VS Code",
    eyebrow: "Extension · v1.0.0",
    description: "Ziehe einen Gewinner aus markiertem Text, würfle mit Notation wie 2d6+3 und öffne das Glücksrad direkt in deiner IDE.",
    icon: Puzzle,
    action: "Im VS Code Store öffnen",
    href: "https://marketplace.visualstudio.com/items?itemName=TimoKnuth.decisionkit-vscode",
    status: "Visual Studio Marketplace",
  },
  {
    title: "Decision Kit für Chrome",
    eyebrow: "Browser-Erweiterung · Manifest V3",
    description: "Random Picker, Glücksrad, Würfel, Münzwurf und praktische Kontextmenü-Kürzel für schnelle Entscheidungen im Browser.",
    icon: Puzzle,
    action: "Im Chrome Web Store ansehen",
    href: "https://chromewebstore.google.com/detail/decision-kit-random-picke/ehnieppgcoaapbgnilajkcjhakjedlgo",
    status: "Chrome Web Store · Live",
  },
  {
    title: "TypeScript Library",
    eyebrow: "npm · v1.0.0",
    description: "Zufallsalgorithmen, Würfel-Parser, Glücksrad-Logik und React Hooks als wiederverwendbare Bausteine.",
    icon: Box,
    action: "npm-Paket ansehen",
    href: "https://www.npmjs.com/package/decision-kit",
    snippet: "npm install decision-kit",
    status: "Node.js & React",
  },
  {
    title: "Python SDK & CLI",
    eyebrow: "PyPI · v1.0.0",
    description: "Decision-Kit für Python-Skripte, Automatisierungen und die Kommandozeile.",
    icon: Terminal,
    action: "PyPI-Projekt ansehen",
    href: "https://pypi.org/project/decision-kit/",
    snippet: "pip install decision-kit",
    status: "Python Package Index",
  },
  {
    title: "GitHub Action",
    eyebrow: "GitHub Marketplace",
    description: "Nutze Auslosungen, Teamaufteilungen und Zufallsentscheidungen direkt in deinen CI/CD-Workflows.",
    icon: Code2,
    action: "Action ansehen",
    href: "https://github.com/marketplace/actions/decision-kit-action",
    snippet: "uses: knuthtimo-lab/decision-kit@v1.0.0",
    status: "Für GitHub Actions",
  },
];

export default function DeveloperPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    name: "Decision Kit",
    operatingSystem: "All",
    applicationCategory: "DeveloperApplication",
    author: { "@type": "Organization", name: "Entscheidomat" },
    codeRepository: "https://github.com/knuthtimo-lab/decision-kit",
  };

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
      <Nav />
      <main className="flex-1 bg-paper pb-20 pt-28 sm:pt-32">
        <div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
          <header className="max-w-3xl">
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Entscheidomat für Entwickler</p>
            <h1 className="mt-4 text-balance font-display text-5xl font-semibold leading-[0.9] tracking-[-0.045em] text-ink sm:text-6xl">Decision Kit, dort wo du arbeitest.</h1>
            <p className="mt-6 max-w-2xl text-base leading-7 text-ink-soft sm:text-lg">Eine offene Sammlung von Tools für faire Zufallsentscheidungen – im Editor, im Browser, im Terminal und im Workflow.</p>
          </header>

          <section className="relative mt-12 overflow-hidden rounded-[2rem] bg-[#0b241b] px-6 py-7 text-white shadow-[0_22px_60px_rgb(13_122_87/0.22)] sm:px-10 sm:py-10">
            <div className="pointer-events-none absolute -right-24 -top-36 h-80 w-80 rounded-full bg-[#38b98c]/25 blur-3xl" />
            <div className="relative grid gap-8 lg:grid-cols-[1.25fr_0.75fr] lg:items-end">
              <div>
                <div className="inline-flex items-center gap-2 text-sm font-semibold text-emerald-200"><GithubIcon className="h-4 w-4" />Open Source · MIT-Lizenz</div>
                <h2 className="mt-5 max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">Der gesamte Code lebt auf GitHub.</h2>
                <p className="mt-4 max-w-xl text-sm leading-6 text-emerald-50/75 sm:text-base">Quellcode, Issues, Releases und Contribution Guide findest du im offiziellen Decision-Kit-Repository.</p>
                <a href="https://github.com/knuthtimo-lab/decision-kit" target="_blank" rel="noopener noreferrer" className="mt-7 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-semibold text-[#0b241b] transition duration-200 hover:-translate-y-0.5 hover:bg-emerald-50 active:translate-y-0">
                  GitHub-Repository öffnen <ArrowUpRight className="h-4 w-4" />
                </a>
              </div>
              <div className="rounded-2xl border border-white/15 bg-black/20 p-5 font-mono text-xs leading-6 text-emerald-50 shadow-inner">
                <p className="text-emerald-200/70"># Starte lokal</p>
                <p className="mt-2 break-all">git clone https://github.com/knuthtimo-lab/decision-kit.git</p>
                <div className="my-4 h-px bg-white/10" />
                <p className="text-emerald-200/70"># Oder als Paket</p>
                <p className="mt-2">npm install decision-kit</p>
              </div>
            </div>
          </section>

          <section className="mt-16" aria-labelledby="integrations-heading">
            <div className="flex flex-col justify-between gap-4 border-b border-line pb-5 sm:flex-row sm:items-end">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Integrationen</p>
                <h2 id="integrations-heading" className="mt-2 text-2xl font-semibold tracking-tight text-ink sm:text-3xl">Installieren, einbinden, loslegen.</h2>
              </div>
              <p className="max-w-sm text-sm leading-6 text-ink-soft">Jede Integration ist unabhängig nutzbar und verweist direkt auf ihren offiziellen Kanal.</p>
            </div>

            <div className="mt-6 grid gap-4 md:grid-cols-2">
              {assets.map((asset) => {
                const Icon = asset.icon;
                return (
                  <article key={asset.title} className="group flex min-h-64 flex-col rounded-3xl border border-line bg-surface p-6 transition duration-200 hover:-translate-y-1 hover:border-[#0d7a57]/40 hover:shadow-lift">
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#e6f7f0] text-[#0d7a57]"><Icon className="h-5 w-5" /></div>
                      <p className="pt-1 text-right text-[11px] font-semibold uppercase tracking-[0.12em] text-[#0d7a57]">{asset.eyebrow}</p>
                    </div>
                    <h3 className="mt-6 text-xl font-semibold tracking-tight text-ink">{asset.title}</h3>
                    <p className="mt-2 max-w-md text-sm leading-6 text-ink-soft">{asset.description}</p>
                    {asset.snippet && <code className="mt-5 block overflow-x-auto rounded-xl bg-[#111412] px-3.5 py-3 font-mono text-xs text-emerald-100">{asset.snippet}</code>}
                    <div className="mt-auto flex items-center justify-between gap-4 pt-6">
                      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-ink-soft"><Check className="h-3.5 w-3.5 text-[#0d7a57]" />{asset.status}</span>
                      {asset.href && asset.action ? (
                        <a href={asset.href} target="_blank" rel="noopener noreferrer" className="inline-flex shrink-0 items-center gap-1.5 text-sm font-semibold text-[#0d7a57] transition hover:text-[#095c41] hover:underline">{asset.action} <ArrowUpRight className="h-4 w-4" /></a>
                      ) : <span className="text-xs font-semibold text-[#0d7a57]">Bald verfügbar</span>}
                    </div>
                  </article>
                );
              })}
            </div>
          </section>

          <div className="mt-14 border-t border-line pt-8 text-sm text-ink-soft">Zurück zu den <Link href="/" className="font-semibold text-[#0d7a57] hover:underline">Entscheidungstools</Link>.</div>
        </div>
      </main>
      <Footer />
    </>
  );
}