'use client';

import { motion } from 'framer-motion';
import { useEnVista } from '@/lib/motion';

// Four strands looping over each other into a knot that never opens — the
// section's own subject drawn: effort that folds back on itself instead of
// going anywhere. The strands draw themselves in sequence, which reads as the
// knot tightening rather than as decoration appearing.
const HEBRAS = [
  { d: 'M30 90 C 60 20, 130 20, 140 70 C 148 112, 78 118, 70 78 C 63 44, 120 38, 150 66', ancho: 3 },
  { d: 'M20 60 C 70 110, 120 110, 160 60', ancho: 2 },
  { d: 'M40 110 C 80 40, 110 130, 155 95', ancho: 2 },
  { d: 'M25 40 C 90 70, 100 100, 165 40', ancho: 1.5 },
];

export function IlustracionNudo({ className = '' }: { className?: string }) {
  const { ref, enVista, reduced } = useEnVista();

  // Plain <path> under reduced motion — motion.path would hide the drawing.
  if (reduced) {
    return (
      <svg ref={ref} viewBox="0 0 190 140" className={className} aria-hidden="true" focusable="false">
        {HEBRAS.map((h) => (
          <path key={h.d} d={h.d} fill="none" stroke="currentColor" strokeWidth={h.ancho} strokeLinecap="round" />
        ))}
      </svg>
    );
  }

  return (
    <svg ref={ref} viewBox="0 0 190 140" className={className} aria-hidden="true" focusable="false">
      {HEBRAS.map((h, i) => (
        <motion.path
          key={h.d}
          d={h.d}
          fill="none"
          stroke="currentColor"
          strokeWidth={h.ancho}
          strokeLinecap="round"
          initial={{ pathLength: 0 }}
          animate={enVista ? { pathLength: 1 } : { pathLength: 0 }}
          transition={{ duration: 1.3, delay: i * 0.18, ease: [0.22, 1, 0.36, 1] }}
        />
      ))}
    </svg>
  );
}