// FaqHero.tsx
import type { FaqHeroContent } from './faqContent';

interface FaqHeroProps {
    content: FaqHeroContent;
}

const FaqHero = ({ content }: FaqHeroProps) => {
    return (
        <section class="relative h-[50vh] min-h-[400px] w-full flex items-center justify-center overflow-hidden">
            <div class="absolute inset-0">
                <img
                    src="/images/faq/faq_hero.avif"
                    alt="Hilfsbereiter Chauffeur Service"
                    class="absolute inset-0 w-full h-full object-cover object-top brightness-50"
                />
            </div>
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
            <div class="relative z-10 text-center p-6">
                <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white drop-shadow-lg">
                    {content.title}
                </h1>
                <p class="mt-4 text-lg md:text-xl text-gray-200 max-w-2xl mx-auto">
                    {content.subtitle}
                </p>
            </div>
        </section>
    );
};

export default FaqHero;