Header Animated Gradient

"use client";

import { motion } from "framer-motion";

interface HeaderAnimatedGradientProps {
  title?: string;
  description?: string;
  badge?: string;
}

const EASE = [0.16, 1, 0.3, 1] as const;

export default function HeaderAnimatedGradient({
  title = "Titre de la page",
  description = "",
  badge = "",
}: HeaderAnimatedGradientProps) {
  return (
    <header
      style={{
        position: "relative",
        overflow: "hidden",
        background: "var(--color-background)",
      }}
    >
      {/* Animated gradient background */}
      <motion.div
        aria-hidden
        animate={{
          backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
        }}
        transition={{ duration: 10, ease: "linear", repeat: Infinity }}
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: "linear-gradient(270deg, var(--color-accent-subtle), var(--color-background), var(--color-accent-subtle), var(--color-background))",
          backgroundSize: "300% 100%",
          pointerEvents: "none",
        }}
      />

      <div
        style={{
          width: "100%",
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          padding: "3rem var(--container-padding-x)",
          position: "relative",
          zIndex: 1,
          textAlign: "center",
        }}
      >
        {badge && (
          <motion.span
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4, ease: EASE }}
            style={{
              display: "inline-block",
              padding: "0.375rem 1rem",
              borderRadius: "var(--radius-full)",
              border: "1px solid var(--color-border)",
              fontSize: "0.75rem",
              fontWeight: 600,
              color: "var(--color-foreground-muted)",
              marginBottom: "1rem",
              letterSpacing: "0.08em",
              textTransform: "uppercase",
            }}
          >
            {badge}
          </motion.span>
        )}

        <motion.h1
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.06, ease: EASE }}
          style={{
            fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
            fontWeight: 700,
            lineHeight: 1.15,
            letterSpacing: "-0.02em",
            color: "var(--color-foreground)",
            marginBottom: description ? "0.75rem" : "0",
          }}
        >
          {title}
        </motion.h1>

        {description && (
          <motion.p
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.12, ease: EASE }}
            style={{
              fontSize: "1.0625rem",
              lineHeight: 1.6,
              color: "var(--color-foreground-muted)",
              maxWidth: "560px",
              margin: "0 auto",
            }}
          >
            {description}
          </motion.p>
        )}
      </div>

      {/* Bottom border */}
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: "1px", background: "var(--color-border)" }} />
    </header>
  );
}