'use client';

import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { SecuenciaClaridad } from '@/components/primitives/SecuenciaClaridad';
import { Resplandor } from '@/components/primitives/Resplandor';
import { TextoDesenfoque } from '@/components/primitives/TextoDesenfoque';
import { fraseAncla } from '@/lib/content';
import { fadeInUp, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';

export function FraseAncla() {
  const reduced = usePrefersReducedMotion();
  return (
    <section className="bg-azul-profundo bg-hondo-navy relative overflow-hidden">
      {/* Centrado: la frase es el momento más quieto de la página, así que la
          luz viene de detrás de ella y no de un lado. */}
      <Resplandor className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[52rem] h-[52rem]" />
      <Container className="relative py-20 md:py-28 text-center max-w-5xl">
        <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="flex justify-center">
          {/* Payoff for the tension the hero leaves open: here the lines do
              resolve into the ≡, right as the copy names clarity. */}
          <SecuenciaClaridad className="pointer-events-none select-none w-28 md:w-36 text-dorado" />
        </motion.div>
        <motion.p
          variants={fadeInUp}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          {...motionProps(reduced)}
          className="mt-10 font-sans font-black text-ancla text-white"
        >
          <TextoDesenfoque
            segments={[
              { text: fraseAncla.quote.before },
              { text: fraseAncla.quote.accent, className: 'text-dorado' },
            ]}
          />
        </motion.p>
        {/* El "después": la ancla nombra el diagnóstico; esta línea pinta el
            resultado en la vida del lector. Sin ella, el único futuro que
            existe en la página es el negativo (los dolores). */}
        <motion.p
          variants={fadeInUp}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          {...motionProps(reduced)}
          className="mt-8 max-w-[42ch] mx-auto text-white/70 leading-relaxed"
        >
          {fraseAncla.despues}
        </motion.p>
      </Container>
    </section>
  );
}