// NUON hero — lámina animada de la home y variante tipográfica.

(function (NUON) {
  const { useState, useEffect } = React;

  // El héroe es una lámina animada exportada de Figma, una por ancho: cada una
  // trae su propio panel, grilla y rótulos. <picture> elige una sola y el
  // navegador descarga únicamente esa, así el teléfono no baja la de escritorio.
  // El corte coincide con el de móvil en styles/base.css.
  const HERO_ANIM_DESKTOP_MQ = "(min-width: 701px)";
  const HERO_ANIM_DESKTOP = "assets/animation-home-desktop.svg";
  const HERO_ANIM_MOBILE = "assets/animation-home-mobile.svg";

  function IsoHero() {
    const base = NUON.ASSET_BASE || "";
    return (
      <div className="hero__stage hero__stage--anim">
        {/* Decorativa: alt vacío para que el lector de pantalla la salte. */}
        <picture>
          <source
            media={HERO_ANIM_DESKTOP_MQ}
            srcSet={base + HERO_ANIM_DESKTOP}
            width="1249"
            height="585"
          />
          <img
            className="hero__anim"
            src={base + HERO_ANIM_MOBILE}
            alt=""
            width="359"
            height="577"
          />
        </picture>
      </div>
    );
  }

  // Reloj de ciclo — la marca es Bogotá; zona y etiqueta viven juntas para que no
  // se desincronicen, y el formatter se construye una sola vez (no por tick/instancia).
  const CLOCK_ZONE = { tz: "America/Bogota", label: "UTC-5" };
  const CLOCK_FMT = new Intl.DateTimeFormat("en-US", {
    timeZone: CLOCK_ZONE.tz,
    hour12: false,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });

  // Live cycle clock — ticking timestamp
  function Clock({ className, prefix }) {
    const [t, setT] = useState(new Date());
    useEffect(() => {
      const id = setInterval(() => setT(new Date()), 1000);
      return () => clearInterval(id);
    }, []);
    const time = CLOCK_FMT.format(t).replace(/^24/, "00"); // Intl puede emitir "24:mm:ss" a medianoche
    return (
      <span className={className}>
        {prefix} {time} {CLOCK_ZONE.label}
      </span>
    );
  }

  function TypoHero({ copy }) {
    return (
      <div className="hero__stage">
        <span className="hero__tag tl" style={{ color: "rgba(255,255,255,.6)" }}>
          {copy.stage_tl}
        </span>
        <Clock className="hero__tag tr" prefix="↻" />
        <span className="hero__tag bl" style={{ color: "rgba(255,255,255,.6)" }}>
          v.4.0 · BLUEPRINT
        </span>

        <div className="typo-hero">
          <div>{copy.typo_a}</div>
          <div>{copy.typo_b}</div>
          <div>
            <span className="grad">{copy.typo_c}</span>
            <span style={{ color: "#FDBFE8" }}>{copy.typo_dot}</span>
          </div>
        </div>

        {/* Floating spectrum chips */}
        <div
          style={{ position: "absolute", bottom: 24, left: 24, display: "flex", gap: 6, zIndex: 2 }}
        >
          {["#76D6FF", "#0096FF", "#7A81FF", "#D883FF", "#FDBFE8"].map((c, i) => (
            <div
              key={i}
              style={{ width: 36, height: 6, borderRadius: 999, background: c, opacity: 0.9 }}
            ></div>
          ))}
        </div>
        <div
          style={{
            position: "absolute",
            bottom: 24,
            right: 24,
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: ".14em",
            color: "rgba(255,255,255,.5)",
            textTransform: "uppercase",
            zIndex: 2,
          }}
        >
          [ TIPOGRAFÍA · BEBAS NEUE 400 ]
        </div>
      </div>
    );
  }

  NUON.IsoHero = IsoHero;
  NUON.TypoHero = TypoHero;
  NUON.Clock = Clock;
})((window.NUON ??= {}));