const { useState, useEffect } = React;

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

function Hero({ onOpenConfirm, onGoAgenda, showGraph, showCountdown }) {
  const c = useCountdown(EVENT.date);
  const [calOpen, setCalOpen] = useState(false);

  const googleCalUrl = "https://www.google.com/calendar/render?action=TEMPLATE&text=IV+Spring+Meeting+%C2%B7+IR+Soluciones&dates=20260514T080000Z/20260514T140000Z&details=Impulsando+tecnol%C3%B3gicamente+la+empresa+del+futuro.&location=Edificio+Circular+Universe%2C+C%2F+Valdegastea+2%2C+Logro%C3%B1o";
  const outlookUrl = "https://outlook.live.com/calendar/0/action/compose?rru=addevent&subject=IV+Spring+Meeting+%C2%B7+IR+Soluciones&startdt=2026-05-14T10:00:00%2B02:00&enddt=2026-05-14T16:00:00%2B02:00&location=Edificio+Circular+Universe%2C+C%2F+Valdegastea+2%2C+Logro%C3%B1o&body=Impulsando+tecnol%C3%B3gicamente+la+empresa+del+futuro.";

  return (
    <header className="hero" data-screen-label="Hero">
      {showGraph && <div className="hero-graph"><Graph visible={showGraph} /></div>}

      <div className="page topbar" style={{padding: '22px 40px 0'}}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <img src="assets/logo-ir-circular.png" alt="IR Soluciones · Grupo Circular Universe" style={{height: 88, width: 'auto'}} />
        </div>
        <div className="edition-tag">
          <span className="dot"></span>
          <span className="mono">{EVENT.edition}</span>
        </div>
      </div>

      <div className="page hero-inner" style={{marginTop: 44}}>
        <div>
          <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 28}}>
            <span style={{borderBottom: '1px solid var(--line-strong)', paddingBottom: 2}}>Invitación</span>
          </div>
          <h1>
            IV Spring<br/>Meeting<em>.</em>
          </h1>
          <p className="tagline">
            <strong className="tagline-lead">Impulsando tecnológicamente la empresa del futuro.</strong>
            Una jornada para compartir visión, conectar con profesionales y entender hacia dónde
            evoluciona la tecnología aplicada al negocio.
          </p>

          <div className="cta-row">
            <button className="btn btn-primary" onClick={onOpenConfirm}>
              Confirmar asistencia <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={onGoAgenda}>
              Agenda de la jornada
            </button>
            <a className="btn btn-ghost" href={EVENT.mapsUrl} target="_blank" rel="noreferrer">
              Ver ubicación
            </a>
          </div>
        </div>

        <div>
          <div className="hero-meta">
            <div className="row">
              <div className="label">Fecha</div>
              <div className="value">
                {EVENT.dateLabel}
                <small>Apertura de puertas · 9:30h</small>
              </div>
            </div>
            <div className="row">
              <div className="label">Hora</div>
              <div className="value">
                10:00 – 16:00h
                <small>Jornada completa + almuerzo</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>

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

          <div className="cal-card">
            <div className="cal-card-head">
              <div className="cal-icon" aria-hidden="true">
                <div className="cal-icon-top"></div>
                <div className="cal-icon-num">14</div>
              </div>
              <div className="cal-copy">
                <div className="cal-title">Añadir al calendario</div>
                <div className="cal-sub">Jue 14 may · 10:00h · Logroño</div>
              </div>
              <button
                className="cal-toggle"
                onClick={() => setCalOpen(v => !v)}
                aria-expanded={calOpen}
              >
                {calOpen ? 'Cerrar' : 'Guardar'} <span className="arrow">{calOpen ? '×' : '+'}</span>
              </button>
            </div>
            {calOpen && (
              <div className="cal-options">
                <a href={googleCalUrl} target="_blank" rel="noreferrer" className="cal-opt">Google Calendar<span>↗</span></a>
                <a href={buildIcs()} download="spring-meeting-2026.ics" className="cal-opt">Apple · iCal<span>↓</span></a>
                <a href={outlookUrl} target="_blank" rel="noreferrer" className="cal-opt">Outlook<span>↗</span></a>
                <a href={buildIcs()} download="spring-meeting-2026.ics" className="cal-opt">Descargar .ics<span>↓</span></a>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}

window.Hero = Hero;