"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useScroll, useTransform, AnimatePresence, MotionValue } from "framer-motion"; import { X } from "lucide-react"; /* IMAGE ASSET DIRECTORIES */ const voiceCylinder = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/A1.png"; const voicePipe = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/A2.png"; const voiceBlock = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/A4.png"; const voiceTwisted = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/A5.png"; const voiceCoil = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/A6.png"; const imageCylinder = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/B1.png"; const imagePipe = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/B2.png"; const imageSphere = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/B3.png"; const imageBlock = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/B4.png"; const imageTwisted = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/B5.png"; const videoBottom = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/C1.png"; const videoTop = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/C2.png"; const automationD1 = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/D1.png"; const automationD2 = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/D2.png"; const automationD3 = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/D3.png"; const automationD4 = "https://cdn.jiro.build/AI%20Agent%20Hub/Images/D4.png"; interface SectionProps { isActive?: boolean; } function AIHubHeader({ isActive = true }: SectionProps) { return (

AI Voice Studio

); } function AIImageSection({ isActive }: SectionProps) { const [isInView, setIsInView] = useState(false); const containerRef = useRef(null); useEffect(() => { if (isActive !== undefined) { setIsInView(isActive); return; } const observer = new IntersectionObserver( ([entry]) => { setIsInView(entry.isIntersecting); }, { threshold: 0.15 } ); if (containerRef.current) { observer.observe(containerRef.current); } return () => observer.disconnect(); }, [isActive]); return (

AI Image Generator

); } function AIVideoSection({ isActive }: SectionProps) { const [isInView, setIsInView] = useState(false); const containerRef = useRef(null); useEffect(() => { if (isActive !== undefined) { setIsInView(isActive); return; } const observer = new IntersectionObserver( ([entry]) => { setIsInView(entry.isIntersecting); }, { threshold: 0.15 } ); if (containerRef.current) { observer.observe(containerRef.current); } return () => observer.disconnect(); }, [isActive]); return (

AI Video Creator

); } function AIAutomationSection({ isActive }: SectionProps) { const [isInView, setIsInView] = useState(false); const containerRef = useRef(null); useEffect(() => { if (isActive !== undefined) { setIsInView(isActive); return; } const observer = new IntersectionObserver( ([entry]) => { setIsInView(entry.isIntersecting); }, { threshold: 0.15 } ); if (containerRef.current) { observer.observe(containerRef.current); } return () => observer.disconnect(); }, [isActive]); return (

AI Automation Agents

); } interface CurvedMenuProps { scrollYProgress: MotionValue; } function CurvedMenu({ scrollYProgress }: CurvedMenuProps) { const startOffset = useTransform(scrollYProgress, [0, 0.33, 0.66, 1], ["101%", "68%", "34%", "1%"]); const voiceStudioColor = useTransform(scrollYProgress, [0, 0.33], ["rgba(255, 255, 255, 1)", "rgba(255, 255, 255, 0.4)"]); const imageGenColor = useTransform(scrollYProgress, [0, 0.33, 0.66], ["rgba(255, 255, 255, 0.4)", "rgba(255, 255, 255, 1)", "rgba(255, 255, 255, 0.4)"]); const videoCreatorColor = useTransform(scrollYProgress, [0.33, 0.66, 1.0], ["rgba(255, 255, 255, 0.4)", "rgba(255, 255, 255, 1)", "rgba(255, 255, 255, 0.4)"]); const automationColor = useTransform(scrollYProgress, [0.66, 1.0], ["rgba(255, 255, 255, 0.4)", "rgba(255, 255, 255, 1)"]); return ( ); } export default function AgentHeader({ className }: { className?: string }) { const containerRef = useRef(null); const [isMenuOpen, setIsMenuOpen] = useState(false); const { scrollYProgress } = useScroll({ container: containerRef }); const imageRadius = useTransform(scrollYProgress, [0, 0.33, 1], [0, 150, 150]); const imageClipPath = useTransform(imageRadius, (r) => "circle(" + r + "% at 50% 50%)"); const videoRadius = useTransform(scrollYProgress, [0, 0.33, 0.66, 1], [0, 0, 150, 150]); const videoClipPath = useTransform(videoRadius, (r) => "circle(" + r + "% at 50% 50%)"); const automationRadius = useTransform(scrollYProgress, [0, 0.66, 1], [0, 0, 150]); const automationClipPath = useTransform(automationRadius, (r) => "circle(" + r + "% at 50% 50%)"); const [isVoiceActive, setIsVoiceActive] = useState(true); const [isImageActive, setIsImageActive] = useState(false); const [isVideoActive, setIsVideoActive] = useState(false); const [isAutomationActive, setIsAutomationActive] = useState(false); const scrollToSection = (index: number) => { if (!containerRef.current) return; const clientHeight = containerRef.current.clientHeight; const scrollHeight = containerRef.current.scrollHeight; const maxScroll = scrollHeight - clientHeight; const targets = [0, 0.33, 0.66, 1.0]; const targetScroll = maxScroll * targets[index]; containerRef.current.scrollTo({ top: targetScroll, behavior: "smooth" }); setIsMenuOpen(false); }; useEffect(() => { return scrollYProgress.on("change", (latest) => { setIsVoiceActive(latest < 0.165); setIsImageActive(latest >= 0.165 && latest < 0.5); setIsVideoActive(latest >= 0.5 && latest < 0.835); setIsAutomationActive(latest >= 0.835); }); }, [scrollYProgress]); return ( <>

{isMenuOpen && ( setIsMenuOpen(false)} className="fixed inset-0 bg-black/45 backdrop-blur-sm z-[140] cursor-pointer" />

Soci.me

{[ { label: "AI Voice Studio", num: "01", active: isVoiceActive }, { label: "AI Image Generator", num: "02", active: isImageActive }, { label: "AI Video Creator", num: "03", active: isVideoActive }, { label: "AI Automation Agents", num: "04", active: isAutomationActive } ].map((item, index) => ( ))}

Next-Gen AI Generation Suite

)}

); }