import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import { ArrowRight, ChevronDown } from "lucide-react";
import { EASE_EXPO, revealStagger, revealUp } from "../../lib/motion";
import { useReducedMotion } from "../../lib/useReducedMotion";
import { SwatchFanVisual } from "./visuals/SwatchFanVisual";
import { FloatingMomentsLayer, MomentsStack } from "./visuals/FloatingMomentsVisual";

export function HeroSection() {
  const reduced = useReducedMotion();

  return (
    <section
      data-ld-section
      className="landing-papel relative isolate overflow-hidden pt-24 ld-section sm:pt-28"
    >
      {/* Lavados de color. Los tres tonos son los que el panel ya usa como fondo suave:
          brand-50 (#eef4ff, el "hoy" del calendario), orange-50 (#fff7ed) y
          emerald-50 (#ecfdf5). Van detrás de todo y no llevan texto, así que no
          compiten con la lectura. */}
      <div className="pointer-events-none absolute inset-0 -z-10">
        <div
          className="absolute -left-24 -top-24 h-[26rem] w-[26rem] rounded-full opacity-90 blur-3xl"
          style={{ background: "radial-gradient(circle, #eef4ff 0%, transparent 70%)" }}
        />
        <div
          className="absolute -right-20 top-24 h-[30rem] w-[30rem] rounded-full opacity-85 blur-3xl"
          style={{ background: "radial-gradient(circle, #fff7ed 0%, transparent 70%)" }}
        />
        <div
          className="absolute bottom-0 left-1/3 h-[24rem] w-[24rem] rounded-full opacity-80 blur-3xl"
          style={{ background: "radial-gradient(circle, #ecfdf5 0%, transparent 70%)" }}
        />
      </div>

      <div className="ld-wrap grid grid-cols-1 items-center gap-14 lg:grid-cols-[1.05fr_1fr] lg:gap-10">
        {/* ---- Columna de texto ---- */}
        <motion.div initial="hidden" animate="show" variants={revealStagger(reduced, 0.09)}>
          <motion.p
            className="ld-eyebrow mb-5 inline-flex items-center gap-2 rounded-full bg-white/80 py-2 pl-2 pr-4 ring-1 ring-black/[0.05]"
            variants={revealUp(reduced, 12)}
          >
            {/* Los cuatro primeros de la paleta del panel, en su orden. */}
            <span className="flex gap-1" aria-hidden="true">
              {["var(--ld-azul)", "var(--ld-naranja)", "var(--ld-esmeralda)", "var(--ld-purpura)"].map(
                (c) => (
                  <span key={c} className="h-3 w-3 rounded-full" style={{ background: c }} />
                )
              )}
            </span>
            Salones · Barberías · Spas
          </motion.p>

          <h1 data-ld-hero-title className="ld-display">
            <motion.span className="block" variants={revealUp(reduced, 26)}>
              Tu agenda llena.
            </motion.span>
            <motion.span className="ld-gradient-text block" variants={revealUp(reduced, 26)}>
              Tu domingo libre.
            </motion.span>
          </h1>

          <motion.p className="ld-lead mt-7 max-w-lg" variants={revealUp(reduced)}>
            Guarda la libreta y la calculadora. AgendaMax te dice quién viene hoy, quién dejó de
            venir y cuánto llevas ganando este mes. Todo en una pantalla.
          </motion.p>

          <motion.div
            className="mt-9 grid grid-cols-1 gap-3 sm:flex sm:items-center"
            variants={revealUp(reduced)}
          >
            <Link to="/login" className="ld-cta">
              Entrar y probarlo
              <ArrowRight className="h-4 w-4" />
            </Link>
            <a href="#dolor" className="ld-cta-ghost">
              Ver cómo se ve
              <ChevronDown className="h-4 w-4" />
            </a>
          </motion.div>

          <motion.p
            className="mt-5 text-[0.9rem] font-semibold"
            style={{ color: "var(--ld-muted)" }}
            variants={revealUp(reduced, 8)}
          >
            No pide tarjeta. No pide registro. Entras y ya está adentro.
          </motion.p>
        </motion.div>

        {/* ---- Columna del muestrario ----
            El padding vertical en lg no es decorativo: reserva la banda superior e
            inferior donde se posan los avisos flotantes. Sin él se estrellan contra
            el abanico, que es la parte más ancha del dibujo. */}
        <div className="relative lg:py-16">
          <SwatchFanVisual />
          {/* Los avisos flotan solo cuando hay espacio real alrededor del abanico.
              Por debajo de lg se apilan bajo él: superpuestos en 390px taparían el
              muestrario completo. */}
          <FloatingMomentsLayer className="hidden lg:block" />
          <MomentsStack className="mt-8 lg:hidden" />
        </div>
      </div>

      {/* Indicador de scroll: respira, y se apaga con movimiento reducido. */}
      {!reduced && (
        <motion.div
          className="mx-auto mt-14 flex w-fit items-center gap-2 text-[0.8rem] font-bold uppercase tracking-widest"
          style={{ color: "var(--ld-muted)" }}
          animate={{ y: [0, 7, 0], opacity: [0.5, 1, 0.5] }}
          transition={{ duration: 2.6, repeat: Infinity, ease: EASE_EXPO }}
        >
          Sigue bajando
          <ChevronDown className="h-4 w-4" />
        </motion.div>
      )}
    </section>
  );
}