// Shared helpers — copy-to-clipboard, expandable card, scroll wiring.
// Both directions share the logic; each owns its own visual chrome.

window.TutorialUtils = (() => {
  // Tiny icon set — inline SVG, no external dep.
  const Icon = {
    Copy: ({ size = 14, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="4" y="4" width="9" height="10" rx="1.5" />
        <path d="M11 4V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1" />
      </svg>,

    Check: ({ size = 14, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 8.5l3.5 3.5L13 5" />
      </svg>,

    Plus: ({ size = 14, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
        <path d="M8 3v10M3 8h10" />
      </svg>,

    Minus: ({ size = 14, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
        <path d="M3 8h10" />
      </svg>,

    Arrow: ({ size = 12, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M2 6h8M7 3l3 3-3 3" />
      </svg>,

    External: ({ size = 11, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M5 3H3v6h6V7M7 3h2v2M9 3L5.5 6.5" />
      </svg>,

    Play: ({ size = 12, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 12 12" fill={color}>
        <path d="M3 2v8l7-4z" />
      </svg>

  };

  // CopyBtn — copies text to clipboard, swaps icon for 1.4s.
  function CopyBtn({ text, label = '', style = {}, theme = 'dark' }) {
    const [done, setDone] = React.useState(false);
    const onClick = (e) => {
      e.stopPropagation();
      navigator.clipboard?.writeText(text).then(() => {
        setDone(true);
        setTimeout(() => setDone(false), 1400);
      }).catch(() => {});
    };
    const base = {
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 14px', borderRadius: 999, cursor: 'pointer',
      fontFamily: '"Rubik"', fontSize: 12, fontWeight: 500,
      letterSpacing: '0.06em', textTransform: 'uppercase',
      transition: 'background .14s, color .14s, border-color .14s',
      border: '1px solid',
      ...style
    };
    const themed = theme === 'volt' ? {
      background: done ? '#BBFF27' : 'transparent',
      color: done ? '#000' : '#BBFF27',
      borderColor: 'rgba(187,255,39,0.5)'
    } : theme === 'plasma' ? {
      background: done ? '#8800E1' : 'transparent',
      color: done ? '#fff' : '#A33BFF',
      borderColor: 'rgba(136,0,225,0.55)'
    } : {
      background: done ? '#fff' : 'transparent',
      color: done ? '#000' : '#fff',
      borderColor: 'rgba(255,255,255,0.25)'
    };
    return (
      <button onClick={onClick} style={{ ...base, ...themed, opacity: "0" }}>
        {done ? <Icon.Check size={13} /> : <Icon.Copy size={13} />}
        {label && (done ? 'Copiado' : label)}
      </button>);

  }

  // ExpandablePrompt — the meat of every shot card. Click header to toggle.
  // Renderer is direction-specific; this is just state + a hook for content.
  function useExpand(initial = false) {
    const [open, setOpen] = React.useState(initial);
    return [open, () => setOpen((o) => !o)];
  }

  // Smooth-scroll within a scroll container, by hash.
  function scrollToInside(container, hash) {
    if (!container || !hash) return;
    const el = container.querySelector(hash);
    if (!el) return;
    const top = el.offsetTop - 12;
    container.scrollTo({ top, behavior: 'smooth' });
  }

  function useIsMobile(bp = 680) {
    const [m, setM] = React.useState(() => window.innerWidth < bp);
    React.useEffect(() => {
      const mq = window.matchMedia(`(max-width: ${bp - 1}px)`);
      const h = (e) => setM(e.matches);
      mq.addEventListener('change', h);
      return () => mq.removeEventListener('change', h);
    }, [bp]);
    return m;
  }

  return { Icon, CopyBtn, useExpand, scrollToInside, useIsMobile };
})();