'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import { Server, Container, ShieldOff, Calculator } from 'lucide-react'

interface AnnexInfraSlideProps {
  lang: Language
}

export default function AnnexInfraSlide({ lang }: AnnexInfraSlideProps) {
  const title = lang === 'de' ? 'Infrastruktur & Self-Hosting' : 'Infrastructure & Self-Hosting'
  const subtitle = lang === 'de' ? 'Warum wir auf eigene Hardware setzen' : 'Why we rely on our own hardware'

  const sections = [
    {
      icon: Server,
      title: 'Apple Silicon Hardware',
      items: [
        'Mac Mini M2 (Starter), Mac Mini M4 Pro (Business), Mac Studio M4 Max (Enterprise)',
        'Unified Memory: 16GB / 48GB / 128GB',
        'Neural Engine for ML inference'
      ]
    },
    {
      icon: Container,
      title: 'Docker Architecture',
      items: [
        '30+ Microservices in Docker Compose',
        'Automatic health monitoring',
        'Zero-downtime updates via rolling restarts'
      ]
    },
    {
      icon: ShieldOff,
      title: lang === 'de' ? 'Why No Cloud?' : 'Why No Cloud?',
      items: [
        lang === 'de' ? 'Data sovereignty: No data leaves the company' : 'Data sovereignty: No data leaves the company',
        lang === 'de' ? 'No recurring cloud costs (AWS/Azure)' : 'No recurring cloud costs (AWS/Azure)',
        lang === 'de' ? 'BSI-TR-03161 compliance easier on-premise' : 'BSI-TR-03161 compliance easier on-premise',
        lang === 'de' ? 'DSGVO Art. 28: No third-party processors' : 'DSGVO Art. 28: No third-party processors'
      ]
    },
    {
      icon: Calculator,
      title: 'Cost Comparison',
      items: [
        lang === 'de' ? 'Self-Hosted: EUR 599 hardware + EUR 149/mo' : 'Self-Hosted: EUR 599 hardware + EUR 149/mo',
        lang === 'de' ? 'Cloud equivalent: EUR 800-1200/mo (AWS)' : 'Cloud equivalent: EUR 800-1200/mo (AWS)',
        lang === 'de' ? 'Break-even after 4-5 months' : 'Break-even after 4-5 months',
        lang === 'de' ? '70% cheaper over 3 years' : '70% cheaper over 3 years'
      ]
    }
  ]

  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView delay={0}>
        <h2 className="text-4xl md:text-5xl font-bold text-center mb-4">
          <GradientText>{title}</GradientText>
        </h2>
        <p className="text-xl text-center text-white/60 mb-12">{subtitle}</p>
      </FadeInView>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {sections.map((section, idx) => {
          const Icon = section.icon
          return (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 + idx * 0.1 }}
              className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4"
            >
              <div className="flex items-start gap-3 mb-3">
                <div className="p-2 bg-purple-500/10 rounded-lg">
                  <Icon className="w-6 h-6 text-purple-400" />
                </div>
                <h3 className="text-xl font-semibold text-white mt-1">{section.title}</h3>
              </div>
              <ul className="space-y-2">
                {section.items.map((item, itemIdx) => (
                  <li key={itemIdx} className="text-white/70 text-sm leading-relaxed">
                    {item}
                  </li>
                ))}
              </ul>
            </motion.div>
          )
        })}
      </div>
    </div>
  )
}