components/Work.js

'use client';

import { motion, useScroll, useTransform } from 'framer-motion';
import { ArrowRight, Github, ExternalLink } from 'lucide-react';
import { useRef } from 'react';

const projects = [
  {
    title: 'NeuroGenesis',
    category: 'Generative AI',
    description: 'A diffusion model capable of generating high-fidelity synthetic data for autonomous training.',
    image: 'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=1965&auto=format&fit=crop',
    tags: ['PyTorch', 'CUDA', 'Diffusion'],
  },
  {
    title: 'Sentient Grid',
    category: 'Reinforcement Learning',
    description: 'Multi-agent system optimizing energy distribution in smart cities using advanced policy gradients.',
    image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop',
    tags: ['RL', 'Python', 'IoT'],
  },
  {
    title: 'Vision Cortex',
    category: 'Computer Vision',
    description: 'Real-time semantic segmentation pipeline running on edge devices with <10ms latency.',
    image: 'https://images.unsplash.com/photo-1555255707-c07966088b7b?q=80&w=2070&auto=format&fit=crop',
    tags: ['OpenCV', 'TensorRT', 'C++'],
  },
];

export default function Work() {
  const containerRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['start end', 'end start'],
  });

  return (
    <section id="projects" ref={containerRef} className="py-32 px-6 relative overflow-hidden">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          className="mb-20 flex flex-col md:flex-row justify-between items-end"
        >
          <div>
            <h2 className="font-serif text-4xl md:text-6xl mb-4">Selected Works</h2>
            <p className="font-mono text-sm text-faint max-w-md">
              Research initiatives and commercial applications pushing the boundaries of intelligence.
            </p>
          </div>
          <div className="mt-6 md:mt-0 font-mono text-xs uppercase tracking-widest border border-white/20 px-4 py-2">
            2023 - 2024
          </div>
        </motion.div>

        <div className="flex flex-col gap-32">
          {projects.map((project, index) => (
            <ProjectCard key={index} project={project} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ project, index }) {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start'],
  });
  
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8]);
  const x = useTransform(scrollYProgress, [0, 0.5, 1], [index % 2 === 0 ? -100 : 100, 0, index % 2 === 0 ? 100 : -100]);
  const opacity = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0]);

  return (
    <motion.div
      ref={ref}
      style={{ scale, x, opacity }}
      className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center group"
    >
      {/* Image Section */}
      <div className={`lg:col-span-7 relative overflow-hidden ${index % 2 !== 0 ? 'lg:order-2' : ''}`}>
        <div className="absolute inset-0 bg-white/10 z-10 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        <img 
          src={project.image} 
          alt={project.title}
          className="w-full h-[400px] md:h-[600px] object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ease-in-out transform group-hover:scale-105"
        />
        {/* Decorative Frame */}
        <div className="absolute top-4 left-4 w-full h-full border border-white/20 -z-10 group-hover:translate-x-2 group-hover:translate-y-2 transition-transform duration-300"></div>
      </div>

      {/* Content Section */}
      <div className={`lg:col-span-5 ${index % 2 !== 0 ? 'lg:order-1 lg:text-right' : ''}`}>
        <div className="font-mono text-xs text-faint uppercase tracking-widest mb-4">
          0{index + 1} / {project.category}
        </div>
        <h3 className="font-serif text-4xl md:text-5xl mb-6 group-hover:text-gray-300 transition-colors">
          {project.title}
        </h3>
        <p className="text-gray-400 leading-relaxed mb-8 font-light">
          {project.description}
        </p>
        
        <div className={`flex flex-wrap gap-2 mb-8 ${index % 2 !== 0 ? 'lg:justify-end' : ''}`}>
          {project.tags.map((tag) => (
            <span key={tag} className="px-3 py-1 border border-white/10 text-xs font-mono uppercase">
              {tag}
            </span>
          ))}
        </div>

        <div className={`flex gap-4 ${index % 2 !== 0 ? 'lg:justify-end' : ''}`}>
          <button className="liquid-btn px-6 py-3 font-mono text-xs uppercase tracking-widest flex items-center gap-2 group/btn">
            View Case Study <ArrowRight size={14} className="group-hover/btn:translate-x-1 transition-transform" />
          </button>
          <button className="px-6 py-3 border border-white/20 font-mono text-xs uppercase tracking-widest hover:bg-white hover:text-black transition-colors">
            Source Code
          </button>
        </div>
      </div>
    </motion.div>
  );
}