import { useState, useEffect, useRef } from 'react'
import { motion } from 'framer-motion'
import {
  FiArrowRight, FiShield, FiStar, FiUsers, FiCheckCircle,
  FiPlay, FiPause, FiVolume2, FiVolumeX,
} from 'react-icons/fi'

const stats = [
  { value: '186',      label: 'mutuelles analysées', icon: FiShield },
  { value: '4.9 / 5', label: 'note clients',         icon: FiStar   },
  { value: '250 000+', label: 'utilisateurs',         icon: FiUsers  },
]

function VideoPlayer({ src }) {
  const videoRef = useRef(null)
  const [playing, setPlaying] = useState(true)
  const [muted,   setMuted]   = useState(true)

  const togglePlay = () => {
    if (!videoRef.current) return
    if (playing) videoRef.current.pause()
    else         videoRef.current.play()
    setPlaying(p => !p)
  }

  const toggleMute = () => {
    if (!videoRef.current) return
    videoRef.current.muted = !muted
    setMuted(m => !m)
  }

  return (
    <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-[#9CCC8A]/30 bg-slate-900 aspect-video w-full">
      {src ? (
        <video
          ref={videoRef}
          src={src}
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          onClick={togglePlay}
          className="w-full h-full object-cover cursor-pointer"
        />
      ) : (
        /* Placeholder pendant le chargement de config.json */
        <div className="w-full h-full flex items-center justify-center bg-slate-800 animate-pulse">
          <FiPlay className="text-slate-600 text-5xl" />
        </div>
      )}

      {/* Icône play/pause au centre au clic */}
      {src && !playing && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center backdrop-blur-sm">
            <FiPlay className="text-white text-2xl ml-1" />
          </div>
        </div>
      )}

      {/* Contrôles : pause + mute */}
      {src && (
        <div className="absolute bottom-3 right-3 flex gap-2">
          <button
            onClick={togglePlay}
            aria-label={playing ? 'Pause' : 'Play'}
            className="w-9 h-9 flex items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70 transition-colors"
          >
            {playing ? <FiPause size={14} /> : <FiPlay size={14} />}
          </button>
          <button
            onClick={toggleMute}
            aria-label={muted ? 'Activer le son' : 'Couper le son'}
            className="w-9 h-9 flex items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70 transition-colors"
          >
            {muted ? <FiVolumeX size={14} /> : <FiVolume2 size={14} />}
          </button>
        </div>
      )}
    </div>
  )
}

export default function Hero() {
  const [videoSrc, setVideoSrc] = useState(null)
  const [bgSrc,    setBgSrc]    = useState(null)

  useEffect(() => {
    fetch('/config.json')
      .then(r => r.json())
      .then(data => {
        setVideoSrc(data.heroVideo)
        setBgSrc(data.heroBg ?? null)
      })
      .catch(() => {})
  }, [])

  return (
    <section
      className="relative overflow-hidden bg-cover bg-center pt-24 pb-20"
      style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : {}}
    >
      {/* Gradient overlay semi-transparent (couvre l'image de fond) */}
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/88 via-[#9CCC8A]/18 to-white/75" />

      {/* Blobs décoratifs */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute -top-48 -right-48 w-[600px] h-[600px] rounded-full bg-[#9CCC8A]/15 blur-3xl" />
        <div className="absolute bottom-0 -left-32  w-[400px] h-[400px] rounded-full bg-[#9CCC8A]/10 blur-3xl" />
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-16">

          {/* ── Colonne gauche : texte ── */}
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55 }}
            className="flex-1 flex flex-col"
          >
            <h1 className="text-5xl xl:text-6xl font-extrabold text-slate-900 leading-[1.08] tracking-tight mb-5">
              Mutuelle santé{' '}
              <span className="relative">
                <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-[#9CCC8A] to-[#5BAF7A]">
                  pour tous
                </span>
                <span className="absolute bottom-1 left-0 w-full h-3 bg-[#9CCC8A]/30 rounded-sm -z-0" />
              </span>
            </h1>

            <p className="text-lg text-black leading-relaxed mb-8 max-w-lg">
              Jeune actif, parent, senior — comparez les garanties utiles et trouvez
              la couverture parfaite au meilleur prix, sans engagement.
            </p>

            {/* Trust points */}
            <ul className="flex flex-wrap gap-x-6 gap-y-1.5 mb-8">
              {['Comparaison 100% gratuite', 'Sans engagement', 'Réponse en 2 min'].map(t => (
                <li key={t} className="flex items-center gap-1.5 text-sm text-black">
                  <FiCheckCircle className="text-emerald-500 flex-shrink-0" />
                  {t}
                </li>
              ))}
            </ul>

            {/* CTAs */}
            <div className="flex flex-wrap gap-3 mb-14">
              <motion.button
                whileHover={{ scale: 1.025 }}
                whileTap={{ scale: 0.97 }}
                className="flex items-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-[#9CCC8A]/40 transition-all"
              >
                Comparer les mutuelles
                <FiArrowRight />
              </motion.button>
              <button className="flex items-center gap-2 font-semibold text-slate-700 text-base px-7 py-3.5 rounded-xl border border-slate-200 bg-white hover:border-[#9CCC8A] hover:text-[#9CCC8A] transition-all">
                Voir le classement
              </button>
            </div>

            {/* Stats bar */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.55, delay: 0.35 }}
              className="grid grid-cols-3 gap-6 max-w-xs"
            >
              {stats.map(({ value, label, icon: Icon }) => (
                <div key={label} className="flex flex-col gap-1">
                  <Icon className="text-white text-lg mb-0.5" />
                  <div className="text-2xl font-extrabold text-slate-900">{value}</div>
                  <div className="text-xs text-black font-medium">{label}</div>
                </div>
              ))}
            </motion.div>
          </motion.div>

          {/* ── Colonne droite : vidéo ── */}
          <motion.div
            initial={{ opacity: 0, x: 32 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.55, delay: 0.2 }}
            className="w-full lg:w-[520px] xl:w-[580px] flex-shrink-0"
          >
            <VideoPlayer src={videoSrc} />
          </motion.div>

        </div>
      </div>
    </section>
  )
}
