/* global React, FramerMotion */
/* eslint-disable */

// ============================================================
// Taide Collective — Primitives
// LogoMark, SoundWave, AmbientBackground, Icons, helpers
// ============================================================

const { useState, useEffect, useMemo, useRef } = React;
const { motion, AnimatePresence, useScroll, useTransform, useMotionValue, useSpring } = FramerMotion;

const PALETTE = {
  blackDeep: '#0A0A0A',
  blackCharcoal: '#111617',
  greenDeep: '#0D2B2A',
  aquaPrimary: '#14B8A6',
  aquaLight: '#6EE7D1',
  accentLight: '#C8FFF0',
};

// ------------------------------------------------------------
// Detect reduced motion
// ------------------------------------------------------------
function useReducedMotion() {
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReduced(mq.matches);
    const fn = () => setReduced(mq.matches);
    mq.addEventListener?.('change', fn);
    return () => mq.removeEventListener?.('change', fn);
  }, []);
  return reduced;
}

// ------------------------------------------------------------
// LogoMark — TC monogram, viewBox 0 0 256 256
// ------------------------------------------------------------
function LogoMark({ size = 40, className = '', glow = false }) {
  const gradId = useMemo(() => 'tc-grad-' + Math.random().toString(36).slice(2, 7), []);
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 256 256"
      className={className}
      aria-hidden="true"
      style={glow ? { filter: 'drop-shadow(0 0 18px rgba(20,184,166,0.6))' } : {}}
    >
      <defs>
        <linearGradient id={gradId} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#C8FFF0" />
          <stop offset="35%" stopColor="#6EE7D1" />
          <stop offset="70%" stopColor="#14B8A6" />
          <stop offset="100%" stopColor="#0D2B2A" />
        </linearGradient>
      </defs>
      {/* T crossbar */}
      <rect x="34" y="40" width="120" height="22" rx="3" fill={`url(#${gradId})`} />
      {/* T stem */}
      <rect x="82" y="40" width="24" height="180" rx="3" fill={`url(#${gradId})`} />
      {/* C — open ring on the right */}
      <path
        d="M 200 60
           A 84 84 0 1 0 200 196
           L 200 174
           A 62 62 0 1 1 200 82
           Z"
        fill={`url(#${gradId})`}
      />
    </svg>
  );
}

// ------------------------------------------------------------
// SoundWave — N animated equalizer bars
// ------------------------------------------------------------
function SoundWave({ bars = 60, height = 60, intensity = 1, className = '', barWidth = 2, gap = 3 }) {
  const reduced = useReducedMotion();

  const items = useMemo(() => {
    return Array.from({ length: bars }, (_, i) => {
      const s = (Math.sin(i * 1.7) + 1) / 2;
      const min = Math.max(4, height * 0.05);
      const peak1 = min + s * height * 0.6 * intensity;
      const peak2 = min + ((Math.sin(i * 2.3) + 1) / 2) * height * 0.9 * intensity;
      const peak3 = min + ((Math.sin(i * 3.1 + 0.7) + 1) / 2) * height * 0.45 * intensity;
      const dur = 1.8 + s * 1.2;
      const delay = i * 0.02;
      return { min, peak1, peak2, peak3, dur, delay };
    });
  }, [bars, height, intensity]);

  return (
    <div
      className={'sound-wave flex items-end justify-center ' + className}
      style={{ height, gap: `${gap}px` }}
      aria-hidden="true"
    >
      {items.map((b, i) => (
        <motion.span
          key={i}
          style={{
            display: 'inline-block',
            width: barWidth,
            borderRadius: barWidth,
            background: 'linear-gradient(180deg, #C8FFF0, #14B8A6 60%, #0D2B2A)',
            boxShadow: '0 0 6px rgba(110,231,209,0.5)',
          }}
          initial={{ height: b.min }}
          animate={
            reduced
              ? { height: b.peak1 * 0.5 }
              : { height: [b.min, b.peak1, b.peak2, b.peak3, b.min] }
          }
          transition={
            reduced
              ? { duration: 0 }
              : {
                  duration: b.dur,
                  delay: b.delay,
                  repeat: Infinity,
                  ease: 'easeInOut',
                }
          }
        />
      ))}
    </div>
  );
}

// ------------------------------------------------------------
// Animated ambient background — radial gradients + SVG waves + grain
// ------------------------------------------------------------
function AmbientBackground() {
  const reduced = useReducedMotion();

  const waves = [
    {
      key: 'w1',
      d1: 'M -50 480 C 250 380, 500 600, 750 460 S 1250 360, 1500 500',
      d2: 'M -50 460 C 250 580, 500 380, 750 540 S 1250 600, 1500 440',
      d3: 'M -50 500 C 250 420, 500 540, 750 420 S 1250 460, 1500 520',
      d4: 'M -50 440 C 250 540, 500 420, 750 580 S 1250 500, 1500 460',
      dur: 18, stroke: 'url(#wv-g1)', opacity: 0.7,
    },
    {
      key: 'w2',
      d1: 'M -50 620 C 300 540, 600 720, 900 580 S 1300 520, 1500 640',
      d2: 'M -50 600 C 300 700, 600 540, 900 700 S 1300 660, 1500 580',
      d3: 'M -50 640 C 300 580, 600 680, 900 560 S 1300 620, 1500 660',
      d4: 'M -50 580 C 300 660, 600 580, 900 720 S 1300 580, 1500 600',
      dur: 22, stroke: 'url(#wv-g2)', opacity: 0.55,
    },
    {
      key: 'w3',
      d1: 'M -50 360 C 200 280, 480 460, 740 320 S 1200 240, 1500 380',
      d2: 'M -50 340 C 200 440, 480 280, 740 420 S 1200 460, 1500 320',
      d3: 'M -50 380 C 200 320, 480 420, 740 280 S 1200 320, 1500 400',
      d4: 'M -50 320 C 200 400, 480 320, 740 460 S 1200 380, 1500 340',
      dur: 26, stroke: 'url(#wv-g3)', opacity: 0.5,
    },
  ];

  return (
    <div className="fixed inset-0 z-0 pointer-events-none" aria-hidden="true">
      {/* base radial gradients */}
      <div
        className="absolute inset-0"
        style={{
          background:
            'radial-gradient(ellipse 80% 60% at 70% 30%, rgba(20,184,166,0.22), transparent 60%),' +
            'radial-gradient(ellipse 60% 50% at 20% 80%, rgba(13,43,42,0.66), transparent 65%),' +
            '#0A0A0A',
        }}
      />

      {/* SVG flowing waves */}
      <svg
        className="absolute inset-0 w-full h-full"
        viewBox="0 0 1440 900"
        preserveAspectRatio="none"
        style={{ filter: 'blur(2px)' }}
      >
        <defs>
          <linearGradient id="wv-g1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#6EE7D1" stopOpacity="0" />
            <stop offset="50%" stopColor="#6EE7D1" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#C8FFF0" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="wv-g2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#14B8A6" stopOpacity="0" />
            <stop offset="50%" stopColor="#C8FFF0" stopOpacity="0.5" />
            <stop offset="100%" stopColor="#14B8A6" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="wv-g3" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#6EE7D1" stopOpacity="0" />
            <stop offset="50%" stopColor="#6EE7D1" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#6EE7D1" stopOpacity="0" />
          </linearGradient>
        </defs>

        <path fill="none" stroke={waves[0].stroke} strokeWidth="1.4" strokeLinecap="round" opacity={waves[0].opacity} d={waves[0].d1}>
          {!reduced && (
            <animate attributeName="d" dur={waves[0].dur + 's'} repeatCount="indefinite"
              values={[waves[0].d1, waves[0].d2, waves[0].d3, waves[0].d4, waves[0].d1].join(';')}
              calcMode="spline" keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1" />
          )}
        </path>
        <path fill="none" stroke={waves[1].stroke} strokeWidth="1.4" strokeLinecap="round" opacity={waves[1].opacity} d={waves[1].d1}>
          {!reduced && (
            <animate attributeName="d" dur={waves[1].dur + 's'} repeatCount="indefinite"
              values={[waves[1].d1, waves[1].d2, waves[1].d3, waves[1].d4, waves[1].d1].join(';')}
              calcMode="spline" keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1" />
          )}
        </path>
        <path fill="none" stroke={waves[2].stroke} strokeWidth="1.4" strokeLinecap="round" opacity={waves[2].opacity} d={waves[2].d1}>
          {!reduced && (
            <animate attributeName="d" dur={waves[2].dur + 's'} repeatCount="indefinite"
              values={[waves[2].d1, waves[2].d2, waves[2].d3, waves[2].d4, waves[2].d1].join(';')}
              calcMode="spline" keySplines="0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1" />
          )}
        </path>
      </svg>

      {/* grain */}
      <div className="grain absolute inset-0" />
    </div>
  );
}

// ------------------------------------------------------------
// Icons — inline SVGs
// ------------------------------------------------------------
function Icon({ name, size = 20, className = '', strokeWidth = 1.5 }) {
  const props = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    className,
    'aria-hidden': 'true',
  };
  switch (name) {
    case 'layers':
      return <svg {...props}><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>;
    case 'music':
      return <svg {...props}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>;
    case 'graduation':
      return <svg {...props}><path d="M22 10 12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></svg>;
    case 'video':
      return <svg {...props}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>;
    case 'sun':
      return <svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>;
    case 'sparkles':
      return <svg {...props}><path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4z"/><path d="M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8z"/><path d="M5 17l.6 1.6L7 19l-1.4.4L5 21l-.6-1.6L3 19l1.4-.4z"/></svg>;
    case 'play':
      return <svg {...props}><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg>;
    case 'arrow-right':
      return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right':
      return <svg {...props}><path d="M7 17 17 7M8 7h9v9"/></svg>;
    case 'check':
      return <svg {...props}><path d="M20 6 9 17l-5-5"/></svg>;
    case 'check-circle':
      return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'instagram':
      return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>;
    case 'youtube':
      return <svg {...props}><path d="M22 7s-.2-1.4-.8-2c-.8-.8-1.6-.8-2-.9C16.4 4 12 4 12 4s-4.4 0-7.2.2c-.4 0-1.2 0-2 .9C2.2 5.6 2 7 2 7S1.8 8.6 1.8 10.3v1.4C1.8 13.4 2 15 2 15s.2 1.4.8 2c.8.8 1.8.8 2.3.9 1.7.2 6.9.2 6.9.2s4.4 0 7.2-.2c.4 0 1.2 0 2-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.4C22.2 8.6 22 7 22 7Z"/><polygon points="10 9 15 12 10 15 10 9" fill="currentColor" stroke="none"/></svg>;
    case 'mail':
      return <svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 7 10-7"/></svg>;
    case 'headphones':
      return <svg {...props}><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1v-6h3v4zM3 19a2 2 0 0 0 2 2h1v-6H3v4z"/></svg>;
    case 'menu':
      return <svg {...props}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case 'x':
      return <svg {...props}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case 'users':
      return <svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case 'mic':
      return <svg {...props}><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3"/></svg>;
    case 'chevron-left':
      return <svg {...props}><path d="m15 18-6-6 6-6"/></svg>;
    case 'chevron-right':
      return <svg {...props}><path d="m9 18 6-6-6-6"/></svg>;
    default:
      return null;
  }
}

// Expose globals so other Babel scripts can use them
Object.assign(window, {
  PALETTE,
  LogoMark,
  SoundWave,
  AmbientBackground,
  Icon,
  useReducedMotion,
});