'use client'

import { motion } from 'framer-motion'
import { Language, PitchTeamMember } from '@/lib/types'
import { t } from '@/lib/i18n'
import { User, Linkedin } from 'lucide-react'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import Image from 'next/image'

interface TeamSlideProps {
  lang: Language
  team: PitchTeamMember[]
}

export default function TeamSlide({ lang, team }: TeamSlideProps) {
  const i = t(lang)

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

      <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        {team.map((member, idx) => (
          <motion.div
            key={member.id}
            initial={{ opacity: 0, x: idx === 0 ? -40 : 40 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.3 + idx * 0.2, duration: 0.6 }}
            className="bg-white/[0.08] backdrop-blur-xl border border-white/10 rounded-3xl p-8"
          >
            <div className="flex items-start gap-5">
              {/* Avatar — Foto oder Fallback */}
              {member.photo_url ? (
                <div className="w-20 h-20 rounded-2xl overflow-hidden shrink-0 shadow-lg">
                  <Image
                    src={member.photo_url}
                    alt={member.name}
                    width={80}
                    height={80}
                    className="w-full h-full object-cover"
                  />
                </div>
              ) : (
                <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600
                  flex items-center justify-center shrink-0 shadow-lg">
                  <User className="w-10 h-10 text-white" />
                </div>
              )}

              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-xl font-bold text-white">{member.name}</h3>
                  {member.linkedin_url && (
                    <a
                      href={member.linkedin_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="p-1 text-white/30 hover:text-[#0A66C2] transition-colors"
                      title="LinkedIn"
                    >
                      <Linkedin className="w-4 h-4" />
                    </a>
                  )}
                </div>
                <p className="text-indigo-400 text-sm font-medium mb-3">
                  {lang === 'de' ? member.role_de : member.role_en}
                </p>
                <p className="text-sm text-white/50 leading-relaxed mb-4">
                  {lang === 'de' ? member.bio_de : member.bio_en}
                </p>

                {/* Equity */}
                <div className="flex items-center gap-2 mb-3">
                  <span className="text-xs text-white/40">{i.team.equity}:</span>
                  <span className="text-sm font-bold text-white">{member.equity_pct}%</span>
                </div>

                {/* Expertise Tags */}
                <div className="flex flex-wrap gap-1.5">
                  {(member.expertise || []).map((skill, sidx) => (
                    <span
                      key={sidx}
                      className="text-xs px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20"
                    >
                      {skill}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  )
}