'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 { Target, Users, Handshake, Megaphone, Building2, GraduationCap } from 'lucide-react'

interface GTMSlideProps {
  lang: Language
  isWandeldarlehen?: boolean
}

export default function GTMSlide({ lang, isWandeldarlehen }: GTMSlideProps) {
  const i = t(lang)
  const de = lang === 'de'

  const channelsLean = [
    { icon: Target, label: de ? 'Gründer-Vertrieb' : 'Founder Sales', pct: '60%', desc: de ? 'Persönliches Netzwerk + Beratung' : 'Personal network + consulting' },
    { icon: Megaphone, label: de ? 'Content & SEO' : 'Content & SEO', pct: '25%', desc: de ? 'Webinare, Whitepaper, Fachbeiträge' : 'Webinars, whitepapers, articles' },
    { icon: Users, label: de ? 'Empfehlungen' : 'Referrals', pct: '15%', desc: de ? 'Zufriedene Pilotkunden' : 'Satisfied pilot customers' },
  ]

  const channels1M = [
    { icon: Target, label: de ? 'Direktvertrieb' : 'Direct Sales', pct: '40%', desc: de ? 'Outbound + Inbound, 2 AEs ab 2027' : 'Outbound + Inbound, 2 AEs from 2027' },
    { icon: Handshake, label: de ? 'Channel-Partner' : 'Channel Partners', pct: '30%', desc: de ? 'IT-Händler, Systemhäuser, MSPs' : 'IT resellers, system integrators, MSPs' },
    { icon: Megaphone, label: de ? 'Content & Events' : 'Content & Events', pct: '20%', desc: de ? 'Webinare, Messen (it-sa), SEO' : 'Webinars, trade shows (it-sa), SEO' },
    { icon: Users, label: de ? 'Empfehlungen' : 'Referrals', pct: '10%', desc: de ? 'Bestandskunden-Empfehlungsprogramm' : 'Customer referral program' },
  ]

  const channels = isWandeldarlehen ? channelsLean : channels1M

  const idealCustomer = [
    { icon: Building2, label: de ? '10-250 Mitarbeiter' : '10-250 Employees' },
    { icon: GraduationCap, label: de ? 'Produzierende Industrie (Maschinenbau, Automotive, Elektro, Chemie)' : 'Manufacturing Industry (Machinery, Automotive, Electrical, Chemicals)' },
    { icon: Target, label: de ? 'Kein interner Compliance-Officer oder DSB' : 'No Internal Compliance Officer or DPO' },
  ]

  return (
    <div>
      <FadeInView className="text-center mb-8">
        <p className="text-xs font-mono text-indigo-400/60 uppercase tracking-widest mb-2">
          {de ? 'Anhang' : 'Appendix'}
        </p>
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.annex.gtm.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.gtm.subtitle}</p>
      </FadeInView>

      {/* ICP */}
      <FadeInView delay={0.15}>
        <GlassCard hover={false} className="p-4 mb-6">
          <p className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">
            {de ? 'Ideales Kundenprofil (ICP)' : 'Ideal Customer Profile (ICP)'}
          </p>
          <div className="flex flex-wrap gap-4">
            {idealCustomer.map((ic, idx) => {
              const Icon = ic.icon
              return (
                <div key={idx} className="flex items-center gap-2">
                  <Icon className="w-4 h-4 text-indigo-400" />
                  <span className="text-sm text-white/70">{ic.label}</span>
                </div>
              )
            })}
          </div>
        </GlassCard>
      </FadeInView>

      {/* Channel Mix */}
      <FadeInView delay={0.5}>
        <GlassCard hover={false} className="p-4">
          <p className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">
            {de ? 'Vertriebskanalmix (Ziel 2028)' : 'Channel Mix (Target 2028)'}
          </p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {channels.map((ch, idx) => {
              const Icon = ch.icon
              return (
                <div key={idx} className="text-center">
                  <Icon className="w-5 h-5 text-indigo-400 mx-auto mb-1" />
                  <p className="text-lg font-bold text-white">{ch.pct}</p>
                  <p className="text-xs font-semibold text-white/60 mb-0.5">{ch.label}</p>
                  <p className="text-[10px] text-white/30">{ch.desc}</p>
                </div>
              )
            })}
          </div>
        </GlassCard>
      </FadeInView>
    </div>
  )
}