/* global React */
/*
 * AioniosBrush — Doodles-style rainbow curtain transition.
 *
 * Three z-layers (bottom → top):
 *   1. .brush-curtain   Opaque inky backdrop + rainbow stripes.
 *                       Fades in fast (kills landing leak), stripes
 *                       paint over for texture, then the WHOLE
 *                       assembly slides off as one curtain with a
 *                       wavy bottom edge.
 *   2. .brush-flash     Radial white burst that pulses at the swap.
 *   3. .decor-layer     Sparkles, hearts, clouds, dots ABOVE the
 *                       curtain so they linger during the reveal.
 *
 * Pure CSS animations — no rAF, no SVG turbulence filter, no per-
 * element drop-shadow. GPU-cheap, 60fps reveal.
 */

const AIONIOS_BRUSH_STRIPES = [
  { color: '#ff6fa8' }, // hot pink
  { color: '#ffa15a' }, // tangerine
  { color: '#ffd84a' }, // sun yellow
  { color: '#6fd97c' }, // grass green
  { color: '#5fc4ff' }, // sky blue
  { color: '#7a8aff' }, // periwinkle
  { color: '#b87aff' }, // ultraviolet
  { color: '#ff6fd6' }, // bubblegum
];

// Single reusable wavy-pill path. ViewBox 100×1000, stretched
// anisotropically to fill each stripe wrapper.
const AIONIOS_BRUSH_STRIPE_PATH =
  'M 50 4 ' +
  'C 78 6 92 22 88 52 ' +
  'C 76 178 102 318 86 458 ' +
  'C 70 598 100 738 84 878 ' +
  'C 80 948 70 996 50 996 ' +
  'C 30 996 20 948 16 878 ' +
  'C 0 738 30 598 14 458 ' +
  'C -2 318 24 178 12 52 ' +
  'C 8 22 22 6 50 4 Z';

// Sparkle decorations OUTSIDE the curtain — they linger during the
// reveal so V2 feels magical.
const AIONIOS_BRUSH_DECOR = [
  { x:  8, y: 22, size: 36, kind: 'spark', delay: 0.35, hue: '#ffea7a' },
  { x: 17, y: 64, size: 26, kind: 'heart', delay: 0.55, hue: '#ff8eb3' },
  { x: 26, y: 32, size: 32, kind: 'spark', delay: 0.70, hue: '#ffffff' },
  { x: 36, y: 78, size: 30, kind: 'cloud', delay: 0.85, hue: '#ffffff' },
  { x: 48, y: 18, size: 42, kind: 'spark', delay: 1.00, hue: '#fff7c2' },
  { x: 58, y: 56, size: 22, kind: 'heart', delay: 1.12, hue: '#ff6fd6' },
  { x: 70, y: 26, size: 30, kind: 'spark', delay: 1.22, hue: '#ffea7a' },
  { x: 80, y: 70, size: 32, kind: 'cloud', delay: 1.30, hue: '#ffffff' },
  { x: 91, y: 40, size: 28, kind: 'spark', delay: 1.40, hue: '#ffffff' },
  { x: 31, y: 12, size: 16, kind: 'dot',   delay: 0.45, hue: '#ffffff' },
  { x: 64, y: 90, size: 18, kind: 'dot',   delay: 1.20, hue: '#ffea7a' },
  { x: 12, y: 48, size: 22, kind: 'heart', delay: 0.75, hue: '#ffffff' },
  { x: 86, y: 14, size: 18, kind: 'dot',   delay: 1.05, hue: '#ff8eb3' },
  { x: 44, y: 46, size: 50, kind: 'spark', delay: 1.15, hue: '#ffffff' },
  { x: 22, y: 88, size: 20, kind: 'dot',   delay: 0.95, hue: '#b87aff' },
  { x: 76, y: 50, size: 24, kind: 'heart', delay: 1.35, hue: '#ff8eb3' },
];

function AioniosBrushSpark({ fill }) {
  return (
    <svg viewBox="0 0 24 24" className="decor-svg" aria-hidden="true">
      <path
        d="M12 0 C13 8 16 11 24 12 C16 13 13 16 12 24 C11 16 8 13 0 12 C8 11 11 8 12 0 Z"
        fill={fill}
        stroke="#1d1a3d"
        strokeWidth="1.4"
        strokeLinejoin="round"
      />
    </svg>
  );
}
function AioniosBrushHeart({ fill }) {
  return (
    <svg viewBox="0 0 24 24" className="decor-svg" aria-hidden="true">
      <path
        d="M12 21 C 12 21 4 14.5 4 9 C 4 5.8 6 4 8.5 4 C 10.3 4 11.4 5.3 12 6.2 C 12.6 5.3 13.7 4 15.5 4 C 18 4 20 5.8 20 9 C 20 14.5 12 21 12 21 Z"
        fill={fill}
        stroke="#1d1a3d"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
    </svg>
  );
}
function AioniosBrushCloud({ fill }) {
  return (
    <svg viewBox="0 0 32 18" className="decor-svg" aria-hidden="true">
      <path
        d="M6 14 C 2 14 1 9 5 8 C 5 4 10 3 12 6 C 13 3 18 3 19 7 C 23 5 28 8 27 12 C 30 12 31 16 27 16 L 7 16 C 4 16 4 14 6 14 Z"
        fill={fill}
        stroke="#1d1a3d"
        strokeWidth="1.4"
        strokeLinejoin="round"
      />
    </svg>
  );
}
function AioniosBrushDot({ fill }) {
  return (
    <svg viewBox="0 0 24 24" className="decor-svg" aria-hidden="true">
      <circle cx="12" cy="12" r="9" fill={fill} stroke="#1d1a3d" strokeWidth="1.6" />
    </svg>
  );
}

function AioniosBrushDecoration({ kind, fill }) {
  switch (kind) {
    case 'heart': return <AioniosBrushHeart fill={fill} />;
    case 'cloud': return <AioniosBrushCloud fill={fill} />;
    case 'dot':   return <AioniosBrushDot   fill={fill} />;
    default:      return <AioniosBrushSpark fill={fill} />;
  }
}

function AioniosBrush() {
  return (
    <div className="brush-overlay" aria-hidden="true">
      {/* 1. CURTAIN — actual coverage. Inky backdrop + painted stripes,
              sliding off together as one unit. */}
      <div className="brush-curtain">
        <div className="brush-curtain-bg" />
        <div className="brush-stripes">
          {AIONIOS_BRUSH_STRIPES.map((s, i) => (
            <div
              key={i}
              className="stripe"
              style={{
                left: `${i * 12.5}vw`,
                animationDelay: `${i * 0.05}s`,
              }}
            >
              <svg
                className="stripe-svg"
                viewBox="0 0 100 1000"
                preserveAspectRatio="none"
                aria-hidden="true"
              >
                <path
                  d={AIONIOS_BRUSH_STRIPE_PATH}
                  fill={s.color}
                  stroke="#1d1a3d"
                  strokeWidth="5"
                  strokeLinejoin="round"
                  vectorEffect="non-scaling-stroke"
                />
              </svg>
            </div>
          ))}
        </div>
      </div>

      {/* 2. FLASH — brief radial bloom at swap time. */}
      <div className="brush-flash" />

      {/* 3. DECOR — sparkles ABOVE the curtain so they linger during
              the V2 reveal. */}
      <div className="decor-layer">
        {AIONIOS_BRUSH_DECOR.map((d, i) => (
          <span
            key={i}
            className="decor"
            style={{
              left: `${d.x}%`,
              top: `${d.y}%`,
              width: `${d.size}px`,
              height: `${d.size}px`,
              animationDelay: `${d.delay}s`,
            }}
          >
            <AioniosBrushDecoration kind={d.kind} fill={d.hue} />
          </span>
        ))}
      </div>
    </div>
  );
}

window.AioniosBrush = AioniosBrush;