/* DockEasy — shared lib: icons, BlurText, Reveal */
const { motion, useInView } = window.Motion;
const { useRef } = window.React;

/* ---------- Icons (lucide-style, stroke = currentColor) ---------- */
const ICON_PATHS = {
  arrowUpRight: ['M7 17 17 7', 'M7 7h10v10'],
  play: null, // filled, handled separately
  clock: ['M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z', 'M12 7v5l3 2'],
  refresh: ['M21 3v6h-6', 'M3 21v-6h6', 'M21 9a9 9 0 0 0-15-3.7L3 9', 'M3 15a9 9 0 0 0 15 3.7L21 15'],
  phone: ['M22 16.9v2.1a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h2.1a2 2 0 0 1 2 1.7c.1.9.4 1.9.7 2.8a2 2 0 0 1-.4 2.1L7 10a16 16 0 0 0 6 6l1.4-1.4a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.8.7a2 2 0 0 1 1.7 2Z'],
  file: ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z', 'M14 2v6h6', 'M9 13h6', 'M9 17h6'],
  calendarX: ['M8 2v4', 'M16 2v4', 'M3 8h18', 'M19 8v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8', 'm10 14 4 4', 'm14 14-4 4'],
  help: ['M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z', 'M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.5-3 4', 'M12 17h.01'],
  sliders: ['M4 6h12', 'M18 6h2', 'M4 12h2', 'M8 12h12', 'M4 18h9', 'M15 18h5', 'M16 4v4', 'M6 10v4', 'M13 16v4'],
  inbox: ['M22 12h-6l-2 3h-4l-2-3H2', 'M5.5 5h13a2 2 0 0 1 1.8 1.1L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6L3.7 6.1A2 2 0 0 1 5.5 5Z'],
  dashboard: ['M3 4h8v8H3z', 'M13 4h8v5h-8z', 'M13 13h8v7h-8z', 'M3 16h8v4H3z'],
  globe: ['M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z', 'M2 12h20', 'M12 2a15 15 0 0 1 0 20', 'M12 2a15 15 0 0 0 0 20'],
  card: ['M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z', 'M2 10h20', 'M6 15h4'],
  anchor: ['M12 5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z', 'M12 5v17', 'M5 12H2a10 10 0 0 0 20 0h-3', 'M8 9H5', 'M19 9h-3'],
  menu: ['M3 6h18', 'M3 12h18', 'M3 18h18'],
  close: ['M6 6 18 18', 'M6 18 18 6'],
  chart: ['M3 3v18h18', 'M7 16v-5', 'M12 16V9', 'M17 16v-8'],
  link: ['M9 15 15 9', 'M11 6l1-1a4 4 0 0 1 6 6l-1 1', 'M13 18l-1 1a4 4 0 0 1-6-6l1-1'],
  check: ['M20 6 9 17l-5-5'],
};

function Icon({ name, className }) {
  if (name === 'play') {
    return (
      <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <polygon points="6 4 20 12 6 20 6 4" />
      </svg>
    );
  }
  const paths = ICON_PATHS[name] || [];
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths.map((d, i) => <path key={i} d={d} />)}
    </svg>
  );
}

/* ---------- BlurText: word-by-word blur-in ---------- */
function BlurText({ text, className, style, delayStart = 0 }) {
  const ref = useRef(null);
  const inView = useInView(ref, { amount: 0.1, once: true });
  const words = text.split(' ');
  return (
    <p ref={ref} className={className}
      style={{ display: 'flex', flexWrap: 'wrap', rowGap: '0.05em', ...(style || {}) }}>
      {words.map((w, i) => (
        <motion.span
          key={i}
          style={{ display: 'inline-block', marginRight: '0.24em' }}
          initial={{ filter: 'blur(8px)', opacity: 0, y: 24 }}
          animate={inView ? {
            filter: 'blur(0px)',
            opacity: 1,
            y: 0,
          } : {}}
          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], delay: delayStart + (i * 90) / 1000 }}
        >
          {w}
        </motion.span>
      ))}
    </p>
  );
}

/* ---------- Reveal: blur + rise on enter ---------- */
function Reveal({ children, className, delay = 0, y = 20, once = true }) {
  const ref = useRef(null);
  const inView = useInView(ref, { amount: 0.25, once });
  return (
    <motion.div
      ref={ref}
      className={className}
      initial={{ filter: 'blur(10px)', opacity: 0, y }}
      animate={inView ? { filter: 'blur(0px)', opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.7, ease: 'easeOut', delay }}
    >
      {children}
    </motion.div>
  );
}

Object.assign(window, { Icon, BlurText, Reveal });