"use client";
import { Isologo } from "@/components/ui";
import { Download } from "@/components/ui/icons";
import useWindowOnLoad from "@/hooks/useWindowOnLoad";
import { motion } from "motion/react";
import { useEffect, useState } from "react";

const plans = [
  { label: "Plan - 100 Plus", pdf: "plan-100-plus" },
  { label: "Plan - 100", pdf: "plan-100" },
  { label: "Plan - 200 Plus", pdf: "plan-200-plus" },
  { label: "Plan - 200", pdf: "plan-200" },
  { label: "Plan - 605 Plus", pdf: "plan-605-plus" },
  { label: "Plan - 605", pdf: "plan-605" },
  { label: "Plan - 710 Plus", pdf: "plan-710-plus" },
  { label: "Plan - 710", pdf: "plan-710" },
  { label: "Plan - Acompañante de salud", pdf: "plan-acompañante-de-salud" },
  { label: "Plan - Ambulancias", pdf: "plan-ambulancias" },
  { label: "Plan - App Contigo", pdf: "plan-app-contigo" },
  { label: "Plan - Atenciones", pdf: "plan-atenciones" },
  { label: "Plan - Comunidad", pdf: "plan-comunidad" },
  { label: "Plan - Dr en Línea", pdf: "plan-dr-en-linea" },
  { label: "Plan - Esencial Neuquén", pdf: "plan-esencial-neuquen" },
  { label: "Plan - Esencial+", pdf: "plan-esencial-plus" },
  { label: "Plan - Estandar", pdf: "plan-estandar" },
  { label: "Plan - Familia 10", pdf: "plan-familia-10" },
  { label: "Plan - Familia 20", pdf: "plan-familia-20" },
  { label: "Plan - Familia 30", pdf: "plan-familia-30" },
  { label: "Plan - Familia", pdf: "plan-familia" },
  { label: "Plan - Flex", pdf: "plan-flex" },
  { label: "Plan - Oftalmológico", pdf: "plan-oftalmologico" },
  { label: "Plan - Preferencial", pdf: "plan-preferencial" },
  { label: "Plan - Premium", pdf: "plan-premium" },
  { label: "Plan - S100 Plus", pdf: "plan-s100-plus" },
  { label: "Plan - S200 Plus", pdf: "plan-s200-plus" },
  { label: "Plan - Premium", pdf: "plan-premium" },
  { label: "Plan - S605 Plus", pdf: "plan-s605-plus" },
  { label: "Plan - S710 Plus", pdf: "plan-s710-plus" },
  { label: "Plan - Salud y Bienestar", pdf: "plan-salud-y-bienestar" },
  { label: "Plan - Senior 10", pdf: "plan-senior-10" },
  { label: "Plan - Senior 30", pdf: "plan-senior-30" },
  { label: "Plan - E-Salud", pdf: "plan-e-salud" },
];
const ContratosPlans = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setVisible(true), 2500);

    return () => clearTimeout(timer);
  }, []);

  return (
    <section className="bg-[#e8e8e8]">
      <div className="contigo-container py-6 md:py-12">
        <h2 className="font-medium text-contigo-violeta text-lg md:text-xl leading-[1.4]">
          Contratos de adhesión - Ley N° 24.240 de Defensa del Consumidor:
        </h2>
        <ul className="grid sm:grid-cols-2 my-7 gap-3">
          {visible ? (
            <>
              {plans.map(({ label, pdf }, i) => (
                <motion.li
                  className="border border-gray-200 rounded-2xl bg-[#e8e8e8] shadow-[0.375rem_0.375rem_0.75rem_#c5c5c5,_-0.375rem_-0.375rem_0.75rem_#ffffff]"
                  key={pdf}
                  initial={{ y: 10, opacity: 0 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{
                    duration: 0.45,
                    ease: "easeOut",
                    delay: i * 0.1,
                  }}
                >
                  <a
                    href={`/pdfs/${pdf}.pdf`}
                    className="p-3 flex gap-2 items-center hover:text-contigo-violeta"
                    download={`${pdf}.pdf`}
                  >
                    <Isologo className="w-4 fill-contigo-verde" /> {label}
                    <Download className="size-6 ml-auto" />
                  </a>
                </motion.li>
              ))}
            </>
          ) : (
            <>
              {plans.map((_, i) => (
                <li key={i} className="animate-pulse bg-neutral-300 p-3 rounded-2xl min-h-12" />
              ))}
            </>
          )}
        </ul>
      </div>
    </section>
  );
};

export default ContratosPlans;