Footer.tsx

"use client"

import { useRef } from "react"
import { motion, useScroll, useTransform } from "framer-motion"

export default function Footer() {
    const containerRef = useRef<HTMLDivElement>(null)
    const { scrollYProgress } = useScroll({
        target: containerRef,
        offset: ["start end", "end end"]
    })

    // Parallax logic: 'T' moves up relative to the rest
    // Range: Starts slightly lower, moves slightly higher
    const yT = useTransform(scrollYProgress, [0, 1], [60, -60])
    const opacity = useTransform(scrollYProgress, [0, 0.3, 1], [0, 1, 1])

    return (
        <section ref={containerRef} className="relative w-full h-[50vh] flex items-end justify-center pb-20 bg-transparent z-10 pointer-events-none overflow-hidden">
            <motion.div
                style={{ opacity }}
                className="flex items-baseline w-full justify-center px-4"
            >
                {/* Michroma is wide. 9 chars * 7vw ~= 63vw (Plus spacing) -> Safe */}
                <h1 className="text-[9vw] md:text-[8vw] font-michroma font-bold text-white/40 leading-none flex gap-[0.2em] tracking-tight">
                    <span>S</span>
                    <motion.span style={{ y: yT }} className="text-white/80 relative">T</motion.span>
                    <span>R</span>
                    <span>A</span>
                    <span>W</span>
                    <span>H</span>
                    <span>A</span>
                    <motion.span style={{ y: yT }} className="text-white/80 relative">T</motion.span>
                    <span>S</span>
                </h1>
            </motion.div>
        </section>
    )
}