// Event page Block 1 — Hero
// Full-bleed image, event title, one-line value prop, inline logistics, primary CTA

function EventHero({ event, t, dayStr, dateStr, tzStr, spotsLeft, isFull, existingReg, heroCtaRef, onReserveClick, onViewConfirmation }) {
  const hasImage = !!event.image;
  const timeRange = event.endTime ? `${event.time} – ${event.endTime}` : event.time;

  return (
    <div className="event-hero-root" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Banner image — shown stacked on phone, hidden behind content on desktop */}
      {hasImage && (
        <div className="event-hero-banner" style={{
          display: 'none',
          width: '100%', height: 220,
          backgroundImage: `linear-gradient(180deg, rgba(15,17,20,0.25) 0%, rgba(15,17,20,0.6) 100%), url(${event.image})`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          borderBottom: `1px solid ${t.lineStrong}`,
        }} />
      )}
      {/* Background layer (desktop) */}
      <div className="event-hero-bg" style={{
        position: 'absolute', inset: 0,
        background: hasImage
          ? `linear-gradient(180deg, rgba(15,17,20,0.55) 0%, rgba(15,17,20,0.82) 70%, ${t.bg} 100%), url(${event.image})`
          : `linear-gradient(180deg, ${t.cellBg} 0%, ${t.bg} 100%)`,
        backgroundSize: 'cover', backgroundPosition: 'center',
      }} />
      {/* Content */}
      <div className="event-hero-content" style={{
        position: 'relative', zIndex: 1,
        padding: '48px var(--gutter-x) 40px',
        maxWidth: 1200, margin: '0 auto',
      }}>
        {/* Tag row */}
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 18, flexWrap: 'wrap' }}>
          <span style={{
            padding: '4px 10px', background: 'rgba(199,150,62,0.18)',
            border: `1px solid ${t.brass}`, color: t.brass,
            fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 10, letterSpacing: '0.25em',
          }}>{event.tag}</span>
          <span style={{
            fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 11,
            color: '#d6d6d6', letterSpacing: '0.2em',
          }}>{event.type.toUpperCase()}</span>
        </div>

        {/* Title */}
        <h1 className="event-hero-title" style={{
          fontFamily: 'Bebas Neue, sans-serif', fontWeight: 400,
          fontSize: 'clamp(40px, 7vw, 84px)', lineHeight: 0.95,
          color: '#fff', margin: '0 0 18px', letterSpacing: '0.01em',
          textShadow: hasImage ? '0 2px 20px rgba(0,0,0,0.6)' : 'none',
        }}>{event.title}</h1>

        {/* Value prop */}
        <p className="event-hero-valueprop" style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 400,
          fontSize: 'clamp(16px, 2.2vw, 21px)', lineHeight: 1.4,
          color: '#e8e8e8', margin: '0 0 28px', maxWidth: 720,
          textShadow: hasImage ? '0 1px 6px rgba(0,0,0,0.5)' : 'none',
        }}>{event.valueProp}</p>

        {/* Logistics strip — date / time / tz / location */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 1, background: t.line,
          border: `1px solid ${t.lineStrong}`,
          marginBottom: 28,
        }}>
          <LogCell label="DATE" value={`${dayStr}`} sub={dateStr} t={t} />
          <LogCell label="TIME" value={timeRange} sub={tzStr} t={t} />
          <LogCell label="LOCATION" value={event.location.split(',')[0]} sub={event.location.split(',').slice(1).join(',').trim() || ''} t={t} />
          <LogCell label="HOST" value={event.host || 'Pacific.AFSWS'} sub={event.tag} t={t} />
        </div>

        {/* Primary CTA */}
        <div ref={heroCtaRef} style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          {existingReg ? (
            <button onClick={onViewConfirmation} style={{
              padding: '18px 32px', minHeight: 56,
              background: '#7aa86b', color: '#0F1114', border: 'none',
              fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.3em', cursor: 'pointer',
            }}>✓ YOU'RE LOCKED IN — VIEW CONFIRMATION</button>
          ) : (
            <button onClick={onReserveClick} disabled={isFull} style={{
              padding: '18px 32px', minHeight: 56,
              background: isFull ? 'rgba(255,255,255,0.08)' : t.brass,
              color: isFull ? '#999' : '#0F1114', border: 'none',
              fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.3em', cursor: isFull ? 'not-allowed' : 'pointer',
            }}>{isFull ? 'JOIN WAITLIST ↓' : 'RESERVE MY SPOT ↓'}</button>
          )}
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 12,
            color: '#c4c4c4', letterSpacing: '0.1em',
          }}>FREE · NO COST · NO OBLIGATION</div>
        </div>
      </div>
    </div>
  );
}

function LogCell({ label, value, sub, t, accent }) {
  return (
    <div style={{
      background: 'rgba(15,17,20,0.72)', padding: '14px 16px',
      backdropFilter: 'blur(4px)',
    }}>
      <div style={{
        fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 9,
        color: accent ? t.brass : '#999', letterSpacing: '0.3em', marginBottom: 4,
      }}>{label}</div>
      <div style={{
        fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 16,
        color: accent ? t.brass : '#fff', letterSpacing: '0.05em', lineHeight: 1.1,
      }}>{value}</div>
      {sub && (
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 10,
          color: '#bbb', letterSpacing: '0.1em', marginTop: 3,
        }}>{sub}</div>
      )}
    </div>
  );
}

window.EventHero = EventHero;