import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { inView, revealStagger, revealUp } from "../../lib/motion";
import { useReducedMotion } from "../../lib/useReducedMotion";
import { BrandMark } from "../BrandMark";

// Las ocho muestras del abanico, ya en fila: `PIE_COLORS` del panel, mismo orden.
const TINTES = [
  "#3b66ff",
  "#f17616",
  "#10b981",
  "#a855f7",
  "#ec4899",
  "#14b8a6",
  "#f59e0b",
  "#6366f1",
];

export function ClosingSection() {
  const reduced = useReducedMotion();

  return (
    // El degradado va en la sección misma y no en un hijo con `-z-10`: ahí quedaba
    // detrás del fondo opaco de `.landing` y no se veía nada.
    <section
      data-ld-section
      className="relative overflow-hidden"
      // Lavados del propio panel: orange-50 → brand-50. Nada inventado.
      style={{ background: "linear-gradient(170deg, #fff7ed 0%, #eef4ff 60%, #f6f7fb 100%)" }}
    >
      <motion.div
        className="ld-wrap ld-section text-center"
        initial="hidden"
        whileInView="show"
        viewport={inView}
        variants={revealStagger(reduced)}
      >
        {/* Cinta de tintes: las ocho muestras del hero, ya en fila. */}
        <motion.div
          className="mx-auto mb-10 flex w-fit gap-1.5"
          variants={revealUp(reduced, 14)}
          aria-hidden="true"
        >
          {TINTES.map((c, i) => (
            <motion.span
              key={c}
              className="h-11 w-4 rounded-full sm:h-14 sm:w-5"
              style={{ background: c }}
              animate={reduced ? undefined : { scaleY: [1, 0.78, 1] }}
              transition={{
                duration: 2.6,
                repeat: Infinity,
                delay: i * 0.11,
                ease: "easeInOut",
              }}
            />
          ))}
        </motion.div>

        <motion.h2 className="ld-display mx-auto max-w-3xl" variants={revealUp(reduced, 28)}>
          Deja de <span className="ld-gradient-text">adivinar</span>.
        </motion.h2>
        <motion.p
          className="ld-lead mx-auto mt-7 max-w-lg"
          style={{ color: "var(--ld-muted)" }}
          variants={revealUp(reduced)}
        >
          Ábrelo con una cuenta que ya está lista y mira tu salón como se ve cuando alguien te
          lleva la cuenta.
        </motion.p>

        <motion.div className="mt-11" variants={revealUp(reduced)}>
          <Link data-ld-closing-cta to="/login" className="ld-cta">
            Entrar y probarlo
            <ArrowRight className="h-4 w-4" />
          </Link>
        </motion.div>

        <motion.p
          className="mt-6 text-[0.9rem] font-semibold"
          style={{ color: "var(--ld-muted)" }}
          variants={revealUp(reduced, 8)}
        >
          No pide tarjeta. No pide registro.
        </motion.p>
      </motion.div>

      <footer
        className="ld-wrap flex flex-col items-center justify-between gap-4 border-t px-5 py-8 text-[0.82rem] font-semibold sm:flex-row"
        style={{ borderColor: "var(--ld-hairline)", color: "var(--ld-muted)" }}
      >
        <div className="flex items-center gap-2" style={{ color: "var(--ld-tinta)" }}>
          <BrandMark className="h-6 w-6" />
          <span className="font-extrabold">AgendaMax</span>
        </div>
        <span>© {new Date().getFullYear()} AgendaMax · Salón de práctica</span>
        {/* `inline-flex` no es decorativo: `.tap-target` solo fija min-height, y en un
            enlace inline la altura mínima no aplica. */}
        <Link
          to="/login"
          className="tap-target inline-flex items-center underline-offset-4 hover:underline"
        >
          Entrar
        </Link>
      </footer>
    </section>
  );
}