"use client";

import { motion, useInView } from "motion/react";
import { useRef, useState } from "react";
import { Button, CountUp } from "@/components/ui";
import { Cabify, Coderhouse, Dia, Mostaza } from "@/components/ui/icons";
import { InfiniteMarquee } from "@/components/ui";
import Image from "next/image";
import ClubContigo from "@/assets/ClubContigo-logo.png";

const benefics = [
  <Cabify className="h-[90%]" />,
  <Dia className="h-[80%]" />,
  <Coderhouse className="" />,
  <Mostaza className="" />,
];

const Benefics = () => {
  const ref = useRef<HTMLElement>(null);
  const [countUpComplete, setCountUpComplete] = useState(false);

  const isInView = useInView(ref, {
    once: true,
    amount: 0.7,
  });

  return (
    <motion.section
      className="mt-9 md:mt-0 py-16 md:py-[9.375rem] relative text-white rounded-b-[3rem]"
      ref={ref}
      animate={{
        background: countUpComplete ? "var(--color-contigo-violeta)" : "var(--color-contigo-blanco)",
        transition: { duration: 0.5, delay: 0.75 },
      }}
    >
      <motion.div animate={{ opacity: countUpComplete ? 0.3 : 0.03, transition: { duration: 0.5, delay: 0.75 } }}>
        <InfiniteMarquee className="[--height:8rem] md:[--height:18.75rem] h-[calc(100%_-var(--height))] text-contigo-violeta-oscuro" />
      </motion.div>

      {!countUpComplete && (
        <motion.div layoutId="benefics-number" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
          <CountUp
            to={1000}
            startWhen={isInView}
            duration={0.5}
            onEnd={() => setCountUpComplete(true)}
            className="text-[min(30vw,18.75rem)] font-semibold text-contigo-negro"
          />
        </motion.div>
      )}
      <div className="contigo-container text-center flex flex-col items-center gap-6 md:gap-12 relative">
        <motion.div
          className="will-change-opacity"
          animate={{
            opacity: countUpComplete ? 1 : 0,
            transition: { delay: 1.75 },
          }}
        >
          <Image src={ClubContigo} alt="Club Contigo" className="w-[min(50%,9.375rem)] mx-auto" />
        </motion.div>

        <div className="font-semibold text-[min(6vw,1.5rem)] md:text-[min(5vw,4rem)]">
          <h2 className="sr-only">+1000 beneficios te esperan</h2>
          <motion.span
            layout
            className="inline-block will-change-transform"
            transition={{ delay: 1.5 }}
            animate={{ opacity: countUpComplete ? 1 : 0 }}
          >
            +
          </motion.span>
          {countUpComplete && (
            <motion.div
              layoutId="benefics-number"
              className="inline-block will-change-transform"
              transition={{ layout: { duration: 1, delay: 0.75, ease: "easeInOut" } }}
            >
              <motion.span
                className="text-contigo-negro"
                animate={{
                  color: countUpComplete ? "rgb(255,255,255)" : "var(--color-contigo-negro)",
                  transition: { duration: 1, delay: 0.75 },
                }}
              >
                1000
              </motion.span>
            </motion.div>
          )}{" "}
          <motion.span
            layout
            className="inline-block will-change-transform"
            transition={{ delay: 1.5 }}
            animate={{ opacity: countUpComplete ? 1 : 0 }}
          >
            beneficios te esperan
          </motion.span>
        </div>
        <p className="text-base md:text-[min(2vw,1.5rem)] max-w-[56.25rem]">
          <motion.span
            className="block font-semibold mb-1.5 will-change-transform"
            animate={{ opacity: countUpComplete ? 1 : 0, y: countUpComplete ? 0 : "100%", transition: { delay: 2 } }}
          >
            ¿Todavía no conocés Club Contigo?
          </motion.span>{" "}
          <motion.span
            className="block will-change-transform"
            animate={{ opacity: countUpComplete ? 1 : 0, y: countUpComplete ? 0 : "100%", transition: { delay: 2.15 } }}
          >
            Es nuestra plataforma de beneficios exclusiva para socios y miembros de Contigo. ¡Descubrí los descuentos y
            ahorrá en todo menos en disfrutar!
          </motion.span>
        </p>
        <ul className="grid grid-cols-2 md:grid-cols-[repeat(4,max-content)] max-w-[21.25rem] md:max-w-full mx-auto gap-2 md:gap-4">
          {benefics.map((item, i) => (
            <motion.li
              key={i}
              animate={{
                scale: countUpComplete ? 1 : 0,
                rotate: countUpComplete ? 0 : 45,
                transition: { delay: 2.2 + i * 0.1, duration: 0.5, ease: "backOut" },
              }}
              className="h-[5rem] bg-contigo-verde text-white rounded-[0.4375rem] p-[0.8125rem] flex items-center justify-center will-change-transform"
            >
              {item}
            </motion.li>
          ))}
        </ul>
        <motion.div animate={{ opacity: countUpComplete ? 1 : 0, transition: { delay: 3 } }}>
          <Button href="http://www.clubcontigo.com.ar/" variant="secondary">
            Más beneficios
          </Button>
        </motion.div>
      </div>
    </motion.section>
  );
};

export default Benefics;