// Homepage — Upcoming Expos & Events strip.
// Reuses events-shared.jsx globals (UPCOMING, Flag, countdownLabel) and icons (ArrowRight).
// Compact, clickable cards linking through to the full events page.

const HomeUpcomingEvents = () => {
  const rows = (typeof UPCOMING !== 'undefined' ? UPCOMING : []).slice(0, 4);
  if (!rows.length) return null;
  return (
    <section className="section-pad" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 18, flexWrap: 'wrap', marginBottom: 28 }}>
          <div>
            <div className="kicker" style={{ color: 'var(--accent)' }}>EXPOS &amp; EVENTS</div>
            <h2 style={{ marginTop: 14, fontSize: 'clamp(28px, 3.4vw, 42px)', fontWeight: 450, letterSpacing: '-0.024em' }}>
              Where we&rsquo;ll be next.
            </h2>
            <p style={{ marginTop: 12, fontSize: 16, color: 'var(--text-2)', lineHeight: 1.6, maxWidth: '52ch' }}>
              Catch the QTG team on the floor, on a panel, or over coffee at the industry&rsquo;s key expos and briefings.
            </p>
          </div>
          <a href="events.html" className="btn btn-ghost" style={{ fontSize: 13.5, whiteSpace: 'nowrap' }}>All Events <ArrowRight /></a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="home-evt-grid">
          {rows.map((e, i) => {
            const cd = (typeof countdownLabel !== 'undefined') ? countdownLabel(e.start) : null;
            return (
              <a key={i} href="events.html#upcoming" style={{
                display: 'flex', flexDirection: 'column', gap: 14,
                padding: '20px 20px 18px',
                background: 'var(--surface)', border: '1px solid var(--line)',
                borderRadius: 12, textDecoration: 'none', position: 'relative',
                transition: 'border-color .16s, transform .16s'
              }}
              onMouseEnter={ev => { ev.currentTarget.style.borderColor = 'var(--line-stronger)'; ev.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={ev => { ev.currentTarget.style.borderColor = 'var(--line)'; ev.currentTarget.style.transform = 'none'; }}>
                {cd && <span className="mono" style={{
                  position: 'absolute', top: 16, right: 16, zIndex: 2,
                  fontSize: 8.5, letterSpacing: '0.1em', textTransform: 'uppercase',
                  color: 'var(--accent)', padding: '4px 9px', borderRadius: 999,
                  border: '1px solid var(--accent-dim)', background: 'var(--accent-faint)', whiteSpace: 'nowrap'
                }}>{cd}</span>}
                <div style={{
                  width: 46, height: 46, flex: 'none', borderRadius: 11, overflow: 'hidden',
                  background: e.logoLight ? '#FFFFFF' : 'var(--bg-3)',
                  border: '1px solid var(--line-strong)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  padding: e.logoFit === 'contain' ? 6 : 0
                }}>
                  {e.logo && <img src={e.logo} alt="" style={{ width: '100%', height: '100%', objectFit: e.logoFit || 'cover' }} />}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 7, flex: 1 }}>
                  <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.014em', color: 'var(--text)', lineHeight: 1.25 }}>{e.name}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 13, color: 'var(--text-2)' }}>
                    <span>{e.date}</span>
                    <span style={{ color: 'var(--text-4)' }}>·</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span>{e.city}, {e.country}</span><Flag code={e.country} /></span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .home-evt-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .home-evt-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { HomeUpcomingEvents });