'use client';

import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { SimboloTresLineas } from '@/components/primitives/SimboloTresLineas';
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">
          <SimboloTresLineas className="pointer-events-none select-none w-14 text-dorado" />
        </motion.div>
        <motion.p
          variants={fadeInUp}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          {...motionProps(reduced)}
          className="mt-10 font-sans font-black text-4xl md:text-6xl leading-[0.95] tracking-tight text-white"
        >
          <TextoDesenfoque
            segments={[
              { text: fraseAncla.quote.before },
              { text: fraseAncla.quote.accent, className: 'text-dorado' },
            ]}
          />
        </motion.p>
      </Container>
    </section>
  );
}