'use client';
import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { CTA } from '@/components/primitives/CTA';
import { Wordmark } from '@/components/primitives/Wordmark';
import { IconoRed, NOMBRES_RED } from '@/components/primitives/IconoRed';
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
import { Resplandor } from '@/components/primitives/Resplandor';
import { cierre } from '@/lib/content';
import { esExterno, propsEnlace, AVISO_PESTANA } from '@/lib/enlaces';
import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';

export function Cierre() {
  const reduced = usePrefersReducedMotion();
  const { whatsapp } = cierre.contact;
  return (
    <section id="contacto" className="bg-azul-profundo bg-hondo-navy text-white scroll-mt-24 relative overflow-hidden">
      <FondoPuntos className="top-12 -left-16 w-72 md:w-[30rem] text-dorado/25" distance={36} />
      <Resplandor className="-top-32 left-1/2 -translate-x-1/2 w-[46rem] h-[46rem]" />
      <Container className="relative py-16 md:py-24 text-center">
        <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="flex flex-col items-center">
          <motion.div variants={fadeInUp}><Wordmark size="lg" onDark showTagline /></motion.div>
          <motion.p variants={fadeInUp}
            className="mt-12 font-sans font-black text-ancla max-w-3xl">
            {cierre.quote}
          </motion.p>
          <motion.div variants={fadeInUp} className="mt-10">
            <CTA href={whatsapp.href} label={cierre.cta} variant="dark" />
          </motion.div>
          <motion.nav variants={fadeInUp} aria-label="Contacto" className="mt-14">
            <ul className="flex flex-wrap justify-center gap-3 text-sm">
              {NOMBRES_RED.map((red) => (
                <li key={red}>
                  <a href={cierre.contact[red].href} {...propsEnlace(cierre.contact[red].href)}
                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-white/20 hover:border-dorado hover:text-dorado transition-colors">
                    <IconoRed nombre={red} className="w-4 h-4 shrink-0" />
                    {cierre.contact[red].label}
                    {esExterno(cierre.contact[red].href) && <span className="sr-only"> ({AVISO_PESTANA})</span>}
                  </a>
                </li>
              ))}
            </ul>
          </motion.nav>
        </motion.div>
      </Container>
    </section>
  );
}