import Link from "next/link";
import { KontiaMark } from "@/components/app/kontia-mark";

type Pillar = {
  title: string;
  tag: string;
  description: string;
  bullets: string[];
  iconLabel: string;
  topBorderColor: string;
  tagClassName: string;
  dotClassName: string;
  iconWrapperClassName: string;
  iconLabelClassName: string;
};

type ModuleCard = {
  module: string;
  title: string;
  description: string;
  track: "RADAR" | "CRECE" | "INDICE";
  plan: string;
  available: boolean;
  iconLabel: string;
};

const pillars: Pillar[] = [
  {
    title: "Radar de Contratacion con Proposito",
    tag: "DIAGNOSTICO",
    description: "Evalua el punto de partida de tu empresa en 5 dimensiones estrategicas.",
    bullets: [
      "Evaluacion de liderazgo y vision estrategica",
      "Analisis de cultura organizacional",
      "Revision de procesos internos",
      "Medicion de capacidad de innovacion",
      "Evaluacion de impacto social y territorial",
    ],
    iconLabel: "R",
    topBorderColor: "border-t-[#203f82]",
    tagClassName: "bg-[#1f3d7a] text-white",
    dotClassName: "bg-[#214183]",
    iconWrapperClassName: "bg-[#bac3d0]",
    iconLabelClassName: "text-[#1f3f80]",
  },
  {
    title: "Programa CRECE",
    tag: "ACOMPANAMIENTO",
    description: "Ruta progresiva de fortalecimiento con capacitacion y rediseno de procesos.",
    bullets: [
      "Capacitacion estrategica personalizada",
      "Rediseno de procesos internos",
      "Acompanamiento practico continuo",
      "Preparacion para licitaciones",
      "Integracion a cadenas de valor",
    ],
    iconLabel: "C",
    topBorderColor: "border-t-[#2eb280]",
    tagClassName: "bg-[#24aa77] text-white",
    dotClassName: "bg-[#2aad7e]",
    iconWrapperClassName: "bg-[#c2e3d8]",
    iconLabelClassName: "text-[#24a977]",
  },
  {
    title: "Indice de Madurez Estrategica",
    tag: "MEDICION",
    description: "Mide avances en el tiempo y compara diagnostico inicial vs evolucion.",
    bullets: [
      "Seguimiento de avances en tiempo real",
      "Comparativa diagnostico vs evolucion",
      "Clasificacion de madurez progresiva",
      "Reportes de progreso detallados",
      "Certificacion de nivel alcanzado",
    ],
    iconLabel: "I",
    topBorderColor: "border-t-[#e2b420]",
    tagClassName: "bg-[#dfb21a] text-[#1a2238]",
    dotClassName: "bg-[#ddb022]",
    iconWrapperClassName: "bg-[#ece0be]",
    iconLabelClassName: "text-[#d9a706]",
  },
];

const modules: ModuleCard[] = [
  {
    module: "Modulo 01",
    title: "Registro Inteligente y Diagnostico Estrategico Inicial",
    description: "Onboarding guiado para capturar datos clave y construir tu punto de partida.",
    track: "RADAR",
    plan: "GRATIS",
    available: true,
    iconLabel: "01",
  },
  {
    module: "Modulo 02",
    title: "Diagnostico Estrategico Avanzado de Valor Publico",
    description: "Evaluacion profunda de dimensiones RADAR para identificar fortalezas.",
    track: "RADAR",
    plan: "Plan 1",
    available: true,
    iconLabel: "02",
  },
  {
    module: "Modulo 03",
    title: "Deteccion Inteligente de Oportunidades de Licitacion",
    description: "Busqueda con IA para detectar oportunidades alineadas a tu perfil.",
    track: "CRECE",
    plan: "Plan 1",
    available: true,
    iconLabel: "03",
  },
  {
    module: "Modulo 04",
    title: "Normatividad Actualizada en Contratacion Publica",
    description: "Base de conocimiento explicada en lenguaje claro para tomar decisiones.",
    track: "CRECE",
    plan: "Plan 1",
    available: true,
    iconLabel: "04",
  },
  {
    module: "Modulo 05",
    title: "Gestion Integral de Licitaciones",
    description: "Herramienta para preparar, revisar y enviar propuestas con checklist.",
    track: "CRECE",
    plan: "Plan 2",
    available: false,
    iconLabel: "05",
  },
  {
    module: "Modulo 06",
    title: "Detector de Candados y Riesgos en Licitaciones",
    description: "Analisis automatico de bases para identificar requisitos excluyentes.",
    track: "CRECE",
    plan: "Plan 2",
    available: false,
    iconLabel: "06",
  },
  {
    module: "Modulo 07",
    title: "Alertas de Cumplimiento Normativo y Seguimiento",
    description: "Sistema de notificaciones sobre plazos, documentos y cambios normativos.",
    track: "INDICE",
    plan: "Plan 2",
    available: false,
    iconLabel: "07",
  },
  {
    module: "Modulo 08",
    title: "Gestion Estrategica de Contratos",
    description: "Dashboard para administrar contratos activos, entregables y obligaciones.",
    track: "INDICE",
    plan: "Plan 3",
    available: false,
    iconLabel: "08",
  },
  {
    module: "Modulo 09",
    title: "Proteccion Legal ante Incumplimientos Contractuales",
    description: "Guia legal y plantillas para responder ante riesgos de incumplimiento.",
    track: "CRECE",
    plan: "Plan 3",
    available: false,
    iconLabel: "09",
  },
  {
    module: "Modulo 10",
    title: "Simulador de Auditorias y Revision Preventiva",
    description: "Herramienta de autoevaluacion para auditorias y revisiones gubernamentales.",
    track: "INDICE",
    plan: "Plan 3",
    available: false,
    iconLabel: "10",
  },
];

const trackColorClass: Record<ModuleCard["track"], string> = {
  RADAR: "text-[#28498d] bg-[#d8dfef]",
  CRECE: "text-[#28a877] bg-[#d8eee5]",
  INDICE: "text-[#946f00] bg-[#efe5c5]",
};

const maturityStages = [
  {
    name: "Inicial",
    text: "Empresa comenzando su camino hacia la contratacion publica.",
    checks: [
      "Procesos basicos documentados",
      "Conocimiento limitado de normativa",
      "Sin experiencia en licitaciones",
      "Estructura organizacional basica",
    ],
    chip: "bg-[#dee3ee] text-[#8192ad]",
  },
  {
    name: "En Desarrollo",
    text: "Construyendo capacidades y adquiriendo experiencia competitiva.",
    checks: [
      "Procesos en mejora continua",
      "Capacitacion en normativa activa",
      "Primeras participaciones en licitaciones",
      "Equipo con roles definidos",
    ],
    chip: "bg-[#d2e8f4] text-[#289ad7]",
  },
  {
    name: "Avanzado",
    text: "Listo para competir efectivamente en contratacion publica.",
    checks: [
      "Procesos optimizados y certificados",
      "Dominio de normativa vigente",
      "Historial de contratos exitosos",
      "Cultura de innovacion establecida",
    ],
    chip: "bg-[#d8ebe5] text-[#23a676]",
  },
  {
    name: "Lider",
    text: "Referente del sector con impacto territorial demostrado.",
    checks: [
      "Excelencia operacional reconocida",
      "Contribucion al desarrollo normativo",
      "Mentoria para otras MiPYMEs",
      "Impacto social medible",
    ],
    chip: "bg-[#f0e5c2] text-[#9c7a0d]",
  },
];

export default function HomePage() {
  return (
    <div className="min-h-screen bg-[#eff2f7] text-[#1a2a47]">
      <header className="sticky top-0 z-40 border-b border-[#d8dde7] bg-[#eff2f7]/90 backdrop-blur">
        <div className="mx-auto flex w-full max-w-[1500px] items-center justify-between px-4 py-4 md:px-8">
          <Link href="/">
            <KontiaMark />
          </Link>

          <nav className="hidden items-center gap-10 text-base font-medium text-[#4f5f7d] md:flex">
            <a href="#metodologia" className="transition-colors hover:text-[#1a2f63]">
              Metodologia
            </a>
            <a href="#modulos" className="transition-colors hover:text-[#1a2f63]">
              Modulos
            </a>
            <a href="#beneficios" className="transition-colors hover:text-[#1a2f63]">
              Beneficios
            </a>
            <a href="#contacto" className="transition-colors hover:text-[#1a2f63]">
              Contacto
            </a>
          </nav>

          <div className="flex items-center gap-2 md:gap-4">
            <Link
              href="/login"
              className="rounded-xl px-3 py-2 text-sm font-semibold text-[#0f1f3f] transition-colors hover:text-[#223d79] md:px-4 md:text-base"
            >
              Iniciar Sesion
            </Link>
            <Link
              href="/register"
              className="rounded-2xl bg-[#1c3773] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#1f438d] md:px-6 md:py-3 md:text-base"
            >
              Comenzar Gratis
            </Link>
          </div>
        </div>
      </header>

      <main>
        <section className="border-b border-[#dde3ee]">
          <div className="mx-auto grid w-full max-w-[1500px] gap-8 px-4 py-10 md:grid-cols-[1.18fr_0.82fr] md:px-8 md:py-12">
            <div>
              <span className="inline-flex items-center gap-2 rounded-full border border-[#b8e0d3] bg-[#dff3eb] px-6 py-2 text-sm font-semibold text-[#2c9a76] md:text-base">
                <span className="h-2.5 w-2.5 rounded-full bg-[#48b995]" />
                Plataforma GovTech para MiPYMEs
              </span>

              <h1 className="mt-6 text-4xl font-bold leading-[0.95] text-[#101d3a] [font-family:var(--font-display)] md:max-w-[860px] md:text-[64px] md:tracking-[-0.02em]">
                Transforma tu empresa para{" "}
                <span className="bg-gradient-to-r from-[#24468e] via-[#30638f] to-[#2ea181] bg-clip-text text-transparent">
                  competir y ganar
                </span>{" "}
                en contratacion publica
              </h1>

              <p className="mt-5 max-w-[760px] text-base leading-relaxed text-[#4f6183] md:text-[19px] md:leading-[1.45]">
                KONTIA fortalece tu MiPYME de forma integral: diagnostico estrategico, acompanamiento personalizado y
                herramientas para participar exitosamente en licitaciones publicas.
              </p>

              <div className="mt-6 flex flex-wrap gap-3 md:gap-4">
                <Link
                  href="/register"
                  className="inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-[#1f3f83] to-[#21a47b] px-6 py-4 text-base font-semibold text-white shadow-[0_8px_20px_rgba(31,63,131,0.25)] transition-transform hover:-translate-y-0.5 md:min-w-[320px] md:text-[18px]"
                >
                  Diagnostica tu empresa gratis
                </Link>
                <a
                  href="#planes"
                  className="inline-flex items-center justify-center rounded-2xl border border-[#cad2df] bg-white px-6 py-4 text-base font-semibold text-[#12203f] transition-colors hover:border-[#9fb2d2] hover:text-[#1e3976] md:min-w-[230px] md:text-[18px]"
                >
                  Ver demostracion
                </a>
              </div>

              <div className="mt-6 grid gap-4 border-t border-[#d9dfeb] pt-5 sm:grid-cols-3">
                <div>
                  <p className="text-4xl font-extrabold text-[#0f1f3f] md:text-[42px]">500+</p>
                  <p className="mt-1 text-base text-[#5e7090] md:text-[17px]">MiPYMEs fortalecidas</p>
                </div>
                <div>
                  <p className="text-4xl font-extrabold text-[#0f1f3f] md:text-[42px]">$2.5M</p>
                  <p className="mt-1 text-base text-[#5e7090] md:text-[17px]">En contratos ganados</p>
                </div>
                <div>
                  <p className="text-4xl font-extrabold text-[#0f1f3f] md:text-[42px]">95%</p>
                  <p className="mt-1 text-base text-[#5e7090] md:text-[17px]">Tasa de satisfaccion</p>
                </div>
              </div>
            </div>

            <div className="relative self-center">
              <div className="absolute -top-3 right-0 rounded-2xl border border-[#d9dee8] bg-white px-4 py-3 text-base font-semibold text-[#203150] shadow-lg md:right-7 md:text-[16px]">
                Proteccion Legal
              </div>

              <article className="rounded-3xl border border-[#dde3ee] bg-white p-7 shadow-[0_20px_38px_rgba(64,81,119,0.12)] md:min-h-[520px] md:p-10">
                <h3 className="text-center text-3xl font-semibold text-[#122143] [font-family:var(--font-display)] md:text-[44px]">
                  Radar de Contratacion
                </h3>
                <p className="mt-2 text-center text-base text-[#5b6f8f] md:text-[17px]">
                  Evaluacion de las 5 dimensiones clave
                </p>

                <div className="mt-7 flex justify-center">
                  <svg viewBox="0 0 300 250" className="h-[240px] w-[290px] md:h-[250px] md:w-[290px]">
                    <polygon points="150,35 245,102 210,213 90,213 55,102" fill="none" stroke="#d6ddeb" strokeWidth="2" />
                    <polygon points="150,65 215,112 191,187 109,187 84,112" fill="none" stroke="#d6ddeb" strokeWidth="2" />
                    <polygon points="150,95 185,122 173,160 127,160 115,122" fill="none" stroke="#d6ddeb" strokeWidth="2" />
                    <polygon points="150,75 204,116 188,176 112,176 95,116" fill="#9fd1f5" fillOpacity="0.34" stroke="#25a580" strokeWidth="3" />
                    <line x1="150" y1="15" x2="150" y2="220" stroke="#d8deea" />
                    <line x1="35" y1="102" x2="260" y2="102" stroke="#d8deea" />
                    <line x1="75" y1="215" x2="220" y2="35" stroke="#d8deea" />
                    <line x1="80" y1="35" x2="225" y2="215" stroke="#d8deea" />
                    <circle cx="150" cy="75" r="7" fill="#26b286" />
                    <circle cx="204" cy="116" r="7" fill="#26b286" />
                    <circle cx="188" cy="176" r="7" fill="#26b286" />
                    <circle cx="112" cy="176" r="7" fill="#26b286" />
                    <circle cx="95" cy="116" r="7" fill="#26b286" />
                    <text x="140" y="26" fill="#3c4f72" fontSize="14">
                      Liderazgo
                    </text>
                    <text x="232" y="110" fill="#3c4f72" fontSize="14">
                      Cultura
                    </text>
                    <text x="199" y="233" fill="#3c4f72" fontSize="14">
                      Procesos
                    </text>
                    <text x="39" y="233" fill="#3c4f72" fontSize="14">
                      Innovacion
                    </text>
                    <text x="6" y="110" fill="#3c4f72" fontSize="14">
                      Impacto
                    </text>
                  </svg>
                </div>

                <div className="mt-3 flex items-center justify-between gap-3">
                  <span className="rounded-full border border-[#d5e8df] bg-[#dff3ea] px-5 py-2 text-sm font-semibold text-[#28a77a] md:text-[16px]">
                    Nivel Avanzado
                  </span>
                  <span className="rounded-2xl border border-[#d8dfeb] bg-white px-4 py-3 text-sm font-semibold text-[#314465] md:text-[16px]">
                    +45% Madurez
                  </span>
                </div>
              </article>
            </div>
          </div>
        </section>

        <section id="metodologia" className="mx-auto w-full max-w-[1400px] px-4 py-20 md:px-8">
          <p className="text-center text-base font-bold tracking-[0.18em] text-[#23a777]">METODOLOGIA KONTIA</p>
          <h2 className="mt-4 text-center text-4xl leading-tight text-[#102042] [font-family:var(--font-display)] md:text-[56px]">
            Tres pilares para tu transformacion{" "}
            <span className="bg-gradient-to-r from-[#25498e] to-[#2ca47f] bg-clip-text text-transparent">empresarial</span>
          </h2>
          <p className="mx-auto mt-6 max-w-4xl text-center text-lg leading-relaxed text-[#576c8e] md:text-xl md:leading-relaxed">
            Un modelo holistico que diagnostica, acompana y mide tu progreso hacia la excelencia en contratacion publica
            estrategica.
          </p>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {pillars.map((pillar) => (
              <article
                key={pillar.title}
                className={`rounded-3xl border border-[#dbe2ed] bg-white p-6 shadow-[0_10px_28px_rgba(65,82,120,0.12)] ${pillar.topBorderColor} border-t-8`}
              >
                <div className="flex items-start justify-between gap-4">
                  <span className={`inline-flex h-14 w-14 items-center justify-center rounded-2xl text-lg font-bold ${pillar.iconWrapperClassName} ${pillar.iconLabelClassName}`}>
                    {pillar.iconLabel}
                  </span>
                  <span className={`rounded-full px-4 py-2 text-sm font-bold ${pillar.tagClassName}`}>{pillar.tag}</span>
                </div>
                <h3 className="mt-5 text-3xl leading-tight text-[#172542] [font-family:var(--font-display)] md:text-[32px]">
                  {pillar.title}
                </h3>
                <p className="mt-4 text-base leading-relaxed text-[#5f7293] md:text-lg md:leading-relaxed">{pillar.description}</p>
                <ul className="mt-5 space-y-3 text-base text-[#596f92] md:text-[17px] md:leading-[1.55]">
                  {pillar.bullets.map((item) => (
                    <li key={item} className="flex items-start gap-3">
                      <span className={`mt-2 inline-block h-2.5 w-2.5 rounded-full ${pillar.dotClassName}`} />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </section>

        <section id="modulos" className="border-y border-[#dce2ec] bg-[#ecf1f7] py-20">
          <div className="mx-auto w-full max-w-[1400px] px-4 md:px-8">
            <p className="text-center text-base font-bold tracking-[0.18em] text-[#24a778]">FUNCIONALIDADES COMPLETAS</p>
            <h2 className="mt-4 text-center text-4xl leading-tight text-[#112245] [font-family:var(--font-display)] md:text-[56px]">
              10 modulos disenados para tu exito{" "}
              <span className="bg-gradient-to-r from-[#25498d] to-[#2ba57f] bg-clip-text text-transparent">integral</span>
            </h2>
            <p className="mx-auto mt-6 max-w-4xl text-center text-lg leading-relaxed text-[#586c8c] md:text-xl md:leading-relaxed">
              Desde el diagnostico inicial hasta la gestion de contratos, KONTIA te acompana en cada etapa.
            </p>

            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-base font-medium text-[#4a5f84] md:text-[17px]">
              <span className="inline-flex items-center gap-2">
                <span className="h-4 w-4 rounded-full bg-[#24488c]" />
                RADAR - Diagnostico
              </span>
              <span className="inline-flex items-center gap-2">
                <span className="h-4 w-4 rounded-full bg-[#2ba67b]" />
                CRECE - Acompanamiento
              </span>
              <span className="inline-flex items-center gap-2">
                <span className="h-4 w-4 rounded-full bg-[#e0b51f]" />
                INDICE - Medicion
              </span>
            </div>

            <div className="mt-6 flex flex-wrap justify-center gap-3 text-sm font-semibold md:text-base">
              <span className="rounded-full border border-[#abdbc5] bg-[#dff4e9] px-4 py-2 text-[#269f75]">GRATIS Modulo 1</span>
              <span className="rounded-full border border-[#b8d0ef] bg-[#dce6f8] px-4 py-2 text-[#2f5eda]">Plan 1 Modulos 2-4</span>
              <span className="rounded-full border border-[#d2beee] bg-[#e8ddf6] px-4 py-2 text-[#8444d0]">Plan 2 Modulos 5-7</span>
              <span className="rounded-full border border-[#e0cc9e] bg-[#f4ead4] px-4 py-2 text-[#d2840d]">Plan 3 Modulos 8-10</span>
            </div>

            <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
              {modules.map((module) => (
                <article
                  key={module.module}
                  className="rounded-3xl border border-[#dbe2ed] bg-white p-6 shadow-[0_8px_22px_rgba(61,78,117,0.11)] transition-transform hover:-translate-y-1"
                >
                  <div className="flex items-start justify-between gap-2">
                    <span className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-[#dde6ef] text-sm font-bold text-[#345081]">
                      {module.iconLabel}
                    </span>
                    <span className={`rounded-full px-3 py-1 text-sm font-bold ${trackColorClass[module.track]}`}>
                      {module.plan} {module.track}
                    </span>
                  </div>
                  <p className="mt-5 text-lg font-semibold text-[#7486a3] md:text-xl">{module.module}</p>
                  <h3 className="mt-2 text-2xl leading-tight text-[#1a2845] [font-family:var(--font-display)] md:text-[30px]">
                    {module.title}
                  </h3>
                  <p className="mt-4 text-base leading-relaxed text-[#617392] md:text-[17px] md:leading-relaxed">{module.description}</p>
                  {module.available ? (
                    <Link
                      href="/register"
                      className="mt-5 inline-flex items-center gap-2 text-base font-semibold text-[#1c3d80] transition-colors hover:text-[#2a5cc0] md:text-lg"
                    >
                      Explorar modulo
                      <span aria-hidden>{"->"}</span>
                    </Link>
                  ) : (
                    <p className="mt-5 text-base font-semibold text-[#7e8da5] md:text-base">En construccion</p>
                  )}
                </article>
              ))}
            </div>
          </div>
        </section>

        <section id="beneficios" className="mx-auto w-full max-w-[1400px] px-4 py-20 md:px-8">
          <p className="text-center text-base font-bold tracking-[0.18em] text-[#24a779]">INDICE DE MADUREZ</p>
          <h2 className="mt-4 text-center text-4xl leading-tight text-[#112245] [font-family:var(--font-display)] md:text-[56px]">
            Tu camino hacia el liderazgo{" "}
            <span className="bg-gradient-to-r from-[#264b8f] to-[#2ea380] bg-clip-text text-transparent">estrategico</span>
          </h2>
          <p className="mx-auto mt-6 max-w-4xl text-center text-lg leading-relaxed text-[#596d8c] md:text-xl md:leading-relaxed">
            KONTIA mide tu progreso en 4 niveles, desde el inicio hasta convertirte en referente.
          </p>

          <div className="mx-auto mt-10 max-w-5xl rounded-3xl border border-[#dce3ee] bg-white p-7 shadow-[0_12px_30px_rgba(65,83,120,0.13)] md:p-10">
            <div className="grid gap-3 text-center text-base font-semibold md:grid-cols-4 md:text-[17px]">
              <span className="rounded-full bg-[#dee3ee] px-4 py-2 text-[#7f8fa9]">Inicial</span>
              <span className="rounded-full bg-[#d2e8f3] px-4 py-2 text-[#2998d4]">En Desarrollo</span>
              <span className="rounded-full bg-[#d8ebe5] px-4 py-2 text-[#24a675]">Avanzado</span>
              <span className="rounded-full bg-[#efe5c2] px-4 py-2 text-[#9b790b]">Lider</span>
            </div>
            <div className="mt-8 h-5 rounded-full bg-[#e2e6ee]">
              <div className="relative h-full w-[67%] rounded-full bg-gradient-to-r from-[#7f90ae] via-[#2f9ed9] to-[#e0b51f]">
                <span className="absolute -right-2 top-1/2 h-8 w-8 -translate-y-1/2 rounded-full border-4 border-[#2ba57d] bg-white" />
              </div>
            </div>
            <div className="mt-6 grid grid-cols-2 text-base text-[#4f6284] md:grid-cols-4 md:text-base">
              <p>Inicial</p>
              <p className="text-center">En Desarrollo</p>
              <p className="text-center">Avanzado</p>
              <p className="text-right">Lider</p>
            </div>
          </div>

          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
            {maturityStages.map((stage) => (
              <article key={stage.name} className="rounded-3xl border border-[#dde3ee] bg-white p-6 shadow-[0_8px_24px_rgba(61,79,116,0.12)]">
                <span className={`inline-flex rounded-full px-4 py-2 text-lg font-semibold ${stage.chip}`}>{stage.name}</span>
                <h3 className="mt-4 text-3xl text-[#122143] [font-family:var(--font-display)] md:text-[40px]">{stage.name}</h3>
                <p className="mt-3 text-base leading-relaxed text-[#5f7292] md:text-lg md:leading-relaxed">{stage.text}</p>
                <ul className="mt-5 space-y-2 text-base text-[#566c8f] md:text-[17px]">
                  {stage.checks.map((item) => (
                    <li key={item} className="flex items-start gap-2">
                      <span className="mt-0.5 text-[#26aa77]">v</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </section>

        <section id="planes" className="bg-[#1d336e] py-20 text-white">
          <div className="mx-auto w-full max-w-[1400px] px-4 md:px-8">
            <p className="mx-auto w-fit rounded-full border border-[#49629d] bg-[#334c86] px-5 py-2 text-sm font-semibold md:text-base">
              Unete a +500 MiPYMEs transformadas
            </p>
            <h2 className="mt-6 text-center text-4xl leading-tight text-white [font-family:var(--font-display)] md:text-[56px]">
              Comienza tu transformacion empresarial hoy
            </h2>
            <p className="mx-auto mt-5 max-w-4xl text-center text-lg leading-relaxed text-[#c6d2e9] md:text-xl md:leading-relaxed">
              Diagnostica tu empresa, identifica oportunidades y preparate para competir con el acompanamiento de KONTIA.
            </p>

            <div className="mt-10 grid gap-6 lg:grid-cols-2">
              <article className="rounded-3xl border border-[#3f568f] bg-[#2a427a] p-7">
                <h3 className="text-3xl text-white [font-family:var(--font-display)] md:text-[38px]">Modulo 1</h3>
                <p className="mt-2 text-xl font-bold text-[#42e391] md:text-2xl">100% Gratuito</p>
                <ul className="mt-6 space-y-3 text-base text-[#d4def1] md:text-lg">
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Registro inteligente con IA
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Diagnostico RADAR completo
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Indice de madurez empresarial
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Recomendaciones estrategicas
                  </li>
                </ul>
                <Link
                  href="/register"
                  className="mt-7 inline-flex w-full items-center justify-center rounded-2xl bg-white px-6 py-4 text-base font-semibold text-[#1f3c77] transition hover:bg-[#e7ecf6] md:text-lg"
                >
                  Comenzar gratis
                </Link>
              </article>

              <article className="relative rounded-3xl border border-[#35608a] bg-[#20476e] p-7">
                <span className="absolute -top-3 right-6 rounded-full bg-[#24ad7a] px-4 py-1 text-sm font-bold text-white md:text-base">
                  POPULAR
                </span>
                <h3 className="text-3xl text-white [font-family:var(--font-display)] md:text-[38px]">Plan 1 - Oportunidades</h3>
                <p className="mt-2 text-xl font-bold text-[#24c07f] md:text-2xl">$499 MXN/mes</p>
                <ul className="mt-6 space-y-3 text-base text-[#d4def1] md:text-lg">
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Todo lo del Modulo 1 gratuito
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Perfil competitivo avanzado
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Deteccion de oportunidades con IA
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#40de8d]">v</span>
                    Analisis normativo de licitaciones
                  </li>
                </ul>
                <Link
                  href="/register"
                  className="mt-7 inline-flex w-full items-center justify-center rounded-2xl bg-[#26ab79] px-6 py-4 text-base font-semibold text-white transition hover:bg-[#1f996c] md:text-lg"
                >
                  Ver planes
                </Link>
              </article>
            </div>

            <div className="mt-14 text-center">
              <p className="text-base text-[#c6d2e8] md:text-lg">Prefieres una demostracion personalizada?</p>
              <a
                href="#contacto"
                className="mt-5 inline-flex rounded-2xl bg-white/85 px-8 py-4 text-base font-semibold text-[#243b70] transition hover:bg-white md:text-lg"
              >
                Agendar demostracion
              </a>
              <p className="mt-10 text-sm text-[#9fb0d3] md:text-base">Plataforma segura y certificada. Tus datos estan protegidos.</p>
            </div>
          </div>
        </section>
      </main>

      <footer id="contacto" className="bg-[#1d336e] pb-12 text-[#d2dbee]">
          <div className="mx-auto w-full max-w-[1400px] border-t border-[#375087] px-4 pt-12 md:px-8">
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
              <div>
                <div className="flex items-center gap-3">
                <span className="inline-flex rounded-md bg-white px-1 py-1">
                  <KontiaMark compact />
                </span>
                </div>
              <p className="mt-4 text-base leading-relaxed text-[#bac7e0] md:text-base">
                Plataforma SaaS para fortalecer MiPYMEs y prepararlas para contratacion publica estrategica.
              </p>
            </div>
            <div>
              <h4 className="text-2xl font-semibold text-white md:text-[28px]">Modulos</h4>
              <ul className="mt-4 space-y-2 text-base text-[#c0cde4] md:text-base">
                <li>Modulo 1 - Registro Inteligente (Gratis)</li>
                <li>Modulo 2 - Perfil Competitivo</li>
                <li>Modulo 3 - Deteccion de Oportunidades</li>
                <li>Modulo 4 - Analisis Normativo</li>
              </ul>
            </div>
            <div>
              <h4 className="text-2xl font-semibold text-white md:text-[28px]">Recursos</h4>
              <ul className="mt-4 space-y-2 text-base text-[#c0cde4] md:text-base">
                <li>
                  <Link href="/manual" className="hover:text-white">
                    Manual de Usuario
                  </Link>
                </li>
                <li>
                  <a href="#planes" className="hover:text-white">
                    Planes y Precios
                  </a>
                </li>
                <li>
                  <a href="#metodologia" className="hover:text-white">
                    Metodologia KONTIA
                  </a>
                </li>
                <li>
                  <a href="#beneficios" className="hover:text-white">
                    Beneficios
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="text-2xl font-semibold text-white md:text-[28px]">Empresa</h4>
              <ul className="mt-4 space-y-2 text-base text-[#c0cde4] md:text-base">
                <li>Sobre Nosotros</li>
                <li>
                  <a href="mailto:hola@kontia.com.mx" className="hover:text-white">
                    hola@kontia.com.mx
                  </a>
                </li>
                <li>Privacidad (proximamente)</li>
                <li>Terminos de Servicio (proximamente)</li>
              </ul>
            </div>
          </div>

          <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-[#375087] pt-6 text-sm text-[#9caece] md:flex-row md:items-center md:text-base">
            <p>(c) 2026 KONTIA. Todos los derechos reservados.</p>
            <div className="flex items-center gap-4 text-2xl">
              <span>in</span>
              <span>x</span>
              <span>@</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
