"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, BarChart3, Clock, Shield } from "lucide-react"

const features = [
  {
    id: "dashboard",
    title: "Dashboard Administrativo",
    description: "Panel de control completo con métricas en tiempo real",
    icon: BarChart3,
    image: "/university-admin-dashboard.png",
    badge: "Más Popular",
  },
  {
    id: "attendance",
    title: "Control de Asistencia",
    description: "Registro intuitivo y seguimiento detallado de asistencia",
    icon: Clock,
    image: "/attendance-interface.png",
    badge: "Nuevo",
  },
  {
    id: "users",
    title: "Gestión de Usuarios",
    description: "Administración completa de estudiantes y docentes",
    icon: Users,
    image: "/user-management-interface.png",
    badge: null,
  },
  {
    id: "security",
    title: "Seguridad Avanzada",
    description: "Sistema de roles y permisos granulares",
    icon: Shield,
    image: "/security-settings-interface.png",
    badge: "Empresarial",
  },
]

export function FeatureShowcase() {
  const [activeFeature, setActiveFeature] = useState("dashboard")

  const currentFeature = features.find((f) => f.id === activeFeature) || features[0]

  return (
    <div className="grid lg:grid-cols-2 gap-12 items-center">
      <div className="space-y-6">
        <div className="space-y-4">
          {features.map((feature) => {
            const Icon = feature.icon
            const isActive = activeFeature === feature.id

            return (
              <Card
                key={feature.id}
                className={`cursor-pointer transition-all duration-300 hover:shadow-lg ${
                  isActive ? "ring-2 ring-primary shadow-lg" : ""
                }`}
                onClick={() => setActiveFeature(feature.id)}
              >
                <CardContent className="p-6">
                  <div className="flex items-start gap-4">
                    <div
                      className={`p-3 rounded-lg transition-colors ${
                        isActive ? "bg-primary text-primary-foreground" : "bg-muted"
                      }`}
                    >
                      <Icon className="w-6 h-6" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <h3 className="font-semibold text-lg">{feature.title}</h3>
                        {feature.badge && (
                          <Badge variant={isActive ? "default" : "secondary"} className="text-xs">
                            {feature.badge}
                          </Badge>
                        )}
                      </div>
                      <p className="text-muted-foreground">{feature.description}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>

      <div className="relative">
        <div className="relative overflow-hidden rounded-xl shadow-2xl bg-gradient-to-br from-primary/5 to-accent/5 p-1">
          <img
            src={currentFeature.image || "/placeholder.svg"}
            alt={currentFeature.title}
            className="w-full h-auto rounded-lg transition-all duration-500"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-lg" />
        </div>

        {/* Floating elements for visual appeal */}
        <div className="absolute -top-4 -right-4 w-20 h-20 bg-primary/10 rounded-full blur-xl animate-pulse" />
        <div className="absolute -bottom-4 -left-4 w-16 h-16 bg-accent/10 rounded-full blur-xl animate-pulse delay-1000" />
      </div>
    </div>
  )
}