bayarea-cc/src/components/home/ProcessTimeline.tsx

import { useEffect, useRef, useState } from 'react';
import { Search, Shield, Cog, Zap } from 'lucide-react';
import { motion, useInView, useScroll, useTransform } from 'framer-motion';
import { fadeInUp, scaleIn } from '@/utils/animations';

const ProcessTimeline = () => {
  const [activeStep, setActiveStep] = useState(0);
  const sectionRef = useRef<HTMLDivElement>(null);
  const headerRef = useRef(null);
  const isHeaderInView = useInView(headerRef, { once: true, margin: "-100px" });

  // Smooth scroll-based timeline progress
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start end", "end start"]
  });
  const timelineProgress = useTransform(scrollYProgress, [0.2, 0.8], [0, 100]);

  const steps = [
    {
      icon: Search,
      title: 'Assess',
      description: 'Discovery, inventory, quick wins report',
      details: 'We start with a comprehensive assessment of your current IT infrastructure, identifying immediate opportunities for improvement and creating a roadmap for optimization.'
    },
    {
      icon: Cog,
      title: 'Stabilize',
      description: 'Patching, backups, device hygiene, ticket triage',
      details: 'Foundation work to ensure your systems are secure, backed up, and running smoothly. We address critical vulnerabilities and establish reliable backup procedures.'
    },
    {
      icon: Shield,
      title: 'Harden',
      description: 'MFA, endpoint security, VPN, network segmentation',
      details: 'Implementation of robust security measures including multi-factor authentication, endpoint protection, secure remote access, and network isolation strategies.'
    },
    {
      icon: Zap,
      title: 'Automate',
      description: 'Monitoring, updates, reporting, playbooks',
      details: 'Deploy automated monitoring systems, update management, comprehensive reporting, and documented procedures to maintain peak performance with minimal intervention.'
    }
  ];

  useEffect(() => {
    const handleScroll = () => {
      if (!sectionRef.current) return;
      
      const section = sectionRef.current;
      const rect = section.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      
      // Calculate scroll progress within the section
      const sectionHeight = rect.height;
      const scrollProgress = Math.max(0, Math.min(1, (windowHeight - rect.top) / (windowHeight + sectionHeight)));
      
      // Determine active step based on scroll progress
      const newActiveStep = Math.min(steps.length - 1, Math.floor(scrollProgress * steps.length));
      setActiveStep(newActiveStep);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [steps.length]);

  return (
    <section ref={sectionRef} className="py-32 bg-background relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute inset-0">
        <div className="absolute inset-0 grid-overlay opacity-10"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          ref={headerRef}
          initial="hidden"
          animate={isHeaderInView ? "visible" : "hidden"}
          variants={fadeInUp}
        >
          <div className="text-center mb-20">
            <h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
              How we <span className="text-neon">transform</span> your IT
            </h2>
            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
              Our proven four-phase methodology ensures systematic improvement and lasting results.
            </p>
          </div>
        </motion.div>

        <div className="relative">
          {/* Timeline line */}
          <div className="absolute left-8 lg:left-1/2 lg:transform lg:-translate-x-1/2 top-0 bottom-0 w-px bg-border">
            <motion.div
              className="absolute top-0 left-0 w-full bg-neon"
              style={{ height: useTransform(timelineProgress, (value) => `${value}%`) }}
            />
          </div>

          {/* Steps */}
          <div className="space-y-16 lg:space-y-24">
            {steps.map((step, index) => {
              const Icon = step.icon;
              const isActive = index <= activeStep;
              const isEven = index % 2 === 0;
              const stepRef = useRef(null);
              const isInView = useInView(stepRef, { once: true, margin: "-150px" });

              return (
                <motion.div
                  key={step.title}
                  ref={stepRef}
                  initial="hidden"
                  animate={isInView ? "visible" : "hidden"}
                  variants={fadeInUp}
                  transition={{ delay: index * 0.1 }}
                >
                  <div className={`relative flex flex-col lg:flex-row items-center ${
                    isEven ? '' : 'lg:flex-row-reverse'
                  }`}>
                    {/* Step content */}
                    <motion.div
                      className={`flex-1 ${isEven ? 'lg:pr-16' : 'lg:pl-16'} ${
                        isEven ? 'lg:text-right' : 'lg:text-left'
                      } text-center lg:text-left`}
                      initial={{ opacity: 0, x: isEven ? -40 : 40 }}
                      animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: isEven ? -40 : 40 }}
                      transition={{ delay: index * 0.1 + 0.2, duration: 0.6 }}
                    >
                      <motion.div
                        className="card-dark p-8 max-w-lg mx-auto lg:mx-0"
                        whileHover={{ y: -5, boxShadow: "0 0 30px rgba(51, 102, 255, 0.3)" }}
                        transition={{ duration: 0.3 }}
                      >
                        <div className="mb-4">
                          <span className="text-sm font-medium text-neon uppercase tracking-wider">
                            Step {index + 1}
                          </span>
                        </div>
                        <h3 className="font-heading font-bold text-2xl text-foreground mb-3">
                          {step.title}
                        </h3>
                        <p className="text-foreground-muted mb-4">
                          {step.description}
                        </p>
                        <p className="text-sm text-foreground-muted">
                          {step.details}
                        </p>
                      </motion.div>
                    </motion.div>

                    {/* Timeline dot */}
                    <div className="relative z-10 my-8 lg:my-0">
                      <motion.div
                        className={`w-16 h-16 rounded-full border-4 flex items-center justify-center ${
                          isActive
                            ? 'border-neon bg-neon text-neon-foreground shadow-neon'
                            : 'border-border bg-background text-foreground-muted'
                        }`}
                        initial={{ scale: 0, rotate: -180 }}
                        animate={isInView ? { scale: 1, rotate: 0 } : { scale: 0, rotate: -180 }}
                        transition={{
                          delay: index * 0.1 + 0.3,
                          duration: 0.6,
                          type: "spring",
                          stiffness: 200
                        }}
                      >
                        <Icon className="w-6 h-6" />
                      </motion.div>
                    </div>

                    {/* Spacer for layout */}
                    <div className="flex-1 hidden lg:block"></div>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProcessTimeline;