// Iconografía minimal — sólo geometrías simples
const Arrow = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 6l6 6-6 6" />
  </svg>
);
const ArrowDiag = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 17 17 7M9 7h8v8" />
  </svg>
);
const ChevL = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M15 6l-6 6 6 6" />
  </svg>
);
const ChevR = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 6l6 6-6 6" />
  </svg>
);
const Search = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" />
  </svg>
);
// Marcas de esquina (mismas que las piezas de Instagram)
const CornerMark = ({ pos = "tl", c = "currentColor" }) => {
  const t = {
    tl: { transform: 'translate(0,0) rotate(0)' },
    tr: { transform: 'translate(40,0) rotate(90)' },
    br: { transform: 'translate(40,40) rotate(180)' },
    bl: { transform: 'translate(0,40) rotate(270)' },
  }[pos];
  return (
    <svg width="40" height="40" viewBox="0 0 40 40" style={{ overflow: 'visible' }}>
      <g style={t}>
        <path d="M2 14 V2 H14" stroke={c} strokeWidth="1.6" fill="none" />
      </g>
    </svg>
  );
};

Object.assign(window, { Arrow, ArrowDiag, ChevL, ChevR, Search, CornerMark });
