'use client'

import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { TrendingDown, Building2, Factory, Building } from 'lucide-react'

interface SavingsSlideProps {
  lang: Language
}

export default function SavingsSlide({ lang }: SavingsSlideProps) {
  const de = lang === 'de'

  const companies = [
    {
      icon: Building2,
      color: 'text-indigo-400',
      bg: 'border-indigo-500/20',
      name: de ? 'KMU (25 MA)' : 'SME (25 emp.)',
      desc: de ? '2-3 Apps, 1-2 Produkte mit SW' : '2-3 apps, 1-2 products with SW',
      bp_price: de ? '15.000 EUR/Jahr' : 'EUR 15,000/yr',
      savings: [
        { label: de ? 'Pentests (2-3 Apps × 6.000€)' : 'Pentests (2-3 apps × €6,000)', without: '18.000', with: '5.000', save: '13.000' },
        { label: de ? 'CE-SW-Risikobeurteilung (1-2 Produkte)' : 'CE SW risk assessment (1-2 products)', without: '12.000', with: '3.000', save: '9.000' },
        { label: de ? 'Ext. Datenschutzbeauftragter' : 'External DPO', without: '6.000', with: '0', save: '6.000' },
        { label: de ? 'Compliance-Dokumentation (VVT, TOMs)' : 'Compliance docs (RoPA, TOMs)', without: '8.000', with: '0', save: '8.000' },
        { label: de ? 'Entwickler-Produktivität (Shift-Left)' : 'Developer productivity (shift-left)', without: '26.000', with: '10.000', save: '16.000' },
        { label: de ? 'Audit-Vorbereitung' : 'Audit preparation', without: '12.000', with: '3.000', save: '9.000' },
      ],
      totalWithout: '97.750',
      totalWith: '44.530',
      totalSave: '53.220',
      roi: '3,5x',
    },
    {
      icon: Factory,
      color: 'text-emerald-400',
      bg: 'border-emerald-500/20',
      name: de ? 'Mittelstand (100 MA)' : 'Mid-size (100 emp.)',
      desc: de ? '5-8 Apps, 3-5 Produkte, MES/ERP' : '5-8 apps, 3-5 products, MES/ERP',
      bp_price: de ? '30.000 EUR/Jahr' : 'EUR 30,000/yr',
      savings: [
        { label: de ? 'Pentests (5-8 Apps × 8.000€)' : 'Pentests (5-8 apps × €8,000)', without: '56.000', with: '15.000', save: '41.000' },
        { label: de ? 'CE-SW-Risiko (3-5 Produkte × 15.000€)' : 'CE SW risk (3-5 products × €15,000)', without: '60.000', with: '10.000', save: '50.000' },
        { label: de ? 'Compliance-Team (0,5 FTE Audit Manager)' : 'Compliance team (0.5 FTE audit manager)', without: '35.000', with: '10.000', save: '25.000' },
        { label: de ? 'TISAX / ISO 27001 Zertifizierung' : 'TISAX / ISO 27001 certification', without: '25.000', with: '8.000', save: '17.000' },
        { label: de ? 'Entwickler-Produktivität (5 Devs)' : 'Developer productivity (5 devs)', without: '130.000', with: '50.000', save: '80.000' },
        { label: de ? 'CRA/NIS2 Compliance-Aufwand' : 'CRA/NIS2 compliance effort', without: '45.000', with: '15.000', save: '30.000' },
      ],
      totalWithout: '419.500',
      totalWith: '193.880',
      totalSave: '225.620',
      roi: '7,5x',
    },
    {
      icon: Building,
      color: 'text-amber-400',
      bg: 'border-amber-500/20',
      name: de ? 'Konzern (500+ MA)' : 'Enterprise (500+ emp.)',
      desc: de ? '15-25 Apps, 10-20 Produkte, SCADA/ICS' : '15-25 apps, 10-20 products, SCADA/ICS',
      bp_price: de ? '50.000 EUR/Jahr' : 'EUR 50,000/yr',
      savings: [
        { label: de ? 'Pentests (15-25 Apps × 10.000€)' : 'Pentests (15-25 apps × €10,000)', without: '200.000', with: '50.000', save: '150.000' },
        { label: de ? 'CE-SW-Risiko (10-20 Produkte × 18.000€)' : 'CE SW risk (10-20 products × €18,000)', without: '270.000', with: '50.000', save: '220.000' },
        { label: de ? 'Compliance-Abteilung (2-3 FTE)' : 'Compliance department (2-3 FTE)', without: '250.000', with: '100.000', save: '150.000' },
        { label: de ? 'Externe Berater (TÜV, DEKRA, Anwälte)' : 'External consultants (TÜV, DEKRA, lawyers)', without: '120.000', with: '30.000', save: '90.000' },
        { label: de ? 'Entwickler-Produktivität (20+ Devs)' : 'Developer productivity (20+ devs)', without: '540.000', with: '200.000', save: '340.000' },
        { label: de ? 'Incident Response / Strafvermeidung' : 'Incident response / penalty avoidance', without: '150.000', with: '50.000', save: '100.000' },
      ],
      totalWithout: '2.113.500',
      totalWith: '1.074.080',
      totalSave: '1.039.420',
      roi: '20,8x',
    },
  ]

  return (
    <div className="max-w-6xl mx-auto">
      <FadeInView className="text-center mb-5">
        <h2 className="text-3xl md:text-4xl font-bold mb-2">
          <GradientText>{de ? 'Kundenersparnis im Detail' : 'Customer Savings in Detail'}</GradientText>
        </h2>
        <p className="text-sm text-white/50 max-w-3xl mx-auto">
          {de
            ? 'Jede Anwendung braucht einen eigenen Pentest. Jedes Produkt eine eigene CE-Beurteilung. Die Kosten skalieren linear — unsere Plattform nicht.'
            : 'Each application needs its own pentest. Each product its own CE assessment. Costs scale linearly — our platform does not.'}
        </p>
      </FadeInView>

      <div className="space-y-4">
        {companies.map((co, idx) => {
          const Icon = co.icon
          return (
            <FadeInView key={idx} delay={0.1 + idx * 0.1}>
              <GlassCard hover={false} className={`p-4 border-t-2 ${co.bg}`}>
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <Icon className={`w-6 h-6 ${co.color}`} />
                    <div>
                      <h3 className={`text-sm font-bold ${co.color}`}>{co.name}</h3>
                      <p className="text-[10px] text-white/40">{co.desc}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-white/40">BreakPilot COMPL<span className="text-indigo-400">AI</span></p>
                    <p className={`text-sm font-bold ${co.color}`}>{co.bp_price}</p>
                  </div>
                </div>

                {/* Savings table */}
                <div className="grid grid-cols-[1fr_80px_80px_80px] gap-x-2 text-[10px] text-white/30 uppercase tracking-wider mb-1.5 border-b border-white/10 pb-1">
                  <span>{de ? 'Kostenposition' : 'Cost Item'}</span>
                  <span className="text-right">{de ? 'Ohne' : 'Without'}</span>
                  <span className="text-right">{de ? 'Mit' : 'With'}</span>
                  <span className="text-right">{de ? 'Ersparnis' : 'Savings'}</span>
                </div>
                <div className="space-y-1">
                  {co.savings.map((s, i) => (
                    <div key={i} className="grid grid-cols-[1fr_80px_80px_80px] gap-x-2 text-xs">
                      <span className="text-white/60 truncate">{s.label}</span>
                      <span className="text-right text-red-400/60">{s.without}€</span>
                      <span className="text-right text-white/40">{s.with}€</span>
                      <span className="text-right text-emerald-400 font-bold">{s.save}€</span>
                    </div>
                  ))}
                </div>

                {/* Total */}
                <div className="grid grid-cols-[1fr_80px_80px_80px] gap-x-2 mt-2 pt-2 border-t border-white/10 text-xs font-bold">
                  <span className="text-white/80">{de ? 'GESAMT pro Jahr' : 'TOTAL per year'}</span>
                  <span className="text-right text-red-400">{co.totalWithout}€</span>
                  <span className="text-right text-white/60">{co.totalWith}€</span>
                  <span className="text-right text-emerald-300 text-sm">{co.totalSave}€</span>
                </div>

                <div className="flex justify-end mt-1">
                  <span className={`text-xs font-bold ${co.color} bg-white/[0.05] px-2 py-0.5 rounded-full`}>
                    ROI {co.roi}
                  </span>
                </div>
              </GlassCard>
            </FadeInView>
          )
        })}
      </div>

      {/* Key Insight */}
      <FadeInView delay={0.5} className="mt-4">
        <div className="bg-gradient-to-r from-emerald-500/10 to-indigo-500/10 border border-emerald-500/20 rounded-xl px-5 py-3 text-center">
          <p className="text-sm text-white/70">
            {de
              ? '„Der größte versteckte Kostentreiber ist Entwickler-Produktivität: Ohne automatisierte Security-Tools verbringen Entwickler 19% ihrer Arbeitszeit mit Sicherheitsaufgaben statt mit Features." — IDC'
              : '"The largest hidden cost driver is developer productivity: without automated security tools, developers spend 19% of their time on security tasks instead of features." — IDC'}
          </p>
        </div>
      </FadeInView>
    </div>
  )
}