'use client';

import {motion} from 'framer-motion';

export default function SubpageHero({
                                        title,
                                        subtitle,
                                    }: Readonly<{
    title: string;
    subtitle?: string;
}>) {
    return (
        <section className="relative min-h-[35vh] flex items-center bg-white px-6 md:px-16 lg:px-36 pt-24">
            <div className="z-10 flex flex-col gap-y-2 max-w-6xl mx-auto w-full">
                <motion.h1
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                    className="text-4xl font-extrabold text-gray-900 leading-snug text-balance"
                >
                    {title}
                </motion.h1>
                {subtitle && (
                    <motion.p
                        initial={{opacity: 0, y: 20}}
                        animate={{opacity: 1, y: 0}}
                        transition={{duration: 0.6, delay: 0.1}}
                        className="text-lg text-gray-600"
                    >
                        {subtitle}
                    </motion.p>
                )}
            </div>
        </section>
    );
}