import { motion } from "framer-motion";
import { Construction, Brain, Wrench, Truck, Building2 } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { useSEO } from "@/hooks/use-seo";

const useCase = [
  {
    id: "obra-publica",
    icon: Construction,
    title: "Obra Pública y Proyectos de Infraestructura",
    description: "Encuentra licitaciones para construcción, rehabilitación, mantenimiento y obras públicas en todo el país.",
  },
  {
    id: "servicios-profesionales",
    icon: Brain,
    title: "Servicios Profesionales, Científicos y Técnicos",
    description: "Descubre contratos de consultoría, auditoría, asesoría jurídica, ingeniería, investigación y más.",
  },
  {
    id: "proveedores-bienes",
    icon: Wrench,
    title: "Proveedores de Bienes y Suministros",
    description: "Licita para vender equipos, materiales, mobiliario, tecnología, papelería, y otros insumos a las dependencias.",
  },
  {
    id: "servicios-generales",
    icon: Truck,
    title: "Servicios Generales y de Apoyo",
    description: "Ofrece servicios de limpieza, vigilancia, logística, transporte, mantenimiento y operación general.",
  },
  {
    id: "arrendamiento",
    icon: Building2,
    title: "Arrendamiento de Bienes y Servicios",
    description: "Accede a oportunidades de renta de vehículos, maquinaria, inmuebles y servicios especializados.",
  },
];

const CasosDeUso = () => {
  const head = useSEO({
    title: "Casos de Uso - Sectores que pueden ganar licitaciones con IA",
    description: "Descubre cómo Licita IA ayuda a empresas de construcción, servicios profesionales, proveedores de bienes, servicios generales y arrendamiento a ganar licitaciones públicas en México.",
    url: "https://licitaia.mx/casos-de-uso",
    keywords: "casos de uso licitaciones, obra pública, servicios profesionales, proveedores gobierno, contrataciones públicas México",
  });
  
  return (
    <>
      {head}
      <Navigation />
      <div className="min-h-screen">
        <div className="pt-40 pb-16 text-center">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
            className="container mx-auto px-4"
          >
            <h1 className="text-4xl md:text-5xl font-bold text-dark mb-6">
              Soluciones para cada tipo de contratación pública
            </h1>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Licita IA te ayuda a competir en los principales sectores del gasto público, optimizando tu estrategia y tus propuestas.
            </p>
          </motion.div>
        </div>

        <div className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {useCase.map((item, index) => (
                <motion.div
                  key={index}
                  id={item.id}
                  className="scroll-mt-36"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <Card className="h-full hover:shadow-lg transition-shadow duration-300">
                    <CardContent className="p-6">
                      <item.icon className="w-12 h-12 text-primary mb-4" />
                      <h3 className="text-xl font-semibold mb-3 text-dark">
                        {item.title}
                      </h3>
                      <p className="text-gray-600">
                        {item.description}
                      </p>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </div>
        </div>

        <div className="py-20 bg-blue-50/50">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
            className="container mx-auto px-4 text-center"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-dark mb-6">
              Empieza a competir en los sectores que más conoces
            </h2>
            <p className="text-lg text-gray-600 mb-8">
              Descubre licitaciones hechas para tu empresa.
            </p>
            <div className="flex justify-center">
              <a 
                href="https://app.licitaia.mx"
                className="bg-[#8B5CF6] hover:bg-[#7C3AED] transition-all duration-300 text-white text-lg font-semibold rounded-lg shadow-lg transform hover:-translate-y-1 px-8 py-6 flex items-center justify-center"
              >
                Explorar oportunidades
              </a>
            </div>
          </motion.div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default CasosDeUso;