import Link from "next/link";
import type { Metadata } from "next";
import {
  ArrowRight,
  ArrowUpRight,
  Code2,
  Eye,
  Globe2,
  Lock,
  ShieldCheck,
  Sparkles,
  Zap,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { ToolCard } from "@/components/tools/ToolCard";
import {
  allCategories,
  categoryLabels,
  getFeaturedTools,
  toolRegistry,
  type ToolCategory,
} from "@/tools/registry";
import { AuroraBackground } from "@/components/marketing/AuroraBackground";
import { HeroStage } from "@/components/marketing/HeroStage";
import { ToolMarquee } from "@/components/marketing/ToolMarquee";
import { LogoMark } from "@/components/brand/Logo";

const BASE = (process.env.NEXT_PUBLIC_SITE_URL ?? "https://toolaro.org").replace(/\/$/, "");

const catStripBg: Record<ToolCategory, string> = {
  generator: "bg-cat-generator",
  calculator: "bg-cat-calculator",
  converter: "bg-cat-converter",
  text: "bg-cat-text",
  security: "bg-cat-security",
  image: "bg-cat-image",
  developer: "bg-cat-developer",
};

const catRingHover: Record<ToolCategory, string> = {
  generator: "hover:ring-cat-generator/30",
  calculator: "hover:ring-cat-calculator/30",
  converter: "hover:ring-cat-converter/30",
  text: "hover:ring-cat-text/30",
  security: "hover:ring-cat-security/30",
  image: "hover:ring-cat-image/30",
  developer: "hover:ring-cat-developer/30",
};

export const metadata: Metadata = {
  title: "Toolaro – Über 500 Webtools für jeden Tag",
  description:
    "Kostenlose Webtools für QR-Codes, Passwörter, Texte, Rechner und Developer-Aufgaben. Direkt im Browser, ohne Login, ohne Tracker. Über 500 Werkzeuge in einer Box.",
  alternates: { canonical: "/" },
  openGraph: {
    title: "Toolaro – Über 500 Webtools für jeden Tag",
    description:
      "QR-Code Generator, Passwort-Generator, Prozentrechner, Wortzähler, Base64 Encoder, Timestamp Converter, JSON Formatter und 500+ weitere Webtools.",
    url: BASE,
    type: "website",
  },
};

export default function HomePage() {
  const featured = getFeaturedTools();
  const newest = toolRegistry.slice(-6).reverse();
  const totalTools = toolRegistry.length;
  const totalCategories = allCategories.filter((c) =>
    toolRegistry.some((t) => t.category === c)
  ).length;

  const websiteSchema = {
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: "Toolaro",
    url: BASE,
    potentialAction: {
      "@type": "SearchAction",
      target: `${BASE}/tools?search={search_term_string}`,
      "query-input": "required name=search_term_string",
    },
  };
  const organizationSchema = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: "Toolaro",
    url: BASE,
    logo: `${BASE}/brand/toolaro-logo.png`,
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }}
      />

      {/* ==================================================
          HERO – Editorial Headline links · HeroStage rechts
          ================================================== */}
      <section className="relative isolate overflow-hidden border-b border-ink-primary/[0.06]">
        <AuroraBackground variant="hero" />

        <div className="mx-auto max-w-7xl px-4 pb-28 pt-14 sm:pt-20 lg:pb-36 lg:pt-24">
          <div className="grid items-center gap-x-12 gap-y-16 lg:grid-cols-[1.15fr_1fr]">
            {/* Left: Headline + CTAs */}
            <div className="relative">
              <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-ink-primary/[0.08] bg-surface-raised/85 px-3 py-1 text-caption font-medium uppercase tracking-[0.08em] text-ink-tertiary shadow-rest backdrop-blur">
                <span className="relative flex h-1.5 w-1.5">
                  <span className="absolute inset-0 animate-ping rounded-full bg-brand-500 opacity-60" />
                  <span className="relative h-1.5 w-1.5 rounded-full bg-brand-500" />
                </span>
                Version 2.6 · {totalTools}+ Werkzeuge online
              </div>

              <h1 className="font-display text-[44px] leading-[1.04] tracking-tight text-ink-primary sm:text-[60px] lg:text-[80px]">
                Eine{" "}
                <span className="relative inline-block">
                  <span className="text-gradient-brand">Werkzeugkiste</span>
                  <svg
                    aria-hidden
                    viewBox="0 0 320 14"
                    className="absolute -bottom-1 left-0 w-full text-brand-400/60"
                    preserveAspectRatio="none"
                  >
                    <path
                      d="M2 10 Q 80 2 160 8 T 318 6"
                      stroke="currentColor"
                      strokeWidth="3"
                      strokeLinecap="round"
                      fill="none"
                    />
                  </svg>
                </span>
                <br />
                für das ganze
                <br />
                <span className="text-ink-primary">Internet.</span>
              </h1>

              <p className="mt-8 max-w-[44ch] text-body-lg text-ink-secondary">
                Über{" "}
                <span className="font-semibold text-ink-primary tabular">
                  {totalTools}
                </span>{" "}
                Tools für QR-Codes, Passwörter, Rechner, Konverter, Developer-Tasks
                und vieles mehr. Direkt im Browser, ohne Login, ohne Tracker.
              </p>

              <div className="mt-10 flex flex-col items-start gap-3 sm:flex-row sm:items-center">
                <Button size="lg" variant="gradient" asChild>
                  <Link href="/tools">
                    Tools entdecken
                    <ArrowRight />
                  </Link>
                </Button>
                <Link
                  href="/tools/qr-code-generator"
                  className="group inline-flex items-center gap-1.5 text-sm font-medium text-ink-secondary transition-colors hover:text-ink-primary"
                >
                  <span className="border-b border-ink-primary/30 pb-0.5 transition-colors group-hover:border-ink-primary">
                    Live-Demo: QR-Code erstellen
                  </span>
                  <ArrowUpRight className="h-3.5 w-3.5 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
                </Link>
              </div>

              {/* Quick-stats Strip */}
              <dl className="mt-12 grid max-w-md grid-cols-3 gap-6 border-t border-ink-primary/[0.08] pt-6">
                <Stat number={totalTools} label="Tools" />
                <Stat number={totalCategories} label="Kategorien" />
                <Stat number="0" label="Tracker" />
              </dl>
            </div>

            {/* Right: HeroStage Visual */}
            <div className="relative flex justify-center lg:justify-end">
              <HeroStage />
            </div>
          </div>

          {/* Marquee Tool-Ribbon als Social-Proof */}
          <div className="mt-20 lg:mt-28">
            <p className="mb-5 text-center text-caption font-medium uppercase tracking-[0.12em] text-ink-tertiary">
              Eine Auswahl der beliebtesten Werkzeuge
            </p>
            <ToolMarquee />
          </div>
        </div>
      </section>

      {/* ==================================================
          FEATURED – "Tools, die man ständig braucht"
          ================================================== */}
      <section className="relative bg-surface-base px-4 py-section-y">
        <div className="mx-auto max-w-7xl">
          <SectionHeader
            eyebrow="Beliebt"
            title="Werkzeuge, die man ständig braucht"
            link={{ href: "/tools", label: "Alle Tools" }}
          />

          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {featured.map((tool) => (
              <ToolCard key={tool.slug} tool={tool} />
            ))}
          </div>
        </div>
      </section>

      {/* ==================================================
          SHOWCASE – "504 Tools" als Brand-Statement
          ================================================== */}
      <section className="relative isolate overflow-hidden border-y border-ink-primary/[0.06] px-4 py-section-y-lg">
        <AuroraBackground variant="showcase" />

        <div className="mx-auto grid max-w-7xl items-center gap-x-12 gap-y-16 lg:grid-cols-[1fr_1.2fr]">
          {/* Big Number Display */}
          <div className="relative">
            <div className="inline-flex items-center gap-2 rounded-full border border-ink-primary/[0.08] bg-surface-raised/85 px-3 py-1 text-caption font-medium uppercase tracking-[0.08em] text-ink-tertiary shadow-rest backdrop-blur">
              <LogoMark size={16} />
              Die Bibliothek
            </div>
            <h2 className="mt-6 font-display text-[88px] font-bold leading-[0.95] tracking-tight sm:text-[120px] lg:text-[160px]">
              <span className="text-gradient-brand-animated tabular">{totalTools}</span>
              <span className="text-gradient-brand">.</span>
            </h2>
            <p className="mt-2 text-heading-md text-ink-secondary">
              Werkzeuge. Eine Box.
              <br />
              <span className="text-gradient-brand">Kein Konto nötig.</span>
            </p>
            <p className="mt-6 max-w-md text-body text-ink-secondary">
              Was als kleine Sammlung praktischer Helfer begann, ist heute eine der
              größten deutschsprachigen Tool-Bibliotheken. Jedes Tool ist sofort
              nutzbar – die meisten direkt im Browser, ohne dass eine einzige Zeile
              Daten unsere Server erreicht.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <Button size="lg" variant="gradient" asChild>
                <Link href="/tools">
                  Alle Tools durchsuchen
                  <ArrowRight />
                </Link>
              </Button>
              <Button size="lg" variant="outline" asChild>
                <Link href="/about">Über das Projekt</Link>
              </Button>
            </div>
          </div>

          {/* Right: Highlight Cards Stack */}
          <div className="relative grid grid-cols-2 gap-4 sm:gap-5">
            <HighlightCard
              icon={Lock}
              tone="security"
              title="Lokal im Browser"
              text="Die meisten Tools verarbeiten Eingaben rein client-seitig. Toolaro sieht sie nie."
            />
            <HighlightCard
              icon={Zap}
              tone="generator"
              title="Sofort startklar"
              text="Klick auf ein Tool, gib deine Daten ein, bekomme das Ergebnis. Keine Wartezeit."
              className="translate-y-6 sm:translate-y-10"
            />
            <HighlightCard
              icon={Globe2}
              tone="text"
              title="DSGVO-konform"
              text="Made in Germany. Klare Datenschutz-Hinweise auf jeder Tool-Seite."
            />
            <HighlightCard
              icon={Sparkles}
              tone="image"
              title="Premium optional"
              text="Favoriten, Verlauf, Werbefreiheit und Exporte – nur wenn du willst."
              className="translate-y-6 sm:translate-y-10"
            />
          </div>
        </div>
      </section>

      {/* ==================================================
          CATEGORIES – Editorial Index
          ================================================== */}
      <section className="bg-surface-base px-4 py-section-y">
        <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
          <div className="lg:sticky lg:top-28">
            <p className="text-caption font-medium uppercase tracking-[0.08em] text-ink-tertiary">
              Index
            </p>
            <h2 className="mt-3 font-display text-display-lg text-ink-primary">
              Sortiert wie eine
              <br />
              <span className="text-gradient-brand">echte Werkzeugkiste</span>.
            </h2>
            <p className="mt-5 max-w-md text-body text-ink-secondary">
              Sieben Kategorien, klare Wege. Toolaro versucht nicht, alles zu sein –
              nur das, was Menschen wirklich täglich brauchen.
            </p>
          </div>

          <div className="grid gap-3 sm:grid-cols-2">
            {allCategories.map((cat) => {
              const count = toolRegistry.filter((tool) => tool.category === cat).length;
              if (count === 0) return null;
              return (
                <Link
                  key={cat}
                  href={`/tools?category=${cat}`}
                  className={`group relative flex items-center justify-between overflow-hidden rounded-md border border-ink-primary/[0.08] bg-surface-raised px-5 py-4 ring-1 ring-transparent transition hover:shadow-raised ${catRingHover[cat]}`}
                >
                  <span
                    aria-hidden
                    className={`absolute left-0 top-0 h-full w-[3px] ${catStripBg[cat]} opacity-60 transition-opacity group-hover:opacity-100`}
                  />
                  <div>
                    <div className="font-medium text-ink-primary">
                      {categoryLabels[cat]}
                    </div>
                    <div className="mt-0.5 text-sm text-ink-tertiary tabular">
                      {count} {count === 1 ? "Tool" : "Tools"}
                    </div>
                  </div>
                  <ArrowUpRight className="h-4 w-4 text-ink-tertiary transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-ink-primary" />
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* ==================================================
          NEWEST – Frisch hinzugefügt
          ================================================== */}
      <section className="border-y border-ink-primary/[0.06] bg-surface-sunken/60 px-4 py-section-y">
        <div className="mx-auto max-w-7xl">
          <SectionHeader
            eyebrow="Neu im Inventar"
            title="Frisch hinzugefügt"
            icon={Code2}
          />

          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {newest.map((tool) => (
              <ToolCard key={tool.slug} tool={tool} />
            ))}
          </div>
        </div>
      </section>

      {/* ==================================================
          SEO Long-Tail – ruhig, editorial
          ================================================== */}
      <section className="bg-surface-base px-4 py-section-y">
        <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
          <div>
            <p className="text-caption font-medium uppercase tracking-[0.08em] text-ink-tertiary">
              Häufig gesucht
            </p>
            <h2 className="mt-3 font-display text-display-lg text-ink-primary">
              Schnelle Antworten auf
              <br />
              <span className="text-gradient-brand">kleine Fragen</span>.
            </h2>
          </div>
          <div className="space-y-5 text-body text-ink-secondary">
            <p>
              Toolaro ist für Nutzer gedacht, die schnell ein kostenloses Online-Tool
              brauchen: QR-Code erstellen, Passwort generieren, Prozente berechnen,
              Wörter zählen, JSON formatieren, Base64 kodieren, einen Unix-Timestamp
              umwandeln.
            </p>
            <p>
              Viele Werkzeuge laufen direkt im Browser und benötigen keinen Account.
              Damit eignen sie sich für Alltag, Schule, Büro, Content-Erstellung,
              Entwicklung, Tests und kleine technische Aufgaben.
            </p>
            <div className="flex flex-wrap gap-1.5 pt-4">
              {[
                "QR-Code Generator",
                "Passwort Generator",
                "Prozentrechner",
                "Wortzähler",
                "Zeichen zählen",
                "Base64 Encoder",
                "JSON Formatter",
                "Timestamp Converter",
                "BMI Rechner",
                "UUID Generator",
                "Einheiten-Umrechner",
                "Stromkosten Rechner",
                "Leasing Rechner",
                "Bruchrechner",
              ].map((term) => (
                <Link
                  key={term}
                  href="/tools"
                  className="rounded-full border border-ink-primary/[0.08] bg-surface-raised px-3 py-1 text-sm text-ink-secondary transition hover:border-brand-200 hover:bg-brand-50 hover:text-brand-700"
                >
                  {term}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============================================
   Sub-Components
   ============================================ */

function Stat({ number, label }: { number: number | string; label: string }) {
  return (
    <div>
      <div className="font-display text-[40px] leading-none tracking-tight text-ink-primary tabular">
        {number}
      </div>
      <div className="mt-1.5 text-caption font-medium uppercase tracking-[0.08em] text-ink-tertiary">
        {label}
      </div>
    </div>
  );
}

const highlightToneBg: Record<string, string> = {
  brand: "bg-brand-50 text-brand-700 ring-brand-200/50",
  security: "bg-cat-security/[0.06] text-cat-security ring-cat-security/20",
  generator: "bg-cat-generator/[0.06] text-cat-generator ring-cat-generator/20",
  text: "bg-cat-text/[0.06] text-cat-text ring-cat-text/20",
  image: "bg-cat-image/[0.06] text-cat-image ring-cat-image/20",
  calculator: "bg-cat-calculator/[0.06] text-cat-calculator ring-cat-calculator/20",
};

function HighlightCard({
  icon: Icon,
  title,
  text,
  tone = "brand",
  className,
}: {
  icon: typeof Lock;
  title: string;
  text: string;
  tone?: keyof typeof highlightToneBg;
  className?: string;
}) {
  return (
    <div
      className={`relative rounded-lg border border-ink-primary/[0.08] bg-surface-raised/90 p-5 shadow-raised backdrop-blur transition-transform duration-300 ease-out-expo hover:-translate-y-1 sm:p-6 ${className ?? ""}`}
    >
      <div
        className={`inline-flex h-10 w-10 items-center justify-center rounded-md ring-1 ring-inset ${highlightToneBg[tone]}`}
      >
        <Icon className="h-5 w-5" strokeWidth={1.75} />
      </div>
      <h3 className="mt-4 text-heading-sm font-semibold text-ink-primary">{title}</h3>
      <p className="mt-1.5 text-sm leading-relaxed text-ink-secondary">{text}</p>
    </div>
  );
}

function SectionHeader({
  eyebrow,
  title,
  link,
  icon: Icon,
}: {
  eyebrow: string;
  title: string;
  link?: { href: string; label: string };
  icon?: typeof Code2;
}) {
  return (
    <div className="flex items-end justify-between gap-6 border-b border-ink-primary/[0.08] pb-5">
      <div>
        <p className="text-caption font-medium uppercase tracking-[0.08em] text-ink-tertiary">
          {eyebrow}
        </p>
        <h2 className="mt-2 font-display text-display-lg text-ink-primary">{title}</h2>
      </div>
      {link && (
        <Link
          href={link.href}
          className="group hidden shrink-0 items-center gap-1.5 text-sm font-medium text-ink-secondary transition-colors hover:text-brand-700 sm:inline-flex"
        >
          {link.label}
          <ArrowUpRight className="h-3.5 w-3.5 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
        </Link>
      )}
      {!link && Icon && (
        <Icon className="hidden h-8 w-8 text-ink-tertiary sm:block" strokeWidth={1.5} />
      )}
    </div>
  );
}