'use client';

import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { IlustracionNudo } from '@/components/primitives/IlustracionNudo';
import { dolores } from '@/lib/content';
import { fadeInUp, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';

// The four quotes are the client's own words, from slide 3 of the dueña's deck.
// They used to sit in four tidy cards — the opposite of what they describe. Here
// they drift past instead: the noise you carry around, still going, while the
// resolution underneath does not move at all. The contrast between the two is
// the argument.
//
// They stay legible on purpose. Fading them to a whisper would have made a
// better texture and thrown away the client's own voice; the murmur is carried
// by the motion, not by hiding the words.

const VUELTA_SEGUNDOS = 58;

function Rotulo({
  frases,
  haciaIzquierda,
  mudo = false,
}: {
  frases: string[];
  haciaIzquierda: boolean;
  mudo?: boolean;
}) {
  const tanda = (oculta: boolean) => (
    <div aria-hidden={oculta || mudo || undefined} className="flex shrink-0 items-center gap-12 pr-12 md:gap-20 md:pr-20">
      {frases.map((frase) => (
        <span
          key={frase}
          className="whitespace-nowrap font-sans italic font-bold leading-none text-azul-profundo/75 text-2xl md:text-4xl lg:text-5xl"
        >
          <span className="not-italic text-dorado">“</span>
          {frase}
          <span className="not-italic text-dorado">”</span>
        </span>
      ))}
    </div>
  );

  return (
    <div className="flex overflow-hidden">
      {/* Two identical runs inside one track: translating the track by exactly
          half its own width lands the second run where the first began, so the
          loop has no seam. The duplicate is hidden from assistive tech — it is
          the same four sentences twice. */}
      <motion.div
        className="flex"
        animate={{ x: haciaIzquierda ? ['0%', '-50%'] : ['-50%', '0%'] }}
        transition={{ duration: VUELTA_SEGUNDOS, ease: 'linear', repeat: Infinity }}
      >
        {tanda(false)}
        {tanda(true)}
      </motion.div>
    </div>
  );
}

export function Dolores() {
  const reduced = usePrefersReducedMotion();
  // Rotated so the two rows never show the same sentence side by side.
  const segunda = [...dolores.quotes.slice(2), ...dolores.quotes.slice(0, 2)];

  return (
    <section className="bg-white relative overflow-hidden">
      {/* Smaller and a touch stronger than it was: sprawling at 8% across the
          whole title it read as a smudge over the headline rather than as a
          knot. Stays centred. */}
      <IlustracionNudo className="pointer-events-none select-none absolute top-0 left-1/2 -translate-x-1/2 w-56 md:w-80 text-azul-profundo/[0.11]" />

      <Container className="relative pt-16 md:pt-24">
        <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{dolores.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">{dolores.title}</motion.h2>
      </Container>

      {/* Full-bleed on purpose: the noise does not respect the column. */}
      {reduced ? (
        <Container className="relative mt-12">
          <ul className="grid gap-6 md:grid-cols-2 list-none p-0">
            {dolores.quotes.map((quote) => (
              <li key={quote} className="font-sans italic font-bold text-xl md:text-2xl leading-snug text-azul-profundo/75">
                <span className="not-italic text-dorado">“</span>
                {quote}
                <span className="not-italic text-dorado">”</span>
              </li>
            ))}
          </ul>
        </Container>
      ) : (
        <div className="relative mt-12 flex flex-col gap-4 md:mt-16 md:gap-7">
          <Rotulo frases={dolores.quotes} haciaIzquierda />
          {/* The second row is the same four sentences again, rotated so no
              pair lines up. It is a visual echo, so it is silent: without
              `mudo` a screen reader would read all four pains, then read them
              all over again. */}
          <Rotulo frases={segunda} haciaIzquierda={false} mudo />
        </div>
      )}

      <Container className="relative pb-16 md:pb-24">
        <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="mt-16 font-sans font-black text-ancla text-azul-profundo max-w-4xl">
          {dolores.remate.before}{' '}
          <span className="text-dorado">{dolores.remate.accent}</span>
        </motion.p>
      </Container>
    </section>
  );
}