import Navbar from '@/components/layout/Navbar'
import Footer from '@/components/layout/Footer'
import ChatFAB from '@/components/layout/ChatFAB'
import PageHeader from '@/components/ui/PageHeader'
import GlassCard from '@/components/ui/GlassCard'
import FadeInView from '@/components/ui/FadeInView'
import { Database, Layers, Calculator, AlertTriangle, Globe, Cookie } from 'lucide-react'

export default function SavingsMethodikPage() {
  return (
    <>
      <Navbar />
      <main>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <PageHeader
            tag="METHODIK"
            title="Wie Cookies"
            titleHighlight="Marketing-Budgets entlarven"
            subtitle="4-Stufen-Analyse: vom rohen Cookie-Footprint zur fundierten Saving-Schaetzung. Jede Stufe nachvollziehbar, jede Zahl mit Quelle, jede Annahme transparent."
          />
        </div>

        {/* 4 Stufen */}
        <section className="py-12 sm:py-16">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
            <FadeInView>
              <GlassCard>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                    <Cookie className="w-6 h-6 text-emerald-400" />
                  </div>
                  <div>
                    <div className="mono-label text-emerald-400 mb-1">STUFE 1</div>
                    <h3 className="text-xl font-bold mb-2">Cookie-Footprint extrahieren</h3>
                    <p className="text-sm text-white/60 mb-3">
                      Playwright laedt die Webseite vollstaendig (inkl. JavaScript-Rendering)
                      und erfasst jeden gesetzten Cookie + jeden CMP-Payload
                      (ePaaS, OneTrust, Usercentrics, Cookiebot, Didomi, TrustArc).
                    </p>
                    <ul className="text-sm text-white/50 space-y-1">
                      <li>• Cookie-Namen, Werte, Domains, Lifetimes</li>
                      <li>• IAB TCF v2.2 Vendor-Liste auswerten (Vendor-IDs zur eindeutigen Zuordnung)</li>
                      <li>• Drittanbieter-Quote pro Cookie</li>
                      <li>• Premium-Feature-Cookies erkennen (z.B. <code className="text-emerald-300">s_target_qa</code> = Adobe Target Enterprise)</li>
                    </ul>
                  </div>
                </div>
              </GlassCard>
            </FadeInView>

            <FadeInView delay={0.1}>
              <GlassCard>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                    <Database className="w-6 h-6 text-emerald-400" />
                  </div>
                  <div>
                    <div className="mono-label text-emerald-400 mb-1">STUFE 2</div>
                    <h3 className="text-xl font-bold mb-2">Wissens-Datenbank-Abgleich</h3>
                    <p className="text-sm text-white/60 mb-3">
                      Jeder Cookie wird gegen unsere kuratierte Wissens-DB mit derzeit
                      ~50 Top-Vendors abgeglichen. Pro Cookie wissen wir:
                    </p>
                    <ul className="text-sm text-white/50 space-y-1">
                      <li>• Setzender Anbieter + Sitzland</li>
                      <li>• Exakter funktionaler Zweck (nicht nur Kategorie)</li>
                      <li>• Welche Datenfelder gesammelt werden (Client-ID, IP, etc.)</li>
                      <li>• Re-Identifikations-Risiko (low/medium/high)</li>
                      <li>• §25(2) TDDDG technische Notwendigkeit</li>
                      <li>• Schrems-II-Status + relevante EuGH-/CNIL-Urteile</li>
                      <li>• Konkreter EU-Alternativ-Cookie + EU-Alternativ-Vendor</li>
                    </ul>
                  </div>
                </div>
              </GlassCard>
            </FadeInView>

            <FadeInView delay={0.2}>
              <GlassCard>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                    <Layers className="w-6 h-6 text-emerald-400" />
                  </div>
                  <div>
                    <div className="mono-label text-emerald-400 mb-1">STUFE 3</div>
                    <h3 className="text-xl font-bold mb-2">Tier-Inferenz + Funktionale Kategorisierung</h3>
                    <p className="text-sm text-white/60 mb-3">
                      Pro Vendor leiten wir das Pricing-Tier aus dem Cookie-Footprint ab:
                    </p>
                    <ul className="text-sm text-white/50 space-y-1">
                      <li>• <strong className="text-white/80">&lt;10 Cookies</strong> = Starter-Plan</li>
                      <li>• <strong className="text-white/80">10-30 Cookies</strong> = Professional / Mid-Market</li>
                      <li>• <strong className="text-white/80">30-60 Cookies</strong> = Enterprise</li>
                      <li>• <strong className="text-white/80">&gt;60 Cookies + Premium-Features</strong> = Premier-Tier</li>
                    </ul>
                    <p className="text-sm text-white/60 mt-3 mb-2">
                      Parallel werden alle Vendors funktional klassifiziert (Web-Analytics,
                      Werbung, CDN, Marketing-Automation, …). Mehrere Vendors in
                      derselben Kategorie = Konsolidierungs-Kandidat.
                    </p>
                  </div>
                </div>
              </GlassCard>
            </FadeInView>

            <FadeInView delay={0.3}>
              <GlassCard>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                    <Calculator className="w-6 h-6 text-emerald-400" />
                  </div>
                  <div>
                    <div className="mono-label text-emerald-400 mb-1">STUFE 4</div>
                    <h3 className="text-xl font-bold mb-2">Kosten-Schaetzung + EU-Konsolidierung</h3>
                    <p className="text-sm text-white/60 mb-3">
                      Pro Tier multiplizieren wir mit unseren Pricing-Lookups
                      (Gartner/Forrester 2025 + oeffentliche Listpreise).
                      Ergebnis: jaehrlicher Kostenbereich pro Vendor.
                    </p>
                    <ul className="text-sm text-white/50 space-y-1">
                      <li>• Master-Vertrag-Dedupe (1 Adobe-Lizenz, viele Features)</li>
                      <li>• EU-Alternative mit gleicher Funktion + Listpreis</li>
                      <li>• Multi-Funktions-Tools die mehrere Kategorien gleichzeitig ersetzen</li>
                      <li>• Sparpotenzial = Aktuelle Listpreise − EU-Tool-Listpreis</li>
                    </ul>
                  </div>
                </div>
              </GlassCard>
            </FadeInView>
          </div>
        </section>

        {/* Caveats — ehrlich */}
        <section className="py-12 sm:py-16 bg-amber-500/[0.03]">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
              <AlertTriangle className="w-6 h-6 text-amber-400" />
              Was wir NICHT versprechen
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <GlassCard>
                <h3 className="font-bold mb-2">Listpreise ≠ Vertragspreise</h3>
                <p className="text-sm text-white/60">
                  Konzern-Konditionen liegen ueblicherweise 30–50% unter Listpreis.
                  Wir geben Bereiche an, nicht exakte Zahlen. Verifikation mit dem
                  eigenen Einkauf ist Pflicht.
                </p>
              </GlassCard>
              <GlassCard>
                <h3 className="font-bold mb-2">Funktionale Redundanz ≠ Strategische Redundanz</h3>
                <p className="text-sm text-white/60">
                  Mehrere Analytics-Tools koennen legitim sein (A/B-Test, regional split,
                  Marketing vs Produkt). Wir nennen die bekannten Gruende explizit.
                </p>
              </GlassCard>
              <GlassCard>
                <h3 className="font-bold mb-2">Media-Spend nicht enthalten</h3>
                <p className="text-sm text-white/60">
                  Google-Ads-/Meta-Ads-/Programmatic-Budget ist NICHT in der Saving-
                  Schaetzung. Nur Tool-Lizenzen. Media-Optimierung ist ein separates
                  Thema.
                </p>
              </GlassCard>
              <GlassCard>
                <h3 className="font-bold mb-2">Migrations-Kosten nicht abgezogen</h3>
                <p className="text-sm text-white/60">
                  Tool-Wechsel kostet Zeit + interne Implementation. Faustregel:
                  3-6 Monate Amortisation einrechnen. Saving-Schaetzung ist Brutto.
                </p>
              </GlassCard>
            </div>
          </div>
        </section>

        {/* Datenquellen */}
        <section className="py-12 sm:py-16">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
              <Globe className="w-6 h-6 text-emerald-400" />
              Datenquellen + Updates
            </h2>
            <GlassCard>
              <ul className="text-sm text-white/60 space-y-3">
                <li>
                  <strong className="text-white/90">Cookie-Wissen:</strong>{' '}
                  Cookiepedia, IAB Europe TCF v2.2 Vendor-Liste, Cookiebot Public DB,
                  Vendor-eigene Dokumentation
                </li>
                <li>
                  <strong className="text-white/90">Pricing:</strong>{' '}
                  Gartner Hype Cycle 2025, Forrester Wave MarTech 2025, oeffentliche
                  Pricing-Pages, anonymisierte Kundengespraeche
                </li>
                <li>
                  <strong className="text-white/90">Regulatorik:</strong>{' '}
                  EDPB Cookie Guidelines 2/2023, DSK-Orientierungshilfe Telemedien 2024,
                  CNIL Cookies-Recommendations
                </li>
                <li>
                  <strong className="text-white/90">Updates:</strong>{' '}
                  DB wird kontinuierlich gepflegt. Neue Kunden geben uns Ground-Truth
                  fuer Kalibrierung.
                </li>
              </ul>
            </GlassCard>
          </div>
        </section>
      </main>
      <Footer />
      <ChatFAB />
    </>
  )
}
