'use client';
import { motion } from 'framer-motion';
import { useEnVista } from '@/lib/motion';
// A shared trunk splitting at a marked decision point: one route climbs, gold
// and continuous; the other flattens, grey and dashed. It draws the section's
// own bifurcation — "sà es para ti / no es para ti" — without illustrating a
// judgement about the reader.
const TRONCO = 'M10 100 C 50 96, 80 84, 110 70';
const RUTA_SI = 'M110 70 C 145 58, 175 30, 210 18';
const RUTA_NO = 'M110 70 C 145 82, 175 92, 210 90';
export function IlustracionBifurcacion({ className = '' }: { className?: string }) {
const { ref, enVista, reduced } = useEnVista();
const punto = (
<>
);
// Plain under reduced motion — motion.path would hide the drawing.
if (reduced) {
return (
);
}
const dibuja = (delay: number) => ({
initial: { pathLength: 0 },
animate: enVista ? { pathLength: 1 } : { pathLength: 0 },
transition: { duration: 1.1, delay, ease: [0.22, 1, 0.36, 1] as const },
});
// The "no" route is dashed, and a dashed stroke cannot share Framer Motion's
// pathLength reveal: pathLength drives `stroke-dasharray` itself and would
// overwrite the "1 8" dashes. It fades in by opacity instead, so the dashes
// it is drawn with are the dashes it keeps.
const punteada = {
initial: { opacity: 0 },
animate: enVista ? { opacity: 1 } : { opacity: 0 },
transition: { duration: 0.8, delay: 0.55, ease: [0.22, 1, 0.36, 1] as const },
};
return (
);
}