"use client";
import { useEffect, useRef } from "react";
import gsap from "gsap";

export default function RegisterHero() {
    const heroRef = useRef(null);

    useEffect(() => {
        gsap.fromTo(
            heroRef.current,
            { opacity: 0, y: 40 },
            {
                opacity: 1,
                y: 0,
                duration: 1.2,
                ease: "power3.out",
            }
        );
    }, []);

    return (
        <section
        ref={heroRef}
        className="relative h-[70vh] flex items-center justify-center bg-cover bg-center text-white"
        style={{ backgroundImage: "url('/images/register-hero.jpg')" }}
    >
        <div className="absolute inset-0 bg-blue-900/60 z-0" />
        <div className="relative z-10 text-center px-6 max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
                Create Your Account
            </h1>
            <p className="text-lg max-w-2xl mx-auto">
                Join our healthcare community and connect with professionals. Register now to get started on your health journey.
            </p>
        </div>
    </section>
    
    );
}
