'use client'

import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { MessageSquare, BookOpen, LifeBuoy, ExternalLink } from 'lucide-react'

interface WorkspaceItem {
  id: string
  title: string
  subtitle: string
  hoverText: string
  icon: React.ElementType
  link: string
}

const workspaceItems: WorkspaceItem[] = [
  {
    id: 'zulip',
    title: 'Zulip Chat',
    subtitle: 'Treten Sie unserem Partner-Chat bei!',
    hoverText: 'Tauschen Sie sich direkt und unkompliziert mit anderen CASPOS Partnern aus.',
    icon: MessageSquare,
    link: 'https://caspos.zulipchat.com'
  },
  {
    id: 'wiki',
    title: 'CASPOS Wiki',
    subtitle: 'Ihr Wissens-Portal...',
    hoverText: '...für die gesamte CASPOS Produktfamilie. Hier finden Sie alle technischen Dokumentationen.',
    icon: BookOpen,
    link: 'https://wiki.caspos.de'
  },
  {
    id: 'support',
    title: 'Support Portal',
    subtitle: 'Sie haben ein technisches Problem?',
    hoverText: 'Erstellen Sie jetzt ein Ticket in der CASPOS, damit sich unsere Experten darum kümmern.',
    icon: LifeBuoy,
    link: 'https://support.caspos.de'
  }
]

export function WorkspaceZentrale() {
  const [hoveredId, setHoveredId] = useState<string | null>(null)

  return (
    <section className="w-full py-12 px-4 relative z-10">
      <div className="container max-w-6xl mx-auto space-y-6">
        <div className="text-center space-y-2">
          <h2 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            Workspace Zentrale
          </h2>
        </div>

        {/* 3-Spalten Grid mit fester Kartenhöhe */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {workspaceItems.map((item) => {
            const Icon = item.icon
            const isHovered = hoveredId === item.id

            return (
              <motion.a
                key={item.id}
                href={item.link}
                target="_blank"
                rel="noopener noreferrer"
                whileHover={{ y: -4 }}
                onMouseEnter={() => setHoveredId(item.id)}
                onMouseLeave={() => setHoveredId(null)}
                className={`group relative p-6 rounded-2xl border transition-all duration-300 backdrop-blur-md flex flex-col justify-between h-[210px] overflow-hidden cursor-pointer ${
                  isHovered
                    ? 'border-sky-500 bg-slate-900/90 shadow-[0_0_25px_rgba(14,165,233,0.2)]'
                    : 'border-slate-800 bg-slate-900/60'
                }`}
              >
                <div className="space-y-3">
                  {/* Header: Icon & Link */}
                  <div className="flex items-center justify-between">
                    <div
                      className={`p-3 rounded-xl border transition-all duration-300 ${
                        isHovered
                          ? 'bg-sky-500/20 border-sky-500/50 text-sky-300'
                          : 'bg-slate-800/60 border-slate-700/50 text-slate-400'
                      }`}
                    >
                      <Icon className="w-6 h-6" />
                    </div>
                    <ExternalLink
                      className={`w-4 h-4 transition-all duration-300 ${
                        isHovered
                          ? 'text-sky-400 translate-x-0.5 -translate-y-0.5'
                          : 'text-slate-600'
                      }`}
                    />
                  </div>

                  {/* Title */}
                  <h3 className="text-lg font-bold text-white group-hover:text-sky-300 transition-colors">
                    {item.title}
                  </h3>

                  {/* Subtitle / Hover-Text Überblendung ohne Höhenänderung */}
                  <div className="relative h-[48px] overflow-hidden">
                    <p
                      className={`text-sm text-slate-300 font-medium transition-all duration-300 absolute inset-0 ${
                        isHovered ? 'opacity-0 translate-y-[-8px]' : 'opacity-100 translate-y-0'
                      }`}
                    >
                      {item.subtitle}
                    </p>
                    <p
                      className={`text-xs text-slate-400 leading-relaxed transition-all duration-300 absolute inset-0 ${
                        isHovered ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-[8px]'
                      }`}
                    >
                      {item.hoverText}
                    </p>
                  </div>
                </div>

                {/* Subtile Hover-Linie unten */}
                <div className={`w-full h-0.5 rounded-full transition-all duration-300 ${
                  isHovered ? 'bg-sky-500/80 shadow-[0_0_8px_rgba(14,165,233,0.8)]' : 'bg-transparent'
                }`} />
              </motion.a>
            )
          })}
        </div>
      </div>
    </section>
  )
}