Header Banner

"use client";

import { motion } from "framer-motion";

interface HeaderBannerProps {
  title?: string;
  subtitle?: string;
  backgroundImage?: string;
  overlayOpacity?: number;
}

const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];

export default function HeaderBanner({
  title = "Titre de la page",
  subtitle = "",
  backgroundImage = "",
  overlayOpacity = 0.6,
}: HeaderBannerProps) {
  return (
    <section
      className="relative py-24 lg:py-32 overflow-hidden"
      style={{ background: "var(--color-background-dark)" }}
    >
      {backgroundImage && (
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: `url(${backgroundImage})` }}
        >
          <div
            className="absolute inset-0"
            style={{
              background: `var(--color-background-dark)`,
              opacity: overlayOpacity,
            }}
          />
        </div>
      )}

      <div className="relative mx-auto max-w-4xl px-6 text-center">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, ease }}
          className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight"
          style={{ color: "var(--color-foreground-on-dark)" }}
        >
          {title}
        </motion.h1>

        {subtitle && (
          <motion.p
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, ease, delay: 0.15 }}
            className="mt-5 text-base lg:text-lg max-w-2xl mx-auto leading-relaxed"
            style={{ color: "var(--color-foreground-on-dark)", opacity: 0.8 }}
          >
            {subtitle}
          </motion.p>
        )}
      </div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 0.4 }}
        className="absolute bottom-0 left-0 right-0 h-24"
        style={{
          background: `linear-gradient(to top, var(--color-background), transparent)`,
        }}
      />
    </section>
  );
}