// Winkz Designs 2026 — brand motif kit (from the logo asset board):
// colorful streams (light trails / ribbon flow), gradient circle (portal rings),
// repeated-W pattern watermark, and a gradient-circle logo mark.
(function () {
  const GRAD_STOPS = [['0', '#F23BFE'], ['0.52', '#79BAFF'], ['1', '#2DE3EA']];
  const LOGO = 'assets/logo-mark.svg';

  // Flowing gradient "streams" — decorative, absolutely positioned, non-interactive.
  function Streams({ style = {}, opacity = 0.55, blur = 22 }) {
    return (
      <svg viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity, ...style }}>
        <defs>
          <linearGradient id="bfx-stream" x1="0" y1="0" x2="1" y2="1">
            {GRAD_STOPS.map(([o, c]) => <stop key={o} offset={o} stopColor={c} />)}
          </linearGradient>
          <filter id="bfx-blur" x="-20%" y="-40%" width="140%" height="180%"><feGaussianBlur stdDeviation={blur} /></filter>
        </defs>
        <g filter="url(#bfx-blur)" fill="none" stroke="url(#bfx-stream)" strokeLinecap="round">
          <path d="M-50 250 C 250 120, 450 340, 700 200 S 1050 60, 1260 180" strokeWidth="10" opacity="0.9" />
          <path d="M-50 300 C 300 200, 520 380, 760 250 S 1080 140, 1260 240" strokeWidth="6" opacity="0.7" />
          <path d="M-50 200 C 260 80, 500 260, 780 140 S 1100 40, 1260 120" strokeWidth="4" opacity="0.6" />
        </g>
      </svg>
    );
  }

  // Concentric gradient "portal" rings.
  function PortalRing({ size = 360, style = {}, opacity = 0.8 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 200 200" aria-hidden="true"
        style={{ position: 'absolute', pointerEvents: 'none', opacity, ...style }}>
        <defs>
          <linearGradient id="bfx-ring" x1="0" y1="0" x2="1" y2="1">
            {GRAD_STOPS.map(([o, c]) => <stop key={o} offset={o} stopColor={c} />)}
          </linearGradient>
          <filter id="bfx-ringblur" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="1.2" /></filter>
        </defs>
        <g fill="none" stroke="url(#bfx-ring)" filter="url(#bfx-ringblur)">
          <circle cx="100" cy="100" r="92" strokeWidth="1.4" opacity="0.35" />
          <circle cx="100" cy="100" r="70" strokeWidth="2" opacity="0.6" />
          <circle cx="100" cy="100" r="48" strokeWidth="2.6" opacity="0.9" />
        </g>
      </svg>
    );
  }

  // Repeated-W watermark pattern (the "logo tags in the back").
  function WPattern({ style = {}, opacity = 0.05, size = 78 }) {
    return (
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity,
        backgroundImage: `url(${LOGO})`, backgroundSize: `${size}px auto`,
        backgroundRepeat: 'repeat', mixBlendMode: 'screen',
        maskImage: 'radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 90%)',
        WebkitMaskImage: 'radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 90%)',
        ...style,
      }} />
    );
  }

  // Gradient-circle logo mark: the W inside a glowing portal ring.
  function LogoMark({ size = 40 }) {
    return (
      <span style={{ position: 'relative', display: 'inline-grid', placeItems: 'center', width: size, height: size, flexShrink: 0 }}>
        <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'conic-gradient(from 210deg, #F23BFE, #79BAFF, #2DE3EA, #F23BFE)', filter: 'blur(1px)', opacity: 0.9 }} />
        <span style={{ position: 'absolute', inset: 2, borderRadius: '50%', background: 'radial-gradient(circle at 50% 35%, #14121c, #0a0a0d)' }} />
        <span style={{ position: 'absolute', inset: -3, borderRadius: '50%', boxShadow: '0 0 20px -4px rgba(242,59,254,0.55), 0 0 26px -6px rgba(45,227,234,0.4)' }} />
        <img src={LOGO} alt="Winkz Designs" style={{ position: 'relative', width: size * 0.56, height: 'auto', display: 'block' }} />
      </span>
    );
  }

  Object.assign(window, { WinkzStreams: Streams, WinkzPortalRing: PortalRing, WinkzWPattern: WPattern, WinkzLogoMark: LogoMark });
})();