import React, { useEffect, useRef, useState } from "react"; import { Check, Code, GitBranch, Star, Rocket } from "lucide-react"; const timelineItems = [ { year: "2026", title: "Present", description: "Building domain-specific languages, diving deep into the Salesforce ecosystem, and writing production Java and Python daily. The craft keeps evolving.", technologies: ["Java", "Python", "Salesforce", "DSLs"], icon: , }, { year: "2024", title: "Shipping & Scaling", description: "The wisdom of past ventures now flows through my work, whether crafting elegant CRUD applications or embarking on bold projects that expand my limits.", technologies: ["Rust", "Typescript", "Go", "Postgres"], icon:

,
  },
  {
    year: "2022",
    title: "Diving Deeper",
    description: "The worlds of systems programming and scalable infrastructure collided as I explored low-level C++ graphics programming and containerization with Docker.",
    technologies: ["C++", "Cmake", "Docker", "Docker Compose"],
    icon: ,
  },
  {
    year: "2020",
    title: "Exploring the Stack",
    description: "Starting with pure HTML and CSS, I explored the foundations of web development, gradually venturing into JavaScript and React to bring my static pages to life.",
    technologies: ["Javascript", "Tailwind", "React", "Express"],
    icon: ,
  },
  {
    year: "2018",
    title: "Starting the Journey",
    description: "An elective Python class in 8th grade transformed my keen interest in programming into a relentless obsession, one that drove me to constantly explore new depths.",
    technologies: ["Python", "Discord.py", "Asyncio", "Sqlite"],
    icon: ,
  },
];

function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; index: number }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  const [skip, setSkip] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const rect = el.getBoundingClientRect();
    const inView = rect.top < window.innerHeight && rect.bottom > 0;
    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";

    if (inView && isReload) {
      setSkip(true);
      setVisible(true);
      return;
    }
    if (inView) {
      requestAnimationFrame(() => setVisible(true));
      return;
    }

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.2 }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  const isLeft = index % 2 === 0;

  return (
    
      
        {/* Node */}
        
          {item.icon}
        

        {/* Card */}
        
          
            {item.year}
            {item.title}
            {item.description}
            
              {item.technologies.map((tech) => (
                
                  {tech}
                
              ))}
            
          
        
      
    
  );
}

export default function Timeline() {
  const lineRef = useRef(null);
  const containerRef = useRef(null);
  const [lineHeight, setLineHeight] = useState(0);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // Animate line to full height over time
          const el = lineRef.current;
          if (el) {
            setLineHeight(100);
          }
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    observer.observe(container);
    return () => observer.disconnect();
  }, []);

  return (
    
      
        My Journey Through Code
      
      
        {/* Animated vertical line */}
        
          
        

        
          {timelineItems.map((item, index) => (
            
          ))}
        
      
    
  );
}