'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 { Shield, ScanLine, FileText, Rocket, Users, Building2, Globe, TrendingUp } from 'lucide-react'

interface StrategySlideProps {
  lang: Language
}

export default function StrategySlide({ lang }: StrategySlideProps) {
  const de = lang === 'de'

  return (
    <div className="max-w-6xl mx-auto">
      <FadeInView className="text-center mb-6">
        <h2 className="text-3xl md:text-4xl font-bold mb-2">
          <GradientText>{de ? 'Unsere Strategie' : 'Our Strategy'}</GradientText>
        </h2>
        <p className="text-sm text-white/50 max-w-3xl mx-auto">
          {de
            ? 'Kein Wettbewerber verbindet Code Security mit Compliance-Automatisierung. Wir schließen diese Lücke — und bauen die Firma Channel-first auf.'
            : 'No competitor combines code security with compliance automation. We close this gap — and build the company channel-first.'}
        </p>
      </FadeInView>

      {/* USP: Die zwei Welten */}
      <FadeInView delay={0.1} className="mb-6">
        <div className="grid md:grid-cols-3 gap-3">
          <GlassCard delay={0.1} hover={false} className="p-4 border-t-2 border-t-red-500">
            <div className="flex items-center gap-2 mb-2">
              <ScanLine className="w-5 h-5 text-red-400" />
              <h3 className="text-sm font-bold text-red-400">{de ? 'Code Security' : 'Code Security'}</h3>
            </div>
            <p className="text-xs text-white/50 mb-2">{de ? 'Snyk, Checkmarx, Veracode' : 'Snyk, Checkmarx, Veracode'}</p>
            <p className="text-xs text-white/60 italic">
              {de
                ? '„Wir haben 47 Schwachstellen gefunden. CRA-konform? Nicht unser Problem."'
                : '"We found 47 vulnerabilities. CRA compliant? Not our problem."'}
            </p>
          </GlassCard>

          <GlassCard delay={0.15} hover={false} className="p-4 border-t-2 border-t-indigo-500">
            <div className="flex items-center gap-2 mb-2">
              <Shield className="w-5 h-5 text-indigo-400" />
              <h3 className="text-sm font-bold text-indigo-400">BreakPilot COMPL<span className="text-purple-400">AI</span></h3>
            </div>
            <p className="text-xs text-white/50 mb-2">{de ? 'Verbindet beides' : 'Combines both'}</p>
            <p className="text-xs text-white/60 italic">
              {de
                ? '„Code gescannt, SBOM generiert, CRA gemappt, TOM aktualisiert, CE-Ordner fertig. Ein Tool."'
                : '"Code scanned, SBOM generated, CRA mapped, TOM updated, CE folder ready. One tool."'}
            </p>
          </GlassCard>

          <GlassCard delay={0.2} hover={false} className="p-4 border-t-2 border-t-cyan-500">
            <div className="flex items-center gap-2 mb-2">
              <FileText className="w-5 h-5 text-cyan-400" />
              <h3 className="text-sm font-bold text-cyan-400">{de ? 'Compliance' : 'Compliance'}</h3>
            </div>
            <p className="text-xs text-white/50 mb-2">{de ? 'DataGuard, Vanta, Drata' : 'DataGuard, Vanta, Drata'}</p>
            <p className="text-xs text-white/60 italic">
              {de
                ? '„Dokumentation fertig. Code sicher? Brauchen Sie ein anderes Tool."'
                : '"Documentation done. Code secure? You need a different tool."'}
            </p>
          </GlassCard>
        </div>
      </FadeInView>

      {/* 4 Phasen */}
      <FadeInView delay={0.25} className="mb-4">
        <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-3">
          {de ? 'Firmenaufbau in 4 Phasen' : 'Company Building in 4 Phases'}
        </h3>
        <div className="grid md:grid-cols-4 gap-3">
          {[
            {
              icon: Rocket, color: 'text-indigo-400', bg: 'bg-indigo-500/10 border-indigo-500/20',
              title: de ? 'Phase 1: Foundation' : 'Phase 1: Foundation',
              period: 'Aug 2026 – Jun 2027',
              team: de ? '5 Mitarbeiter' : '5 employees',
              arr: '75–150k EUR',
              items: de
                ? ['Security Engineer + CE-Risikoingenieur als erste Hires', '5 Pilotkunden im Maschinenbau', 'Gründer verkaufen selbst', 'Product-Market Fit beweisen']
                : ['Security Engineer + CE Risk Engineer as first hires', '5 pilot customers in manufacturing', 'Founders sell themselves', 'Prove product-market fit'],
            },
            {
              icon: Building2, color: 'text-purple-400', bg: 'bg-purple-500/10 border-purple-500/20',
              title: de ? 'Phase 2: Traction' : 'Phase 2: Traction',
              period: 'Jul 2027 – Jun 2028',
              team: de ? '10 Mitarbeiter' : '10 employees',
              arr: '0,5–1,2M EUR',
              items: de
                ? ['Channel Manager für Bechtle/CANCOM', 'DevSecOps + KI-Ingenieur', 'Lösungsberater für Partner-Demos', 'Wiederholbarer Vertriebsprozess']
                : ['Channel Manager for Bechtle/CANCOM', 'DevSecOps + AI engineer', 'Solutions engineer for partner demos', 'Repeatable sales process'],
            },
            {
              icon: Users, color: 'text-emerald-400', bg: 'bg-emerald-500/10 border-emerald-500/20',
              title: de ? 'Phase 3: Scale' : 'Phase 3: Scale',
              period: 'Jul 2028 – Jun 2029',
              team: de ? '17→25 Mitarbeiter' : '17→25 employees',
              arr: '2–4M EUR',
              items: de
                ? ['Erster Direktvertrieb neben Channel', 'Compliance-Jurist für Glaubwürdigkeit', 'Security-Analyst / Pentester', 'VP Sales übernimmt vom CEO']
                : ['First direct sales alongside channel', 'Compliance lawyer for credibility', 'Security analyst / pentester', 'VP Sales takes over from CEO'],
            },
            {
              icon: Globe, color: 'text-amber-400', bg: 'bg-amber-500/10 border-amber-500/20',
              title: de ? 'Phase 4: Leadership' : 'Phase 4: Leadership',
              period: 'Jul 2029 – Dez 2030',
              team: de ? '25→35 Mitarbeiter' : '25→35 employees',
              arr: '4–10M EUR',
              items: de
                ? ['EU-Expansion (AT, CH, Benelux)', 'Enterprise-Vertrieb', 'Developer Relations (Snyk-Modell)', 'Break-Even oder Series A']
                : ['EU expansion (AT, CH, Benelux)', 'Enterprise sales', 'Developer Relations (Snyk model)', 'Break-even or Series A'],
            },
          ].map((phase, idx) => {
            const Icon = phase.icon
            return (
              <GlassCard key={idx} delay={0.25 + idx * 0.05} hover={false} className={`p-3 ${phase.bg} border`}>
                <div className="flex items-center gap-2 mb-1">
                  <Icon className={`w-4 h-4 ${phase.color}`} />
                  <h4 className={`text-xs font-bold ${phase.color}`}>{phase.title}</h4>
                </div>
                <p className="text-[10px] text-white/30 mb-1">{phase.period}</p>
                <div className="flex justify-between text-[10px] mb-2">
                  <span className="text-white/50">{phase.team}</span>
                  <span className={`font-mono font-bold ${phase.color}`}>{phase.arr}</span>
                </div>
                <div className="space-y-1">
                  {phase.items.map((item, i) => (
                    <p key={i} className="text-[10px] text-white/60 pl-3 relative">
                      <span className={`absolute left-0 top-1 w-1.5 h-1.5 rounded-full ${phase.color.replace('text-', 'bg-')}/60`} />
                      {item}
                    </p>
                  ))}
                </div>
              </GlassCard>
            )
          })}
        </div>
      </FadeInView>

      {/* Channel-Strategie: Bechtle + CANCOM */}
      <FadeInView delay={0.5} className="mb-4">
        <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-3">
          {de ? 'Channel-Strategie: Zwei Wege zum Mittelstand' : 'Channel Strategy: Two Paths to the Mittelstand'}
        </h3>
        <div className="grid md:grid-cols-2 gap-3">
          <GlassCard delay={0.5} hover={false} className="p-4 border-t-2 border-t-blue-500">
            <div className="flex items-center justify-between mb-2">
              <h4 className="text-sm font-bold text-blue-400">CANCOM Cloud Marketplace</h4>
              <span className="text-[9px] bg-blue-500/20 text-blue-300 px-2 py-0.5 rounded-full">{de ? 'Schneller Einstieg' : 'Fast Entry'}</span>
            </div>
            <p className="text-[10px] text-white/40 mb-2">{de ? 'TecDAX · ~5.800 MA · 120+ SaaS-Produkte gelistet' : 'TecDAX · ~5,800 emp. · 120+ SaaS products listed'}</p>
            <div className="space-y-1.5">
              {(de ? [
                'Formales ISV-Partnerprogramm — strukturiertes Onboarding',
                'Cloud Marketplace: Produkt sofort national sichtbar',
                'Hunderte CANCOM-Vertriebsmitarbeiter verkaufen mit',
                'Timeline: 3-6 Monate bis zur Listung',
              ] : [
                'Formal ISV partner program — structured onboarding',
                'Cloud Marketplace: product immediately visible nationally',
                'Hundreds of CANCOM sales reps co-sell',
                'Timeline: 3-6 months to listing',
              ]).map((item, idx) => (
                <p key={idx} className="text-xs text-white/60 pl-3 relative">
                  <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-blue-400/60" />
                  {item}
                </p>
              ))}
            </div>
          </GlassCard>

          <GlassCard delay={0.55} hover={false} className="p-4 border-t-2 border-t-emerald-500">
            <div className="flex items-center justify-between mb-2">
              <h4 className="text-sm font-bold text-emerald-400">Bechtle Systemhäuser</h4>
              <span className="text-[9px] bg-emerald-500/20 text-emerald-300 px-2 py-0.5 rounded-full">{de ? 'Größte Reichweite' : 'Largest Reach'}</span>
            </div>
            <p className="text-[10px] text-white/40 mb-2">{de ? '15.000 MA · 85+ Standorte · 6,3 Mrd. EUR · 70.000 Kunden' : '15,000 emp. · 85+ locations · EUR 6.3B · 70,000 customers'}</p>
            <div className="space-y-1.5">
              {(de ? [
                'Regionaler Einstieg: Lokales Systemhaus wo wir Kunden haben',
                'Lokaler Champion evangelisiert intern bei Bechtle',
                'Nationale Listung nach Pilot-Erfolg (12-18 Monate)',
                'Größter IT-Dienstleister für den deutschen Mittelstand',
              ] : [
                'Regional entry: local system house where we have customers',
                'Local champion evangelizes internally at Bechtle',
                'National listing after pilot success (12-18 months)',
                'Largest IT service provider for German Mittelstand',
              ]).map((item, idx) => (
                <p key={idx} className="text-xs text-white/60 pl-3 relative">
                  <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-emerald-400/60" />
                  {item}
                </p>
              ))}
            </div>
          </GlassCard>
        </div>
      </FadeInView>

      {/* Channel-First Quote */}
      <FadeInView delay={0.6}>
        <div className="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 rounded-xl px-5 py-3 text-center">
          <p className="text-sm text-white/70">
            {de
              ? '„Direktvertrieb skaliert linear — jeder zusätzliche Vertriebsmitarbeiter bringt eine feste Anzahl Deals. Channel-Vertrieb skaliert exponentiell, weil die Partner ihre eigenen Teams auf unser Produkt schulen."'
              : '"Direct sales scales linearly — each additional salesperson brings a fixed number of deals. Channel sales scales exponentially because partners train their own teams on our product."'}
          </p>
        </div>
      </FadeInView>
    </div>
  )
}