/* ─── HERO with photo background ─── */
const { C: heroC, FONTS: heroFONTS, RACE_DATE: heroDate, STATS: heroStats } = window.LT;
const { useCountdown: heroUseCountdown, useViewport: heroUseViewport } = window.LTHooks;

function Hero() {
  const cd = heroUseCountdown(heroDate);
  const { isMobile } = heroUseViewport();

  return (
    <section
      id="hero"
      aria-labelledby="hero-title"
      style={{
        minHeight: "100vh",
        position: "relative",
        display: "flex", flexDirection: "column",
        justifyContent: "center", alignItems: "center",
        textAlign: "center",
        padding: "120px 20px 80px",
        overflow: "hidden",
        isolation: "isolate",
      }}
    >
      {/* Photo background */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -3,
        backgroundImage: "url('assets/hero-trail.jpeg')",
        backgroundSize: "cover",
        backgroundPosition: "center 30%",
        backgroundRepeat: "no-repeat",
        transform: "scale(1.04)",
      }} />

      {/* Dark gradient overlay — guarantees AAA contrast on text */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -2,
        background: `
          linear-gradient(180deg,
            rgba(11,15,20,0.55) 0%,
            rgba(11,15,20,0.40) 30%,
            rgba(11,15,20,0.70) 65%,
            rgba(11,15,20,0.95) 100%),
          radial-gradient(ellipse 70% 60% at 50% 45%, rgba(11,15,20,0.35) 0%, rgba(11,15,20,0.75) 100%)
        `,
      }} />

      {/* Subtle warm glow accents */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -1, pointerEvents: "none",
        background: `
          radial-gradient(ellipse 50% 30% at 80% 20%, rgba(245,155,60,0.18), transparent 60%),
          radial-gradient(ellipse 40% 25% at 15% 75%, rgba(125,211,252,0.10), transparent 60%)
        `,
      }} />

      <div className="fade-up" style={{ position: "relative", zIndex: 2 }}>
        <div role="status" aria-live="polite" style={{
          display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 28,
          background: "rgba(245,155,60,0.18)",
          border: `1.5px solid ${heroC.sunset}`,
          borderRadius: 99,
          padding: "8px 18px",
          backdropFilter: "blur(8px)",
        }}>
          <span aria-hidden="true" style={{
            width: 8, height: 8, borderRadius: "50%",
            background: heroC.sunset, animation: "pulse 2s infinite",
            boxShadow: `0 0 12px ${heroC.sunset}`,
          }} />
          <span style={{
            fontSize: 12, fontWeight: 700, color: heroC.sunsetSoft,
            fontFamily: heroFONTS.mono, letterSpacing: "0.14em",
          }}>
            5ª EDICIÓN · INSCRIPCIONES ABIERTAS
          </span>
        </div>
      </div>

      <h1 id="hero-title" className="fade-up-d1" style={{
        fontFamily: heroFONTS.display,
        fontSize: "clamp(64px, 12vw, 156px)",
        fontWeight: 700,
        lineHeight: 0.88,
        margin: "0",
        textTransform: "uppercase",
        letterSpacing: "-0.035em",
        position: "relative", zIndex: 2,
        color: heroC.text,
        textShadow: "0 4px 32px rgba(0,0,0,0.5)",
        textWrap: "balance",
      }}>
        <span style={{ display: "block" }}>Corré con</span>
        <span style={{
          display: "block",
          background: `linear-gradient(135deg, ${heroC.sunset} 0%, ${heroC.ember} 60%, ${heroC.sunsetSoft} 100%)`,
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          backgroundClip: "text",
        }}>
          el corazón
        </span>
      </h1>

      <p className="fade-up-d2" style={{
        fontFamily: heroFONTS.body,
        fontSize: "clamp(16px, 2vw, 20px)",
        color: heroC.text,
        maxWidth: 620, margin: "28px auto 0",
        lineHeight: 1.6,
        position: "relative", zIndex: 2,
        textShadow: "0 2px 16px rgba(0,0,0,0.7)",
        fontWeight: 500,
      }}>
        Trail running por <strong style={{ color: heroC.sunsetSoft }}>Las Bardas, Plottier · Neuquén</strong>.
        <br/>
        <span style={{ color: heroC.skySoft, fontFamily: heroFONTS.mono, fontSize: "0.85em", letterSpacing: "0.08em" }}>
          20 · 09 · 2026   ·   21K  ·  12K  ·  6K  ·  KIDS
        </span>
      </p>

      {/* COUNTDOWN */}
      <div className="fade-up-d3" role="timer" aria-label="Cuenta regresiva para la carrera"
        style={{
          display: "flex", gap: isMobile ? 8 : 14,
          margin: "44px auto 0",
          position: "relative", zIndex: 2,
          flexWrap: "wrap", justifyContent: "center",
        }}>
        {[
          { v: cd.days, l: "Días" },
          { v: cd.hours, l: "Horas" },
          { v: cd.mins, l: "Min" },
          { v: cd.secs, l: "Seg" },
        ].map((u, i) => (
          <div key={i} style={{ textAlign: "center" }}>
            <div aria-hidden="true" style={{
              fontFamily: heroFONTS.mono,
              fontSize: "clamp(28px, 4.5vw, 44px)", fontWeight: 700,
              color: heroC.text, lineHeight: 1,
              background: "rgba(11,15,20,0.65)",
              border: `1px solid ${heroC.border}`,
              backdropFilter: "blur(14px)",
              borderRadius: 14, padding: "16px 18px",
              minWidth: isMobile ? 64 : 84,
              boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
            }}>
              {String(u.v).padStart(2, "0")}
            </div>
            <span style={{
              fontSize: 11, color: heroC.textSoft,
              fontFamily: heroFONTS.mono, marginTop: 8, display: "block",
              letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600,
            }}>{u.l}</span>
          </div>
        ))}
        <span className="sr-only">{cd.days} días, {cd.hours} horas, {cd.mins} minutos para la largada</span>
      </div>

      <div className="fade-up-d4" style={{
        display: "flex", gap: 14, marginTop: 40,
        position: "relative", zIndex: 2,
        flexWrap: "wrap", justifyContent: "center",
      }}>
        <a href="#inscripcion" className="cta-btn">
          Inscribite ahora
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
            <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
          </svg>
        </a>
        <a href="#recorrido" className="cta-secondary">Ver recorrido</a>
      </div>

      {/* Stats */}
      <div className="fade-up-d4" style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
        gap: isMobile ? 16 : 32,
        marginTop: 64,
        position: "relative", zIndex: 2,
        maxWidth: 720, width: "100%",
      }}>
        {heroStats.map((s, i) => (
          <div key={i} style={{
            textAlign: "center",
            padding: "12px 8px",
            borderLeft: i > 0 && !isMobile ? `1px solid rgba(255,255,255,0.15)` : "none",
          }}>
            <div style={{
              fontFamily: heroFONTS.display, fontSize: "clamp(22px, 3vw, 32px)",
              fontWeight: 700, color: heroC.sunsetSoft,
              textShadow: "0 2px 12px rgba(0,0,0,0.6)",
            }}>{s.n}</div>
            <div style={{
              fontSize: 12, color: heroC.text, marginTop: 4,
              letterSpacing: "0.04em", fontWeight: 500,
              textShadow: "0 1px 8px rgba(0,0,0,0.7)",
            }}>{s.label}</div>
          </div>
        ))}
      </div>

      {/* Scroll cue */}
      <div aria-hidden="true" style={{
        position: "absolute", bottom: 24, left: "50%", transform: "translateX(-50%)",
        zIndex: 2,
        display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
        animation: "float 2.4s ease-in-out infinite",
      }}>
        <span style={{
          fontSize: 10, fontFamily: heroFONTS.mono, color: heroC.textSoft,
          letterSpacing: "0.2em", textTransform: "uppercase",
        }}>Scroll</span>
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none" stroke={heroC.textSoft} strokeWidth="1.5">
          <rect x="1" y="1" width="12" height="20" rx="6"/>
          <line x1="7" y1="6" x2="7" y2="10" strokeLinecap="round"/>
        </svg>
      </div>
    </section>
  );
}

window.LTHero = Hero;