import Link from "next/link";
import ScrollReveal from "@/components/ScrollReveal";

const features = [
  "Jugendschutzfilter",
  "Werbe- & Tracker-Blocker",
  "Zeitpläne & Regeln",
  "Schutz vor Betrug",
];

export default function FamilyGuardPromo() {
  return (
    <section className="py-16 px-4 sm:px-6 lg:px-8 relative">
      <div className="max-w-7xl mx-auto">
        <ScrollReveal>
          <div className="relative overflow-hidden rounded-2xl border border-orange-500/20 bg-white dark:bg-gray-900 p-8 sm:p-10">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.06)_0%,transparent_60%)]" />
            <div className="relative flex flex-col lg:flex-row lg:items-center gap-8">
              <div className="flex-1">
                <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/30 text-orange-400 text-xs font-black tracking-[0.2em] uppercase mb-4">
                  <span className="w-1.5 h-1.5 bg-orange-400 rounded-full animate-pulse" />
                  Neu: MBO FamilyGuard
                </span>
                <h2 className="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white mb-3">
                  Wissen Sie, was Ihr Kind gerade im Internet sieht?
                </h2>
                <p className="text-slate-600 dark:text-slate-400 text-base leading-relaxed mb-5 max-w-2xl">
                  Der Familienschutz fürs ganze Zuhause — eingerichtet von Ihrem
                  IT-Profi. Ein zentraler Schutzschild für jedes Gerät in Ihrem WLAN.
                  Ohne App-Installation, ohne Abschalten durch die Kinder.
                </p>
                <div className="flex flex-wrap gap-2 mb-6">
                  {features.map((f) => (
                    <span
                      key={f}
                      className="px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-mono"
                    >
                      {f}
                    </span>
                  ))}
                </div>
                <div className="flex flex-col sm:flex-row gap-3">
                  <Link href="/pakete/familyguard" className="btn-primary inline-flex justify-center px-6 py-3 text-sm">
                    FamilyGuard entdecken
                  </Link>
                  <a href="#contact" className="btn-secondary inline-flex justify-center px-6 py-3 text-sm">
                    Jetzt beraten lassen
                  </a>
                </div>
              </div>
              <div className="flex-shrink-0 lg:w-64 p-5 rounded-xl bg-orange-500/5 border border-orange-500/20 text-center">
                <p className="text-slate-500 dark:text-slate-400 text-xs line-through mb-1">statt 199,99 €</p>
                <p className="text-3xl font-black text-orange-400 mb-1">149,99 €</p>
                <p className="text-slate-600 dark:text-slate-400 text-xs">
                  Beratung + Einrichtung — Einführungsangebot, nur bis 15.09.
                </p>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
}