import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { ToolCard } from "@/components/tools/ToolCard";
import { categoryDescriptions, categoryLabels, getToolsByCategory, type ToolCategory } from "@/tools/registry";

const faqByCategory: Record<ToolCategory, Array<[string, string]>> = {
  text: [
    ["Werden Texte gespeichert?", "Die Basis-Texttools laufen soweit umgesetzt direkt im Browser. Premium-Synchronisierung speichert nur Favoriten, Verlauf und Einstellungen."],
    ["Kann ich mehrere Texte gleichzeitig bearbeiten?", "Batch-Funktionen sind als Premium-Komfort für passende Texttools vorgesehen und werden in den Tools gekennzeichnet."],
    ["Sind die Tools mobil nutzbar?", "Ja, Eingaben, Kopieren und Ergebnisbereiche sind für Smartphone und Desktop ausgelegt."],
  ],
  developer: [
    ["Sind Developer-Tools sicher für Secrets?", "Verwende keine echten Secrets in Online-Tools. Viele Funktionen laufen lokal, trotzdem sollten Tokens und Passwörter nicht unnötig eingefügt werden."],
    ["Gibt es Exportfunktionen?", "Basis-Export wie Kopieren bleibt kostenlos. Erweiterte Exporte und Batch-Verarbeitung sind Premium-Funktionen."],
    ["Welche Tools sind besonders beliebt?", "JSON Formatter, Base64, URL Encoder, Regex Tester, Timestamp Converter, UUID Generator und SQL Formatter gehören zu den wichtigsten Developer-Tools."],
  ],
  calculator: [
    ["Ersetzen Rechner Beratung?", "Nein. Ergebnisse sind Rechenhilfen und ersetzen keine Finanz-, Steuer-, Rechts- oder medizinische Beratung."],
    ["Welche Rechner gibt es?", "Toolaro bündelt Prozentrechner, BMI, Energie, Finanzen, Arbeit, Alltag, Reise und viele weitere Rechner."],
    ["Kann ich Ergebnisse exportieren?", "Premium-Nutzer können passende Rechnergebnisse als Text, CSV oder später PDF exportieren."],
  ],
  security: [
    ["Wie arbeitet der Passwort-Generator?", "Er nutzt die Web Crypto API des Browsers. Sicherheit hängt zusätzlich von Länge, Zeichenauswahl, Speicherung und Nutzung ab."],
    ["Speichert Toolaro Passwörter?", "Nein, generierte Passwörter werden nicht serverseitig gespeichert."],
    ["Was bringt Premium hier?", "Premium ergänzt Komfort wie gespeicherte Tool-Einstellungen und werbefreie Nutzung, nicht aber eine Sicherheitsgarantie."],
  ],
  converter: [
    ["Welche Konverter gibt es?", "Einheiten, Base64, URLs, Farben, Zeitwerte, CSV/JSON und weitere praktische Umwandlungen."],
    ["Sind Umrechnungen exakt?", "Viele technische Umrechnungen sind exakt, andere sind Näherungen. Hinweise stehen jeweils auf der Toolseite."],
    ["Kann ich Batch-Umwandlungen nutzen?", "Batch-Umwandlungen sind bei passenden Tools Premium-Funktionen."],
  ],
  generator: [],
  image: [],
};

export function CategoryLanding({ category }: { category: ToolCategory }) {
  const tools = getToolsByCategory(category);
  const faqs = faqByCategory[category] ?? [];
  const featured = tools.filter((tool) => tool.featured).slice(0, 3);

  return (
    <div className="mx-auto max-w-7xl px-4 py-10 sm:py-12">
      {/* Hero */}
      <section className="grid gap-8 lg:grid-cols-[1fr_320px] lg:items-start">
        <div>
          <p
            className="mb-3 text-[0.7rem] font-bold uppercase tracking-[0.2em] text-brand-500"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            Toolaro · {categoryLabels[category]}
          </p>
          <h1 className="font-display text-4xl font-bold uppercase leading-tight tracking-tight text-ink-primary sm:text-5xl">
            {categoryLabels[category]}
          </h1>
          <p className="mt-5 max-w-3xl text-base leading-8 text-ink-secondary">
            {categoryDescriptions[category]}
          </p>
        </div>

        <aside className="border-2 border-ink-primary bg-surface-raised p-5 shadow-[6px_6px_0_rgb(var(--brand-500))]">
          <p
            className="mb-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-ink-tertiary"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            Platten in dieser Kategorie
          </p>
          <p className="font-display text-4xl font-bold leading-none text-ink-primary">{tools.length}</p>
          <p className="mt-3 text-sm leading-6 text-ink-secondary">
            Ohne Account startklar. Premium ergänzt Sync, höhere Limits und Exporte.
          </p>
        </aside>
      </section>

      {/* Featured */}
      {!!featured.length && (
        <section className="mt-10">
          <p
            className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            Empfohlen
          </p>
          <h2 className="mb-5 font-display text-2xl font-bold uppercase tracking-tight text-ink-primary">
            Empfohlen in dieser Kategorie
          </h2>
          <div className="grid gap-4 md:grid-cols-3">
            {featured.map((tool) => <ToolCard key={tool.slug} tool={tool} compact />)}
          </div>
        </section>
      )}

      {/* All tools */}
      <section className="mt-10">
        <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
          <h2 className="font-display text-2xl font-bold uppercase tracking-tight text-ink-primary">
            Alle {categoryLabels[category]}-Tools
          </h2>
          <Link
            href="/tools"
            className="inline-flex items-center gap-1 text-[0.75rem] font-bold uppercase tracking-[0.12em] text-brand-500 underline underline-offset-4 hover:text-brand-600"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            Alle Tools
            <ArrowRight className="h-3.5 w-3.5" />
          </Link>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {tools.map((tool) => <ToolCard key={tool.slug} tool={tool} />)}
        </div>
      </section>

      {/* About category */}
      <section className="mt-12 border-2 border-ink-primary bg-surface-sunken p-6">
        <p
          className="mb-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-ink-tertiary"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Kategorie · Info
        </p>
        <h2 className="mb-3 font-display text-xl font-bold uppercase tracking-tight text-ink-primary">
          Für wen ist diese Kategorie gedacht?
        </h2>
        <p className="leading-7 text-ink-secondary">
          Diese Seite sammelt passende Tools thematisch statt nur über einen Filter. So findest du
          verwandte Werkzeuge schneller, bekommst bessere interne Links und kannst die wichtigsten
          Aufgaben ohne Anmeldung erledigen.
        </p>
        <Link
          href="/pricing"
          className="mt-4 inline-block text-[0.75rem] font-bold uppercase tracking-[0.12em] text-brand-500 underline underline-offset-4 hover:text-brand-600"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Premium-Funktionen ansehen
        </Link>
      </section>

      {/* FAQs */}
      {!!faqs.length && (
        <section className="mt-12">
          <p
            className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            FAQ
          </p>
          <h2 className="mb-5 font-display text-2xl font-bold uppercase tracking-tight text-ink-primary">
            Häufige Fragen
          </h2>
          <div className="grid gap-4 md:grid-cols-3">
            {faqs.map(([question, answer]) => (
              <article
                key={question}
                className="border-2 border-ink-primary bg-surface-raised p-5 shadow-[4px_4px_0_rgb(var(--brand-500))]"
              >
                <h3 className="mb-2 font-display font-bold text-ink-primary">{question}</h3>
                <p className="text-sm leading-6 text-ink-secondary">{answer}</p>
              </article>
            ))}
          </div>
        </section>
      )}
    </div>
  );
}