"use client"

import { motion } from "framer-motion"
import { useRevelationInView } from "@/lib/panel-reveal"

interface SectionLabelProps {
  title: string
  subtitle?: string
  size?: "default" | "small"
  variant?: "default" | "overline" | "overline-light" | "inline" | "inline-light" | "sr-only"
}

export default function SectionLabel({ title, subtitle, size = "default", variant = "default" }: SectionLabelProps) {
  const [ref, inView] = useRevelationInView({ triggerOnce: true, threshold: 0.1 })

  const capitalizeFirstLetter = (text: string) => {
    if (!text) return text
    return text.charAt(0).toUpperCase() + text.slice(1)
  }

  const capitalizedTitle = capitalizeFirstLetter(title)

  // ── Variante sr-only (titre porté visuellement par une barre d'onglets) ───
  // Le titre reste dans le document, hiérarchie h2, indexation, lecteurs
  // d'écran, mais n'est pas affiché : c'est l'onglet actif qui le porte à
  // l'écran. Évite de répéter deux fois le même mot à 90 px d'intervalle.
  if (variant === "sr-only") {
    return (
      <>
        <h2 className="sr-only">{capitalizedTitle}</h2>
        {subtitle && <p className="sr-only">{subtitle}</p>}
      </>
    )
  }

  // ── Variante inline (titre direct + séparateur fin) ───────────────────────
  if (variant === "inline" || variant === "inline-light") {
    const isLight = variant === "inline-light"
    const titleColor = isLight ? "text-white" : "text-gray-900"
    const subColor   = isLight ? "text-white/70" : "text-gray-500"
    const lineColor  = isLight ? "bg-white/30" : "bg-gray-200"
    const accentColor = isLight ? "bg-white" : "bg-accent"
    const titleSize  = size === "small"
      ? "text-xl sm:text-2xl"
      : "text-2xl sm:text-3xl"

    return (
      <div className="mb-6 sm:mb-8">
        <h2 className={`${titleSize} font-bold ${titleColor} tracking-tight leading-tight`}>
          {capitalizedTitle}
        </h2>
        <div className="mt-3 flex items-center gap-3">
          <div className={`w-8 h-[2px] ${accentColor} rounded-full flex-shrink-0`} />
          <div className={`flex-1 h-px ${lineColor}`} />
        </div>
        {subtitle && (
          <p className={`mt-2 text-sm sm:text-base ${subColor}`}>{subtitle}</p>
        )}
      </div>
    )
  }

  // ── Variante overline (fonds clairs) ──────────────────────────────────────
  if (variant === "overline" || variant === "overline-light") {
    const isLight = variant === "overline-light"
    const lineColor  = isLight ? "bg-white"     : "bg-primary"
    const titleColor = isLight ? "text-white"   : "text-gray-900"
    const subColor   = isLight ? "text-white/70" : "text-gray-500"
    const titleSize  = size === "small"
      ? "text-xl sm:text-2xl"
      : "text-2xl sm:text-3xl"

    return (
      <motion.div
        ref={ref}
        initial={{ opacity: 0, y: 16 }}
        animate={inView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.5, ease: "easeOut" }}
        className="mb-6 sm:mb-8"
      >
        {/* Ligne rouge au-dessus */}
        <motion.div
          className={`h-0.5 w-10 ${lineColor} mb-3`}
          initial={{ width: 0 }}
          animate={inView ? { width: 40 } : {}}
          transition={{ duration: 0.4, ease: "easeOut" }}
        />
        <h2 className={`${titleSize} font-bold ${titleColor} leading-tight`}>
          {capitalizedTitle}
        </h2>
        {subtitle && (
          <p className={`mt-2 text-sm sm:text-base ${subColor} max-w-2xl`}>
            {subtitle}
          </p>
        )}
      </motion.div>
    )
  }

  // ── Variante default (biseau rouge, autres pages) ────────────────────────
  const wrapperMarginClass = size === "small" ? "mb-6 sm:mb-8" : "mb-10 sm:mb-12"
  const labelPaddingAndTextClass = size === "small"
    ? "px-4 sm:px-5 py-2 text-base sm:text-lg"
    : "px-5 sm:px-6 py-2.5 sm:py-3 text-xl sm:text-2xl"

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: -30 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.8, type: "spring", stiffness: 100 }}
      className={wrapperMarginClass}
    >
      <motion.div
        animate={inView ? { scale: [1, 1.02, 1] } : {}}
        transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
      >
        <div className="flex items-start gap-4 sm:gap-6">
          <div
            className={`relative bg-primary ${labelPaddingAndTextClass} text-white font-bold shadow-lg`}
            style={{
              clipPath: "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))",
            }}
          >
            <motion.div
              initial={{ opacity: 0 }}
              animate={inView ? { opacity: 1 } : {}}
              transition={{ delay: 0.3, duration: 0.6 }}
            >
              {capitalizedTitle}
            </motion.div>
            <motion.div
              className="absolute bottom-0 left-0 h-0.5 bg-white/30"
              initial={{ width: 0 }}
              animate={inView ? { width: "100%" } : {}}
              transition={{ delay: 0.5, duration: 0.8 }}
            />
          </div>
          {subtitle && (
            <motion.p
              initial={{ opacity: 0, y: 10 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ delay: 0.4, duration: 0.6 }}
              className="text-base sm:text-lg text-muted-foreground max-w-2xl self-center"
            >
              {subtitle}
            </motion.p>
          )}
        </div>
      </motion.div>
    </motion.div>
  )
}