Creeer-Web/components/sections/PuntosInflexion.tsx

'use client';

import { useEffect, useRef, useState } from 'react';
import { motion, useMotionValue, useMotionValueEvent, useSpring, useTransform } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
import { ParDialogo } from '@/components/primitives/ParDialogo';
import { EscenaDialogo } from '@/components/primitives/EscenaDialogo';
import { IlustracionInflexion } from '@/components/primitives/IlustracionInflexion';
import { puntosInflexion } from '@/lib/content';
import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';

const items = puntosInflexion.items;
const TOTAL = items.length;

function Cabecera({ reduced }: { reduced: boolean }) {
  return (
    <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>
  );
}

// Reduced motion, and the server's first paint, get the whole conversation laid
// out at once. A pinned section that advances on scroll is exactly the thing
// someone asking for less movement is asking to be spared, and hiding five
// sixths of the copy behind a scroll position is not an option either way.
function Estatica() {
  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">
        <Cabecera reduced />
        <p className="mt-14 text-xs tracking-[0.3em] uppercase font-black text-dorado">{puntosInflexion.lead}</p>
        <ul className="mt-8 list-none p-0 flex flex-col gap-16 md:gap-24">
          {items.map((item, i) => (
            <ParDialogo key={item.name} n={i + 1} {...item} activo reducido onActivar={() => {}} />
          ))}
        </ul>
      </Container>
    </section>
  );
}

function Escenificado() {
  const contenedor = useRef<HTMLDivElement>(null);

  // How far through the pinned stage the reader is, 0 → 1, measured by hand.
  // `useScroll({ target })` sat at exactly 0 for the whole 5.400px of scroll —
  // measured, not guessed: every scene stayed at its initial opacity from the
  // top of the section to the bottom. Reading the container's own rect on each
  // frame is a dozen lines, needs no measurement pass from the library, and can
  // be verified in the browser, which the black box could not.
  const bruto = useMotionValue(0);
  useEffect(() => {
    let pendiente = 0;
    const medir = () => {
      pendiente = 0;
      const el = contenedor.current;
      if (!el) return;
      const { top, height } = el.getBoundingClientRect();
      const recorrido = height - window.innerHeight;
      bruto.set(recorrido > 0 ? Math.min(1, Math.max(0, -top / recorrido)) : 0);
    };
    const alScroll = () => {
      if (!pendiente) pendiente = requestAnimationFrame(medir);
    };
    medir();
    window.addEventListener('scroll', alScroll, { passive: true });
    window.addEventListener('resize', alScroll);
    return () => {
      if (pendiente) cancelAnimationFrame(pendiente);
      window.removeEventListener('scroll', alScroll);
      window.removeEventListener('resize', alScroll);
    };
  }, [bruto]);

  // Takes the jitter out of a trackpad without lagging behind the reader; the
  // hilo conductor taught this project what an overdamped spring feels like.
  const progreso = useSpring(bruto, { stiffness: 260, damping: 42, restDelta: 0.0005 });

  // Twelve beats, not a continuum: question, answer, question, answer… Scroll
  // picks the beat and nothing else. When the cards were driven straight off
  // the scroll value, every position in between was a frame you could stop on,
  // and creeer's card sat there as a half-transparent grey slab.
  const TIEMPOS = TOTAL * 2;
  const [tiempo, setTiempo] = useState(0);
  useMotionValueEvent(progreso, 'change', (v) => {
    setTiempo(Math.min(TIEMPOS - 1, Math.max(0, Math.floor(v * TIEMPOS))));
  });
  const activo = Math.floor(tiempo / 2);
  const respondida = tiempo % 2 === 1;

  const barra = useTransform(progreso, [0, 1], [0, 1]);
  const fondoY = useTransform(progreso, [0, 1], [0, -140]);

  return (
    <section className="bg-gris-claro relative">
      <Container className="relative pt-16 md:pt-24">
        <Cabecera reduced={false} />
      </Container>

      {/* One viewport of stage, six viewports of scroll to move through it. */}
      <div ref={contenedor} className="relative" style={{ height: `${TOTAL * 100}vh` }}>
        <div data-escena={activo} data-tiempo={tiempo} className="sticky top-0 h-screen overflow-hidden bg-gris-claro">
          <motion.div style={{ y: fondoY }} className="absolute inset-0">
            <FondoPuntos className="-bottom-10 -right-16 w-80 md:w-[34rem] text-azul-profundo/10" distance={32} />
          </motion.div>

          {/* The frame itself turns over on the answer. The whole stage goes to
              azul-profundo, not a panel inside it — the answer is not a card on
              the reader's page, it is creeer's ground. */}
          <motion.div
            aria-hidden="true"
            animate={{ opacity: respondida ? 1 : 0 }}
            transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
            className="absolute inset-0 bg-azul-profundo"
          />

          <Container className="relative h-full">
            {/* left-6 / md:left-12, not left-0: an absolutely positioned child
                resolves against Container's padding box, so `left-0` lands on
                the inside of the border and ignores the px-6 the rest of the
                page is aligned to. On a phone that clipped the first glyph. */}
            <p className="absolute top-24 left-6 md:left-12 text-xs tracking-[0.3em] uppercase font-black text-dorado md:top-28">
              {puntosInflexion.lead}
            </p>

            {/* The rail. Where you are in the conversation, and how much is
                left — a pinned section without it feels like a page that
                stopped responding. */}
            <ol aria-hidden="true" className="absolute right-0 top-1/2 hidden -translate-y-1/2 list-none flex-col gap-3 p-0 md:flex">
              {items.map((item, i) => (
                <li key={item.name}>
                  <span
                    className={`block h-px origin-right transition-all duration-500 ${
                      i === activo
                        ? 'w-10 bg-dorado'
                        : i < activo
                          ? 'w-6 bg-dorado/40'
                          : respondida
                            ? 'w-4 bg-white/25'
                            : 'w-4 bg-azul-profundo/20'
                    }`}
                  />
                </li>
              ))}
            </ol>

            <ol className="relative m-0 h-full list-none p-0">
              {items.map((item, i) => (
                <EscenaDialogo
                  key={item.name}
                  i={i}
                  total={TOTAL}
                  progreso={progreso}
                  activa={i === activo}
                  respondida={i === activo && respondida}
                  n={String(i + 1).padStart(2, '0')}
                  {...item}
                />
              ))}
            </ol>
          </Container>

          <motion.span
            aria-hidden="true"
            style={{ scaleX: barra }}
            className="absolute bottom-0 left-0 h-0.5 w-full origin-left bg-dorado"
          />
        </div>
      </div>
    </section>
  );
}

export function PuntosInflexion() {
  const reduced = usePrefersReducedMotion();
  return reduced ? <Estatica /> : <Escenificado />;
}