'use client';

import { motion } from 'framer-motion';
import { Container } from '@/components/primitives/Container';
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
import { Icono, type IconoNombre } from '@/components/primitives/Icono';
import { formaTrabajar } from '@/lib/content';
import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';

// Reuses existing icons where the metaphor fits; only 'reloj' is new.
const ICONOS: IconoNombre[] = [
  'estrategia',    // Metodología — ascending path to a flag
  'comunicacion',  // Quién participa — dialogue bubbles
  'inmersion',     // De dónde partimos — diving through layers
  'plan',          // Qué te llevas — checklist
  'reloj',         // Duración — clock
];

/**
 * "Así es trabajar conmigo" — practical details of the engagement.
 * Inspired by en-ti.com's card-based solutions grid, adapted to creeer's
 * identity: white cards on gris-claro, dorado accents, TarjetaSpotlight glow.
 * Sits between Mecanismo (high-level method) and Disciplinas (the tools).
 */
export function FormaTrabajar() {
  const reduced = usePrefersReducedMotion();

  return (
    <section className="bg-gris-claro relative overflow-hidden">
      <FondoPuntos className="-top-10 -left-12 w-72 md:w-[28rem] text-azul-profundo/[0.06]" distance={32} />
      <Container className="relative py-16 md:py-24">
        {/* ── Header ── */}
        <motion.p
          variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="text-xs tracking-[0.3em] uppercase font-black text-dorado"
        >
          {formaTrabajar.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"
        >
          {formaTrabajar.title}
        </motion.h2>

        {/* ── Card grid ── */}
        <motion.ul
          variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
          className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 list-none p-0"
        >
          {formaTrabajar.items.map((item, i) => (
            <motion.li
              key={item.name}
              variants={fadeInUp}
              className="transition-transform duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none"
            >
              <TarjetaSpotlight className="h-full rounded-2xl border border-white bg-white p-7 transition-[border-color,box-shadow] duration-300 hover:border-dorado/30 hover:shadow-[0_20px_50px_-20px_rgba(196,148,46,0.2)]">
                {/* Icon */}
                <div className="grid place-items-center w-14 h-14 rounded-full bg-azul-profundo">
                  <Icono nombre={ICONOS[i]} className="w-7 h-7 text-dorado" />
                </div>
                {/* Copy */}
                <h3 className="mt-5 font-sans font-black text-xl text-azul-profundo">
                  {item.name}
                </h3>
                <p className="mt-3 text-gris-medio leading-relaxed text-sm">
                  {item.desc}
                </p>
              </TarjetaSpotlight>
            </motion.li>
          ))}
        </motion.ul>
      </Container>
    </section>
  );
}