const PageHero = ({ title, subtitle, image }) => (
    <div className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0 z-0">
            <img
                src={image}
                alt={title}
                className="w-full h-full object-cover"
            />
            {/* Overlay Gradient */}
            <div className="absolute inset-0 bg-slate-900/60 mix-blend-multiply"></div>
            <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent"></div>
        </div>

        {/* Content */}
        <div className="relative z-10 text-center px-6 animate-fade-in-up">
            <span className="inline-block py-1 px-3 border border-white/30 rounded-full text-white/80 text-sm font-bold tracking-[0.2em] mb-4 uppercase backdrop-blur-sm">
                {subtitle}
            </span>
            <h1 className="text-5xl md:text-7xl font-black text-white tracking-tight drop-shadow-lg mb-6">
                {title}
            </h1>
            <div className="w-20 h-1 bg-brand-primary mx-auto rounded-full"></div>
        </div>
    </div>
);

window.App.Components.PageHero = PageHero;