import { motion, useReducedMotion } from "framer-motion";
import { Link } from "react-router-dom";
import { Construction, Brain, Wrench, Truck, Building2, ArrowRight } from "lucide-react";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { useSEO } from "@/hooks/use-seo";
import { trackCTAClick } from "@/lib/analytics";

const APP_URL = "https://app.licitaia.mx";

// Each sector links into the in-site tender search, prefilled with a
// representative query, so the visitor sees the tool return real results.
const featuredSectors = [
  {
    id: "obra-publica",
    icon: Construction,
    title: "Obra Pública e Infraestructura",
    href: "/buscador-licitaciones?q=construccion",
    description:
      "El mayor renglón del gasto público. Encuentra licitaciones de construcción, rehabilitación y mantenimiento de obra en todo el país.",
    examples: ["Construcción", "Rehabilitación", "Mantenimiento", "Infraestructura"],
  },
  {
    id: "servicios-profesionales",
    icon: Brain,
    title: "Servicios Profesionales, Científicos y Técnicos",
    href: "/buscador-licitaciones?q=auditoria",
    description:
      "Contratos de alto valor agregado donde tu especialización es la ventaja. Consultoría, auditoría, asesoría jurídica, ingeniería e investigación.",
    examples: ["Consultoría", "Auditoría", "Asesoría jurídica", "Ingeniería"],
  },
];

const otherSectors = [
  {
    id: "proveedores-bienes",
    icon: Wrench,
    title: "Proveedores de Bienes y Suministros",
    href: "/buscador-licitaciones?q=mobiliario",
    description:
      "Vende equipos, materiales, mobiliario, tecnología y papelería a las dependencias.",
  },
  {
    id: "servicios-generales",
    icon: Truck,
    title: "Servicios Generales y de Apoyo",
    href: "/buscador-licitaciones?q=limpieza",
    description:
      "Ofrece limpieza, vigilancia, logística, transporte y operación general.",
  },
  {
    id: "arrendamiento",
    icon: Building2,
    title: "Arrendamiento de Bienes y Servicios",
    href: "/buscador-licitaciones?q=arrendamiento",
    description:
      "Renta de vehículos, maquinaria, inmuebles y servicios especializados.",
  },
];

const MotionLink = motion(Link);

const CasosDeUso = () => {
  const reduce = useReducedMotion();
  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",
  });

  // Reveal-on-scroll that respects prefers-reduced-motion: when reduced, the
  // content is simply present (no transform), never gated on a transition.
  const reveal = (delay = 0) => ({
    initial: reduce ? false : { opacity: 0, y: 24 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true, margin: "-80px" },
    transition: { duration: 0.5, delay: reduce ? 0 : delay },
  });

  const trackSector = (title: string, destination: string) =>
    trackCTAClick({
      cta_text: `Sector: ${title}`,
      cta_location: "casos_de_uso_sector",
      cta_destination: destination,
    });

  return (
    <>
      {head}
      <Navigation />
      <main className="min-h-screen">
        {/* Hero */}
        <section className="pt-40 pb-14 text-center">
          <motion.div {...reveal()} className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 text-balance">
              Soluciones para cada tipo de contratación pública
            </h1>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
              Licita IA te ayuda a competir en los principales sectores del gasto
              público, optimizando tu estrategia y tus propuestas.
            </p>
          </motion.div>
        </section>

        {/* Sectores */}
        <section className="py-16 bg-[#F9FAFB] border-t border-[#E5E7EB]">
          <div className="container mx-auto px-4">
            <h2 className="sr-only">Sectores que pueden ganar licitaciones con Licita IA</h2>

            {/* Sectores destacados: mayor peso visual */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-5xl mx-auto">
              {featuredSectors.map((item, index) => (
                <MotionLink
                  key={item.id}
                  id={item.id}
                  to={item.href}
                  onClick={() => trackSector(item.title, item.href)}
                  aria-label={`Ver licitaciones de ${item.title} en Licita IA`}
                  className="group scroll-mt-36 flex flex-col bg-white rounded-xl border border-[#E5E7EB] p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:border-[#C7BFFF] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8B5CF6] focus-visible:ring-offset-2"
                  {...reveal(index * 0.08)}
                >
                  <div className="flex items-center justify-center w-14 h-14 rounded-lg bg-[#ede9fe] mb-5">
                    <item.icon className="w-7 h-7 text-[#8B5CF6]" />
                  </div>
                  <h3 className="text-2xl font-bold text-gray-900 mb-3 text-balance">
                    {item.title}
                  </h3>
                  <p className="text-gray-600 leading-relaxed mb-6">
                    {item.description}
                  </p>
                  <ul className="flex flex-wrap gap-2 mb-7">
                    {item.examples.map((ex) => (
                      <li
                        key={ex}
                        className="rounded-full bg-[#F9FAFB] border border-[#E5E7EB] text-gray-600 text-sm px-3 py-1"
                      >
                        {ex}
                      </li>
                    ))}
                  </ul>
                  <span className="mt-auto inline-flex items-center gap-1.5 font-semibold text-[#7C3AED]">
                    Ver licitaciones de este sector
                    <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
                  </span>
                </MotionLink>
              ))}
            </div>

            {/* Sectores complementarios: fila secundaria más compacta */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto mt-6">
              {otherSectors.map((item, index) => (
                <MotionLink
                  key={item.id}
                  id={item.id}
                  to={item.href}
                  onClick={() => trackSector(item.title, item.href)}
                  aria-label={`Ver licitaciones de ${item.title} en Licita IA`}
                  className="group scroll-mt-36 flex flex-col bg-white rounded-xl border border-[#E5E7EB] p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:border-[#C7BFFF] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8B5CF6] focus-visible:ring-offset-2"
                  {...reveal(index * 0.08)}
                >
                  <div className="flex items-center gap-3 mb-3">
                    <div className="flex items-center justify-center w-11 h-11 shrink-0 rounded-lg bg-[#ede9fe]">
                      <item.icon className="w-5 h-5 text-[#8B5CF6]" />
                    </div>
                    <h3 className="text-lg font-semibold text-gray-900 leading-snug">
                      {item.title}
                    </h3>
                  </div>
                  <p className="text-gray-600 text-sm leading-relaxed mb-5">
                    {item.description}
                  </p>
                  <span className="mt-auto inline-flex items-center gap-1.5 text-sm font-semibold text-[#7C3AED]">
                    Ver licitaciones
                    <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
                  </span>
                </MotionLink>
              ))}
            </div>
          </div>
        </section>

        {/* CTA final */}
        <section className="py-20 bg-[#ede9fe]">
          <motion.div
            {...reveal()}
            className="container mx-auto px-4 text-center"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6 text-balance">
              Empieza a competir en los sectores que más conoces
            </h2>
            <p className="text-lg text-gray-600 mb-8 max-w-xl mx-auto">
              Descubre licitaciones hechas para tu empresa.
            </p>
            <div className="flex justify-center">
              <a
                href={APP_URL}
                onClick={() =>
                  trackCTAClick({
                    cta_text: "Explorar oportunidades",
                    cta_location: "casos_de_uso_final_cta",
                    cta_destination: APP_URL,
                  })
                }
                className="bg-[#8B5CF6] hover:bg-[#7C3AED] transition-all duration-300 text-white text-lg font-semibold rounded-lg shadow-lg hover:-translate-y-1 px-8 py-5 inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7C3AED] focus-visible:ring-offset-2"
              >
                Explorar oportunidades
              </a>
            </div>
          </motion.div>
        </section>
      </main>
      <Footer />
    </>
  );
};

export default CasosDeUso;