'use client';

import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
import { Carrusel } from '@/components/primitives/Carrusel';
import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
import { IlustracionInflexion } from '@/components/primitives/IlustracionInflexion';
import { puntosInflexion } from '@/lib/content';
import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';

function Tarjeta({ n, name, desc }: { n: number; name: string; desc: string }) {
  return (
    <TarjetaSpotlight className="relative h-full rounded-md border-t-2 border-dorado pt-5 pl-1 pr-1 pb-1 overflow-visible">
      {/* An index, not a watermark. At 48px and 6% opacity these collided with
          the titles and with the gold rule while carrying no contrast of their
          own; sat on the rule they encode the sequence and stay out of the way. */}
      <span aria-hidden="true" className="pointer-events-none absolute -top-1.5 right-0 bg-gris-claro pl-2 font-sans font-black text-xs tracking-[0.2em] text-dorado leading-none select-none">
        {String(n).padStart(2, '0')}
      </span>
      <h3 className="relative font-sans font-bold text-xl text-azul-profundo">{name}</h3>
      <p className="relative mt-2 text-gris-medio leading-relaxed">{desc}</p>
    </TarjetaSpotlight>
  );
}

export function PuntosInflexion() {
  const reduced = usePrefersReducedMotion();
  return (
    <section className="bg-gris-claro relative overflow-hidden">
      <FondoPuntos className="-bottom-6 -right-12 w-80 md:w-[32rem] text-azul-profundo/10" distance={32} />
      <Container className="relative py-16 md:py-24">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between md:gap-12">
          <div>
            <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
              className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{puntosInflexion.eyebrow}</motion.p>
            <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
              className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-3xl">{puntosInflexion.title}</motion.h2>
          </div>
          <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
            className="mt-8 md:mt-0 shrink-0">
            <IlustracionInflexion className="w-56 md:w-72 h-auto mx-auto" />
          </motion.div>
        </div>

        {/* Swipeable carousel on mobile ("01 / 06" counter, as on en-ti.com); fixed grid from md up. */}
        <div className="mt-12 md:hidden">
          <Carrusel
            ariaLabel="Los seis puntos de inflexión"
            mostrarContador
            slides={puntosInflexion.items.map((item, i) => <Tarjeta key={item.name} n={i + 1} {...item} />)}
            slideClassName="pr-4"
          />
        </div>
        <motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="mt-12 hidden md:grid md:grid-cols-3 md:gap-8 list-none p-0">
          {puntosInflexion.items.map((item, i) => (
            <motion.li key={item.name} variants={fadeInUp}
              className="transition-transform duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none">
              <Tarjeta n={i + 1} {...item} />
            </motion.li>
          ))}
        </motion.ul>
      </Container>
    </section>
  );
}