// Header: co-brand split lockup (Ted Trading Club × Limitless) + live countdown.
const { useState: useStateH } = React;

function CountUnit({ value, label }) {
  const v = String(value).padStart(2, "0");
  return (
    <div className="cd-unit">
      <div className="cd-val num">{v}</div>
      <div className="cd-lab">{label}</div>
    </div>
  );
}

function Hero() {
  const m = window.DASH.meta;
  const started = Date.now() >= new Date(m.start).getTime();
  const cd = useCountdown(m.end);
  const days = Math.round((new Date(m.end) - new Date(m.start)) / 86400000);
  const fmtDate = (iso) => new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });

  return (
    <header className="hero">
      <div className="hero-top">
        <div className="lockup">
          <div className="brand brand-ted">
            <img className="ted-av" src={m.avatar} alt="Ted Trading Club" />
            <span className="brand-name">Ted Trading Club</span>
          </div>
          <span className="lock-x" aria-hidden="true">×</span>
          <div className="brand brand-ll">
            <img className="ll-mark" src="assets/logo-mark.svg" alt="" />
            <span className="brand-name brand-ll-name">Limitless</span>
          </div>
        </div>
        <div className="hero-status">
          <span className="status-pill">
            {started ? <LiveDot /> : <Icon name="clock" size={12} />}
            {started ? "LIVE" : "STARTS SOON"}
          </span>
          <span className="updated">
            <Icon name="spark" size={12} /> Updated {fmtUpdated(m.lastUpdated)}
          </span>
        </div>
      </div>

      <div className="hero-main">
        <div className="hero-headings">
          <div className="eyebrow">{m.tagline}</div>
          <h1 className="hero-title">The&nbsp;Challenge</h1>
          <div className="hero-sub">
            <span className="prize-chip"><Icon name="trophy" size={15} color="#000" /> ${money(m.prizePool, { dp: 0 })} {m.currency} prize pool</span>
            <span className="win">{fmtDate(m.start)} → {fmtDate(m.end)} · {days}-day sprint</span>
          </div>
        </div>

        <div className="countdown">
          <div className="cd-head">
            <Icon name="clock" size={13} />
            <span>{cd.done ? "Competition closed" : (started ? "Time remaining" : "Until close")}</span>
          </div>
          <div className="cd-grid">
            <CountUnit value={cd.d} label="Days" />
            <span className="cd-sep">:</span>
            <CountUnit value={cd.h} label="Hrs" />
            <span className="cd-sep">:</span>
            <CountUnit value={cd.m} label="Min" />
            <span className="cd-sep">:</span>
            <CountUnit value={cd.s} label="Sec" />
          </div>
        </div>
      </div>

      <a className="ref-bar" href={"https://" + m.referral} target="_blank" rel="noopener">
        <span className="ref-label"><Icon name="flag" size={13} color="var(--ll-neon)" /> Referral link</span>
        <span className="ref-url num">{m.referral}</span>
        <span className="ref-go"><Icon name="external" size={13} /></span>
      </a>
    </header>
  );
}

window.Hero = Hero;