'use client';

import { motion } from 'framer-motion';
import { Wordmark } from '@/components/primitives/Wordmark';
import { fadeInUp } from '@/lib/motion';

// One exchange of the page's conversation: the reader's situation, then what
// creeer does about it.
//
// The sides never swap from one pair to the next. Each voice keeps its own
// margin, the way a conversation reads on a page; what alternates going down is
// situación → respuesta, not left → right. Flipping sides per pair would cost
// the reader the one cue that tells them who is speaking.
//
// Three cues carry that distinction, never colour alone: the speaker label, the
// column, and the rule hanging off each block. The answer also drops half a
// step below the situation on wide screens, so the eye reads it as a reply
// rather than as a second column of the same thought.
//
// No motion.li here on purpose: Framer propagates variants through React
// context, so the two motion.div children still inherit the stagger from the
// <ul> the section wraps them in, even across this plain <li>. Making the item
// itself a motion.li would add a third beat nobody asked for.

export function ParDialogo({
  n,
  name,
  situacion,
  respuesta,
}: {
  n: number;
  name: string;
  situacion: string;
  respuesta: string;
}) {
  return (
    <li className="grid gap-5 md:grid-cols-2 md:gap-12">
      <motion.div variants={fadeInUp} className="border-l-2 border-azul-profundo/25 pl-5">
        <p className="text-xs font-black uppercase tracking-[0.2em] text-dorado">
          {String(n).padStart(2, '0')} · {name}
        </p>
        <p className="mt-3 font-sans font-bold text-xl md:text-2xl text-azul-profundo leading-snug">
          «{situacion}»
        </p>
      </motion.div>
      <motion.div variants={fadeInUp} className="border-l-2 border-dorado pl-5 md:mt-10">
        <Wordmark size="sm" />
        <p className="mt-3 text-gris-medio leading-relaxed">{respuesta}</p>
      </motion.div>
    </li>
  );
}