'use client';

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

// Three strands — comunicación, digital, experiencias — meeting and leaving as
// a single gold line. The section's own lead, drawn: "No son la promesa, son
// los medios." The three are grey; only what they produce is gold.
//
// `activa` lights the strand belonging to the discipline the reader is pointing
// at, and dims the other two. Until then the drawing sat beside the three cards
// with no relationship to them; now the card and its strand are visibly the
// same thing, and the reader can see which of the three produces what.
const HEBRAS = [
  'M6 18 C 60 20, 90 52, 120 60',
  'M6 60 C 60 60, 90 60, 120 60',
  'M6 102 C 60 100, 90 68, 120 60',
];
const ESTRATEGIA = 'M120 60 L 214 60';

export function IlustracionConvergencia({
  className = '',
  activa = null,
}: {
  className?: string;
  activa?: number | null;
}) {
  const { ref, enVista, reduced } = useEnVista();

  // `stroke` follows `currentColor`, so moving the text colour moves the line —
  // and transition-colors carries it across instead of snapping.
  const tono = (i: number) =>
    activa === null ? 'text-gris-medio' : activa === i ? 'text-dorado' : 'text-gris-medio/35';
  const grosor = (i: number) => (activa === i ? 3.5 : 2);
  const transicion = 'transition-all duration-300 ease-out motion-reduce:transition-none';

  // Plain <path> under reduced motion — motion.path would hide the drawing.
  if (reduced) {
    return (
      <svg ref={ref} viewBox="0 0 220 120" className={className} aria-hidden="true" focusable="false">
        {HEBRAS.map((d, i) => (
          <path key={d} d={d} data-hebra={i} fill="none" stroke="currentColor" className={`${tono(i)} ${transicion}`} strokeWidth={grosor(i)} strokeLinecap="round" />
        ))}
        <path d={ESTRATEGIA} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3} strokeLinecap="round" />
      </svg>
    );
  }

  const dibuja = (delay: number) => ({
    initial: { pathLength: 0 },
    animate: enVista ? { pathLength: 1 } : { pathLength: 0 },
    transition: { duration: 1, delay, ease: [0.22, 1, 0.36, 1] as const },
  });

  return (
    <svg ref={ref} viewBox="0 0 220 120" className={className} aria-hidden="true" focusable="false">
      {HEBRAS.map((d, i) => (
        <motion.path key={d} d={d} data-hebra={i} fill="none" stroke="currentColor" className={`${tono(i)} ${transicion}`} strokeWidth={grosor(i)} strokeLinecap="round" {...dibuja(i * 0.12)} />
      ))}
      <motion.path d={ESTRATEGIA} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3} strokeLinecap="round" {...dibuja(0.7)} />
    </svg>
  );
}