import Link from "next/link";
import { CookieSettingsButton } from "@/components/consent/CookieSettingsButton";

const year = new Date().getFullYear();

export function Footer() {
  return (
    <footer className="relative mt-16 overflow-hidden border-t-2 border-ink-primary bg-ink-primary font-display text-surface-base">
      {/* Geister-Wortmarke im Hintergrund */}
      <span
        aria-hidden
        className="pointer-events-none absolute left-1/2 bottom-[-3vw] z-0 -translate-x-1/2 select-none font-display font-bold uppercase leading-none"
        style={{
          fontSize: "18vw",
          letterSpacing: "-0.06em",
          color: "transparent",
          WebkitTextStroke: "2px rgb(244 235 217 / 0.18)",
          whiteSpace: "nowrap",
        }}
      >
        Toolaro
      </span>

      <div className="relative z-10 mx-auto max-w-[1180px] px-4 py-16">
        <div className="grid gap-10 md:grid-cols-12">
          {/* Brand-Block */}
          <div className="md:col-span-4">
            <Link href="/" aria-label="Toolaro Startseite">
              <span className="font-display text-2xl font-bold uppercase tracking-tight text-surface-base">
                Toolaro
              </span>
            </Link>
            <p className="mt-5 max-w-sm text-sm font-medium leading-relaxed text-surface-base/80">
              Kostenlose Online-Tools für Alltag, Text, Sicherheit und Entwicklung.
              Direkt im Browser, ohne Tracker. Premium ergänzt Favoriten, Verlauf,
              Exporte und Werbefreiheit.
            </p>
            <p
              className="mt-6 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-brand-400"
              style={{ fontFamily: '"Courier New", monospace' }}
            >
              Made in Germany · Limitierte Auflage
            </p>
          </div>

          {/* Spalten */}
          <FooterColumn title="Tools" className="md:col-span-2">
            <FooterLink href="/tools">Alle Tools</FooterLink>
            <FooterLink href="/tools/text">Text-Tools</FooterLink>
            <FooterLink href="/tools/developer">Developer-Tools</FooterLink>
            <FooterLink href="/tools/security">Sicherheit</FooterLink>
            <FooterLink href="/tools/calculator">Rechner</FooterLink>
          </FooterColumn>

          <FooterColumn title="Beliebt" className="md:col-span-2">
            <FooterLink href="/tools/qr-code-generator">QR-Code Generator</FooterLink>
            <FooterLink href="/tools/password-generator">Passwort-Generator</FooterLink>
            <FooterLink href="/tools/json-formatter">JSON Formatter</FooterLink>
            <FooterLink href="/tools/word-counter">Wortzähler</FooterLink>
            <FooterLink href="/tools/bmi-calculator">BMI Rechner</FooterLink>
          </FooterColumn>

          <FooterColumn title="Toolaro" className="md:col-span-2">
            <FooterLink href="/about">Über</FooterLink>
            <FooterLink href="/pricing">Premium</FooterLink>
            <FooterLink href="/account">Account</FooterLink>
            <FooterLink href="/faq">FAQ</FooterLink>
            <FooterLink href="/contact">Kontakt</FooterLink>
          </FooterColumn>

          <FooterColumn title="Rechtliches" className="md:col-span-2">
            <FooterLink href="/privacy">Datenschutz</FooterLink>
            <FooterLink href="/terms">AGB</FooterLink>
            <FooterLink href="/imprint">Impressum</FooterLink>
            <li className="text-surface-base/80 transition-colors hover:text-brand-400">
              <CookieSettingsButton />
            </li>
          </FooterColumn>
        </div>

        <div className="mt-12 flex flex-col items-start justify-between gap-3 border-t border-surface-base/20 pt-6 text-xs font-medium text-surface-base/70 sm:flex-row sm:items-center">
          <span>© {year} Toolaro.org · Arthur Kotsch. Alle Rechte vorbehalten.</span>
          <span className="inline-flex items-center gap-2 uppercase tracking-[0.1em]">
            <span className="h-2 w-2 bg-brand-500" />
            Status: Alle Tools verfügbar
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterColumn({
  title,
  className,
  children,
}: {
  title: string;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <div className={className}>
      <h3
        className="text-[0.72rem] font-bold uppercase tracking-[0.16em] text-brand-400"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {title}
      </h3>
      <ul className="mt-4 space-y-2.5 text-sm font-medium">{children}</ul>
    </div>
  );
}

function FooterLink({
  href,
  children,
}: {
  href: string;
  children: React.ReactNode;
}) {
  return (
    <li>
      <Link
        href={href}
        className="text-surface-base/80 transition-colors hover:text-brand-400"
      >
        {children}
      </Link>
    </li>
  );
}