breakpilot-core/pitch-deck/components/slides/BusinessModelSlide.tsx

'use client'

import { motion } from 'framer-motion'
import { Language, PitchProduct } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { DollarSign, Repeat, TrendingUp } from 'lucide-react'

interface BusinessModelSlideProps {
  lang: Language
  products: PitchProduct[]
}

const AMORT_MONTHS = 24

function computeKPIs(products: PitchProduct[]) {
  if (!products.length) return { weightedMarginDuring: 0, weightedMarginAfter: 0, amortMonths: AMORT_MONTHS }

  // Compute weighted margin based on product mix (equal weight per product as proxy)
  const n = products.length
  let sumMarginDuring = 0
  let sumMarginAfter = 0
  let maxAmortMonths = 0

  for (const p of products) {
    const price = p.monthly_price_eur
    if (price <= 0) continue
    const amort = p.hardware_cost_eur > 0 ? p.hardware_cost_eur / AMORT_MONTHS : 0
    const opex = p.operating_cost_eur > 0 ? p.operating_cost_eur : 0

    // Margin during amortization
    const marginDuring = (price - amort - opex) / price
    sumMarginDuring += marginDuring

    // Margin after amortization (no more HW cost)
    const marginAfter = (price - opex) / price
    sumMarginAfter += marginAfter

    // Payback period in months
    if (p.hardware_cost_eur > 0 && price - opex > 0) {
      const payback = Math.ceil(p.hardware_cost_eur / (price - opex))
      if (payback > maxAmortMonths) maxAmortMonths = payback
    }
  }

  return {
    weightedMarginDuring: Math.round((sumMarginDuring / n) * 100),
    weightedMarginAfter: Math.round((sumMarginAfter / n) * 100),
    amortMonths: maxAmortMonths || AMORT_MONTHS,
  }
}

export default function BusinessModelSlide({ lang, products }: BusinessModelSlideProps) {
  const i = t(lang)
  const { weightedMarginDuring, weightedMarginAfter, amortMonths } = computeKPIs(products)

  return (
    <div>
      <FadeInView className="text-center mb-12">
        <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 — dynamisch berechnet */}
      <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%</p>
          <p className="text-xs text-white/30">SaaS / Subscription</p>
        </GlassCard>
        <GlassCard delay={0.3} className="text-center">
          <DollarSign 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;{weightedMarginAfter}%</p>
          <p className="text-xs text-white/30">
            {lang === 'de' ? 'nach Amortisation' : 'post amortization'}
            {' · '}
            {weightedMarginDuring}% {lang === 'de' ? 'waehrend' : 'during'}
          </p>
        </GlassCard>
        <GlassCard delay={0.4} className="text-center">
          <TrendingUp className="w-6 h-6 text-purple-400 mx-auto mb-2" />
          <p className="text-sm text-white/50 mb-1">{i.businessModel.amortization}</p>
          <p className="text-2xl font-bold text-white">{amortMonths} {i.businessModel.months}</p>
          <p className="text-xs text-white/30">{lang === 'de' ? 'max. Hardware-Amortisation' : 'max. Hardware Amortization'}</p>
        </GlassCard>
      </div>

      {/* Unit Economics per Product */}
      <FadeInView delay={0.5}>
        <h3 className="text-lg font-semibold mb-4 text-white/70">{i.businessModel.unitEconomics}</h3>
        <div className="grid md:grid-cols-3 gap-4">
          {products.map((p, idx) => {
            const amort = p.hardware_cost_eur > 0 ? Math.round(p.hardware_cost_eur / AMORT_MONTHS) : 0
            const monthlyMargin = p.monthly_price_eur - amort - (p.operating_cost_eur > 0 ? p.operating_cost_eur : 0)
            const marginPct = Math.round((monthlyMargin / p.monthly_price_eur) * 100)

            return (
              <motion.div
                key={p.id}
                initial={{ opacity: 0, rotateY: -15 }}
                animate={{ opacity: 1, rotateY: 0 }}
                transition={{ delay: 0.6 + idx * 0.15 }}
                className="bg-white/[0.05] border border-white/10 rounded-2xl p-5"
              >
                <h4 className="font-bold text-white mb-3">{p.name}</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-white/50">{lang === 'de' ? 'Monatspreis' : 'Monthly Price'}</span>
                    <span className="text-white font-medium">{p.monthly_price_eur} EUR</span>
                  </div>
                  {p.hardware_cost_eur > 0 && (
                    <div className="flex justify-between">
                      <span className="text-white/50">{i.businessModel.hardwareCost}</span>
                      <span className="text-white/70">-{amort} EUR/Mo</span>
                    </div>
                  )}
                  {p.operating_cost_eur > 0 && (
                    <div className="flex justify-between">
                      <span className="text-white/50">{i.businessModel.operatingCost}</span>
                      <span className="text-white/70">-{p.operating_cost_eur} EUR/Mo</span>
                    </div>
                  )}
                  <div className="border-t border-white/10 pt-2 flex justify-between">
                    <span className="text-white/50">{i.businessModel.margin}</span>
                    <span className={`font-bold ${marginPct > 0 ? 'text-green-400' : 'text-red-400'}`}>
                      {marginPct > 0 ? '+' : ''}{monthlyMargin} EUR ({marginPct}%)
                    </span>
                  </div>
                </div>
              </motion.div>
            )
          })}
        </div>
      </FadeInView>
    </div>
  )
}