'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'

interface BusinessModelSlideProps {
  lang: Language
  products?: unknown[]
  investorId?: string | null
  preferredScenarioId?: string | null
  isWandeldarlehen?: boolean
}

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

  const tiers = [
    {
      name: 'Starter',
      target: de ? 'Startups & Kleinstunternehmen' : 'Startups & Micro',
      employees: '< 10',
      price: de ? '3.600' : '3,600',
      period: de ? 'EUR/Jahr' : 'EUR/yr',
      features: de
        ? ['Code Security (SAST/DAST)', 'Compliance-Dokumente', 'Consent Management', '1 Anwendung']
        : ['Code Security (SAST/DAST)', 'Compliance documents', 'Consent management', '1 application'],
      highlight: false,
    },
    {
      name: 'Professional',
      target: de ? 'KMU & Mittelstand' : 'SME & Mid-Market',
      employees: '10 – 250',
      price: de ? '15.000 – 40.000' : '15,000 – 40,000',
      period: de ? 'EUR/Jahr' : 'EUR/yr',
      features: de
        ? ['Alle Module inkl. CE-Bewertung', 'Audit Manager End-to-End', 'AI Act Compliance (UCCA)', 'Unbegrenzte Anwendungen']
        : ['All modules incl. CE assessment', 'Audit Manager end-to-end', 'AI Act Compliance (UCCA)', 'Unlimited applications'],
      highlight: true,
    },
    {
      name: 'Enterprise',
      target: de ? 'Konzerne & OEMs' : 'Enterprises & OEMs',
      employees: '250+',
      price: de ? 'ab 50.000' : 'from 50,000',
      period: de ? 'EUR/Jahr' : 'EUR/yr',
      features: de
        ? ['Dedizierte Instanz', 'Custom Integrationen (SAP, MES)', 'SLA & Priority Support', 'Tender Matching & RFQ-Prüfung']
        : ['Dedicated instance', 'Custom integrations (SAP, MES)', 'SLA & priority support', 'Tender matching & RFQ verification'],
      highlight: false,
    },
  ]

  return (
    <div className="max-w-6xl mx-auto">
      <FadeInView className="text-center mb-6">
        <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>

      <div className="grid grid-cols-3 gap-4">
        {tiers.map((tier, idx) => (
          <FadeInView key={idx} delay={0.1 + idx * 0.1}>
            <GlassCard hover={false} className={`p-5 h-full ${tier.highlight ? 'border-slate-300/40 bg-gradient-to-b from-slate-200/[0.08] to-slate-400/[0.04] shadow-lg shadow-slate-300/10 ring-1 ring-slate-300/20' : ''}`}>
              <h3 className="text-lg font-bold text-white mb-0.5">{tier.name}</h3>
              <p className="text-sm text-white/40 mb-2">{tier.target}</p>
              <p className="text-xs text-white/30 mb-4">{tier.employees} {de ? 'Mitarbeiter' : 'employees'}</p>

              <div className="mb-4">
                <span className="text-2xl font-black text-white">{tier.price}</span>
                <span className="text-sm text-white/40 ml-1">{tier.period}</span>
              </div>

              <ul className="space-y-2">
                {tier.features.map((f, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm text-white/50">
                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 mt-1.5 shrink-0" />
                    {f}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </FadeInView>
        ))}
      </div>

    </div>
  )
}