// Garabato original artwork. Fixed colors and proportions.
const BRAND = { yellow: "#FFCC00", magenta: "#FF0066", violet: "#6600FF", orange: "#FF9900", ink: "#0A0A0F" };
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',
};

// Original source assets: fixed colors, square proportions, no filters or redraw.
const SQ_ASSETS = {
  curl: 'assets/brand/curl-yellow.svg', ring: 'assets/brand/ring-magenta.svg',
  hook: 'assets/brand/hook-violet.svg', dash: 'assets/brand/dash-orange.svg',
};
const TRACE_SHAPES = {
  "curl": {
    "file": "curl-yellow",
    "box": "47 53 52 56",
    "color": "#ffcc00",
    "line": "M55.5 75 C54.6 69 59.2 65.8 64 66.8 C69.5 67.7 72.7 72.1 71 77 C69.7 81.1 65.2 83.8 65.8 89.5 C66.2 96.8 71.7 102.9 78.4 102.4 C85.7 102.1 91.4 96.7 90 89.3 C89.1 85.7 85.8 83 84.3 78.8 C81.8 71.6 84.1 64.8 86.5 59.7",
    "path": "M91.67,81.89c-1.46-2.18-3.31-5.08-3.85-8.55v-.08c-.77-3.67.27-8,1.91-11.06.08-.14.16-.28.24-.42,0,0-6.49-5.07-6.51-5.04-.16.24-.32.49-.48.76-.02.03-.05.06-.07.1-1.05,1.65-2.1,4.04-2.69,6.07-1.19,4.2-1.35,7.1-.55,11.07.58,2.77,1.49,5.52,3.07,7.88,1.19,1.66,2.56,2.99,3.14,5,1.55,4.19-.94,8.92-4.98,10.41-4.12,1.67-9.05-.51-10.58-4.68-1-2.76-.6-5.62.74-8.29,1-2.09,2.38-2.9,3.71-4.82,1.17-1.75,1.48-3.9,1.32-5.95.06-3.85-1.63-7.75-4.78-9.99-5.99-4.63-14.75-3.4-18.81,3.96-1.13,1.96-1.68,5.12-1.44,7.09,0,.04.02.07.03.11.03.31.06.57.09.75h8.29s-.02-.05-.03-.09c-.07-.21-.24-.76-.31-1.46-.02-.58.02-1.39.38-2.5.72-1.75,2.7-2.9,4.56-2.63,2.77.42,4.85,3.42,3.83,6.25-.72,2.44-2.93,4.71-3.98,6.88-3.73,6.71-1.8,14.58,2.9,18.82,10.2,9.53,26.45,3.25,27.12-10.74.14-3.01-.71-6.19-2.26-8.85Z"
  },
  "ring": {
    "file": "ring-magenta",
    "box": "79 41 55 65",
    "color": "#ff0066",
    "line": "M87 58 C96 44 115 47 123 63 C130 78 118 89 109 91 C102 91 100 95 99 101",
    "path": "M127.41,61.77l-.04-.11c-5.63-15.06-24.74-21.21-38.48-10.78-.92.67-1.87,1.57-2.74,2.5,0,0,0,0,0,0-.82.83-1.5,1.7-2.05,2.44,0,0-.02.02-.02.03-.07.09-.14.18-.19.26-.17.23-.32.44-.45.63.12.09.28.2.47.35.07.07.14.14.25.21,1,.77,2.67,2.07,4.24,3.29.13.09.27.19.42.3.39.3.77.6,1.13.89.27-.36.53-.71.8-1.07.49-.58.97-1.15,1.46-1.73,1.67-1.68,4.17-3.66,7.64-4.5,10.36-2.45,21.92,5.51,21.1,16.9-.32,8.53-7.7,14.74-14.57,15.8-1.67.25-3.22.81-4.59,1.66-2.14,1.31-3.9,3.44-4.8,5.44-.39.87-1.13,2.84-1.44,3.84-.03.1-.15.5-.34,1.06-.19.56-.35,1.01-.45,1.29,2.64.8,5.29,1.61,7.93,2.41.18-.53.33-1.02.47-1.45,0,0,0,0,0,0,0-.03.02-.06.03-.09.07-.23.14-.44.2-.64.88-2.78,1.79-5.16,5.18-5.64,14.61-1.9,24.45-19.06,18.83-33.29Z"
  },
  "hook": {
    "file": "hook-violet",
    "box": "66 96 42 42",
    "color": "#6600ff",
    "line": "M98 103 L89 125 C86 132 75 132 74 122 C73 114 80 112 87 112 L104.8 112",
    "path": "M104.82,107.85s-3.45.02-3.79.02c-.04,0,0-.1.04-.24.05-.14.07-.22.12-.37.46-1.36,1.1-3.23,1.55-4.54-.22-.12-6.04-1.88-7.77-2.42-.17-.02-.12-.14-.21.15-.59,1.98-1.69,5.32-2.38,7.39-.08.04-.23.02-.32.02-1.44.02-7.4-.11-10.14.06-4.81.23-9.97,3.53-11.53,8.61-4.29,13.73,10.15,22.58,20.68,14.99,4.54-3.97,5.34-9.98,7.28-15.44.02-.07.04-.11.06-.11.35,0,6.4-.07,6.4-.07.02-1.52,0-7.92,0-8.04h0ZM89.36,117.89c-.65,2.32-1.45,5.21-3.18,6.86-3.13,2.81-8.36.74-8.35-3.78.26-4.22,2.93-5.11,7.51-5,1.23,0,2.99,0,4.15,0,.05.02.34-.05.36.07-.05.51-.37,1.32-.47,1.79l-.02.06Z"
  },
  "dash": {
    "file": "dash-orange",
    "box": "101 104 32 16",
    "color": "#ff9900",
    "line": "M104.8 111.85 L128.94 111.85",
    "rect": {
      "x": 104.8,
      "y": 107.83,
      "width": 24.14,
      "height": 8.04
    }
  }
};

// Reveal the untouched silhouettes through animated centerline masks.
const GraphicTrace = ({variant = 'curl', size = 'xl', rotate = 0, style = {}, fullCanvas = false, canvasBox = null, duration = 1100, delay = 0, timeline = null, triggerRef = null, cycle = 3600, onComplete = null}) => {
  const geometry = TRACE_SHAPES[variant];
  const maskId = 'graphic-trace-' + React.useId().replace(/:/g, '');
  const svgRef = React.useRef(null), trailRef = React.useRef(null);
  React.useEffect(() => {
    const svg = svgRef.current, trail = trailRef.current;
    const length = trail.getTotalLength();
    trail.setAttribute('stroke-dasharray', length);
    let visible = false, enabled = window.GarabatoFX?.isMotionEnabled() ?? !matchMedia('(prefers-reduced-motion: reduce)').matches;
    let frame = 0, start = 0, completed = false;
    const render = progress => {
      trail.setAttribute('stroke-dashoffset', length * (1 - progress));
    };
    const tick = now => {
      if (!visible || !enabled) return;
      if (!start) start = now;
      if (timeline && !timeline.current.epoch) timeline.current.epoch = now;
      const time = (now - (timeline ? timeline.current.epoch : start)) % cycle;
      const elapsed = time - 100 - delay;
      const progress = Math.min(1, Math.max(0, elapsed / duration));
      render(progress);
      if (progress < 1) completed = false;
      if (progress === 1 && !completed) { completed = true; onComplete?.(); }
      svg.style.setProperty('--trace-entry', String(Math.min(1, Math.max(0, elapsed / 400))));
      frame = requestAnimationFrame(tick);
    };
    const resume = () => {
      cancelAnimationFrame(frame); start = 0; completed = false;
      if (!enabled) { render(1); svg.style.setProperty('--trace-entry', '1'); }
      else { render(0); svg.style.setProperty('--trace-entry', '0'); if (visible) frame = requestAnimationFrame(tick); }
    };
    const onMotion = e => { enabled = e.detail.enabled; if (timeline) timeline.current.epoch = 0; resume(); };
    window.addEventListener('garabato-motion-change', onMotion);
    const observer = new IntersectionObserver(entries => {
      visible = entries[0].isIntersecting;
      if (timeline && visible && !timeline.current.visible) timeline.current.epoch = 0;
      if (timeline) timeline.current.visible = visible;
      if (visible) resume(); else cancelAnimationFrame(frame);
    }, {threshold: .15});
    observer.observe(triggerRef?.current || svg); resume();
    return () => { cancelAnimationFrame(frame); observer.disconnect(); window.removeEventListener('garabato-motion-change', onMotion); };
  }, [variant, duration, delay, timeline, triggerRef, cycle, onComplete]);
  return <svg ref={svgRef} className={'sq sq--trace ' + (typeof size === 'string' ? 'sq--' + size : '')}
    viewBox={canvasBox || (fullCanvas ? '0 0 180 180' : geometry.box)} aria-hidden="true" focusable="false" style={{...style, width: typeof size === 'number' ? size : style.width, transform: rotate ? 'rotate(' + rotate + 'deg)' : style.transform}}>
    <defs><mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="180">
      <path ref={trailRef} className="graphic-trace__trail" d={geometry.line} fill="none" stroke="white" strokeWidth="14" strokeLinecap="round" strokeLinejoin="round"/>
    </mask></defs>
    {geometry.path ? <path className="graphic-trace__shape" d={geometry.path} fill={geometry.color} mask={'url(#' + maskId + ')'}/> : <rect className="graphic-trace__shape" {...geometry.rect} fill={geometry.color} mask={'url(#' + maskId + ')'}/>}
  </svg>;
};

const Squiggle = ({ variant = 'curl', size, rotate = 0, trace = false, className = '', style = {} }) => {
  const v = SQ_ALIAS[variant] || variant;
  if (!SQ_ASSETS[v]) return null;
  if (trace) return <GraphicTrace variant={v} size={size} rotate={rotate} style={style}/>;
  return <img src={SQ_ASSETS[v]} alt="" aria-hidden="true" width="251" height="251"
    className={['sq', 'sq--original', 'sq--' + v, typeof size === 'string' ? 'sq--' + size : '', className].filter(Boolean).join(' ')}
    style={{ ...style, width: typeof size === 'number' ? size : style.width, height: 'auto', aspectRatio: '1 / 1', objectFit: 'contain', filter: 'none', opacity: 1, transform: rotate ? 'rotate(' + rotate + 'deg)' : style.transform }}/>
};



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: 1,
          '--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} trace={it.trace}/>
      </div>
    ))}
  </div>
);


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

// Approved color pairings, using the supplied originals without recoloring.
const BRAND_CARD_PAIRS = [
 { key: 'violet', background: '#6600ff', foreground: '#ffcc00', text: '#ffffff', image: 'assets/brand/yellow-on-violet.svg' },
 { key: 'yellow', background: '#ffcc00', foreground: '#ff0066', text: '#0a0a0f', image: 'assets/brand/magenta-on-yellow.svg' },
 { key: 'orange', background: '#ff9900', foreground: '#6600ff', text: '#0a0a0f', image: 'assets/brand/violet-on-orange.svg' },
 { key: 'magenta', background: '#ff0066', foreground: '#ff9900', text: '#0a0a0f', image: 'assets/brand/orange-on-magenta.svg' },
];
const brandCardPair = (index = 0) => BRAND_CARD_PAIRS[index % BRAND_CARD_PAIRS.length];
const brandCardStyle = (index = 0) => { const p = brandCardPair(index); return { background: p.background, color: p.text, '--card-bg': p.background, '--card-fg': p.foreground, '--card-text': p.text }; };
const BrandCardArt = ({ index = 0, className = '' }) => <img className={'brand-card-art ' + className} src={brandCardPair(index).image} alt="" aria-hidden="true" width="751" height="751" loading="lazy" decoding="async"/>;
Object.assign(window, { BRAND_CARD_PAIRS, brandCardPair, brandCardStyle, BrandCardArt });