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

export const metadata: Metadata = {
  title: "MBO FamilyGuard – Familienschutz fürs Heimnetzwerk | MBO-Tech-IT",
  description:
    "Jugendschutzfilter, Werbe- & Tracker-Blocker, Zeitpläne und Schutz vor Betrug für jedes Gerät im WLAN. Einrichtung durch Ihren IT-Profi — Einführungsangebot 149,99 €.",
  openGraph: {
    title: "MBO FamilyGuard – Familienschutz fürs Heimnetzwerk | MBO-Tech-IT",
    description:
      "Zentraler Schutzschild für jedes Gerät in Ihrem WLAN. Ohne App-Installation, ohne Abschalten durch die Kinder.",
    url: "https://mbo-tech-it.de/pakete/familyguard",
  },
  alternates: {
    canonical: "https://mbo-tech-it.de/pakete/familyguard",
  },
};

const risks = [
  "Gewalt- und Pornoseiten sind nur zwei Klicks entfernt – auch aus Versehen",
  "Werbung und In-App-Käufe zielen gezielt auf Kinder und Jugendliche",
  "Tracker sammeln heimlich Daten über das Surfverhalten Ihrer Kinder",
  "Phishing-Seiten und Betrugsmaschen erkennen Kinder nicht",
  "Endloses Scrollen bis tief in die Nacht – ohne Zeitlimit",
];

const features = [
  {
    title: "Jugendschutzfilter",
    text: "Blockiert nicht jugendfreie Inhalte automatisch.",
    icon: (
      <svg className="w-6 h-6" 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>
    ),
  },
  {
    title: "Werbe- & Tracker-Blocker",
    text: "Keine Werbung, keine heimliche Datensammlung.",
    icon: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
      </svg>
    ),
  },
  {
    title: "Zeitpläne & Regeln",
    text: "Feste Internetzeiten, z. B. Schluss um 21 Uhr.",
    icon: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  {
    title: "Schutz vor Betrug",
    text: "Phishing- und Schadseiten werden blockiert.",
    icon: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
      </svg>
    ),
  },
];

export default function FamilyGuardPage() {
  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="/pakete"
            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">
            NEU: FAMILIENSCHUTZ
          </span>
          <h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
            Wissen Sie, was Ihr Kind<br className="hidden sm:block" /> gerade im Internet sieht?
          </h1>
          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
            Vermutlich nicht. Und genau das ist das Problem.
          </p>
        </div>

        {/* Risiken */}
        <h2 className="text-2xl font-black text-slate-900 dark:text-white mb-6 text-center">
          Das Internet vergisst nichts – und filtert nichts
        </h2>
        <div className="grid sm:grid-cols-2 gap-4 mb-16">
          {risks.map((risk) => (
            <div
              key={risk}
              className="flex items-start gap-3 p-4 rounded-xl bg-white dark:bg-gray-900 border border-red-500/20"
            >
              <span className="w-2 h-2 rounded-full bg-red-400 flex-shrink-0 mt-1.5" />
              <span className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">{risk}</span>
            </div>
          ))}
        </div>

        {/* Die Lösung */}
        <div className="mb-16 p-6 rounded-2xl bg-orange-500/5 border border-orange-500/30 flex flex-col md:flex-row gap-6 items-start">
          <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
            <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>
          </div>
          <div>
            <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
              Die Lösung
            </span>
            <h3 className="text-slate-900 dark:text-white font-black text-2xl mt-1 mb-2">MBO FamilyGuard</h3>
            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
              Der Familienschutz fürs ganze Zuhause – eingerichtet von Ihrem IT-Profi.
              Ein zentraler Schutzschild für jedes Gerät in Ihrem WLAN: Handy, Tablet,
              Laptop, Smart-TV, Spielkonsole. Ohne App-Installation. Ohne Abschalten
              durch die Kinder.
            </p>
          </div>
        </div>

        {/* Features */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          {features.map((f) => (
            <div key={f.title} className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800">
              <div className="w-12 h-12 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center mb-4">
                {f.icon}
              </div>
              <h3 className="text-slate-800 dark:text-white font-bold text-base mb-2">{f.title}</h3>
              <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{f.text}</p>
            </div>
          ))}
        </div>

        {/* Hinweis: kein Virenschutz */}
        <div className="mb-8 p-5 rounded-2xl border border-slate-200 dark:border-gray-800 bg-white dark:bg-gray-900">
          <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
            <strong className="text-slate-900 dark:text-white">Hinweis:</strong> MBO FamilyGuard
            ist ein Familien- und Jugendschutzfilter fürs Heimnetzwerk – kein Virenschutz.
            Für den Schutz vor Viren und Schadsoftware empfehlen wir zusätzlich eine
            Antiviren-Lösung.
          </p>
        </div>

        {/* Preis */}
        <div className="mb-16 rounded-2xl overflow-hidden border border-blue-500/30 bg-[#111925]">
          <div className="p-8 flex flex-col sm:flex-row items-center justify-between gap-6">
            <div>
              <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
                Rundum-Sorglos-Paket
              </span>
              <h3 className="text-white font-black text-2xl mt-1 mb-2">Beratung + Einrichtung</h3>
              <p className="text-slate-400 text-sm max-w-md">
                Einführungsangebot – nur bis 15.09.! Danach gilt der reguläre
                Preis von 199,99 €.
              </p>
            </div>
            <div className="text-center sm:text-right flex-shrink-0">
              <p className="text-slate-500 text-sm line-through">statt 199,99 €</p>
              <p className="text-4xl font-black text-white">
                149,99 <span className="text-lg">€</span>
              </p>
              <p className="text-orange-400 text-xs font-bold tracking-wider uppercase">jetzt nur</p>
              <p className="text-slate-500 text-xs mt-1">nur bis 15.09.</p>
            </div>
          </div>
        </div>

        <FlyerDownloadForm />

        {/* Optionaler Report */}
        <div className="mb-16 p-5 rounded-2xl border border-dashed border-slate-300 dark:border-gray-700 bg-slate-50 dark:bg-gray-900/50">
          <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
            <strong className="text-slate-900 dark:text-white">Optional: MBO FamilyGuard Report</strong>{" "}
            — 4,99 €/Monat oder 49,99 €/Jahr. Jeden Monat automatisch eine verständliche
            Übersicht per E-Mail: blockierte Gefahren, geschützte Geräte. Inklusive
            automatischer Updates – Sie müssen nichts selbst konfigurieren.
          </p>
        </div>

        <FlyerReportPreview />

        {/* Bottom callout */}
        <div className="p-6 rounded-2xl border border-blue-500/20 bg-blue-500/5 text-center">
          <p className="text-slate-900 dark:text-white font-bold mb-1">
            Weniger als eine Spielkonsole kostet – aber unbezahlbar für die
            Sicherheit Ihrer Kinder.
          </p>
          <p className="text-slate-600 dark:text-slate-400 text-sm mb-4">
            Handeln Sie, bevor etwas passiert – nicht danach.
          </p>
          <Link
            href="/#contact"
            className="inline-block px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-xl text-sm transition-colors"
          >
            Jetzt unverbindlich beraten lassen
          </Link>
        </div>

        <p className="text-center text-slate-500 text-xs mt-8">
          Technische Basis: Raspberry-Pi-Hardware in Verbindung mit der AdGuard-Filtertechnologie.
          Bei manchen Internet-Routern kann es zu Einschränkungen der Funktion kommen – wir beraten Sie gerne.
        </p>
      </main>
    </div>
  );
}