'use client'; import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { cn } from '@/lib/utils'; import { Rocket, Code, Paintbrush } from 'lucide-react'; const features = [ { step: 'Step 1', title: 'Build Faster', content: 'Create your MVP in record time with our pre-built blocks and components.', icon: , image: 'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?q=80&w=2070&auto=format&fit=crop', }, { step: 'Step 2', title: 'Customize Easily', content: 'Tailor every component to your needs with our intuitive design system and flexible architecture.', icon: , image: 'https://images.unsplash.com/photo-1618761714954-0b8cd0026356?q=80&w=2070&auto=format&fit=crop', }, { step: 'Step 3', title: 'Deploy Confidently', content: 'Launch your product with confidence using our optimized, responsive, and accessible components.', icon:

,
    image:
      'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop',
  },
  {
    step: 'Step 4',
    title: 'Add Yours!',
    content:
      'Contribute your own blocks and become part of the MVPBlocks community.',
    icon: ,
    image:
      'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop',
  },
];

export default function FeatureSteps() {
  const [currentFeature, setCurrentFeature] = useState(0);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      if (progress < 100) {
        setProgress((prev) => prev + 100 / (4000 / 100));
      } else {
        setCurrentFeature((prev) => (prev + 1) % features.length);
        setProgress(0);
      }
    }, 100);

    return () => clearInterval(timer);
  }, [progress]);

  return (
    
      
        
          
            
              Build Your MVP in Three Steps
            
            
              MVPBlocks helps you create, customize, and deploy your product
              faster than ever before.
            
          
          
        
        

        
          
            {features.map((feature, index) => (
              
                
                  {feature.icon}
                

                
                  
                    {feature.title}
                  
                  
                    {feature.content}
                  
                
              
            ))}
          

          
            
              {features.map(
                (feature, index) =>
                  index === currentFeature && (
                    
                      
                      

                      
                        
                          {feature.step}
                        
                      
                    
                  ),
              )}
            
          
        
      
    
  );
}