import React, { useState, useEffect, useRef, useCallback } from 'react'; import { Lightbulb, Cog, Droplet, Layers, Drill, Wrench, Linkedin, Instagram, Mail, Phone, User, MessageSquare, Flame, // Replaced 'Welding' with 'Flame' for welding icon Slice, // More appropriate for cutting Hammer, // For sheet rolling/bending/shearing Settings // For reverse engineering } from 'lucide-react'; // Using Lucide React for icons const App = () => { const [isScrolled, setIsScrolled] = useState(false); const [lightboxOpen, setLightboxOpen] = useState(false); const [currentImage, setCurrentImage] = useState(''); const sectionsRef = useRef([]); // Add ref to each section for scroll animations const addToRefs = (el) => { if (el && !sectionsRef.current.includes(el)) { sectionsRef.current.push(el); } }; // Scroll event listener for header useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); // Intersection Observer for fade-in animations on sections useEffect(() => { const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1, }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('fade-in-up-visible'); } else { // Optional: remove class when out of view if you want repeatable animation // entry.target.classList.remove('fade-in-up-visible'); } }); }, observerOptions); sectionsRef.current.forEach(section => { if (section) { observer.observe(section); } }); return () => { sectionsRef.current.forEach(section => { if (section) { observer.unobserve(section); } }); }; }, []); // Open lightbox const openLightbox = (imageSrc) => { setCurrentImage(imageSrc); setLightboxOpen(true); }; // Close lightbox const closeLightbox = () => { setLightboxOpen(false); setCurrentImage(''); }; // Function to scroll to a section const scrollToSection = useCallback((id) => { const element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }, []); return (
{/* Tailwind CSS Script - In a real deployment, Tailwind would be compiled. For this environment, assume it's loaded externally. */} {/* Font - Inter - assumed to be globally available via a link tag in the HTML */} {/* Header */}