import { Counter, Reveal, useTilt } from "./useReveal";
import { Particles } from "./Chrome";
import {
  Award,
  ChevronDown,
  Flame,
  Gauge,
  Goal,
  MapPin,
  Play,
  Ruler,
  Timer,
  Trophy,
  Zap,
} from "lucide-react";
import heroImg from "@/assets/hero.jpg";
import portraitImg from "@/assets/g6.jpg";

export function Hero() {
  return (
    <section id="inicio" className="relative flex min-h-screen items-center overflow-hidden">
      {/* Video background: usa el poster generado mientras no haya archivo de vídeo */}
      <div className="absolute inset-0">
        <video
          className="h-full w-full object-cover"
          poster={heroImg}
          autoPlay
          muted
          loop
          playsInline
          preload="none"
          aria-hidden
        />
        <img
          src={heroImg}
          alt="Mateo Ríos en el estadio bajo las luces nocturnas"
          width={1920}
          height={1088}
          className="absolute inset-0 h-full w-full object-cover"
          style={{ animation: "kenburns 22s ease-in-out infinite alternate" }}
        />
        <div className="absolute inset-0 bg-[linear-gradient(90deg,var(--background)_5%,transparent_65%)]" />
        <div className="absolute inset-0 bg-[linear-gradient(180deg,oklch(0.12_0.03_265/70%)_0%,transparent_35%,var(--background)_100%)]" />
      </div>

      <Particles count={30} />

      <div className="relative mx-auto w-full max-w-7xl px-5 pt-32 pb-24 sm:px-8">
        <Reveal>
          <p className="eyebrow">Mediocampista ofensivo · Temporada 25/26</p>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="mt-5 text-[clamp(3.2rem,11vw,9rem)]">
            Mateo
            <br />
            <span className="text-gradient-neon neon-text">Ríos</span>
          </h1>
        </Reveal>
        <Reveal delay={240}>
          <p className="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">
            Visión de juego, primer toque y llegada al área. 21 años, formado en la academia
            y compitiendo en categoría profesional con proyección internacional.
          </p>
        </Reveal>
        <Reveal delay={340}>
          <div className="mt-9 flex flex-wrap items-center gap-4">
            <a
              href="#videos"
              className="hover-premium inline-flex items-center gap-3 rounded-full bg-gradient-neon px-7 py-4 text-xs font-bold uppercase tracking-[0.2em] text-primary-foreground"
            >
              <Play className="h-4 w-4" /> Ver highlights
            </a>
            <a
              href="#perfil"
              className="hover-premium inline-flex items-center gap-3 rounded-full glass px-7 py-4 text-xs font-bold uppercase tracking-[0.2em]"
            >
              Ficha técnica
            </a>
          </div>
        </Reveal>

        <Reveal delay={460}>
          <dl className="mt-16 grid max-w-3xl grid-cols-2 gap-3 sm:grid-cols-4">
            {[
              { k: "Partidos", v: 148, icon: Timer },
              { k: "Goles", v: 62, icon: Goal },
              { k: "Asistencias", v: 71, icon: Zap },
              { k: "Títulos", v: 9, icon: Trophy },
            ].map((s) => (
              <div key={s.k} className="rounded-2xl glass p-4">
                <s.icon className="h-4 w-4 text-neon" />
                <dd className="mt-3 font-display text-3xl">
                  <Counter to={s.v} />
                </dd>
                <dt className="text-[0.65rem] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                  {s.k}
                </dt>
              </div>
            ))}
          </dl>
        </Reveal>
      </div>

      <a
        href="#perfil"
        aria-label="Bajar"
        className="absolute bottom-8 left-1/2 -translate-x-1/2 text-neon"
      >
        <ChevronDown className="h-7 w-7 animate-bounce" />
      </a>
    </section>
  );
}

export function Stats() {
  const tilt = useTilt(8);

  return (
    <section id="perfil" className="section-pad relative">
      <div className="mx-auto grid max-w-7xl gap-14 px-5 sm:px-8 lg:grid-cols-2 lg:items-center">
        <Reveal>
          <div
            {...tilt}
            ref={tilt.ref}
            className="card-3d relative overflow-hidden rounded-3xl glass-strong"
          >
            <img
              src={portraitImg}
              alt="Retrato de estudio de Mateo Ríos"
              loading="lazy"
              width={900}
              height={1200}
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 bg-[linear-gradient(0deg,oklch(0.12_0.03_265/92%),transparent)]">
              <div>
                <p className="eyebrow">Dorsal</p>
                <p className="font-display text-5xl text-gradient-neon">10</p>
              </div>
              <div className="text-right">
                <p className="eyebrow">Pie</p>
                <p className="font-display text-2xl">Derecho</p>
              </div>
            </div>
          </div>
        </Reveal>

        <div>
          <Reveal>
            <p className="eyebrow">El jugador</p>
            <h2 className="mt-4 text-[clamp(2.2rem,5vw,3.8rem)]">
              Números que <span className="text-gradient-neon">hablan</span>
            </h2>
            <p className="mt-5 max-w-lg leading-relaxed text-muted-foreground">
              Perfil de interior o mediapunta, con capacidad de conducción en espacios
              reducidos y último pase. Datos verificados por el cuerpo técnico en las
              últimas tres temporadas.
            </p>
          </Reveal>

          <div className="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3">
            {[
              { k: "Altura", v: 1.81, suffix: " m", d: 2, icon: Ruler },
              { k: "Velocidad punta", v: 34.2, suffix: " km/h", d: 1, icon: Gauge },
              { k: "Precisión pase", v: 89, suffix: "%", d: 0, icon: Zap },
              { k: "Minutos jugados", v: 11640, suffix: "", d: 0, icon: Timer },
              { k: "Regates / partido", v: 4.6, suffix: "", d: 1, icon: Flame },
              { k: "MVP", v: 23, suffix: "", d: 0, icon: Award },
            ].map((s, i) => (
              <Reveal key={s.k} delay={i * 80}>
                <div className="hover-premium h-full rounded-2xl glass p-5">
                  <s.icon className="h-4 w-4 text-neon" />
                  <p className="mt-4 font-display text-2xl">
                    <Counter to={s.v} decimals={s.d} suffix={s.suffix} />
                  </p>
                  <p className="mt-1 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                    {s.k}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={200}>
            <p className="mt-8 inline-flex items-center gap-2 rounded-full glass px-4 py-2 text-xs uppercase tracking-widest text-muted-foreground">
              <MapPin className="h-3.5 w-3.5 text-neon" /> Valencia, España · Disponible para
              pruebas
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const TIMELINE = [
  {
    year: "2016",
    title: "Academia Base",
    text: "Ingreso en la cantera. Debut en categoría infantil con 12 años y primer campeonato regional.",
  },
  {
    year: "2019",
    title: "Selección Juvenil",
    text: "Convocatoria a la selección autonómica sub-17 y MVP del torneo internacional de verano.",
  },
  {
    year: "2021",
    title: "Debut Profesional",
    text: "Primer partido en categoría profesional. Gol en su segundo encuentro como titular.",
  },
  {
    year: "2023",
    title: "Capitán Sub-21",
    text: "Brazalete en el filial y máximo asistente de la competición con 19 asistencias.",
  },
  {
    year: "2026",
    title: "Proyección Europea",
    text: "Seguimiento activo de clubes de primer nivel y participación en competición continental.",
  },
];

export function Timeline() {
  return (
    <section id="trayectoria" className="section-pad relative">
      <div className="mx-auto max-w-7xl px-5 sm:px-8">
        <Reveal>
          <p className="eyebrow">Trayectoria</p>
          <h2 className="mt-4 max-w-2xl text-[clamp(2.2rem,5vw,3.8rem)]">
            Diez años de <span className="text-gradient-neon">progresión</span>
          </h2>
        </Reveal>

        <ol className="relative mt-14 space-y-4 md:space-y-0 before:absolute before:bottom-0 before:left-4 before:top-2 before:w-px before:bg-gradient-neon md:before:left-1/2">
          {TIMELINE.map((t, i) => (
            <Reveal as="li" key={t.year} delay={i * 90} className="relative md:pl-0">
              <div
                className={`relative pl-12 md:w-1/2 md:pl-0 ${
                  i % 2 === 0 ? "md:pr-12 md:text-right" : "md:ml-auto md:-mt-16 md:pl-12"
                }`}
              >
                <span
                  className={`absolute left-2.5 top-6 h-3 w-3 rounded-full bg-neon glow md:left-auto ${
                    i % 2 === 0 ? "md:-right-1.5" : "md:-left-1.5"
                  }`}
                />
                <div className="hover-premium rounded-2xl glass p-6">
                  <span className="font-display text-3xl text-gradient-neon">{t.year}</span>
                  <h3 className="mt-2 text-xl">{t.title}</h3>
                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{t.text}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </ol>
      </div>
    </section>
  );
}

const COMPETITIONS = [
  { name: "Liga Profesional", detail: "38 partidos · 14 goles", badge: "25/26", icon: Trophy },
  { name: "Copa Nacional", detail: "Semifinalista · 5 goles", badge: "24/25", icon: Award },
  { name: "Champions Youth", detail: "Fase de grupos · MVP j.3", badge: "24/25", icon: Goal },
  { name: "Supercopa Juvenil", detail: "Campeón · 3 asistencias", badge: "23/24", icon: Flame },
];

export function Competitions() {
  return (
    <section className="section-pad relative">
      <div className="mx-auto max-w-7xl px-5 sm:px-8">
        <Reveal>
          <p className="eyebrow">Competencias</p>
          <h2 className="mt-4 text-[clamp(2.2rem,5vw,3.8rem)]">
            Donde <span className="text-gradient-neon">compite</span>
          </h2>
        </Reveal>

        <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {COMPETITIONS.map((c, i) => (
            <Reveal key={c.name} delay={i * 90}>
              <article className="hover-premium h-full rounded-3xl glass p-7">
                <div className="flex items-start justify-between">
                  <c.icon className="h-7 w-7 text-neon" />
                  <span className="rounded-full bg-secondary px-3 py-1 text-[0.6rem] font-bold uppercase tracking-[0.18em] text-muted-foreground">
                    {c.badge}
                  </span>
                </div>
                <h3 className="mt-8 text-lg">{c.name}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{c.detail}</p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const SKILLS = [
  { k: "Regate", v: 92 },
  { k: "Pase filtrado", v: 89 },
  { k: "Definición", v: 84 },
  { k: "Velocidad", v: 88 },
  { k: "Visión de juego", v: 94 },
  { k: "Resistencia", v: 86 },
];

export function Skills() {
  return (
    <section id="habilidades" className="section-pad relative">
      <div className="mx-auto grid max-w-7xl gap-14 px-5 sm:px-8 lg:grid-cols-2">
        <Reveal>
          <p className="eyebrow">Habilidades</p>
          <h2 className="mt-4 text-[clamp(2.2rem,5vw,3.8rem)]">
            Perfil <span className="text-gradient-neon">técnico</span>
          </h2>
          <p className="mt-5 max-w-md leading-relaxed text-muted-foreground">
            Valoraciones del departamento de scouting sobre 100, medidas en test físicos y
            análisis de vídeo de la temporada en curso.
          </p>
        </Reveal>

        <ul className="space-y-6">
          {SKILLS.map((s, i) => (
            <SkillBar key={s.k} label={s.k} value={s.v} delay={i * 90} />
          ))}
        </ul>
      </div>
    </section>
  );
}

function SkillBar({
  label,
  value,
  delay,
}: {
  label: string;
  value: number;
  delay: number;
}) {
  return (
    <Reveal as="li" delay={delay}>
      <div className="flex items-baseline justify-between text-sm font-semibold uppercase tracking-widest">
        <span>{label}</span>
        <span className="text-neon">
          <Counter to={value} />
        </span>
      </div>
      <div className="mt-3 h-2 overflow-hidden rounded-full bg-secondary">
        <div
          className="h-full rounded-full bg-gradient-neon glow transition-[width] duration-[1400ms] ease-out"
          style={{ width: `${value}%`, transitionDelay: `${delay}ms` }}
        />
      </div>
    </Reveal>
  );
}