'use client'

import { motion } from 'framer-motion'
import { Linkedin, Github, ArrowUpRight } from 'lucide-react'
import { useApp } from '@/lib/context'
import SectionHeading from '@/components/ui/SectionHeading'
import FadeInView from '@/components/ui/FadeInView'

interface TeamMember {
  name: string
  roleDe: string
  roleEn: string
  bioDe: string
  bioEn: string
  equityPct: number
  expertise: string[]
  links: { type: 'linkedin' | 'github'; url: string }[]
  initials: string
  gradient: string
}

const team: TeamMember[] = [
  {
    name: 'Benjamin Bönisch',
    roleDe: 'CEO & Co-Founder',
    roleEn: 'CEO & Co-Founder',
    bioDe: 'Ehemaliger Lehrer mit Leidenschaft für EdTech und Datenschutz. Hat BreakPilot als DSGVO-konforme Bildungsplattform gegründet und zum Self-Hosted Compliance-Anbieter weiterentwickelt.',
    bioEn: 'Former teacher with a passion for EdTech and data privacy. Founded BreakPilot as a GDPR-compliant education platform and evolved it into a self-hosted compliance provider.',
    equityPct: 50,
    expertise: ['EdTech', 'DSGVO', 'Produktstrategie', 'Go-to-Market'],
    links: [
      { type: 'linkedin', url: 'https://linkedin.com/in/benjamin-boenisch' },
    ],
    initials: 'BB',
    gradient: 'from-accent-electric to-accent-indigo',
  },
  {
    name: 'Sharang Parnerkar',
    roleDe: 'CTO & Co-Founder',
    roleEn: 'CTO & Co-Founder',
    bioDe: 'Full-Stack-Ingenieur mit Expertise in KI/ML, Apple Silicon Optimierung und verteilten Systemen. Verantwortlich für die technische Architektur der ComplAI-Plattform.',
    bioEn: 'Full-stack engineer with expertise in AI/ML, Apple Silicon optimization, and distributed systems. Responsible for the technical architecture of the ComplAI platform.',
    equityPct: 50,
    expertise: ['AI/ML', 'Apple Silicon', 'Full-Stack', 'DevOps'],
    links: [
      { type: 'github', url: 'https://github.com/sharangp' },
    ],
    initials: 'SP',
    gradient: 'from-accent-indigo to-accent-purple',
  },
]

const headingContent = {
  de: {
    tag: 'TEAM',
    title: 'Die Menschen hinter',
    titleHighlight: 'BreakPilot.',
    subtitle: 'Gründer mit Domain-Expertise in Compliance, KI und Produktentwicklung.',
    equity: 'Equity',
    cta: 'Offene Positionen ansehen',
    hiring: 'Wir stellen ein',
    hiringText: 'BreakPilot wächst. Wir suchen Ingenieure, die regulatorische Komplexität als technisches Problem lösen wollen.',
    roles: ['Backend Engineer (Python/Go)', 'Regulatory Analyst', 'DevOps Engineer'],
  },
  en: {
    tag: 'TEAM',
    title: 'The people behind',
    titleHighlight: 'BreakPilot.',
    subtitle: 'Founders with domain expertise in compliance, AI and product development.',
    equity: 'Equity',
    cta: 'View open positions',
    hiring: "We're hiring",
    hiringText: 'BreakPilot is growing. We are looking for engineers who want to solve regulatory complexity as a technical problem.',
    roles: ['Backend Engineer (Python/Go)', 'Regulatory Analyst', 'DevOps Engineer'],
  },
}

const LinkIcons = { linkedin: Linkedin, github: Github }

export default function TeamSection() {
  const { lang } = useApp()
  const h = headingContent[lang]

  return (
    <section className="py-24 sm:py-32 pt-32">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          tag={h.tag}
          title={h.title}
          titleHighlight={h.titleHighlight}
          subtitle={h.subtitle}
        />

        <div className="grid md:grid-cols-2 gap-6 mb-16">
          {team.map((member, idx) => (
            <motion.div
              key={member.name}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.15, duration: 0.5 }}
              className="bg-white/[0.04] backdrop-blur-xl border border-white/[0.08] rounded-2xl p-6 flex flex-col hover:border-accent-electric/20 transition-colors"
            >
              {/* Header: avatar + name + role + equity */}
              <div className="flex items-center gap-4 mb-5">
                <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${member.gradient} flex items-center justify-center shrink-0 shadow-lg shadow-accent-electric/20`}>
                  <span className="text-xl font-bold text-white">{member.initials}</span>
                </div>

                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2 mb-0.5 flex-wrap">
                    <h3 className="text-xl font-bold text-white truncate">{member.name}</h3>
                    <div className="flex items-center gap-1.5">
                      {member.links.map((link) => {
                        const Icon = LinkIcons[link.type]
                        return (
                          <a
                            key={link.type}
                            href={link.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-white/25 hover:text-accent-electric transition-colors"
                          >
                            <Icon className="w-4 h-4" />
                          </a>
                        )
                      })}
                    </div>
                  </div>
                  <p className="text-accent-electric text-sm font-medium">
                    {lang === 'de' ? member.roleDe : member.roleEn}
                  </p>
                </div>

                {/* Equity pill */}
                <div className="text-right shrink-0">
                  <div className="text-[10px] uppercase tracking-wider text-white/30">{h.equity}</div>
                  <div className="text-base font-bold text-white tabular-nums">{member.equityPct}%</div>
                </div>
              </div>

              {/* Bio */}
              <p className="text-sm text-white/60 leading-relaxed mb-5 flex-1">
                {lang === 'de' ? member.bioDe : member.bioEn}
              </p>

              {/* Expertise tags */}
              <div className="flex flex-wrap gap-1.5 pt-4 border-t border-white/[0.06]">
                {member.expertise.map((skill) => (
                  <span
                    key={skill}
                    className="text-xs px-2.5 py-1 rounded-full bg-accent-electric/10 text-accent-electric/80 border border-accent-electric/15"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </motion.div>
          ))}
        </div>

        {/* Hiring CTA */}
        <FadeInView>
          <div className="rounded-2xl border border-accent-electric/15 bg-accent-electric/[0.04] p-8 text-center">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent-signal/10 border border-accent-signal/20 text-accent-signal text-xs font-medium mb-4">
              <span className="w-1.5 h-1.5 rounded-full bg-accent-signal animate-pulse" />
              {h.hiring}
            </div>
            <p className="text-sm text-white/50 max-w-lg mx-auto mb-6">
              {h.hiringText}
            </p>
            <div className="flex flex-wrap justify-center gap-2 mb-6">
              {h.roles.map((role) => (
                <span key={role} className="px-3 py-1.5 rounded-lg bg-white/[0.06] border border-white/[0.06] text-xs text-white/60 font-mono">
                  {role}
                </span>
              ))}
            </div>
            <a
              href="mailto:jobs@breakpilot.ai"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-accent-electric text-white text-sm font-medium hover:bg-blue-500 transition-colors glow-blue"
            >
              {h.cta}
              <ArrowUpRight className="w-4 h-4" />
            </a>
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
