const projects = [
  {
    id: 1,
    name: "TradeMind",
    tech: "React + TypeScript",
    description: "TradeMind is a smart trading journal and analytics platform helping traders boost profitability through automation and behavioral insights.",
    color: "from-green-600 via-emerald-700 to-teal-800",
    image: "https://...",
    tags: ["AI Analytics", "Trading", "Full Stack"],
    liveUrl: "https://trademind.pro",
    mockupContent: {
      title: "TradeMind",
      subtitle: "Smart Trading Journal & Analytics Platform",
      interface: "trading",
    },
  },
  // ... more projects
];

projects.map((project, index) => {
  const isActive = index === activeProject;
  const isPrevious = index < activeProject;
  const isNext = index > activeProject;
  
  let transform = "";
  let opacity = 1;
  let zIndex = projects.length - index;
  let display = "block";
  
  if (isPrevious) {
    transform = `translateY(-${(activeProject - index) * 20}px) scale(${1 - (activeProject - index) * 0.05})`;
    opacity = 1;
    zIndex = index;
    display = "none"; // Hide previous cards completely
  } else if (isActive) {
    transform = "translateY(0px) scale(1)";
    opacity = 1;
    zIndex = projects.length;
  } else if (isNext) {
    transform = `translateY(${(index - activeProject) * 20}px) scale(${1 - (index - activeProject) * 0.05})`;
    opacity = 1;
    zIndex = projects.length - index;
  }

  return (
    <div
      key={project.id}
      className="absolute inset-0 transition-all duration-700 ease-out"
      style={{ transform, opacity, zIndex, display }}
    >
      {/* Project card */}
    </div>
  );
})

const handleDotClick = (projectIndex: number) => {
  setUserInteracting(true);
  setProgrammaticScrolling(true);
  setActiveProject(projectIndex);
  scrollToProject(projectIndex);
  
  // Reset flags after scroll animation completes
  setTimeout(() => {
    setProgrammaticScrolling(false);
  }, 1000); // Match smooth scroll duration
  
  setTimeout(() => {
    setUserInteracting(false);
  }, 3000); // Give more time after manual navigation
};

{/* Navigation Dots */}
<div className="flex space-x-3 mt-8">
  {projects.map((_, index) => (
    <button
      key={index}
      onClick={() => handleDotClick(index)}
      className={`h-2 rounded-full transition-all duration-500 ${
        index === activeProject ? "bg-orange-500 w-8" : "bg-white/20 w-2 hover:bg-white/40"
      }`}
    />
  ))}
</div>

const scrollToProject = (projectIndex: number) => {
  if (!sectionRef.current) return;

  const sectionHeight = sectionRef.current.offsetHeight;
  const windowHeight = window.innerHeight;
  const sectionTop = sectionRef.current.offsetTop;
  
  // Calculate the scroll position that corresponds to this project
  const targetProgress = projectIndex / (projects.length - 1);
  
  // Calculate the scroll position needed to achieve this progress
  const effectiveScrollHeight = sectionHeight - windowHeight / 2;
  const targetScrollOffset = targetProgress * effectiveScrollHeight;
  const targetScrollY = sectionTop + targetScrollOffset - windowHeight / 2;
  
  // Smooth scroll to the calculated position
  window.scrollTo({
    top: Math.max(0, targetScrollY),
    behavior: 'smooth'
  });
};

<section className="hidden md:block relative bg-black" style={{ height: `${100 + projects.length * 100}vh` }}>
  {/* Sticky header */}
  <div className="sticky top-0 flex flex-col overflow-hidden">
    {/* Stacked cards with transitions */}
  </div>
</section>

<section className="md:hidden bg-black py-12">
  {/* Simple grid of cards */}
  <div className="container mx-auto px-4 space-y-8">
    {projects.map((project, index) => (
      <ScrollFadeIn key={project.id} delay={index * 100}>
        {/* Project card */}
      </ScrollFadeIn>
    ))}
  </div>
</section>

<div className="space-y-4">
  <div className="flex items-center justify-between">
    <h3 className="text-3xl font-bold text-white">{currentProject.name}</h3>
    <span className="text-gray-400">:: {currentProject.tech}</span>
  </div>
  <p className="text-gray-400 text-lg leading-relaxed max-w-4xl">
    {currentProject.description}
  </p>
</div>

{/* Project Counter */}
<div className="text-gray-500 text-sm">
  {String(activeProject + 1).padStart(2, '0')} / {String(projects.length).padStart(2, '0')}
</div>

const [userInteracting, setUserInteracting] = useState(false);
const [programmaticScrolling, setProgrammaticScrolling] = useState(false);

const handleUserInteraction = () => {
  setUserInteracting(true);
  clearTimeout(timeoutId);
  timeoutId = window.setTimeout(() => {
    setUserInteracting(false);
  }, 2000); // Resume auto-scroll after 2 seconds of no interaction
};

window.addEventListener("click", handleUserInteraction);
window.addEventListener("touchstart", handleUserInteraction);

import { ScrollFadeIn, ScrollSlideIn } from "../components/scroll-animations";

<ScrollFadeIn delay={200} className="space-y-6">
  {/* Content fades in as user scrolls */}
</ScrollFadeIn>