'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import { Server, ScanLine, Bot } from 'lucide-react'
import GlassCard from '../ui/GlassCard'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import BrandName from '../ui/BrandName'

interface SolutionSlideProps {
  lang: Language
}

const icons = [Server, ScanLine, Bot]
const colors = ['from-blue-500 to-cyan-500', 'from-indigo-500 to-purple-500', 'from-purple-500 to-pink-500']

export default function SolutionSlide({ lang }: SolutionSlideProps) {
  const i = t(lang)
  const de = lang === 'de'

  return (
    <div>
      <FadeInView className="text-center mb-12">
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.solution.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">
          {i.solution.subtitle}
        </p>
      </FadeInView>

      <div className="grid md:grid-cols-3 gap-6">
        {i.solution.pillars.map((pillar, idx) => {
          const Icon = icons[idx]
          return (
            <motion.div
              key={idx}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.3 + idx * 0.2, duration: 0.5 }}
            >
              <GlassCard className="text-center h-full" delay={0}>
                <div className={`w-16 h-16 mx-auto mb-5 rounded-2xl bg-gradient-to-br ${colors[idx]}
                  flex items-center justify-center shadow-lg`}>
                  <Icon className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-3 text-white">{pillar.title}</h3>
                <p className="text-sm text-white/50 leading-relaxed">{pillar.desc}</p>
              </GlassCard>
            </motion.div>
          )
        })}
      </div>

      {/* Compliance Optimizer MOAT */}
      <FadeInView delay={0.8}>
        <div className="bg-gradient-to-r from-amber-500/10 to-indigo-500/10 border border-amber-500/20 rounded-xl px-5 py-3 mt-8 max-w-4xl mx-auto">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shrink-0">
              <Bot className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-sm font-bold text-amber-300">
                {de ? 'Compliance Optimizer — Nicht nur „erlaubt/verboten"' : 'Compliance Optimizer — Not just "allowed/forbidden"'}
              </p>
              <p className="text-xs text-white/50 leading-relaxed mt-0.5">
                {de
                  ? 'Unsere Plattform zeigt die maximal zulässige Ausgestaltung jedes KI-Use-Cases. Statt Einschränkung: optimale Ausnutzung des regulatorischen Raums — deterministisch, automatisiert und auditierbar.'
                  : 'Our platform shows the maximum permissible configuration of every AI use case. Instead of restriction: optimal utilization of the regulatory space — deterministic, automated and auditable.'}
              </p>
            </div>
          </div>
        </div>
      </FadeInView>
    </div>
  )
}