const AboutSection = () => { const FORWARD_VIDEO_SRC = "uploads/1777092074855-xfmauam8qu.mp4"; const REVERSE_VIDEO_SRC = "uploads/about-transform-reverse.mp4"; const sectionRef = React.useRef(null); const videoRef = React.useRef(null); const phaseRef = React.useRef("idle"); const isMobileRef = React.useRef(false); const fallbackPhaseRef = React.useRef("idle"); const playbackAttemptRef = React.useRef(0); const [phase, _setPhase] = React.useState("idle"); // idle | transforming | reversing | cyborg const [showCyborg, setShowCyborg] = React.useState(false); const [videoSrc, setVideoSrc] = React.useState(FORWARD_VIDEO_SRC); const [playNonce, setPlayNonce] = React.useState(0); const [isVideoPlaying, setIsVideoPlaying] = React.useState(false); const shouldShowCyborg = showCyborg && phase !== "reversing"; const shouldShowLabel = phase === "idle" || phase === "cyborg"; const setPhase = (nextPhase) => { phaseRef.current = nextPhase; _setPhase(nextPhase); }; const playCurrentVideo = () => { const video = videoRef.current; if (!video) return; playbackAttemptRef.current += 1; const attemptId = playbackAttemptRef.current; video.muted = true; video.defaultMuted = true; video.currentTime = 0; video.playbackRate = 0.75; const playPromise = video.play(); if (playPromise && typeof playPromise.catch === "function") { playPromise.catch(() => { if (attemptId !== playbackAttemptRef.current) return; setIsVideoPlaying(false); setPhase(fallbackPhaseRef.current); setShowCyborg(fallbackPhaseRef.current === "cyborg"); setVideoSrc(FORWARD_VIDEO_SRC); }); } }; React.useEffect(() => { if (phase !== "transforming" && phase !== "reversing") return; setIsVideoPlaying(false); const frame = requestAnimationFrame(() => { playCurrentVideo(); }); return () => cancelAnimationFrame(frame); }, [phase, videoSrc, playNonce]); const startForward = () => { fallbackPhaseRef.current = "idle"; setPhase("transforming"); setShowCyborg(false); setVideoSrc(FORWARD_VIDEO_SRC); setPlayNonce((value) => value + 1); }; const startReverse = () => { fallbackPhaseRef.current = "cyborg"; setPhase("reversing"); setShowCyborg(true); setVideoSrc(REVERSE_VIDEO_SRC); setPlayNonce((value) => value + 1); }; React.useEffect(() => { const mediaQuery = window.matchMedia("(max-width: 768px)"); const syncMobileState = () => { isMobileRef.current = mediaQuery.matches; }; syncMobileState(); mediaQuery.addEventListener("change", syncMobileState); return () => mediaQuery.removeEventListener("change", syncMobileState); }, []); React.useEffect(() => { const section = sectionRef.current; const scrollContainer = document.getElementById("scroll-container"); if (!section || !scrollContainer) return; const syncFromScrollPosition = () => { if (!isMobileRef.current) return; const containerRect = scrollContainer.getBoundingClientRect(); const sectionRect = section.getBoundingClientRect(); const visibleTop = Math.max(sectionRect.top, containerRect.top); const visibleBottom = Math.min(sectionRect.bottom, containerRect.bottom); const visibleHeight = Math.max(0, visibleBottom - visibleTop); const ratio = visibleHeight / Math.max(1, Math.min(sectionRect.height, containerRect.height)); if (ratio >= 0.45 && phaseRef.current === "idle") { startForward(); return; } if (ratio <= 0.12 && phaseRef.current === "cyborg") { startReverse(); } }; const observer = new IntersectionObserver( ([entry]) => { if (!isMobileRef.current) return; if (entry.intersectionRatio >= 0.55 && phaseRef.current === "idle") { startForward(); return; } if (entry.intersectionRatio <= 0.2 && phaseRef.current === "cyborg") { startReverse(); } }, { root: scrollContainer, threshold: [0.2, 0.55], } ); observer.observe(section); scrollContainer.addEventListener("scroll", syncFromScrollPosition, { passive: true }); window.addEventListener("resize", syncFromScrollPosition); requestAnimationFrame(syncFromScrollPosition); return () => { observer.disconnect(); scrollContainer.removeEventListener("scroll", syncFromScrollPosition); window.removeEventListener("resize", syncFromScrollPosition); }; }, []); const handleActivate = () => { if (phaseRef.current === "idle") { startForward(); return; } if (phaseRef.current === "cyborg") { startReverse(); } }; const handleMouseLeave = () => {}; const highlights = [ { label: "Claude Code / Codex", desc: "Landing pages, dashboards, and tailored web experiences connected to smart automation." }, { label: "AI Automation", desc: "AI agents, RAG pipelines, chatbots, and intelligent routing systems." }, { label: "n8n / Make / Zapier", desc: "Multi-step automations, API integrations, and cross-platform logic." }, { label: "GoHighLevel", desc: "CRM pipelines, workflow builder, automated follow-up sequences." }, ]; const glassPanel = { background: "rgba(5,12,13,0.86)", border: "1px solid rgba(20,184,166,0.16)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.2)", }; return (
{/* Atmospheric background */}
); }; Object.assign(window, { AboutSection });