"use client"; import React, { useRef, useState } from "react"; import { motion, useInView } from "framer-motion"; import type { Variants } from "framer-motion"; import { ArrowRight } from "lucide-react"; export default function CTA({ className }: { className?: string }) { const containerRef = useRef(null); const isInView = useInView(containerRef, { once: true, amount: 0.15 }); const [activeBtn, setActiveBtn] = useState<"left" | "right">("left"); const contentVariants: Variants = { hidden: { opacity: 0, y: 30 }, visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const, staggerChildren: 0.12, }, }, }; const itemVariants: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const }, }, }; const isLeftActive = activeBtn === "left"; const isRightActive = activeBtn === "right"; return ( <>

{/* Left Half */}

The Intelligent Glass Solution for Modern, Efficient Spaces GLAIR combines AI, camera, and real-time insights to help you see more, do more, and stay ahead—every day. setActiveBtn("left")} >

{/* Right Half */}

); }