import { motion } from "framer-motion";
import { inView, revealStagger, revealUp } from "../../lib/motion";
import { useReducedMotion } from "../../lib/useReducedMotion";

/**
 * Las tres frases que una dueña dice de verdad cuando le enseñas un sistema. Están
 * en su registro, no en el nuestro: «no le sé a la tecnología», no «tengo baja
 * alfabetización digital». La respuesta también: corta y sin tecnicismos.
 */
const OBJECIONES = [
  {
    color: "var(--ld-rosa)",
    dice: "No le sé a la tecnología.",
    responde:
      "Si contestas WhatsApp, ya sabes usarlo. Se toca y se arrastra, nada más. No hay que instalar ni configurar nada, y no hay curso que tomar.",
  },
  {
    color: "var(--ld-naranja)",
    dice: "Mi gente no lo va a usar.",
    responde:
      "Cada quien ve nomás su día y sus propias cuentas. No administran nada. Es menos trabajo que preguntarte a ti a qué hora entran.",
  },
  {
    color: "var(--ld-purpura)",
    dice: "Mi libreta me funciona bien.",
    responde:
      "Tu libreta te dice la hora de la cita, y eso lo hace bien. Lo que no te dice es que doña Carmen lleva cuatro meses sin venir, ni cuál de tus servicios estás regalando.",
  },
];

export function ObjectionsSection() {
  const reduced = useReducedMotion();

  return (
    <section data-ld-section className="landing-papel ld-section">
      <div className="ld-wrap">
        <motion.div
          initial="hidden"
          whileInView="show"
          viewport={inView}
          variants={revealStagger(reduced)}
        >
          <motion.p
            className="ld-eyebrow mb-5"
            style={{ color: "var(--ld-muted)" }}
            variants={revealUp(reduced, 12)}
          >
            Lo que estás pensando
          </motion.p>
          <motion.h2 className="ld-title max-w-2xl" variants={revealUp(reduced, 24)}>
            Tres motivos para no hacerlo. Y por qué ninguno aguanta.
          </motion.h2>
        </motion.div>

        <div className="mt-14 grid grid-cols-1 gap-4">
          {OBJECIONES.map((o, i) => (
            <motion.div
              key={o.dice}
              className="grid grid-cols-1 items-start gap-4 rounded-3xl bg-white p-7 ring-1 ring-black/[0.05] sm:grid-cols-[1fr_1.45fr] sm:gap-10 sm:p-9"
              initial={{ opacity: reduced ? 1 : 0, y: reduced ? 0 : 22 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={inView}
              transition={{ duration: 0.65, delay: reduced ? 0 : i * 0.1 }}
            >
              <p
                className="text-2xl font-extrabold italic leading-snug sm:text-[1.75rem]"
                style={{ fontFamily: "Fraunces, Georgia, serif", color: o.color }}
              >
                «{o.dice}»
              </p>
              <p className="ld-body" style={{ color: "var(--ld-muted)" }}>
                {o.responde}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}