// sparkles.jsx — Ported from sparkles.tsx
// @tsparticles/react + framer-motion → window.tsParticles UMD + GSAP
// Requires: tsparticles-slim CDN loaded before this file.

// ─── SparklesCore ─────────────────────────────────────────────────────────────
const SparklesCore = ({
  id,
  className = '',
  background = 'transparent',
  minSize = 1,
  maxSize = 3,
  speed = 4,
  particleColor = '#ffffff',
  particleDensity = 120,
}) => {
  const uniqueId = React.useRef(id || `sparkles-${Math.random().toString(36).slice(2, 8)}`);
  const instanceRef = React.useRef(null);
  const wrapRef     = React.useRef(null);

  React.useEffect(() => {
    if (typeof tsParticles === 'undefined') {
      console.warn('[sparkles] tsParticles not loaded');
      return;
    }

    const pid = uniqueId.current;

    tsParticles.load({
      id: pid,
      options: {
        background: { color: { value: background } },
        fullScreen:  { enable: false, zIndex: 1 },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick:  { enable: true,  mode: 'push' },
            onHover:  { enable: false, mode: 'repulse' },
            resize:   true,
          },
          modes: {
            push:    { quantity: 4 },
            repulse: { distance: 200, duration: 0.4 },
          },
        },
        particles: {
          color: { value: particleColor },
          move: {
            direction: 'none',
            enable: true,
            outModes: { default: 'out' },
            random: false,
            speed: { min: 0.1, max: 1 },
            straight: false,
          },
          number: {
            density: { enable: true, width: 400, height: 400 },
            value: particleDensity,
          },
          opacity: {
            value: { min: 0.1, max: 1 },
            animation: {
              enable: true,
              speed: speed,
              sync: false,
              startValue: 'random',
            },
          },
          shape: { type: 'circle' },
          size: {
            value: { min: minSize, max: maxSize },
          },
          stroke: { width: 0 },
        },
        detectRetina: true,
      },
    }).then(container => {
      instanceRef.current = container;
      // Fade in (GSAP replaces framer-motion useAnimation)
      if (wrapRef.current) {
        gsap.to(wrapRef.current, { opacity: 1, duration: 1, ease: 'power2.out' });
      }
    });

    return () => {
      if (instanceRef.current) {
        instanceRef.current.destroy();
        instanceRef.current = null;
      }
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div ref={wrapRef} className={className} style={{ opacity: 0 }}>
      <div id={uniqueId.current} style={{ width: '100%', height: '100%' }} />
    </div>
  );
};

// ─── Demo 1 — Title + sparkle burst underneath ───────────────────────────────
const SparklesPreview = () => (
  <div className="h-[40rem] w-full bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
    <h1 className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white relative z-20">
      Jawwad
    </h1>
    <div style={{ width: '40rem', height: '10rem', position: 'relative', maxWidth: '100%' }}>
      {/* Gradient lines */}
      <div style={{
        position: 'absolute', top: 0, left: '5rem', right: '5rem', height: '2px',
        background: 'linear-gradient(to right, transparent, #6366f1, transparent)',
        filter: 'blur(1px)',
      }} />
      <div style={{
        position: 'absolute', top: 0, left: '5rem', right: '5rem', height: '1px',
        background: 'linear-gradient(to right, transparent, #6366f1, transparent)',
      }} />
      <div style={{
        position: 'absolute', top: 0, left: '15rem', right: '15rem', height: '5px',
        background: 'linear-gradient(to right, transparent, #0ea5e9, transparent)',
        filter: 'blur(1px)',
      }} />
      <div style={{
        position: 'absolute', top: 0, left: '15rem', right: '15rem', height: '1px',
        background: 'linear-gradient(to right, transparent, #0ea5e9, transparent)',
      }} />

      <SparklesCore
        background="transparent"
        minSize={0.4}
        maxSize={1}
        particleDensity={1200}
        className="w-full h-full"
        particleColor="#FFFFFF"
      />

      {/* Radial mask — soft edges */}
      <div style={{
        position: 'absolute', inset: 0,
        background: '#000',
        maskImage: 'radial-gradient(350px 200px at top, transparent 20%, white)',
        WebkitMaskImage: 'radial-gradient(350px 200px at top, transparent 20%, white)',
      }} />
    </div>
  </div>
);

// ─── Demo 2 — Full-page dark sparkles ────────────────────────────────────────
const SparklesPreviewDark = () => (
  <div style={{
    height: '40rem', position: 'relative', width: '100%',
    background: '#020617', display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center', overflow: 'hidden', borderRadius: '0.5rem',
  }}>
    <div style={{ position: 'absolute', inset: 0 }}>
      <SparklesCore
        id="sparkles-dark"
        background="transparent"
        minSize={0.6}
        maxSize={1.4}
        particleDensity={100}
        className="w-full h-full"
        particleColor="#FFFFFF"
        speed={1}
      />
    </div>
    <h1 className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white relative z-20">
      Build faster
    </h1>
  </div>
);

// ─── Demo 3 — Colourful (accent-tinted) sparkles ─────────────────────────────
const SparklesPreviewColorful = () => (
  <div style={{
    height: '40rem', position: 'relative', width: '100%',
    background: '#000', display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center', overflow: 'hidden', borderRadius: '0.5rem',
  }}>
    <div style={{ position: 'absolute', inset: 0 }}>
      <SparklesCore
        id="sparkles-colorful"
        background="transparent"
        minSize={0.6}
        maxSize={1.4}
        particleDensity={100}
        className="w-full h-full"
        particleColor="var(--accent)"
        speed={0.5}
      />
    </div>
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', gap: '1rem', position: 'relative', zIndex: 20,
    }}>
      <h1 style={{
        fontSize: 'clamp(2rem, 10vw, 7rem)', fontWeight: 700, textAlign: 'center',
        background: 'linear-gradient(to bottom, #fafafa, #a1a1aa)',
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
      }}>
        Automation
      </h1>
      <p style={{ color: '#d4d4d4', cursor: 'default', textAlign: 'center' }}>
        that actually ships
      </p>
    </div>
  </div>
);

window.SparklesCore          = SparklesCore;
window.SparklesPreview       = SparklesPreview;
window.SparklesPreviewDark   = SparklesPreviewDark;
window.SparklesPreviewColorful = SparklesPreviewColorful;