const { useState, useEffect, useRef } = React;

/* --- HOOKS --- */

// Sound Hook
const useSound = () => {
    const [playing, setPlaying] = useState(false);

    // Auto-init on first interaction if needed
    // Toggle removed as per user request (Auto-Start only)

    const playHover = () => {
        // Debounce slightly to prevent spam
        if (window.Seyric) window.Seyric.hover();
    };
    const playClick = () => window.Seyric?.click();

    return { playing, playHover, playClick };
};

// Scroll Progress Hook (0 to 1)
const useScrollProgress = (ref) => {
    const [progress, setProgress] = useState(0);

    useEffect(() => {
        const handleScroll = () => {
            if (!ref.current) return;
            const rect = ref.current.getBoundingClientRect();
            const h = window.innerHeight;
            const totalDist = h + rect.height;
            const currentPos = h - rect.top;
            let p = currentPos / totalDist;
            p = Math.max(0, Math.min(1, p));
            setProgress(p);
        };
        window.addEventListener('scroll', handleScroll);
        handleScroll();
        return () => window.removeEventListener('scroll', handleScroll);
    }, [ref]);

    return progress;
};

// Anime.js Entry Hook
const useAnimeEntry = (ref, targetSelector, params) => {
    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                // Find targets within the ref
                const targets = ref.current.querySelectorAll(targetSelector);
                if (targets.length > 0) {
                    anime({
                        targets: targets,
                        ...params,
                        easing: 'easeOutExpo' // Default luxurious ease
                    });
                    observer.disconnect(); // Play once
                }
            }
        }, { threshold: 0.2 });

        if (ref.current) observer.observe(ref.current);

        return () => observer.disconnect();
    }, [ref, targetSelector, JSON.stringify(params)]);
};


// Generic Elastic Hover
const handleElasticEnter = (e) => {
    anime.remove(e.currentTarget);
    anime({
        targets: e.currentTarget,
        scale: 1.05,
        translateX: 10,
        duration: 800,
        easing: 'easeOutElastic(1, .5)'
    });
};

const handleElasticLeave = (e) => {
    anime.remove(e.currentTarget);
    anime({
        targets: e.currentTarget,
        scale: 1,
        translateX: 0,
        duration: 600,
        easing: 'easeOutExpo'
    });
};


// BG Trigger Wrapper 
const useSectionVisible = (ref, onVisible, id) => {
    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) onVisible(id);
        }, { threshold: 0.1, rootMargin: "-10% 0px -10% 0px" });
        if (ref.current) observer.observe(ref.current);
        return () => observer.disconnect();
    }, [ref, onVisible, id]);
};

/* --- ICONS --- */
const PlayIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3" /></svg>;
const PauseIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></svg>;
const SearchIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>;
const ArrowIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" /></svg>;
const GithubIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg>;

/* --- SECTIONS --- */

const Hero = ({ onVisible, playHover }) => {
    const [visuals, setVisuals] = useState({ opacity: 1, scale: 1, blur: 0, y: 0 });
    const ref = useRef(null);
    useSectionVisible(ref, onVisible, 'hero');

    useEffect(() => {
        const handleScroll = () => {
            const scrollPos = window.scrollY;
            const h = window.innerHeight;
            const newOp = Math.max(0, 1 - scrollPos / (h * 0.9));
            const newScale = 1 + (scrollPos / h) * 0.2;
            const newBlur = Math.min(20, (scrollPos / h) * 20);
            setVisuals({ opacity: newOp, scale: newScale, blur: newBlur, y: scrollPos * 0.4 });
        };
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // Anime.js Intro
    useEffect(() => {
        anime({
            targets: '.hero-char',
            translateY: [100, 0],
            opacity: [0, 1],
            skewY: [10, 0],
            delay: anime.stagger(100, { start: 500 }),
            duration: 1200,
            easing: 'easeOutExpo'
        });
    }, []);

    return (
        <section ref={ref} className="h-screen sticky top-0 flex flex-col justify-center items-center px-6 bg-black z-10 pointer-events-none overflow-hidden">
            <div
                style={{
                    opacity: visuals.opacity,
                    transform: `scale(${visuals.scale}) translateY(${visuals.y}px)`,
                    filter: `blur(${visuals.blur}px)`
                }}
                className="flex flex-col items-center transition-transform duration-75 linear pointer-events-auto will-change-transform"
            >
                <h1
                    onMouseEnter={playHover}
                    className="text-[15vw] md:text-[20vw] font-bold font-serif leading-none tracking-tighter select-none cursor-pointer"
                >
                    {"SEYRIC".split('').map((c, i) => (
                        <span key={i} className="hero-char inline-block opacity-0 text-transparent [-webkit-text-stroke:1px_rgba(255,255,255,0.8)] hover:text-purple-600 hover:[-webkit-text-stroke:1px_#9333ea] hover:drop-shadow-[0_0_30px_rgba(147,51,234,0.8)] transition-colors duration-300">
                            {c}
                        </span>
                    ))}
                </h1>
                <div className="mt-8 flex flex-col items-center gap-4 text-center hero-sub">
                    <p className="text-xl md:text-2xl font-light tracking-widest text-gray-400 opacity-0 animate-fadeIn">
                        UI-UX Designer | FULLSTACK DEVELOPER
                    </p>
                </div>
            </div>
            <div style={{ opacity: visuals.opacity }} className="absolute bottom-8 animate-bounce text-white/30 text-xs tracking-widest uppercase">
                Scroll to Begin
            </div>
            <style jsx>{`
                .animate-fadeIn { animation: fadeIn 1s ease-out 1.5s forwards; }
                @keyframes fadeIn { to { opacity: 1; } }
            `}</style>
        </section>
    );
};

const ArtInterlude = ({ onVisible, id }) => {
    const ref = useRef(null);
    useSectionVisible(ref, onVisible, id);
    return <section ref={ref} className="h-[80vh] w-full pointer-events-none"></section>;
};

const Philosophy = ({ onVisible }) => {
    const ref = useRef(null);
    useSectionVisible(ref, onVisible, 'venice');

    useAnimeEntry(ref, '.word-reveal', {
        translateY: [50, 0],
        opacity: [0, 1],
        rotateX: [90, 0],
        delay: anime.stagger(150),
        duration: 1000
    });

    const progress = useScrollProgress(ref);
    const activeP = Math.max(0, Math.min(1, (progress - 0.1) / 0.4));

    const translateY = 150 * (1 - activeP);
    const opacity = activeP;
    const scale = 0.95 + (activeP * 0.05);

    const titleWords = ["CHAOS", "IS", "STUPID."];

    return (
        <section ref={ref} className="min-h-[150vh] flex items-center justify-center relative z-20 px-4 bg-transparent pointer-events-none">
            <div
                style={{
                    opacity: opacity,
                    transform: `translateY(${translateY}px) scale(${scale})`
                }}
                className="w-full max-w-xl bg-[#F2F2F2] text-black rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden transition-transform duration-100 ease-out will-change-transform pointer-events-auto"
            >
                <div className="flex justify-between items-center mb-12 border-b border-black/10 pb-4">
                    <span className="font-bold tracking-widest text-sm">ABOUT SEYRIC</span>
                    <span className="font-mono text-xs text-gray-500">EN</span>
                </div>
                <h2 className="text-7xl md:text-8xl font-black tracking-tighter leading-[0.8] mb-8 flex flex-wrap gap-x-4">
                    {titleWords.map((w, i) => (
                        <span key={i} className="word-reveal inline-block opacity-0 origin-bottom">{w}<br /></span>
                    ))}
                </h2>
                <h3 className="text-lg font-bold uppercase tracking-wide mb-8 border-l-4 border-black pl-4">
                    AI CAN DO CODING<br />
                    BUT CAN IT MIMIC A FRACTION OF YOUR CREATIVITY?
                </h3>
                <div className="text-gray-600 text-lg leading-relaxed space-y-6">
                    <p>"I don't just write code; I try to vision it"</p>
                    <p>From designing frontends to crafting designs, My work transforms disorder into high-performance structure.</p>
                </div>
            </div>
        </section>
    );
};

const Work = ({ onVisible, playHover, playClick }) => {
    const [activeIndex, setActiveIndex] = useState(0);
    const [mobileDetail, setMobileDetail] = useState(false);
    const ref = useRef(null);
    useSectionVisible(ref, onVisible, 'work');

    // Stagger list
    useAnimeEntry(ref, '.project-item', {
        translateX: [-50, 0],
        opacity: [0, 1],
        delay: anime.stagger(100),
        duration: 800
    });

    const handleHover = (i) => {
        if (i === activeIndex) return;
        setActiveIndex(i);
        playHover();
    };

    const handleProjectClick = (i) => {
        setActiveIndex(i);
        setMobileDetail(true);
        playClick(); // Trigger sound explicitly for mobile touch
    };

    // Text Swap Animation
    useEffect(() => {
        // Animate Big Title
        anime({
            targets: '.big-text-display',
            translateY: [50, 0],
            opacity: [0, 1],
            duration: 600,
            easing: 'easeOutExpo'
        });

        // Animate Small Description
        anime({
            targets: '.work-desc',
            translateY: [20, 0],
            opacity: [0, 1],
            delay: 100,
            duration: 600,
            easing: 'easeOutExpo'
        });
    }, [activeIndex]);

    const projects = [
        {
            name: "Anveshan",
            desc: "AI OSINT PLATFORM",
            summary: "A robust intelligence gathering system aggregating data points from 50+ public sources. Features real-time graph visualization and entity resolution pipelines."
        },
        {
            name: "Neural Sync",
            desc: "BRAIN INTERFACE",
            summary: "Experimental WebBluetooth interface for EEG headsets. Visualizes brainwave activity in 3D space using WebGL, mapping thoughts to generative art."
        },
        {
            name: "Web Kinetix",
            desc: "MOTION SYSTEM",
            summary: "A physics-based animation library for React. Provides spring-physics hooks and gesture controls for fluid, app-like interactions on the web."
        },
        {
            name: "Aether LO",
            desc: "AUDIO ENGINE",
            summary: "Generative soundscapes in the browser. Using the Web Audio API to create non-repetitive dark ambient music for immersive reading experiences."
        },
        {
            name: "Project Aria",
            desc: "AI AUTOMATION",
            summary: "Currently in development. A next-generation tool that uses AI to automate computation. Building a computer that operates itself."
        },
        {
            name: "Hyperion",
            desc: "SOLAR ANALYTICS",
            summary: "Dashboard for solar energy farms. Processes IoT sensor data to predict maintenance needs and optimize energy output using ML models."
        },
    ];

    return (
        <section ref={ref} className="min-h-screen bg-black flex flex-col md:flex-row relative z-20 py-24 px-8 md:px-16 overflow-hidden">
            {/* LEFT: LIST */}
            <div className={`w-full md:w-1/3 flex flex-col justify-start gap-8 h-full relative z-10 transition-opacity duration-500 ${mobileDetail ? 'opacity-0 pointer-events-none absolute' : 'opacity-100'} md:opacity-100 md:pointer-events-auto md:relative`}>
                <div className="mb-8">
                    <div className="text-gray-500 text-sm font-light mb-1">Portfolio</div>
                    <div className="text-3xl font-serif text-white">Selected Works</div>
                </div>
                <div className="flex flex-col gap-2">
                    {projects.map((p, i) => (
                        <div
                            key={i}
                            onClick={() => handleProjectClick(i)}
                            onMouseEnter={(e) => { handleHover(i); handleElasticEnter(e); }}
                            onMouseLeave={handleElasticLeave}
                            className="project-item group cursor-pointer py-1 flex items-center gap-4 opacity-0"
                        >
                            <span className={`text-sm font-mono transition-colors duration-300 ${activeIndex === i ? 'text-purple-500' : 'text-gray-500'}`}>0{i + 1}</span>
                            <span className={`text-2xl md:text-3xl font-light tracking-tight transition-colors duration-300 ${activeIndex === i ? 'text-white' : 'text-white/40'}`}>
                                {p.name}
                            </span>
                        </div>
                    ))}
                </div>
                <div className="mt-12 pt-8 border-t border-white/10 flex items-center gap-3 text-gray-500 group cursor-pointer hover:text-white transition-colors w-max">
                    <SearchIcon />
                    <span className="text-sm tracking-widest uppercase">Search an artwork</span>
                </div>
            </div>

            {/* RIGHT: TYPOGRAPHY & DESC */}
            <div className={`
                absolute top-0 right-0 w-full md:w-2/3 h-full flex flex-col items-center justify-center 
                transition-all duration-500 px-6 md:px-12 pt-0 md:pt-0
                ${mobileDetail ? 'opacity-100 pointer-events-auto z-30 bg-black' : 'opacity-0 md:opacity-100 pointer-events-none md:pointer-events-none mix-blend-screen'} 
            `}>
                {/* Back Button (Mobile Only) */}
                <button
                    onClick={(e) => { e.stopPropagation(); setMobileDetail(false); playClick(); }}
                    className={`md:hidden absolute top-32 left-8 flex items-center gap-2 text-purple-500 tracking-widest text-xs font-bold font-mono transition-opacity duration-300 ${mobileDetail ? 'opacity-100' : 'opacity-0'}`}
                >
                    <ArrowIcon className="w-4 h-4 rotate-180" /> BACK
                </button>

                <h1 className="big-text-display text-[15vw] md:text-[8vw] leading-[0.8] font-black text-transparent [-webkit-text-stroke:1px_rgba(255,255,255,0.4)] md:[-webkit-text-stroke:2px_rgba(255,255,255,0.2)] uppercase tracking-tighter text-center max-w-4xl opacity-0 mb-4 md:mb-8">
                    {projects[activeIndex].desc}
                </h1>
                <p className="work-desc text-white/80 md:text-white/60 text-base md:text-xl font-light max-w-xs md:max-w-xl text-center leading-relaxed tracking-wide opacity-0 bg-transparent md:bg-transparent backdrop-blur-none p-4 rounded-xl">
                    {projects[activeIndex].summary}
                </p>
            </div>
        </section>
    );
};

const Arsenal = ({ onVisible, playHover }) => {
    const ref = useRef(null);
    useSectionVisible(ref, onVisible, 'work');

    useAnimeEntry(ref, '.arsenal-row', {
        translateY: [30, 0],
        opacity: [0, 1],
        delay: anime.stagger(100),
        duration: 1000
    });

    const stack = [
        { cat: "CORE", items: "C++ / Python / Java / Rust" },
        { cat: "FRONTEND", items: "React / Tailwind / Anime.js / Three.js" },
        { cat: "BACKEND", items: "Node.js / Docker / Azure / GraphQL" },
        { cat: "DESIGN", items: "Figma / Blender / After Effects" }
    ];

    return (
        <section ref={ref} className="min-h-screen flex flex-col justify-center px-6 md:px-24 relative z-20 bg-black py-24 border-t border-white/5">
            <div className="max-w-6xl w-full mx-auto">
                <div className="mb-20">
                    <h2 className="text-sm font-mono text-gray-500 mb-2">[ THE ARSENAL ]</h2>
                    <h3 className="text-5xl md:text-8xl font-serif text-white tracking-tight">Technical Stack</h3>
                </div>

                <div className="border-t border-white/10">
                    {stack.map((row, i) => (
                        <div
                            key={i}
                            onMouseEnter={(e) => { playHover(); handleElasticEnter(e); }}
                            onMouseLeave={handleElasticLeave}
                            className="arsenal-row group flex flex-col md:flex-row items-baseline py-12 border-b border-white/10 transition-colors hover:bg-white/[0.02] cursor-crosshair opacity-0"
                        >
                            <div className="w-full md:w-1/4 mb-4 md:mb-0">
                                <span className="font-mono text-xs text-purple-500/50 group-hover:text-purple-500 transition-colors tracking-widest uppercase">
                                    0{i + 1} — {row.cat}
                                </span>
                            </div>
                            <div className="w-full md:w-3/4">
                                <span className="text-3xl md:text-5xl font-serif text-gray-300 group-hover:text-white transition-colors duration-500 inline-block pointer-events-none">
                                    {row.items}
                                </span>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

const Contact = ({ onVisible, playHover }) => {
    const ref = useRef(null);
    useSectionVisible(ref, onVisible, 'work');

    useAnimeEntry(ref, '.contact-row', {
        scale: [0.9, 1],
        opacity: [0, 1],
        delay: anime.stagger(100),
        duration: 1200,
        easing: 'easeOutElastic(1, .8)'
    });

    const socials = [
        { label: "GITHUB", link: "https://github.com/seyric", handle: "@seyric" },
        { label: "TELEGRAM", link: "https://t.me/seyric", handle: "Contact Via Telegram" },
        { label: "EMAIL", link: "mailto:ekdin@engineer.com", handle: "hello@seyric.dev" }
    ];

    return (
        <section ref={ref} className="min-h-[80vh] flex flex-col justify-between px-6 md:px-24 relative z-20 bg-black pb-12 pt-24 border-t border-white/5">
            <div className="max-w-6xl w-full mx-auto flex-grow flex flex-col justify-center">
                <div className="mb-12">
                    <h2 className="text-sm font-mono text-gray-500 mb-2">[ CONNECT ]</h2>
                    <h3 className="text-5xl md:text-7xl font-serif text-white tracking-tight">Get in Touch</h3>
                </div>

                <div className="w-full">
                    {socials.map((s, i) => (
                        <a
                            key={i}
                            href={s.link}
                            target="_blank"
                            onMouseEnter={(e) => { playHover(); handleElasticEnter(e); }}
                            onMouseLeave={handleElasticLeave}
                            className="contact-row group flex flex-col md:flex-row items-baseline py-8 border-b border-white/10 hover:bg-white/[0.02] transition-colors opacity-0 block origin-left"
                        >
                            <div className="w-full md:w-1/4 mb-2 md:mb-0 flex items-center gap-2 pointer-events-none">
                                <ArrowIcon className="w-4 h-4 text-purple-500 opacity-0 group-hover:opacity-100 transition-all" />
                                <span className="font-mono text-xs text-gray-500 group-hover:text-white transition-colors tracking-widest uppercase">
                                    {s.label}
                                </span>
                            </div>
                            <div className="w-full md:w-3/4 flex justify-between items-center pointer-events-none">
                                <span className="text-2xl md:text-4xl font-serif text-gray-300 group-hover:text-purple-400 transition-colors duration-300">
                                    {s.handle}
                                </span>
                            </div>
                        </a>
                    ))}
                </div>
            </div>

            <div className="max-w-6xl w-full mx-auto mt-24 flex flex-col md:flex-row justify-between items-end border-t border-white/10 pt-8 opacity-50">
                <div className="flex flex-col gap-2">
                    <span className="text-xs font-mono tracking-widest text-white uppercase">Status</span>
                    <span className="text-sm text-gray-400">Available for Freelance & Collab</span>
                </div>
                <div className="flex flex-col gap-2 text-right mt-8 md:mt-0">
                    <span className="text-xs font-mono tracking-widest text-white uppercase">Location</span>
                    <span className="text-sm text-gray-400">Deep Space / Remote</span>
                </div>
            </div>

            <div className="w-full text-center mt-12">
                <p className="text-white/10 text-[10px] tracking-[0.3em] font-mono hover:text-white/30 transition-colors cursor-default">DESIGNED BY SEYRIC IN THE VOID</p>
            </div>
        </section>
    );
};


/* --- MAIN LAYOUT --- */
function App() {
    const { playing, playHover, playClick } = useSound();
    const [activeBg, setActiveBg] = useState('none');

    // Global Scroll Progress for Interludes scale effect
    const [scrollY, setScrollY] = useState(0);
    useEffect(() => {
        const handle = () => setScrollY(window.scrollY);
        window.addEventListener('scroll', handle);
        return () => window.removeEventListener('scroll', handle);
    }, []);

    // Subtle Continuous Zoom
    const startScale = 1 + (scrollY * 0.00005);

    return (
        <div
            onClick={playClick} // Global Click Sound Listener
            className="bg-black w-full min-h-screen text-white relative selection:bg-purple-500 selection:text-white no-scrollbar"
        >
            {/* Backgrounds */}
            <div className={`fixed inset-0 z-0 transition-opacity duration-1000 ease-in-out ${activeBg === 'athens' ? 'opacity-100' : 'opacity-0'}`}>
                <img style={{ transform: `scale(${startScale})` }} src="images/_The_School_of_Athens__by_Raffaello_Sanzio_da_Urbino.jpeg" className="w-full h-full object-cover brightness-50 transition-transform duration-75 linear" />
            </div>
            <div className={`fixed inset-0 z-0 transition-opacity duration-1000 ease-in-out ${activeBg === 'venice' ? 'opacity-100' : 'opacity-0'}`}>
                <img style={{ transform: `scale(${startScale})` }} src="images/venice.jpg" className="w-full h-full object-cover brightness-100 transition-transform duration-75 linear" />
            </div>
            <div className={`fixed inset-0 z-0 transition-opacity duration-1000 ease-in-out ${activeBg === 'boulevard' ? 'opacity-100' : 'opacity-0'}`}>
                <img style={{ transform: `scale(${startScale})` }} src="images/boulevard_des_italiens,_morning,_sunlight_1963.10.198.jpeg" className="w-full h-full object-cover brightness-50 transition-transform duration-75 linear" />
            </div>

            {/* SMOKE GLASS NAVBAR */}
            <nav className="fixed top-0 w-full z-50 flex justify-between items-center px-6 py-4 md:px-10 md:py-6 backdrop-blur-md bg-black/40 border-b border-white/5 transition-all duration-300">
                <div
                    className="text-sm font-bold tracking-widest text-white cursor-pointer hover:text-purple-500 transition-colors"
                    onMouseEnter={playHover}
                >
                    SEYRIC.DEV
                </div>

                <div className="flex items-center gap-6">
                    <a
                        href="https://github.com/seyric"
                        target="_blank"
                        className="flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full hover:bg-white/20 hover:border-purple-500/50 transition-all group"
                        onMouseEnter={playHover}
                    >
                        <GithubIcon />
                        <span className="text-xs font-mono hidden md:inline-block group-hover:text-purple-300">GITHUB</span>
                    </a>
                </div>
            </nav>

            <main className="relative w-full z-10">
                <Hero onVisible={setActiveBg} playHover={playHover} />
                <ArtInterlude id="athens" onVisible={setActiveBg} />
                <Philosophy onVisible={setActiveBg} />
                <ArtInterlude id="boulevard" onVisible={setActiveBg} />
                <Work onVisible={setActiveBg} playHover={playHover} />
                <Arsenal onVisible={setActiveBg} playHover={playHover} />
                <Contact onVisible={setActiveBg} playHover={playHover} />
            </main>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);