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

export default function AboutHero() {
    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/about-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">
                    What We Do
                </h1>
                <p className="text-lg max-w-2xl mx-auto">
                    Empowering communities with modern, accessible, and secure healthcare across Africa and beyond.
                </p>
            </div>
        </section>

    );
}
