'use client';

import { motion } from 'framer-motion';
import { Language } from '@/lib/types';
import GradientText from '../ui/GradientText';
import FadeInView from '../ui/FadeInView';

interface AppendixSlideProps {
  lang: Language;
}

export default function AppendixSlide({ lang }: AppendixSlideProps) {
  const content = {
    de: {
      title: 'Appendix',
      subtitle: 'Deep Dive — Technologie, Compliance & Strategie',
      detailInfo: '14 Detailfolien für Investoren',
    },
    en: {
      title: 'Appendix',
      subtitle: 'Deep Dive — Technology, Compliance & Strategy',
      detailInfo: '14 detail slides for investors',
    },
  };

  const t = content[lang];

  return (
    <div className="h-full flex items-center justify-center px-16">
      <FadeInView className="text-center max-w-4xl">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          <h1 className="text-7xl font-bold mb-8">
            <GradientText>{t.title}</GradientText>
          </h1>
        </motion.div>

        <motion.p
          className="text-2xl text-white/80 mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.4 }}
        >
          {t.subtitle}
        </motion.p>

        <motion.div
          className="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent mb-8"
          initial={{ scaleX: 0, opacity: 0 }}
          animate={{ scaleX: 1, opacity: 1 }}
          transition={{ duration: 0.8, delay: 0.6 }}
        />

        <motion.p
          className="text-sm text-white/50"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.8 }}
        >
          {t.detailInfo}
        </motion.p>
      </FadeInView>
    </div>
  );
}