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

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

  const phases = [
    {
      phase: de ? 'Phase 1: Pilot (2026)' : 'Phase 1: Pilot (2026)',
      color: 'border-indigo-500/30 bg-indigo-500/5',
      textColor: 'text-indigo-400',
      items: [
        de ? 'Direktvertrieb an 5-20 KMU in DACH' : 'Direct sales to 5-20 SMEs in DACH',
        de ? 'Fokus: Gesundheitswesen, Finanzdienstleister, Rechtsanwaelte' : 'Focus: Healthcare, Financial Services, Law Firms',
        de ? 'Persoenliches Onboarding, White-Glove-Service' : 'Personal onboarding, white-glove service',
        de ? 'Case Studies und Referenzkunden aufbauen' : 'Build case studies and reference customers',
      ],
    },
    {
      phase: de ? 'Phase 2: Skalierung (2027)' : 'Phase 2: Scale (2027)',
      color: 'border-purple-500/30 bg-purple-500/5',
      textColor: 'text-purple-400',
      items: [
        de ? 'Channel-Partnerschaften mit IT-Systemhaeusern' : 'Channel partnerships with IT system integrators',
        de ? 'IHK- und Handwerkskammer-Kooperationen' : 'Chamber of Commerce & Industry partnerships',
        de ? 'Content Marketing: Compliance-Webinare, Whitepaper' : 'Content marketing: Compliance webinars, whitepapers',
        de ? 'Zielkunden: 50-200 in regulierten Branchen' : 'Target: 50-200 customers in regulated industries',
      ],
    },
    {
      phase: de ? 'Phase 3: Expansion (2028+)' : 'Phase 3: Expansion (2028+)',
      color: 'border-emerald-500/30 bg-emerald-500/5',
      textColor: 'text-emerald-400',
      items: [
        de ? 'Cloud-Tier fuer groessere Unternehmen (50-500 MA)' : 'Cloud tier for larger companies (50-500 employees)',
        de ? 'EU-Expansion: Oesterreich, Schweiz, Benelux, Nordics' : 'EU expansion: Austria, Switzerland, Benelux, Nordics',
        de ? 'OEM/Whitelabel fuer Steuerberater und Wirtschaftspruefer' : 'OEM/whitelabel for tax advisors and auditors',
        de ? 'Self-Service-Onboarding und PLG-Motion' : 'Self-service onboarding and PLG motion',
      ],
    },
  ]

  const channels = [
    { 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-Haendler, Systemhaeuser, 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 idealCustomer = [
    { icon: Building2, label: de ? '10-250 Mitarbeiter' : '10-250 Employees' },
    { icon: GraduationCap, label: de ? 'Regulierte Branche (Gesundheit, Finanzen, Energie, KRITIS)' : 'Regulated Industry (Healthcare, Finance, Energy, Critical Infrastructure)' },
    { 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>

      {/* Phases */}
      <div className="grid md:grid-cols-3 gap-4 mb-6">
        {phases.map((phase, idx) => (
          <FadeInView key={idx} delay={0.2 + idx * 0.1}>
            <div className={`border rounded-xl p-4 h-full ${phase.color}`}>
              <p className={`text-sm font-bold ${phase.textColor} mb-3`}>{phase.phase}</p>
              <ul className="space-y-2">
                {phase.items.map((item, iidx) => (
                  <li key={iidx} className="flex items-start gap-2 text-xs text-white/60">
                    <span className={`w-1 h-1 rounded-full mt-1.5 ${phase.textColor} bg-current`} />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </FadeInView>
        ))}
      </div>

      {/* 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>
  )
}