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

export const metadata: Metadata = {
  title: "Pakete & Preise | MBO-Tech-IT",
  description:
    "Unsere IT-Dienstleistungen auf einen Blick: MBO FamilyGuard Familienschutz, Nextcloud + Paperless-ngx Cloud-Lösungen und Zero-Trust-VPN für sicheren Fernzugriff. Individuelle Angebote aus Crailsheim.",
  openGraph: {
    title: "Pakete & Preise | MBO-Tech-IT",
    description:
      "FamilyGuard, Nextcloud, Paperless-ngx und Zero-Trust-VPN — IT-Lösungen aus Crailsheim.",
    url: "https://mbo-tech-it.de/pakete",
  },
  alternates: {
    canonical: "https://mbo-tech-it.de/pakete",
  },
};

const services = [
  {
    href: "/pakete/familyguard",
    icon: (
      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
      </svg>
    ),
    iconBg: "bg-orange-500/10 text-orange-400",
    label: "MBO FamilyGuard",
    description:
      "Familienschutz fürs ganze Zuhause. Jugendschutzfilter, Werbe-Blocker & Zeitpläne für jedes Gerät im WLAN — ohne App, ohne Umgehung.",
    tag: "NEU · Einführungspreis 149,99 €",
    isNew: true,
  },
  {
    href: "/pakete/nextcloud",
    icon: (
      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
      </svg>
    ),
    iconBg: "bg-blue-500/10 text-blue-400",
    label: "Nextcloud + Paperless-ngx",
    description:
      "Eigene Cloud & digitales Dokumentenarchiv auf Ihrem Server — DSGVO-konform, selbst gehostet auf Hetzner Cloud.",
    tag: "Einmalige Installation ab Anfrage",
  },
  {
    href: "/pakete/vpn",
    icon: (
      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
      </svg>
    ),
    iconBg: "bg-orange-500/10 text-orange-400",
    label: "Zero-Trust-VPN",
    description:
      "Sicherer Fernzugriff für alle Mitarbeiter. Managed Netbird mit WireGuard — Server in Deutschland, feste Monatspauschale.",
    tag: "NEU · ab 89 €/Monat",
    isNew: true,
  },
];

export default function PaketePage() {
  return (
    <div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
      {/* Header */}
      <header className="bg-white dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3 group">
            <Logo className="h-8 w-auto" />
            <div className="flex flex-col leading-tight">
              <span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
                MBO-<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">TECH-IT</span>
              </span>
              <span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
                Digital Denken. Lokal Handeln.
              </span>
            </div>
          </Link>
          <Link
            href="/"
            className="flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-orange-400 transition-colors text-sm font-medium"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Zurück
          </Link>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">

        {/* Hero */}
        <div className="text-center mb-16">
          <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
            Unsere Leistungen
          </span>
          <h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
            Pakete & Preise
          </h1>
          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
            Wählen Sie Ihre Lösung — wir installieren, betreiben und warten.
            Alles aus einer Hand, aus Crailsheim.
          </p>
        </div>

        {/* Service-Kacheln */}
        <div className="grid sm:grid-cols-2 gap-6 max-w-3xl mx-auto mb-16">
          {services.map((service) => (
            <Link
              key={service.href}
              href={service.href}
              className="group relative p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/50 hover:shadow-lg hover:shadow-orange-500/5 transition-all duration-300 flex flex-col"
            >
              {service.isNew && (
                <span className="absolute top-4 right-4 px-2 py-0.5 bg-orange-500 rounded-full text-white text-[10px] font-black tracking-wider">
                  NEU
                </span>
              )}
              <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-4 ${service.iconBg}`}>
                {service.icon}
              </div>
              <h2 className="text-lg font-black text-slate-900 dark:text-white mb-2">
                {service.label}
              </h2>
              <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed flex-1">
                {service.description}
              </p>
              <div className="mt-4 flex items-center justify-between">
                <span className="text-orange-400 text-xs font-bold">{service.tag}</span>
                <svg
                  className="w-4 h-4 text-slate-400 group-hover:text-orange-400 group-hover:translate-x-1 transition-all"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </Link>
          ))}
        </div>

        {/* CTA */}
        <div className="p-6 rounded-2xl border border-blue-500/20 bg-blue-500/5 text-center">
          <p className="text-slate-600 dark:text-slate-400 text-sm">
            <strong className="text-slate-900 dark:text-white">Nicht sicher, was passt?</strong>{" "}
            Kostenlose Erstberatung vor Ort — kein Risiko, kein Kleingedrucktes.
          </p>
          <Link
            href="/#contact"
            className="inline-block mt-4 px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-xl text-sm transition-colors"
          >
            Kostenloses Erstgespräch anfragen
          </Link>
        </div>
      </main>
    </div>
  );
}