Creeer-Web/components/primitives/EscenaDialogo.tsx

'use client';

import { motion, useTransform, type MotionValue } from 'framer-motion';
import { Wordmark } from '@/components/primitives/Wordmark';

// One beat of the pinned conversation, staged as two calling cards laid on a
// table: the reader's, in white, and creeer's, in navy, handed back.
//
// Every scene is mounted at all times and stacked in the same place; what
// changes is opacity and offset, driven by the section's scroll position.
// Mounting only the active scene would animate more cheaply and would strip
// five sixths of the section out of the static export.
//
// Each scene owns a slice of that scroll: the question card arrives at the top
// of its slice, creeer's card is handed over around the middle, and both leave
// as the next question comes up.

export function EscenaDialogo({
  i,
  total,
  progreso,
  n,
  name,
  situacion,
  respuesta,
}: {
  i: number;
  total: number;
  progreso: MotionValue<number>;
  n: string;
  name: string;
  situacion: string;
  respuesta: string;
}) {
  const paso = 1 / total;
  const inicio = i * paso;
  const fin = inicio + paso;

  // Entrance and exit must not overlap. Every scene is stacked in the same
  // place, so a cross-dissolve puts two full cards of type on top of each other
  // and both become unreadable — it looked like a rendering fault, not like a
  // transition. One card leaves, a beat of empty stage, the next arrives.
  const entrada = i === 0 ? [-1, inicio] : [inicio + paso * 0.04, inicio + paso * 0.17];
  const opacidad = useTransform(
    progreso,
    [entrada[0], entrada[1], fin - paso * 0.17, fin - paso * 0.04],
    [0, 1, 1, 0],
  );
  // Nothing sits perfectly still: static type on a pinned screen reads as a
  // stuck page rather than as a held moment.
  const deriva = useTransform(progreso, [inicio - paso, fin + paso], [70, -70]);

  // Where creeer's card is handed over inside this scene's slice.
  const revelado = useTransform(progreso, [inicio + paso * 0.32, inicio + paso * 0.6], [0, 1]);
  const respY = useTransform(revelado, [0, 1], [70, 0]);
  const respEscala = useTransform(revelado, [0, 1], [0.94, 1]);
  const respGiro = useTransform(revelado, [0, 1], [5.5, 1.6]);
  // The reader's card gives way a little as the answer lands: it stays
  // legible, but it stops being the thing you are looking at.
  const pregOpacidad = useTransform(revelado, [0, 1], [1, 0.72]);
  const pregGiro = useTransform(revelado, [0, 1], [-0.6, -1.8]);
  const pregY = useTransform(revelado, [0, 1], [0, -14]);

  const cifraY = useTransform(progreso, [inicio - paso, fin + paso], [60, -60]);

  return (
    <motion.li
      style={{ opacity: opacidad }}
      className="absolute inset-x-0 top-1/2 -translate-y-1/2 will-change-[opacity]"
    >
      <motion.span
        aria-hidden="true"
        style={{ y: cifraY }}
        className="pointer-events-none absolute -top-32 right-0 select-none font-sans font-black leading-none text-azul-profundo/[0.045] text-[9rem] md:text-[17rem]"
      >
        {n}
      </motion.span>

      <motion.div style={{ y: deriva }} className="relative">
        {/* The reader's card. */}
        <motion.div
          style={{ opacity: pregOpacidad, rotate: pregGiro, y: pregY }}
          className="relative z-10 max-w-xl rounded-xl border border-azul-profundo/10 bg-white p-7 shadow-[0_28px_70px_-32px_rgba(10,29,61,0.5)] md:p-9"
        >
          <p className="text-[0.65rem] font-black uppercase tracking-[0.34em] text-dorado">
            {n} · {name}
          </p>
          <p className="mt-4 font-sans font-black leading-[1.12] text-azul-profundo text-2xl md:text-4xl">
            «{situacion}»
          </p>
        </motion.div>

        {/* creeer's card, handed back. Navy against the reader's white, tilted
            the other way, overlapping the corner — two cards on a table, not
            two paragraphs in a column. */}
        <motion.div
          style={{ opacity: revelado, y: respY, scale: respEscala, rotate: respGiro }}
          className="relative z-20 -mt-5 ml-auto max-w-lg rounded-xl bg-azul-profundo p-7 shadow-[0_34px_80px_-30px_rgba(10,29,61,0.75)] md:-mt-8 md:mr-6 md:p-9"
        >
          <span aria-hidden="true" className="absolute left-0 top-7 h-10 w-[3px] rounded-r bg-dorado md:top-9" />
          <Wordmark size="sm" onDark />
          <p className="mt-4 text-base leading-relaxed text-white/75 md:text-xl">{respuesta}</p>
        </motion.div>
      </motion.div>
    </motion.li>
  );
}