'use client'

import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import AnimatedCounter from '../ui/AnimatedCounter'
import { Repeat, TrendingUp, PiggyBank, ShieldCheck, Clock, Users } from 'lucide-react'

interface BusinessModelSlideProps {
  lang: Language
  products?: unknown[]
}

export default function BusinessModelSlide({ lang }: BusinessModelSlideProps) {
  const i = t(lang)
  const de = lang === 'de'

  return (
    <div>
      <FadeInView className="text-center mb-10">
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.businessModel.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.businessModel.subtitle}</p>
      </FadeInView>

      {/* Key Metrics */}
      <div className="grid md:grid-cols-3 gap-4 mb-8">
        <GlassCard delay={0.2} className="text-center">
          <Repeat className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
          <p className="text-sm text-white/50 mb-1">{i.businessModel.recurringRevenue}</p>
          <p className="text-2xl font-bold text-white">100% SaaS</p>
          <p className="text-xs text-white/30">{de ? 'Mitarbeiterbasiertes Pricing' : 'Employee-based pricing'}</p>
        </GlassCard>
        <GlassCard delay={0.3} className="text-center">
          <TrendingUp className="w-6 h-6 text-green-400 mx-auto mb-2" />
          <p className="text-sm text-white/50 mb-1">{i.businessModel.margin}</p>
          <p className="text-2xl font-bold text-white">&gt;80%</p>
          <p className="text-xs text-white/30">{de ? 'Cloud-native, keine HW-Kosten' : 'Cloud-native, no HW costs'}</p>
        </GlassCard>
        <GlassCard delay={0.4} className="text-center">
          <PiggyBank className="w-6 h-6 text-amber-400 mx-auto mb-2" />
          <p className="text-sm text-white/50 mb-1">{de ? 'Kundenersparnis' : 'Customer Savings'}</p>
          <p className="text-2xl font-bold text-white">50.000+ EUR</p>
          <p className="text-xs text-white/30">{de ? 'pro Kunde pro Jahr' : 'per customer per year'}</p>
        </GlassCard>
      </div>

      {/* Savings Breakdown — the core argument */}
      <FadeInView delay={0.5}>
        <GlassCard hover={false} className="p-6">
          <h3 className="text-lg font-semibold mb-5 text-white/70 text-center">
            {de ? 'ROI-Rechnung: Kunde mit 250+ Mitarbeitern' : 'ROI Calculation: Customer with 250+ employees'}
          </h3>
          <div className="grid md:grid-cols-2 gap-8">
            {/* Customer pays */}
            <div>
              <h4 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-3">
                {i.businessModel.customerPays}
              </h4>
              <div className="bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-4">
                <p className="text-3xl font-bold text-white text-center mb-1">
                  <AnimatedCounter target={40} suffix="-50k" duration={1500} /> EUR
                </p>
                <p className="text-xs text-white/40 text-center">{de ? 'pro Jahr, modular waehlbar' : 'per year, modular choice'}</p>
              </div>
            </div>
            {/* Customer saves */}
            <div>
              <h4 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-3">
                {i.businessModel.customerSaves}
              </h4>
              <div className="space-y-2">
                {[
                  { label: i.businessModel.savingsPentest, amount: '30.000', icon: ShieldCheck },
                  { label: i.businessModel.savingsCE, amount: '20.000', icon: Clock },
                  { label: i.businessModel.savingsAudit, amount: '60.000+', icon: Users },
                ].map((item, idx) => (
                  <div key={idx} className="flex items-center justify-between bg-emerald-500/10 rounded-lg px-3 py-2">
                    <div className="flex items-center gap-2">
                      <item.icon className="w-3.5 h-3.5 text-emerald-400" />
                      <span className="text-xs text-white/70">{item.label}</span>
                    </div>
                    <span className="text-xs font-bold text-emerald-300">{item.amount} EUR</span>
                  </div>
                ))}
                <div className="flex items-center justify-between bg-emerald-500/20 border border-emerald-500/30 rounded-lg px-3 py-2">
                  <span className="text-xs font-bold text-white">{i.businessModel.savingsTotal}</span>
                  <span className="text-sm font-bold text-emerald-300">50.000 - 110.000+ EUR</span>
                </div>
              </div>
            </div>
          </div>
          <p className="text-center text-xs text-white/30 mt-4">
            {de
              ? '+ Strafvermeidung, Echtzeit-Kundenanfragen, kein Auditmanager noetig'
              : '+ penalty avoidance, real-time customer inquiries, no audit manager needed'}
          </p>
        </GlassCard>
      </FadeInView>
    </div>
  )
}