import { motion } from 'framer-motion'
import { Calendar } from 'lucide-react'

const heroImage =
  'https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=2400&q=85'

export default function Hero() {
  return (
    <section
      id="accueil"
      className="relative flex min-h-[100svh] items-end justify-center overflow-hidden pt-20 pb-16 sm:items-center sm:pb-24"
    >
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: `url('${heroImage}')` }}
        aria-hidden
      />
      <div className="absolute inset-0 bg-gradient-to-t from-barber-bg via-barber-bg/88 to-barber-bg/35" />
      <div className="absolute inset-0 bg-gradient-to-r from-barber-bg/70 via-transparent to-barber-bg/55" />
      <div
        className="pointer-events-none absolute inset-0 opacity-40 mix-blend-soft-light"
        style={{
          backgroundImage:
            'radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232,184,74,0.15), transparent)',
        }}
        aria-hidden
      />

      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center sm:px-6">
        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.15, duration: 0.6 }}
          className="mx-auto mb-4 flex w-max items-center rounded-full border border-barber-border bg-white/[0.04] px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.28em] text-barber-gold/95 backdrop-blur-sm sm:text-xs"
        >
          Coiffure & barbier — Paris
        </motion.p>
        <motion.h1
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.25, duration: 0.65 }}
          className="font-serif text-4xl font-medium leading-[1.08] tracking-tight text-barber-cream sm:text-5xl md:text-6xl lg:text-7xl"
        >
          L&apos;Art de la Coupe,
          <br />
          <span className="bg-gradient-to-r from-barber-gold via-amber-200 to-barber-gold-muted bg-clip-text text-transparent">
            l&apos;Excellence du Style
          </span>
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4, duration: 0.6 }}
          className="mx-auto mt-6 max-w-xl text-sm leading-relaxed text-barber-cream/70 sm:text-base"
        >
          Un sanctuaire du soin masculin où chaque détail compte — matériaux nobles, gestes précis
          et une ambiance feutrée pour un moment qui vous ressemble.
        </motion.p>
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.55, duration: 0.5 }}
          className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
        >
          <a
            href="#contact"
            className="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-barber-gold to-amber-400 px-8 py-3.5 text-sm font-semibold tracking-wide text-barber-bg shadow-[0_0_32px_-4px_var(--color-barber-glow)] transition-transform hover:scale-[1.02] active:scale-[0.98]"
          >
            <Calendar className="h-4 w-4" aria-hidden />
            Prendre RDV
          </a>
          <a
            href="#services"
            className="rounded-full border border-barber-border bg-white/[0.04] px-6 py-3 text-sm font-semibold text-barber-cream/90 backdrop-blur-sm transition-colors hover:border-barber-gold/40 hover:text-barber-gold"
          >
            Découvrir nos prestations
          </a>
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.85, duration: 0.6 }}
          className="mx-auto mt-14 flex max-w-lg flex-wrap items-center justify-center gap-x-8 gap-y-3 border-t border-barber-border pt-8 text-xs text-barber-cream/45 sm:text-sm"
        >
          <span>
            <strong className="font-semibold text-barber-gold">4,9/5</strong> sur 380+ avis vérifiés
          </span>
          <span className="hidden h-3 w-px bg-white/20 sm:block" aria-hidden />
          <span>Marques partenaires : Horace, Balmain Hair, Truefitt &amp; Hill</span>
        </motion.div>
      </div>
    </section>
  )
}