import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { 
  ArrowRight, 
  Smartphone, 
  Shield, 
  Car, 
  MapPin, 
  Utensils, 
  Building,
  Users,
  TrendingUp,
  Zap
} from "lucide-react";

const EcosystemSection = () => {
  const applications = [
    {
      id: "tourist",
      title: "App Turistas",
      description: "Explora, reserva y disfruta experiencias únicas con IA y realidad aumentada",
      icon: "🏖️",
      iconComponent: <Smartphone className="w-6 h-6" />,
      features: ["Mapas con IA", "Realidad Aumentada", "Reservas integradas", "Guías virtuales"],
      userType: "Viajeros",
      color: "primary",
      status: "live",
      users: "15K+"
    },
    {
      id: "politur", 
      title: "POLITUR",
      description: "Sistema de seguridad turística con geolocalización y respuesta rápida",
      icon: "👮‍♂️",
      iconComponent: <Shield className="w-6 h-6" />,
      features: ["Alertas en tiempo real", "Geolocalización", "Gestión de incidentes", "Comunicación directa"],
      userType: "Policía Turística",
      color: "destructive",
      status: "live",
      users: "500+"
    },
    {
      id: "taxi",
      title: "App Taxis",
      description: "Plataforma de transporte seguro con tarifas dinámicas y rutas optimizadas",
      icon: "🚕",
      iconComponent: <Car className="w-6 h-6" />,
      features: ["Rutas con IA", "Tarifas dinámicas", "Pagos integrados", "Calificaciones bidireccionales"],
      userType: "Conductores",
      color: "warning",
      status: "live", 
      users: "2K+"
    },
    {
      id: "guides",
      title: "Guías Turísticos",
      description: "Conecta con guías certificados para experiencias auténticas y personalizadas",
      icon: "🗺️",
      iconComponent: <MapPin className="w-6 h-6" />,
      features: ["Itinerarios personalizados", "Audio-guías", "Contenido multimedia", "Gestión de reservas"],
      userType: "Guías Profesionales",
      color: "success",
      status: "live",
      users: "800+"
    },
    {
      id: "restaurants",
      title: "Restaurantes POS",
      description: "Sistema completo de punto de venta con menús digitales e inventario",
      icon: "🍽️",
      iconComponent: <Utensils className="w-6 h-6" />,
      features: ["POS completo", "Menús digitales", "Gestión de inventario", "Reservas online"],
      userType: "Restaurantes",
      color: "secondary",
      status: "beta",
      users: "150+"
    },
    {
      id: "hotels",
      title: "Gestión Hotelera", 
      description: "Plataforma integral para hoteles con check-in digital y channel manager",
      icon: "🏨",
      iconComponent: <Building className="w-6 h-6" />,
      features: ["Check-in digital", "Channel manager", "Gestión de habitaciones", "CRM hotelero"],
      userType: "Hoteles",
      color: "primary",
      status: "beta",
      users: "75+"
    }
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "live":
        return <Badge className="bg-success text-success-foreground">En Vivo</Badge>;
      case "beta":
        return <Badge className="bg-warning text-warning-foreground">Beta</Badge>;
      default:
        return <Badge>Próximamente</Badge>;
    }
  };

  const getColorClasses = (color: string) => {
    switch (color) {
      case "primary":
        return "border-primary/20 hover:border-primary/40 bg-primary/5";
      case "secondary":
        return "border-secondary/20 hover:border-secondary/40 bg-secondary/5";
      case "success":
        return "border-success/20 hover:border-success/40 bg-success/5";
      case "warning":
        return "border-warning/20 hover:border-warning/40 bg-warning/5";
      case "destructive":
        return "border-destructive/20 hover:border-destructive/40 bg-destructive/5";
      default:
        return "border-border hover:border-border/60";
    }
  };

  return (
    <section style={{ backgroundColor: '#f8f4f3' }} className="py-20">{/* Karibeo original background */}
      <div className="max-w-7xl mx-auto px-4">
        {/* Section Header */}
        <div className="text-center mb-16">
          <div className="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
            Ecosistema Completo
          </div>
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Aplicaciones Integradas{" "}
            <span className="text-gradient">Para Todos</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Una plataforma única que conecta turistas, servicios y experiencias. 
            Descubre cómo cada aplicación trabaja en perfecta armonía.
          </p>
        </div>

        {/* Applications Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
          {applications.map((app, index) => (
            <Card 
              key={app.id} 
              className={`group relative overflow-hidden border-2 transition-all duration-300 hover:-translate-y-2 hover:shadow-strong ${getColorClasses(app.color)}`}
            >
              <div className="p-6">
                {/* Header */}
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <div className="text-4xl">{app.icon}</div>
                    <div>
                      <h3 className="text-xl font-bold">{app.title}</h3>
                      <p className="text-sm text-muted-foreground">{app.userType}</p>
                    </div>
                  </div>
                  {getStatusBadge(app.status)}
                </div>

                {/* Description */}
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  {app.description}
                </p>

                {/* Features List */}
                <div className="space-y-2 mb-6">
                  {app.features.map((feature, idx) => (
                    <div key={idx} className="flex items-center gap-2 text-sm">
                      <Zap className="w-3 h-3 text-primary" />
                      <span>{feature}</span>
                    </div>
                  ))}
                </div>

                {/* Stats */}
                <div className="flex items-center justify-between mb-6 p-3 bg-card rounded-lg border">
                  <div className="flex items-center gap-2">
                    <Users className="w-4 h-4 text-muted-foreground" />
                    <span className="text-sm text-muted-foreground">Usuarios</span>
                  </div>
                  <div className="text-lg font-bold text-primary">{app.users}</div>
                </div>

                {/* CTA */}
                <Button className="w-full group-hover:bg-primary-dark transition-colors">
                  Explorar App
                  <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                </Button>
              </div>

              {/* Hover Effect Decoration */}
              <div className="absolute top-0 right-0 w-20 h-20 bg-primary/10 rounded-full -translate-y-10 translate-x-10 group-hover:translate-y-0 group-hover:translate-x-0 transition-transform duration-500"></div>
            </Card>
          ))}
        </div>

        {/* Integration Benefits */}
        <div className="bg-card rounded-2xl p-8 md:p-12">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold mb-4">
              La Potencia de la{" "}
              <span className="text-secondary-gradient">Integración</span>
            </h3>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Todas nuestras aplicaciones trabajan juntas para crear una experiencia turística sin igual.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <TrendingUp className="w-8 h-8 text-primary" />
              </div>
              <h4 className="text-xl font-semibold mb-3">Datos Unificados</h4>
              <p className="text-muted-foreground">
                Toda la información de tu viaje en un solo lugar. Reservas, pagos y experiencias sincronizados.
              </p>
            </div>

            <div className="text-center">
              <div className="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Shield className="w-8 h-8 text-secondary" />
              </div>
              <h4 className="text-xl font-semibold mb-3">Seguridad Total</h4>
              <p className="text-muted-foreground">
                POLITUR integrado en tiempo real. Tu seguridad es nuestra prioridad en cada paso del viaje.
              </p>
            </div>

            <div className="text-center">
              <div className="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Zap className="w-8 h-8 text-success" />
              </div>
              <h4 className="text-xl font-semibold mb-3">Experiencia Fluida</h4>
              <p className="text-muted-foreground">
                Sin fricciones entre servicios. Una experiencia continua desde la llegada hasta la partida.
              </p>
            </div>
          </div>

          <div className="text-center mt-12">
            <Button size="lg" className="btn-hero text-lg px-8 py-4">
              Comenzar con el Ecosistema Completo
              <ArrowRight className="w-5 h-5 ml-3" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default EcosystemSection;