/* ─── 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(61,183,176,0.20), transparent 60%),
          radial-gradient(ellipse 40% 25% at 15% 75%, rgba(31,111,135,0.18), 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,
          border: `1.5px solid ${heroC.sunset}`,
          borderRadius: 99,
          padding: "8px 18px",
          backdropFilter: "blur(8px)",
          background: "rgba(61,183,176,0.12)",
        }}>
          <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>

      {/* Brand logo as the hero title */}
      <h1 id="hero-title" className="fade-up-d1" style={{
        margin: "0", position: "relative", zIndex: 2,
        display: "flex", justifyContent: "center",
      }}>
        <span className="sr-only">Love Trail 21K — 5ª edición · 2026</span>
        <img src="assets/logo-hero.png" alt=""
          aria-hidden="true"
          style={{
            width: "clamp(280px, 56vw, 620px)",
            height: "auto",
            filter: "drop-shadow(0 8px 32px rgba(0,0,0,0.55)) drop-shadow(0 0 60px rgba(61,183,176,0.25))",
          }}
        />
      </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="Inscripción Love Trail.html" 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;