const { useState: useStateHero, useEffect: useEffectHero } = React;

function useCountdown(target) {
  const [now, setNow] = useStateHero(Date.now());
  useEffectHero(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now);
  return {
    days: Math.floor(diff / 86400000),
    hours: Math.floor((diff % 86400000) / 3600000),
    minutes: Math.floor((diff % 3600000) / 60000),
    seconds: Math.floor((diff % 60000) / 1000),
    over: diff === 0,
  };
}

function Hero({ onOpenConfirm, onOpenDemo, onGoAgenda, showCountdown }) {
  const c = useCountdown(EVENT.date);

  return (
    <header className="hero" id="top">
      <div className="hero-wave" aria-hidden="true">
        <Waveform />
      </div>

      <div className="page topbar">
        <a href="#top" className="brand" aria-label="SKAI LIVE '26">
          <img src="assets/skai_black.svg" alt="SKAI" className="brand-logo" />
          <span className="brand-live">
            LIVE<span className="brand-year">'26</span>
          </span>
        </a>
        <a className="topbar-phone" href={`tel:${EVENT.phoneTel}`}>
          <span className="dot" aria-hidden="true"></span>
          <span className="mono">{EVENT.phone}</span>
        </a>
      </div>

      <div className="page hero-inner">
        <div className="hero-main">
          <div className="kicker-line mono">Invitación · Aforo limitado</div>

          <h1>
            <span className="h1-lead">
              {COPY.headline1} {COPY.headline2}
            </span>
            <em>{COPY.headline3}</em>
          </h1>

          <p className="tagline">
            <strong className="tagline-lead">{COPY.short}</strong>
            {COPY.lede}
          </p>

          <div className="cta-row">
            <button className="btn btn-primary" onClick={onOpenConfirm}>
              Confirmar asistencia <span className="arrow">→</span>
            </button>
            <button className="btn btn-accent-ghost" onClick={onOpenDemo}>
              Quiero mi SKAI gratis
            </button>
            <button className="btn btn-ghost" onClick={onGoAgenda}>
              Ver el programa
            </button>
          </div>

          <p className="principle mono">{COPY.principle}</p>
        </div>

        <aside className="hero-side">
          <div className="hero-meta">
            <div className="row">
              <div className="label">Fecha</div>
              <div className="value">
                {EVENT.dateLabel}
                <small>Apertura {EVENT.timeLabel} · hasta las 15:00</small>
              </div>
            </div>
            <div className="row">
              <div className="label">Lugar</div>
              <div className="value">
                {EVENT.venue}
                <small>
                  {EVENT.address} · {EVENT.city}
                </small>
              </div>
            </div>
            <div className="row">
              <div className="label">Cupo</div>
              <div className="value">
                {EVENT.cupoDemos} agentes a medida
                <small>Se eligen entre quienes lo pidan</small>
              </div>
            </div>
          </div>

          {showCountdown && !c.over && (
            <div className="countdown" aria-label="Cuenta atrás para el evento">
              {[
                [c.days, 'Días'],
                [c.hours, 'Horas'],
                [c.minutes, 'Min'],
                [c.seconds, 'Seg'],
              ].map(([n, lab]) => (
                <div className="cell" key={lab}>
                  <div className="num">{String(n).padStart(2, '0')}</div>
                  <div className="lab">{lab}</div>
                </div>
              ))}
            </div>
          )}

          <a className="cal-card" href={buildIcs()} download="skai-live-26.ics">
            <div className="cal-icon" aria-hidden="true">
              <div className="cal-icon-top"></div>
              <div className="cal-icon-num">{EVENT.dayNumber}</div>
            </div>
            <div className="cal-copy">
              <div className="cal-title">Añadir al calendario</div>
              <div className="cal-sub">{EVENT.dateShort} · Logroño</div>
            </div>
            <span className="cal-arrow" aria-hidden="true">
              ↓
            </span>
          </a>
        </aside>
      </div>
    </header>
  );
}

window.Hero = Hero;