// ============================================================
// GARABATO · Biblioteca de Squiggles  (v4 — piezas del logo)
// ------------------------------------------------------------
// Solo 4 formas, calcadas del patrón de marca (las cuatro partes
// en que se descompone el isotipo):
//   curl — pieza amarilla: gancho arriba-izquierda + cuenco abierto
//   ring — pieza magenta: aro abierto con cola (un "?" sin punto)
//   hook — pieza violeta: lazo con los dos brazos cruzados
//   dash — pieza naranja: barra recta de puntas rectas
// Las variantes viejas (wave, coil, zigzag, dots…) se normalizan
// a una de estas 4 para que TODO el sitio use el mismo vocabulario.
// ============================================================

const BRAND = { yellow: '#FFD000', magenta: '#FF0068', violet: '#6800FF', orange: '#FF9800', ink: '#0A0A0F' };

// alias: variantes viejas → pieza del logo equivalente
const SQ_ALIAS = {
  eye: 'ring', loop: 'ring', spiral: 'ring', swirl: 'ring', arc: 'ring', knot: 'ring',
  squiggle: 'curl', wave: 'curl', scribble: 'curl', coil: 'curl', sprout: 'curl', tangle: 'curl',
  bracket: 'hook', cross: 'hook', burst: 'hook', zigzag: 'hook',
  dots: 'dash',
};

// color por defecto de cada pieza (como en el patrón de marca)
const SQ_DEFAULT_COLOR = { ring: 'magenta', hook: 'violet', curl: 'yellow', dash: 'orange' };

// Geometría de cada pieza (viewBox, grosor y trazos).
// Puntas rectas (butt) como en el logo: las piezas son "cortes" del trazo.
const SQ_SHAPES = {
  curl: {
    viewBox: '0 0 72 82', strokeWidth: 11,
    paths: ['M 6 34 C 11 34, 14 31, 15 27 C 16 19, 20 14, 27 14 C 35 14, 40 21, 38 30 C 36 39, 28 44, 26 54 C 24 66, 32 72, 42 72 C 54 72, 63 62, 62 50 C 61 38, 60 26, 56 12'],
  },
  ring: {
    viewBox: '0 0 84 106', strokeWidth: 11,
    paths: ['M 20.6 42.8 A 27 27 0 1 1 55 77 C 48 80, 38 83, 36 96'],
  },
  hook: {
    viewBox: '0 0 84 86', strokeWidth: 11,
    circle: { cx: 32, cy: 64, r: 14 },
    paths: ['M 44.1 71 L 68.1 29.4', 'M 29.6 50.2 L 76.9 41.85'],
  },
  dash: {
    viewBox: '0 0 96 40', strokeWidth: 24,
    paths: ['M 8 20 L 88 20'],
  },
};

const Squiggle = ({ variant = 'curl', color, size, rotate = 0, draw = false, className = '', style = {}, ...props }) => {
  const v = SQ_ALIAS[variant] || variant;
  const shape = SQ_SHAPES[v];
  if (!shape) return null;
  const col = (!color || color === 'auto') ? SQ_DEFAULT_COLOR[v] : color;
  const cls = [
    'sq', `sq--${v}`,
    typeof size === 'string' ? `sq--${size}` : '',
    col ? `sq--${col}` : '',
    draw ? 'sq--draw' : '',
    className,
  ].filter(Boolean).join(' ');
  const st = { transform: rotate ? `rotate(${rotate}deg)` : undefined, ...style };
  return (
    <svg
      viewBox={shape.viewBox}
      className={cls}
      style={st}
      fill="none"
      stroke="currentColor"
      strokeWidth={shape.strokeWidth}
      strokeLinecap="butt"
      strokeLinejoin="round"
      aria-hidden="true"
      focusable="false"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      {shape.circle && <circle pathLength={1} {...shape.circle}/>}
      {/* pathLength=1 → el draw-in funciona igual sin importar el largo del path */}
      {shape.paths.map((d, i) => <path key={i} pathLength={1} d={d}/>)}
    </svg>
  );
};

// Composición decorativa: varios squiggles dispersos
// Cada item puede pedir draw / float / parallax / delay.
const SquiggleScatter = ({ items = [], draw = false, style = {} }) => (
  <div className="sq-scatter" aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', ...style }}>
    {items.map((it, i) => (
      <div
        key={i}
        className={[it.float ? 'sq--float' : '', it.parallax ? 'sq-parallax' : ''].filter(Boolean).join(' ')}
        data-speed={it.parallax || undefined}
        style={{
          position: 'absolute',
          top: it.top, left: it.left, right: it.right, bottom: it.bottom,
          transform: `rotate(${it.rotate || 0}deg)`,
          opacity: it.opacity,
          '--rot': `${it.rotate || 0}deg`,
          '--delay': `${it.delay || i * 0.12}s`,
        }}
      >
        <Squiggle variant={it.variant} color={it.color} size={it.size} draw={draw || it.draw}/>
      </div>
    ))}
  </div>
);

Object.assign(window, { Squiggle, SquiggleScatter, BRAND, SQ_SHAPES });