"use client";
import React, { useRef } from 'react';
import AnimatedShinyText from '../ui/animated-shiny-text';
import { ArrowRightIcon } from 'lucide-react';
import { cn } from "@/lib/utils";
import { motion, useInView } from 'framer-motion';

export default function Hero() {
    // Create a ref for the container element
    const ref = useRef(null);
    // Use useInView hook to detect when the element is in viewport
    const isInView = useInView(ref, { once: true });

    // Left right motion variants defined for the animations
    const leftVariants = {
        hidden: { x: -100, opacity: 0 },
        visible: { x: 0, opacity: 1 },
    };

    const rightVariants = {
        hidden: { x: 100, opacity: 0 },
        visible: { x: 0, opacity: 1 },
    };

    return (
        <div ref={ref} className='text-white h-fit md:h-screen flex flex-col md:flex-row pt-40 md:pt-20'>
            <motion.div 
                className='w-full md:w-1/2 flex flex-col items-start justify-center pl-20 px-10 space-y-5 md:space-y-10'
                initial="hidden"
                animate={isInView ? "visible" : "hidden"}
                variants={leftVariants}
                transition={{ duration: 0.5 }}
            >
                <div
                    className={cn(
                        "group rounded-full border text-xs md:text-base transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800",
                    )}
                >
                    <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
                        <span>✨ Introducing Everyday Series AI</span>
                        <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
                    </AnimatedShinyText>
                </div>
                <h1 className='text-3xl md:text-6xl'>Automate your operations and scale businesses</h1>
                <p className='text-gray-500 text-sm md:text-base'>Empower your business with Micro-SaaS applications—designed by you, no coding required. Craft powerful workflows with our intuitive drag-and-drop builder, streamline approvals, and bring your ideas to life.</p>
                <button className='bg-violet-600 px-5 py-4 rounded-full text-sm md:text-base'>Get 14 days free</button>
            </motion.div>

            <motion.div 
                className='w-full md:w-1/2 px-10 flex flex-col items-center justify-center'
                initial="hidden"
                animate={isInView ? "visible" : "hidden"}
                variants={rightVariants}
                transition={{ duration: 0.5 }}
            >
                <img src='https://res.cloudinary.com/dezd109fz/image/upload/v1737305415/Untitled_design_utuwwq.png' alt="Hero Image"/>
            </motion.div>
        </div>
    );
}