import React, { useRef, useState, useEffect, useId } from 'react';
import { motion } from 'framer-motion';
import * as THREE from 'three';
import { 
  Zap, 
  Github, 
  Twitter, 
  ArrowRight,
  Sparkles,
  Layers,
  Cpu
} from 'lucide-react';

// --- UTILS ---
function cn(...inputs) {
  return inputs.filter(Boolean).join(" ");
}

// --- 1. NATIVE SPARKLES COMPONENT (Zero-Dependency) ---
const SparklesCore = ({ 
  id, 
  className, 
  minSize = 0.6, 
  maxSize = 1.4, 
  speed = 1, 
  particleColor = "#ffffff", 
  particleDensity = 100 
}) => {
  const canvasRef = useRef(null);
  const generatedId = useId();
  const actualId = id || generatedId;

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let animationFrameId;
    let particles = [];

    const resize = () => {
      const parent = canvas.parentElement;
      if (parent) {
        canvas.width = parent.offsetWidth;
        canvas.height = parent.offsetHeight;
      }
    };

    class Particle {
      constructor() { this.reset(); }
      reset() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * (maxSize - minSize) + minSize;
        this.vx = (Math.random() - 0.5) * speed * 0.5;
        this.vy = (Math.random() - 0.5) * speed * 0.5;
        this.opacity = Math.random();
        this.opacitySpeed = (Math.random() * 0.02 + 0.01) * speed;
      }
      update() {
        this.x += this.vx;
        this.y += this.vy;
        this.opacity += this.opacitySpeed;
        if (this.opacity > 1 || this.opacity < 0) this.opacitySpeed *= -1;
        if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) this.reset();
      }
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = particleColor;
        ctx.globalAlpha = Math.max(0, this.opacity);
        ctx.fill();
      }
    }

    const init = () => {
      resize();
      particles = [];
      const count = (canvas.width * canvas.height) / (100000 / particleDensity);
      for (let i = 0; i < count; i++) particles.push(new Particle());
    };

    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      particles.forEach(p => { p.update(); p.draw(); });
      animationFrameId = requestAnimationFrame(animate);
    };

    window.addEventListener('resize', init);
    init();
    animate();

    return () => {
      window.removeEventListener('resize', init);
      cancelAnimationFrame(animationFrameId);
    };
  }, [maxSize, minSize, particleColor, particleDensity, speed]);

  return (
    <div className={cn("h-full w-full", className)} id={actualId}>
      <canvas ref={canvasRef} className="h-full w-full pointer-events-none" />
    </div>
  );
};

// --- 2. GLOBAL SHADER BACKGROUND ---
const ShaderBackground = () => {
  const canvasRef = useRef(null);
  const vsSource = `attribute vec4 aVertexPosition; void main() { gl_Position = aVertexPosition; }`;
  const fsSource = `
    precision highp float;
    uniform vec2 iResolution;
    uniform float iTime;
    const float scale = 5.0;
    const vec4 lineColor = vec4(0.4, 0.2, 0.8, 1.0);
    const int linesPerGroup = 16;
    float random(float t) { return (cos(t) + cos(t * 1.3 + 1.3) + cos(t * 1.4 + 1.4)) / 3.0; }
    void main() {
      vec2 uv = gl_FragCoord.xy / iResolution.xy;
      vec2 space = (gl_FragCoord.xy - iResolution.xy / 2.0) / iResolution.x * 2.0 * scale;
      float verticalFade = 1.0 - (cos(uv.y * 6.28) * 0.5 + 0.5);
      vec4 lines = vec4(0.0);
      for(int l = 0; l < linesPerGroup; l++) {
        float rand = random(float(l) + space.x * 0.5 + iTime * 0.2) * 0.5 + 0.5;
        float linePos = random(space.x * 0.2 + iTime * 0.2) * (1.0 - (cos(uv.x * 6.28)*0.5+0.5)) + float(l)*0.1;
        float line = smoothstep(0.05, 0.0, abs(linePos - space.y));
        lines += line * lineColor * rand;
      }
      gl_FragColor = vec4(0.02, 0.02, 0.05, 1.0) * verticalFade + lines * 0.3;
    }
  `;

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const gl = canvas.getContext('webgl');
    if (!gl) return;
    const loadS = (t, s) => { const sh = gl.createShader(t); gl.shaderSource(sh, s); gl.compileShader(sh); return sh; };
    const program = gl.createProgram();
    gl.attachShader(program, loadS(gl.VERTEX_SHADER, vsSource));
    gl.attachShader(program, loadS(gl.FRAGMENT_SHADER, fsSource));
    gl.linkProgram(program);
    const posBuf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
    const render = (time) => {
      canvas.width = window.innerWidth; canvas.height = window.innerHeight;
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.useProgram(program);
      gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), canvas.width, canvas.height);
      gl.uniform1f(gl.getUniformLocation(program, 'iTime'), time * 0.001);
      const loc = gl.getAttribLocation(program, 'aVertexPosition');
      gl.enableVertexAttribArray(loc);
      gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      requestAnimationFrame(render);
    };
    render(0);
  }, []);
  return <canvas ref={canvasRef} className="fixed inset-0 -z-20 pointer-events-none opacity-40" />;
};

// --- 3. INLINE SHADER ANIMATION CARD ---
function ShaderAnimation({ className }) {
  const containerRef = useRef(null)
  const sceneRef = useRef(null)

  useEffect(() => {
    if (!containerRef.current) return
    const container = containerRef.current
    const vertexShader = `void main() { gl_Position = vec4( position, 1.0 ); }`
    const fragmentShader = `
      precision highp float; 
      uniform vec2 resolution; 
      uniform float time; 
      void main(void) { 
        vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 
        float t = time*0.05; 
        float lineWidth = 0.002; 
        vec3 color = vec3(0.0); 
        for(int j = 0; j < 3; j++){ 
          for(int i=0; i < 5; i++){ 
            color[j] += lineWidth*float(i*i) / abs(fract(t - 0.01*float(j)+float(i)*0.01)*5.0 - length(uv) + mod(uv.x+uv.y, 0.2)); 
          } 
        } 
        gl_FragColor = vec4(color[0],color[1],color[2],1.0); 
      }
    `
    const camera = new THREE.Camera(); camera.position.z = 1;
    const scene = new THREE.Scene(); const geometry = new THREE.PlaneGeometry(2, 2);
    const uniforms = { time: { type: "f", value: 1.0 }, resolution: { type: "v2", value: new THREE.Vector2() } };
    const material = new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader });
    const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement);
    
    const onWindowResize = () => {
      const width = container.clientWidth; const height = container.clientHeight;
      renderer.setSize(width, height);
      uniforms.resolution.value.x = renderer.domElement.width; uniforms.resolution.value.y = renderer.domElement.height;
    }
    onWindowResize(); window.addEventListener("resize", onWindowResize, false);
    
    const animate = () => {
      const animationId = requestAnimationFrame(animate);
      uniforms.time.value += 0.05; renderer.render(scene, camera);
      if (sceneRef.current) sceneRef.current.animationId = animationId;
    }
    sceneRef.current = { camera, scene, renderer, uniforms, animationId: 0 }; animate();
    
    return () => {
      window.removeEventListener("resize", onWindowResize);
      if (sceneRef.current) { 
        cancelAnimationFrame(sceneRef.current.animationId); 
        if(container && renderer.domElement) container.removeChild(renderer.domElement); 
        renderer.dispose(); geometry.dispose(); material.dispose(); 
      }
    }
  }, [])
  return <div ref={containerRef} className={cn("w-full h-full", className)} />
}

// --- 4. SPLINE SCENE ---
const SplineScene = ({ scene, className }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://unpkg.com/@splinetool/viewer@1.0.93/build/spline-viewer.js';
    script.onload = () => setIsLoaded(true);
    document.head.appendChild(script);
  }, []);

  return (
    <div className={cn("relative w-full h-full overflow-hidden", className)}>
      {!isLoaded && (
        <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/20 backdrop-blur-sm z-20">
          <div className="w-10 h-10 border-2 border-zinc-800 border-t-white rounded-full animate-spin mb-4" />
        </div>
      )}
      <spline-viewer url={scene} style={{ width: '100%', height: '100%' }}></spline-viewer>
    </div>
  );
};


// --- UI HELPERS ---
const Card = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-3xl border border-zinc-800 bg-zinc-950/80 text-card-foreground shadow-sm backdrop-blur-md overflow-hidden",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const Spotlight = ({ className, fill }) => {
  return (
    <svg
      className={cn(
        "animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-0",
        className
      )}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 3787 2842"
      fill="none"
    >
      <g filter="url(#filter)">
        <ellipse cx="1924.71" cy="273.501" rx="1924.71" ry="273.501" transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)" fill={fill || "white"} fillOpacity="0.21" />
      </g>
      <defs>
        <filter id="filter" x="0.860352" y="0.838989" width="3785.16" height="2840.26" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur_1065_8" />
        </filter>
      </defs>
    </svg>
  );
};

// --- MAIN APP ---
export default function App() {
  return (
    <div className="min-h-screen bg-black text-white font-sans selection:bg-purple-500 selection:text-white">
      {/* CSS for animations & Spline watermark hiding */}
      <style>{`
        @keyframes spotlight {
          0% { opacity: 0; transform: translate(-72%, -62%) scale(0.5); }
          100% { opacity: 1; transform: translate(-50%,-40%) scale(1); }
        }
        .animate-spotlight { animation: spotlight 2s ease .75s 1 forwards; }
        spline-viewer::part(logo) { display: none !important; }
      `}</style>

      {/* Global Background Layer */}
      <ShaderBackground />

      <nav className="fixed top-0 w-full z-50 border-b border-white/5 bg-black/40 backdrop-blur-xl">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2 font-bold italic tracking-tighter">
            <div className="w-8 h-8 bg-white text-black flex items-center justify-center rounded-lg not-italic">E</div>
            EMJAYAITCHCO
          </div>
          <button className="text-[10px] font-bold uppercase tracking-widest px-4 py-2 border border-white/10 rounded-full hover:bg-white hover:text-black transition-all">
            Client Portal
          </button>
        </div>
      </nav>

      <main className="pt-32 px-6 max-w-7xl mx-auto space-y-32">
        
        {/* HERO: Spline + Spotlight Integration */}
        <section>
          <Card className="w-full min-h-[600px] relative overflow-hidden border-white/10">
            <Spotlight className="-top-40 left-0 md:left-60 md:-top-20" fill="white" />
            
            <div className="flex flex-col md:flex-row h-full">
              <div className="flex-[1.2] p-12 relative z-10 flex flex-col justify-center">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[10px] font-bold uppercase tracking-wider text-purple-400 mb-8 w-fit">
                  <Zap size={10} className="text-purple-400" />
                  <span>Enterprise Solutions Active</span>
                </div>
                <motion.h1 
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="text-5xl md:text-7xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 italic tracking-tighter"
                >
                  DIGITAL<br />ECOSYSTEMS.
                </motion.h1>
                <motion.p 
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 }}
                  className="mt-6 text-neutral-400 max-w-lg text-lg leading-relaxed"
                >
                  At EmjayAitchco, we merge breathtaking website design with robust systems integration. We don't just build digital storefronts; we architect scalable technological ecosystems that drive your business forward.
                </motion.p>
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3 }} className="mt-8 flex gap-4">
                  <button className="px-8 py-4 bg-white text-black font-bold rounded-2xl flex items-center gap-2 hover:bg-zinc-200 transition-colors">
                    Initiate Project <ArrowRight size={18} />
                  </button>
                </motion.div>
              </div>

              <div className="flex-1 relative min-h-[400px]">
                {/* Gradient fade to seamlessly blend Spline into card */}
                <div className="absolute inset-0 z-10 pointer-events-none bg-gradient-to-t from-zinc-950/90 via-transparent to-transparent lg:bg-gradient-to-l" />
                <SplineScene 
                  scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode"
                  className="w-full h-full scale-110"
                />
              </div>
            </div>
          </Card>
        </section>

        {/* SHOWCASE: Shader Animation Integration */}
        <section className="space-y-8">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div className="max-w-xl">
              <h2 className="text-3xl font-bold tracking-tight mb-4 flex items-center gap-3">
                <Sparkles size={24} className="text-purple-500" /> Architected for Scale
              </h2>
              <p className="text-zinc-400">
                Behind every captivating interface is a complex network of data. We specialize in untangling your tech stack—connecting disparate systems, automating complex workflows, and engineering custom APIs that synchronize your operations flawlessly.
              </p>
            </div>
          </div>
          <Card className="relative h-[600px] w-full border-white/5 group overflow-hidden">
             <ShaderAnimation className="scale-105 group-hover:scale-100 transition-transform duration-[3s]" />
             <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black/60 pointer-events-none" />
             <div className="absolute bottom-12 left-12 z-10">
                <span className="text-5xl md:text-8xl font-black italic tracking-tighter text-white/90 leading-none">
                  SYSTEM<br />SYNC
                </span>
             </div>
             <div className="absolute top-10 right-10 text-[10px] font-mono text-zinc-500 uppercase tracking-[0.3em] bg-black/60 backdrop-blur-xl p-6 border border-white/10 rounded-2xl">
                Data Flow: Optimized<br />
                Integrations: Active<br />
                Status: Verified
             </div>
          </Card>
        </section>

        {/* GRID: Feature Highlights */}
        <section className="grid md:grid-cols-3 gap-6">
          {[
            { 
              title: 'Immersive Web Design', 
              icon: Layers, 
              desc: 'We craft bespoke, high-performance websites that captivate your audience and convert visitors into loyal clients. Every pixel is optimized for aesthetic brilliance and intuitive UX.' 
            },
            { 
              title: 'Systems Integration', 
              icon: Zap, 
              desc: 'Siloed data is the enemy of growth. We seamlessly connect your CRM, ERP, and third-party platforms into a unified powerhouse, eliminating friction and automating the mundane.' 
            },
            { 
              title: 'Scalable Architecture', 
              icon: Cpu, 
              desc: 'Future-proof your business with modern tech stacks. From complex web applications to headless commerce, we deploy secure, high-speed solutions engineered for tomorrow\'s demands.' 
            }
          ].map((item, i) => (
            <Card key={i} className="p-10 border-white/5 hover:border-purple-500/50 transition-colors group">
              <div className="w-14 h-14 rounded-2xl bg-zinc-900 flex items-center justify-center mb-8 border border-zinc-800 group-hover:bg-purple-600 transition-all">
                <item.icon size={24} className="text-white" />
              </div>
              <h3 className="text-xl font-bold mb-4 tracking-tight">{item.title}</h3>
              <p className="text-zinc-500 text-sm leading-relaxed">{item.desc}</p>
            </Card>
          ))}
        </section>

        {/* CTA: Sparkles Integration */}
        <section className="pb-20">
          <div className="h-[40rem] relative w-full bg-zinc-950 border border-white/5 rounded-[3rem] flex flex-col items-center justify-center overflow-hidden">
            <div className="w-full absolute inset-0 h-full">
              <SparklesCore
                id="footer-sparkles"
                minSize={0.6}
                maxSize={1.4}
                particleDensity={120}
                className="w-full h-full"
                particleColor="#a855f7"
                speed={1.5}
              />
            </div>
            <div className="relative z-20 text-center px-6">
              <h2 className="text-4xl md:text-7xl font-bold tracking-tighter mb-4 italic">
                READY TO <span className="text-purple-500">EVOLVE?</span>
              </h2>
              <p className="text-zinc-400 max-w-md mx-auto mb-8 font-medium">
                Stop wrestling with fragmented technology. Partner with EmjayAitchco to build a cohesive, high-performance digital presence that scales with your ambition.
              </p>
              <div className="flex justify-center gap-4">
                 <button className="px-8 py-4 bg-purple-600 text-white font-bold rounded-xl hover:bg-purple-500 transition-colors shadow-[0_0_40px_rgba(168,85,247,0.3)] hover:scale-105">
                   Schedule Consultation
                 </button>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-white/5 py-12 px-6 bg-black/40 backdrop-blur-md">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
          <div className="text-zinc-600 text-[10px] font-bold tracking-[0.4em] uppercase">
            EmjayAitchco Digital Integration © 2026
          </div>
          <div className="flex gap-6 text-zinc-500">
             <Twitter size={18} className="hover:text-white cursor-pointer transition-colors" />
             <Github size={18} className="hover:text-white cursor-pointer transition-colors" />
          </div>
        </div>
      </footer>
    </div>
  )
}