'use client';

import { motion, useScroll, useTransform } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { FondoFoto } from '@/components/primitives/FondoFoto';
import { Icono, type IconoNombre } from '@/components/primitives/Icono';
import { mecanismo } from '@/lib/content';
import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps, useAutoStep } from '@/lib/motion';

const ICONOS: IconoNombre[] = ['inmersion', 'desafiar', 'estrategia'];

export function Mecanismo() {
  const reduced = usePrefersReducedMotion();
  const { active, setActive, hoverProps } = useAutoStep(mecanismo.steps.length, 3200);
  const { scrollYProgress } = useScroll();
  const desplazamientoFoto = useTransform(scrollYProgress, [0, 1], [-24, 24]);
  return (
    <section id="mecanismo" className="bg-azul-profundo text-white scroll-mt-24 relative overflow-hidden">
      {/* Foto: Golden Gate Bridge, Dietmar Rabich, CC BY-SA 4.0, modificada (duotono) — créditos en el footer */}
      <motion.div
        aria-hidden="true"
        className="absolute inset-0 pointer-events-none"
        style={reduced ? undefined : { y: desplazamientoFoto }}
      >
        <FondoFoto src="/images/mecanismo-bg.jpg" className="inset-0 opacity-25" wash="bg-azul-profundo/80" />
      </motion.div>
      <Container className="relative py-16 md:py-24">
        {/* The step you are on, set enormous and almost invisible behind the
            column — the same device the recorrido uses, so the two sections
            read as one page rather than as one showpiece and its neighbour.
            It follows the autoplay, which gives the section a slow pulse
            without adding anything the reader has to attend to. */}
        {reduced ? (
          <span aria-hidden="true" className="pointer-events-none absolute top-10 right-6 md:right-12 select-none font-sans font-black leading-none text-white/[0.05] text-[9rem] md:text-[18rem]">
            {mecanismo.steps[active].n}
          </span>
        ) : (
          <motion.span
            key={active}
            aria-hidden="true"
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
            className="pointer-events-none absolute top-10 right-6 md:right-12 select-none font-sans font-black leading-none text-white/[0.05] text-[9rem] md:text-[18rem]"
          >
            {mecanismo.steps[active].n}
          </motion.span>
        )}

        <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{mecanismo.eyebrow}</motion.p>
        <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="mt-4 font-sans font-black text-seccion">{mecanismo.title}</motion.h2>

        {/* Step connector: advances on its own every ~3s (paused on hover or
            once the reader picks a step) and pulls the progress line along with
            it — the same "connected process" language as en-ti.com. */}
        <div {...hoverProps} className="mt-14 hidden md:flex items-center" role="tablist" aria-label="Pasos del mecanismo">
          {mecanismo.steps.map((step, i) => (
            <div key={step.n} className="flex items-center flex-1 last:flex-none">
              <button
                type="button"
                role="tab"
                aria-selected={active === i}
                aria-label={`Paso ${step.n}: ${step.name}`}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
                className={`shrink-0 grid place-items-center w-14 h-14 rounded-full border-2 font-sans font-black text-lg transition-colors duration-300 ${
                  active === i ? 'bg-dorado border-dorado text-azul-profundo' : 'border-white/25 text-white/60 hover:border-dorado/60 hover:text-white'
                }`}
              >
                {step.n}
              </button>
              {i < mecanismo.steps.length - 1 && (
                <div className="flex-1 h-px mx-2 bg-white/15 relative overflow-hidden">
                  <motion.div
                    className="absolute inset-y-0 left-0 w-full origin-left bg-dorado motion-reduce:transition-none"
                    initial={false}
                    animate={{ scaleX: active > i ? 1 : 0 }}
                    transition={{ duration: 0.4, ease: 'easeOut' }}
                  />
                </div>
              )}
            </div>
          ))}
        </div>

        <motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} {...hoverProps}
          className="mt-12 grid gap-10 md:grid-cols-3">
          {mecanismo.steps.map((step, i) => (
            <motion.li key={step.n} variants={fadeInUp}>
              <button
                type="button"
                onClick={() => setActive(i)}
                aria-pressed={active === i}
                className={`w-full text-left border-t pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none ${
                  active === i ? 'border-dorado md:-translate-y-1.5' : 'border-white/20'
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="font-sans font-black text-5xl md:text-6xl text-dorado leading-none">{step.n}</div>
                  <Icono nombre={ICONOS[i]} className="w-10 h-10 md:w-12 md:h-12 text-white/70" />
                </div>
                <h3 className="mt-4 font-sans font-bold text-xl">{step.name}</h3>
                <p className="mt-3 text-gris-medio leading-relaxed">{step.desc}</p>
              </button>
            </motion.li>
          ))}
        </motion.ol>
      </Container>
    </section>
  );
}