"use client"

import { motion } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { useLocale } from "next-intl"
import SectionLabel from "./section-label"

interface ComingSoonSectionProps {
  /** Titre de la section (étiquette en haut de page) */
  sectionTitle: string
  /** Titre principal affiché dans l'encart */
  heading: string
  /** Texte d'introduction expliquant que la page sera alimentée prochainement */
  description: string
}

export default function ComingSoonSection({ sectionTitle, heading, description }: ComingSoonSectionProps) {
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.15 })
  const locale = useLocale()
  const isEn = locale === "en"

  return (
    <main className="pt-[100px] min-h-screen bg-white">
      <section ref={ref} className="pt-8 pb-20 sm:pb-28">
        {/* Étiquette de section */}
        <div className="max-w-[98%] mx-auto px-3 sm:px-4 lg:px-6 mb-8">
          <SectionLabel title={sectionTitle} size="small" variant="overline" />
        </div>

        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            className="bg-white border border-neutral-200 border-l-4 border-l-primary p-8 sm:p-10 md:p-12 text-center"
          >
            {/* Badge « Bientôt disponible » */}
            <span className="inline-flex items-center px-3 py-1 mb-5 text-[11px] font-semibold uppercase tracking-widest text-primary bg-primary/5 border border-primary/20 rounded-full">
              {isEn ? "Coming soon" : "Bientôt disponible"}
            </span>

            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-3">{heading}</h2>
            <div className="h-0.5 w-10 bg-primary/70 rounded-full mx-auto mb-4" aria-hidden />
            <p className="text-sm sm:text-base text-gray-600 leading-relaxed max-w-xl mx-auto">
              {description}
            </p>
          </motion.div>
        </div>
      </section>
    </main>
  )
}