'use client';

import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { SecuenciaClaridad } from '@/components/primitives/SecuenciaClaridad';
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 relative overflow-hidden">
      <Container className="relative py-28 md:py-40 text-center max-w-5xl">
        <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="flex justify-center">
          {/* El pago de la tensión abierta en el hero: aquí las líneas sí
              resuelven en el ≡, justo cuando el copy nombra la claridad. */}
          <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>
      </Container>
    </section>
  );
}