// Caret landing — primitives: Icon (Lucide), KeyCap, KeyCombo, Eyebrow, Alias
const { useState, useEffect, useRef } = React;

function pascal(n){ return n.replace(/(^|-)([a-z])/g,(_,__,c)=>c.toUpperCase()); }
function Icon({ name, size = 22, stroke = 2, color = 'currentColor', style, fill = 'none' }) {
  const entry = window.lucide && window.lucide.icons && window.lucide.icons[pascal(name)];
  // lucide 0.4xx: entry = ["svg", attrs, [ [tag, attrs], ... ]]
  const children = (Array.isArray(entry) && Array.isArray(entry[2])) ? entry[2] : [];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={color}
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         style={{ display: 'block', flexShrink: 0, ...style }}>
      {children.map(([t, a], i) => React.createElement(t, { key: i, ...a }))}
    </svg>
  );
}

// A single physical key. dark = use the HUD (dark surface) variant.
function Key({ children, dark, lg }) {
  const cls = (dark ? 'kbd-d' : 'kbd') + (lg ? ' kbd-lg' : '');
  return <span className={cls}>{children}</span>;
}
// A combo like ⌥ + Space rendered as separate caps.
function Combo({ keys, dark, lg, sep = false }) {
  return (
    <span className="kcombo">
      {keys.map((k, i) => (
        <React.Fragment key={i}>
          {i > 0 && sep && <span className="plus">+</span>}
          <Key dark={dark} lg={lg}>{k}</Key>
        </React.Fragment>
      ))}
    </span>
  );
}

function Eyebrow({ children, onMesh }) {
  return <div className={'eyebrow' + (onMesh ? ' on-mesh' : '')}>{children}</div>;
}

function Alias({ children, dark }) {
  return <span className={dark ? 'alias alias-d' : 'alias'}>{children}</span>;
}

// Reveal-on-scroll wrapper (adds .rise once visible)
function Reveal({ children, delay = 0, style, className = '' }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { threshold: 0.12 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} className={className + (seen ? ' rise' : '')}
         style={{ animationDelay: delay + 'ms', opacity: seen ? undefined : 0, ...style }}>
      {children}
    </div>
  );
}

Object.assign(window, { Icon, Key, Combo, Eyebrow, Alias, Reveal });