// EventsGate.jsx — PROYECTO Events page
// Two-state component: locked (password gate) → unlocked (events list).
// Lock state is component-local: navigating away resets it.

const EventsGate = () => {
  const cmsContent = (typeof useCMSContent === 'function') ? useCMSContent() : null;
  const events = (cmsContent && cmsContent.events) || { list: [] };
  // accessCode no longer lives in content.json — it's checked server-side via
  // /api/check-events-code, which compares a hash of the submitted code to
  // EVENTS_CODE_HASH (rehashed automatically on every secrets.json publish).

  // Grant-state copy is editable in the CMS under CLEARANCE LABELS. Each read
  // falls back to the original hardcoded string so the gate still renders
  // correctly if content.json is from before this change, or if a field was
  // accidentally cleared.
  const gt = (cmsContent && cmsContent.grantText) || {};
  const grant = {
    heading:  gt.eventsGrantHeading  || '04 ACCESS GRANTED',
    subtitle: gt.eventsGrantSubtitle || 'events // proyecto',
    ticker1:  gt.eventsGrantTicker1  || 'CODE OK',
    ticker2:  gt.eventsGrantTicker2  || 'EVENTS QUEUE OPEN',
    ticker3:  gt.eventsGrantTicker3  || 'PROCEED',
  };

  const [unlocked, setUnlocked] = React.useState(false);
  const [granting, setGranting] = React.useState(false); // brief flash before list appears
  const [input, setInput]       = React.useState('');
  const [status, setStatus]     = React.useState('idle'); // idle | denied
  const [shake, setShake]       = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(!!window.__IS_MOBILE);
  const [visible, setVisible]   = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (typeof window.__onMobileChange === 'function') {
      return window.__onMobileChange(setIsMobile);
    }
  }, []);

  // Fade in
  React.useEffect(() => {
    const t = setTimeout(() => setVisible(true), 50);
    return () => clearTimeout(t);
  }, []);

  // Auto-focus input on desktop. On mobile, user taps the visible input to focus.
  React.useEffect(() => {
    if (!isMobile && !unlocked && !granting && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isMobile, unlocked, granting]);

  const handleChange = (e) => {
    if (granting || unlocked || status === 'verifying') return;
    setInput(e.target.value.slice(0, 200));
  };

  const submit = async () => {
    if (granting || unlocked || status === 'verifying') return;
    const v = input.trim();
    if (!v) return;

    setStatus('verifying');

    let ok = false;
    try {
      const res = await fetch('/api/check-events-code', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: v }),
      });
      if (res.ok) {
        const data = await res.json().catch(() => ({}));
        ok = !!(data && data.ok);
      }
    } catch (_) {
      // Network error — fall through to denied (same UX).
    }

    if (ok) {
      setStatus('idle');
      setGranting(true);
      // Brief grant flash, then reveal list
      setTimeout(() => { setUnlocked(true); setGranting(false); }, 1400);
    } else {
      setStatus('denied');
      setShake(true);
      setTimeout(() => { setStatus('idle'); setInput(''); setShake(false); }, 900);
    }
  };

  const handleKey = (e) => {
    if (status === 'verifying') return;
    if (e.key === 'Enter') { e.preventDefault(); submit(); }
  };

  const handleMobileTap = () => {
    if (inputRef.current) inputRef.current.focus();
  };

  const masked = '•'.repeat(input.length);

  // ─────────────────────────────────────────────────────────────
  // UNLOCKED VIEW — events list
  // ─────────────────────────────────────────────────────────────
  if (unlocked) {
    return <EventsList events={events.list || []} isMobile={isMobile} visible={visible} />;
  }

  // ─────────────────────────────────────────────────────────────
  // LOCKED VIEW — gate
  // ─────────────────────────────────────────────────────────────
  return (
    <div style={{
      ...es.gateWrap,
      opacity: visible ? 1 : 0,
      ...(isMobile ? { padding: '60px 20px 40px' } : {}),
    }}>
      {/* Corner brackets — match terminal/landing */}
      <div style={{ ...es.corner, top: 72, left: 24, borderTop: '1px solid #1a1a1a', borderLeft: '1px solid #1a1a1a' }} />
      <div style={{ ...es.corner, top: 72, right: 24, borderTop: '1px solid #1a1a1a', borderRight: '1px solid #1a1a1a' }} />
      <div style={{ ...es.corner, bottom: 24, left: 24, borderBottom: '1px solid #1a1a1a', borderLeft: '1px solid #1a1a1a' }} />
      <div style={{ ...es.corner, bottom: 24, right: 24, borderBottom: '1px solid #1a1a1a', borderRight: '1px solid #1a1a1a' }} />

      {/* Top-right meta — events-themed (purple tint to differentiate) */}
      {!isMobile && (
        <div style={es.topMeta}>
          <div>EVENTS LAYER</div>
          <div>SECONDARY GATE</div>
          <div style={es.metaDivider} />
          <div style={{ color: 'var(--events-accent, #e6351e)' }}>SYS · 04 ACCESS</div>
        </div>
      )}

      {/* Granting overlay — purple flash + ACCESS GRANTED text */}
      {granting && <div style={es.flashOverlay} aria-hidden />}

      {/* Center content */}
      <div style={{ ...es.center, ...(isMobile ? { padding: '0 8px' } : {}) }}>
        {granting ? (
          <div style={es.grantedBlock}>
            <div style={es.grantedLine}>{grant.heading}</div>
            <div style={es.grantedSub}>{grant.subtitle}<span style={es.grantCursor} /></div>
            <div style={es.grantedTicker}>● {grant.ticker1} · ● {grant.ticker2} · ● {grant.ticker3}</div>
          </div>
        ) : (
          <>
            {/* Title block */}
            <div style={{
              ...es.titleBlock,
              ...(isMobile ? { fontSize: 'clamp(28px, 9vw, 40px)' } : {}),
            }}>
              <div style={es.titleLabel}>04 //</div>
              <div style={es.title}>EVENTS</div>
            </div>

            <div style={es.accentRule} />

            {/* Prompt */}
            <div style={es.promptBlock}>
              <div style={es.promptHelper}>
                <span style={{ color: 'var(--events-accent, #e6351e)' }}>&gt;</span>&nbsp;ENTER ACCESS CODE
              </div>

              {/* Mobile: visible-but-styled input you can tap. Desktop: hidden input + visual prompt. */}
              {isMobile ? (
                <div style={{...es.mobileInputWrap, ...(shake ? es.shake : {}), borderColor: status === 'denied' ? 'var(--events-accent, #e6351e)' : '#1a1a1a'}} onClick={handleMobileTap}>
                  <span style={es.promptArrow}>&gt;</span>
                  <input
                    ref={inputRef}
                    value={input}
                    onChange={handleChange}
                    onKeyDown={handleKey}
                    type="text"
                    inputMode="text"
                    autoCapitalize="none"
                    autoCorrect="off"
                    autoComplete="off"
                    spellCheck="false"
                    aria-label="Events access code"
                    placeholder="code"
                    style={{
                      ...es.mobileInput,
                      WebkitTextSecurity: 'disc',
                    }}
                    disabled={granting || unlocked}
                  />
                </div>
              ) : (
                <>
                  <input
                    ref={inputRef}
                    value={input}
                    onChange={handleChange}
                    onKeyDown={handleKey}
                    autoCapitalize="none"
                    autoCorrect="off"
                    autoComplete="off"
                    spellCheck="false"
                    type="text"
                    aria-label="Events access code"
                    style={{
                      position: 'absolute',
                      opacity: 0,
                      pointerEvents: 'none',
                      width: 1, height: 1,
                      caretColor: 'transparent',
                    }}
                  />
                  <div style={{ ...es.promptLine, ...(shake ? es.shake : {}) }}>
                    <span style={es.promptKey}>code</span>
                    <span style={es.promptArrow}>&gt;</span>
                    <span style={es.promptInput}>{masked}</span>
                    <span style={{ ...es.blockCursor, background: status === 'denied' ? 'var(--events-accent, #e6351e)' : '#fff' }} />
                  </div>
                </>
              )}

              {isMobile && (
                <button
                  onClick={submit}
                  disabled={!input.trim() || status === 'verifying'}
                  style={{
                    ...es.mobileSubmit,
                    opacity: (input.trim() && status !== 'verifying') ? 1 : 0.3,
                  }}
                >
                  {status === 'verifying' ? 'VERIFYING...' : 'SUBMIT ▸'}
                </button>
              )}

              {status === 'denied' && (
                <div style={es.deniedLabel}>access denied</div>
              )}
            </div>
          </>
        )}
      </div>

      {/* Bottom-left footer */}
      {!isMobile && (
        <div style={es.footerLeft}>
          PRIVATE TRANSMISSION · CODE REQUIRED PER VISIT
        </div>
      )}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// EVENTS LIST — rendered after unlock
// ─────────────────────────────────────────────────────────────
const EventsList = ({ events, isMobile, visible }) => {
  const [revealed, setRevealed] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setRevealed(true), 50);
    return () => clearTimeout(t);
  }, []);

  // Filter out inactive events (active toggle is the single source of truth
  // for visibility — past events stay visible until the founder unchecks them).
  // Sort ascending by date.
  const activeEvents = (events || [])
    .filter(e => e && e.active !== false)
    .slice()
    .sort((a, b) => (a.date || '').localeCompare(b.date || ''));

  return (
    <div style={{ ...es.listWrap, opacity: revealed ? 1 : 0 }}>
      {/* Title block — matches Contact/Studio pages */}
      <div style={{
        ...es.titleBlockHeader,
        ...(isMobile ? { padding: '28px 20px 0' } : {}),
      }}>
        <div style={{
          ...es.bgWord,
          ...(isMobile ? { fontSize: 64, top: 14, left: 16 } : {}),
        }}>EVENTS</div>
        <div style={{
          ...es.titleRow,
          ...(isMobile ? { flexDirection: 'column', alignItems: 'flex-start', gap: 18, paddingBottom: 18 } : {}),
        }}>
          <div style={{
            ...es.pageTitle,
            ...(isMobile ? { fontSize: 'clamp(28px, 9vw, 48px)' } : {}),
          }}>EVENTS</div>
          <div style={{
            ...es.titleRight,
            ...(isMobile ? { textAlign: 'left', paddingBottom: 0 } : {}),
          }}>
            <div style={{ ...es.eventsCount, ...(isMobile ? { fontSize: 11 } : {}) }}>
              <span style={{ color: 'var(--events-accent, #e6351e)' }}>●</span>&nbsp;{activeEvents.length} UPCOMING
            </div>
            <div style={{ ...es.subtitle, ...(isMobile ? { fontSize: 10 } : {}) }}>
              ACCESS GRANTED · CARDS LINK TO TICKETS
            </div>
          </div>
        </div>
        <div style={es.titleRule} />
      </div>

      {/* Grid */}
      <div className="proyecto-events-grid" style={{
        ...es.grid,
        ...(isMobile ? { padding: '36px 20px 60px', gridTemplateColumns: '1fr', gap: 32 } : {}),
      }}>
        {activeEvents.length === 0 ? (
          <div style={es.emptyState}>
            <span style={{ color: 'var(--events-accent, #e6351e)' }}>—</span>&nbsp;NO EVENTS SCHEDULED
          </div>
        ) : (
          activeEvents.map((ev, i) => (
            <EventCard key={ev.id || i} event={ev} index={i} isMobile={isMobile} />
          ))
        )}
      </div>

      {/* Footer */}
      <div style={{
        ...es.footerBar,
        ...(isMobile ? { padding: '20px 20px 32px', fontSize: 9 } : {}),
      }}>
        <span>PROYECTO · EVENTS</span>
        <span style={{ color: '#2a2a2a' }}>LOS ANGELES</span>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// EVENT CARD — photo top, text below
// ─────────────────────────────────────────────────────────────
const EventCard = ({ event, index, isMobile }) => {
  const [hovered, setHovered] = React.useState(false);

  const handleClick = () => {
    if (!event.ticketUrl) return;
    // Only allow http/https URLs — block javascript:, data:, vbscript:, etc.
    if (!/^https?:\/\//i.test(event.ticketUrl)) return;
    window.open(event.ticketUrl, '_blank', 'noopener,noreferrer');
  };

  // Format date: "SAT, MAY 8"
  const dateLabel = (() => {
    if (!event.date) return '';
    // Parse YYYY-MM-DD as local date (avoid TZ shift from new Date('YYYY-MM-DD') parsing as UTC)
    const parts = event.date.split('-');
    if (parts.length !== 3) return event.date;
    const [y, m, d] = parts.map(Number);
    if (!y || !m || !d) return event.date;
    const dt = new Date(y, m - 1, d);
    if (isNaN(dt.getTime())) return event.date;
    const days   = ['SUN','MON','TUE','WED','THU','FRI','SAT'];
    const months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
    return `${days[dt.getDay()]}, ${months[dt.getMonth()]} ${dt.getDate()}`;
  })();

  return (
    <div
      role="button"
      tabIndex={0}
      data-hoverable="true"
      onClick={handleClick}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        ...es.card,
        animation: `fadeIn 400ms ${index * 80}ms backwards linear`,
      }}
    >
      {/* Photo — 4:5 portrait */}
      <div style={{
        ...es.cardPhotoWrap,
        borderColor: hovered ? 'var(--events-accent, #e6351e)' : '#0e0e0e',
      }}>
        {event.image ? (
          <img
            src={event.image}
            alt={event.title || 'Event'}
            style={{
              ...es.cardPhoto,
              transform: hovered ? 'scale(1.03)' : 'scale(1)',
              filter: hovered ? 'brightness(1.05)' : 'brightness(0.95)',
            }}
          />
        ) : (
          <div style={es.cardPhotoEmpty}>
            <span style={es.cardPhotoEmptyText}>[ NO IMAGE ]</span>
          </div>
        )}
        {/* Hover indicator — top right corner */}
        <div style={{
          ...es.cardArrow,
          opacity: hovered ? 1 : 0.4,
          color: hovered ? 'var(--events-accent, #e6351e)' : '#555',
        }}>
          ▸
        </div>
      </div>

      {/* Text block */}
      <div style={es.cardBody}>
        {event.promoter && (
          <div style={es.cardPromoter}>
            {event.promoter} <span style={{ color: '#555' }}>presents</span>
          </div>
        )}
        <div style={{
          ...es.cardTitle,
          color: hovered ? '#fff' : '#fff',
        }}>
          {event.title || 'UNTITLED'}
        </div>
        {event.subtitle && (
          <div style={es.cardSubtitle}>{event.subtitle}</div>
        )}
        <div style={es.cardMetaRow}>
          {dateLabel && (
            <div style={{
              ...es.cardDate,
              color: hovered ? 'var(--events-accent, #e6351e)' : '#cfcfcf',
            }}>{dateLabel}</div>
          )}
          {event.time && (
            <div style={es.cardTime}>{event.time}</div>
          )}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Styles
// ─────────────────────────────────────────────────────────────
const es = {
  // ── GATE ────────────────────────────────────────────────
  gateWrap: {
    minHeight: '100vh', width: '100%',
    background: '#050402', position: 'relative',
    paddingTop: 48, // clear the fixed nav
    overflow: 'hidden',
    fontFamily: "'Share Tech Mono', monospace",
    color: '#fff',
    transition: 'opacity 200ms linear',
  },
  corner: {
    position: 'absolute', width: 16, height: 16,
    pointerEvents: 'none', zIndex: 1,
  },
  topMeta: {
    position: 'absolute', top: 72, right: 48,
    fontSize: 10, color: '#3a3a3a',
    letterSpacing: '0.15em', textTransform: 'uppercase',
    textAlign: 'right', lineHeight: 1.9,
    zIndex: 3,
  },
  metaDivider: {
    width: 28, height: 1, background: '#1a1a1a',
    marginLeft: 'auto', marginTop: 10, marginBottom: 10,
  },
  center: {
    position: 'absolute',
    top: '50%', left: 0, right: 0,
    transform: 'translateY(-50%)',
    padding: '0 48px',
    display: 'flex', flexDirection: 'column',
    alignItems: 'flex-start', gap: 28,
    zIndex: 2,
  },
  titleBlock: {
    display: 'flex', flexDirection: 'column', gap: 6,
  },
  titleLabel: {
    fontSize: 11, color: 'var(--events-accent, #e6351e)',
    letterSpacing: '0.28em', textTransform: 'uppercase',
    fontFamily: "'Share Tech Mono', monospace",
  },
  title: {
    fontFamily: "'Cindie2', sans-serif",
    fontWeight: 700,
    fontSize: 'clamp(40px, 7vw, 88px)',
    letterSpacing: '0.02em',
    textTransform: 'uppercase',
    color: '#fff',
    lineHeight: 1,
  },
  accentRule: {
    height: 1, width: '40%', maxWidth: 420,
    background: 'linear-gradient(90deg, var(--events-accent, #e6351e) 0%, #333 60%, transparent 100%)',
  },
  promptBlock: {
    display: 'flex', flexDirection: 'column', gap: 16,
    width: '100%', maxWidth: 480,
  },
  promptHelper: {
    fontSize: 10, color: '#555',
    letterSpacing: '0.24em', textTransform: 'uppercase',
  },
  promptLine: {
    display: 'flex', alignItems: 'center',
    fontSize: 17, color: '#fff', letterSpacing: '0.10em', gap: 10,
    minHeight: 30,
  },
  promptKey: { color: '#8A9099' },
  promptArrow: { color: 'var(--events-accent, #e6351e)', fontWeight: 500 },
  promptInput: {
    color: '#fff', letterSpacing: '0.18em', fontSize: 18,
    minWidth: 1,
  },
  blockCursor: {
    display: 'inline-block', width: 9, height: 15, background: '#fff',
    animation: 'blink 1.1s step-end infinite', marginLeft: 2,
  },

  // Mobile gate input
  mobileInputWrap: {
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '12px 14px',
    border: '1px solid #1a1a1a',
    background: '#0a0a0a',
    transition: 'border-color 120ms linear',
  },
  mobileInput: {
    flex: 1,
    background: 'transparent',
    border: 'none', outline: 'none',
    color: '#fff',
    fontFamily: "'Share Tech Mono', monospace",
    fontSize: 16, // 16px to prevent iOS zoom
    letterSpacing: '0.18em',
    padding: 0,
    caretColor: 'var(--events-accent, #e6351e)',
  },
  mobileSubmit: {
    background: 'transparent', border: '1px solid var(--events-accent, #e6351e)',
    fontFamily: "'Share Tech Mono', monospace",
    fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--events-accent, #e6351e)', padding: '13px 24px',
    borderRadius: 0, cursor: 'pointer',
    width: '100%',
    transition: 'opacity 120ms linear',
  },
  shake: { animation: 'shake 0.35s linear' },
  deniedLabel: {
    fontSize: 13, color: 'var(--events-accent, #e6351e)',
    letterSpacing: '0.2em', textTransform: 'uppercase',
    animation: 'flicker 0.3s linear',
  },

  // Grant animation (red — matches high-clearance moment)
  flashOverlay: {
    position: 'absolute', inset: 0, background: 'var(--events-flash, #e6351e)',
    pointerEvents: 'none', zIndex: 50,
    animation: 'highFlash 0.4s ease-out forwards',
  },
  grantedBlock: {
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', gap: 14,
    width: '100%',
    animation: 'flickerCyan 0.5s linear', // reuse keyframe (scale+flicker)
    // Glow inherits text color so it follows the events theme variables.
    textShadow: '0 0 10px currentColor',
  },
  grantedLine: {
    fontSize: 17, color: 'var(--events-flash, #e6351e)',
    letterSpacing: '0.32em', textTransform: 'uppercase',
    fontWeight: 600,
  },
  grantedSub: {
    display: 'flex', alignItems: 'center',
    fontSize: 14, color: 'var(--events-flash-soft, #f29585)', letterSpacing: '0.18em',
    textTransform: 'lowercase',
  },
  grantedTicker: {
    fontSize: 11, color: 'var(--events-flash, #e6351e)',
    letterSpacing: '0.22em', textTransform: 'uppercase',
    marginTop: 8, opacity: 0.8,
    animation: 'tickerSlide 0.6s ease-out',
  },
  grantCursor: {
    display: 'inline-block', width: 9, height: 15, background: 'var(--events-flash, #e6351e)',
    boxShadow: '0 0 8px currentColor',
    animation: 'blink 1.1s step-end infinite', marginLeft: 4,
  },

  footerLeft: {
    position: 'absolute', bottom: 40, left: 52,
    fontSize: 10, color: '#444',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    pointerEvents: 'none', zIndex: 1,
  },

  // ── LIST ────────────────────────────────────────────────
  listWrap: {
    minHeight: '100vh', background: '#050402',
    paddingTop: 48,
    fontFamily: "'Share Tech Mono', monospace",
    color: '#fff',
    transition: 'opacity 300ms linear',
  },
  titleBlockHeader: {
    padding: '48px 48px 0',
    position: 'relative', overflow: 'hidden',
  },
  bgWord: {
    position: 'absolute', top: -10, left: 28,
    fontFamily: "'Cindie2', sans-serif",
    fontSize: 180, fontWeight: 700,
    color: 'rgba(255,255,255,0.02)',
    lineHeight: 1, letterSpacing: '-0.02em',
    pointerEvents: 'none', userSelect: 'none', zIndex: 0,
  },
  titleRow: {
    display: 'flex', alignItems: 'flex-end',
    justifyContent: 'space-between',
    position: 'relative', zIndex: 1,
    paddingBottom: 24,
  },
  pageTitle: {
    fontFamily: "'Cindie2', sans-serif",
    fontSize: 64, fontWeight: 600,
    letterSpacing: '0.02em', textTransform: 'uppercase',
    color: '#fff', lineHeight: 1,
  },
  titleRight: { textAlign: 'right', paddingBottom: 6 },
  eventsCount: {
    fontSize: 13, color: 'var(--events-accent, #e6351e)',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    marginBottom: 6,
  },
  subtitle: {
    fontSize: 11, color: '#444',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    fontFamily: "'Share Tech Mono', monospace",
  },
  titleRule: {
    height: 1,
    background: 'linear-gradient(90deg, var(--events-accent, #e6351e) 0%, #333 40%, transparent 100%)',
    position: 'relative', zIndex: 1,
  },

  // Grid: 3 columns on desktop, 2 on tablet, 1 on mobile (handled inline)
  grid: {
    padding: '48px 48px 80px',
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 40,
  },

  emptyState: {
    gridColumn: '1 / -1',
    padding: '60px 0',
    fontSize: 12, color: '#444',
    letterSpacing: '0.24em', textTransform: 'uppercase',
    textAlign: 'center',
  },

  // Card
  card: {
    display: 'flex', flexDirection: 'column',
    cursor: 'none',
    background: 'transparent',
    border: 'none', padding: 0,
    textAlign: 'left',
    outline: 'none',
  },
  cardPhotoWrap: {
    width: '100%',
    aspectRatio: '4 / 5',
    border: '1px solid',
    background: '#0a0a0a',
    overflow: 'hidden',
    position: 'relative',
    transition: 'border-color 180ms linear',
  },
  cardPhoto: {
    width: '100%', height: '100%',
    objectFit: 'cover',
    display: 'block',
    transition: 'transform 360ms cubic-bezier(0.25,0,0.35,1), filter 240ms linear',
  },
  cardPhotoEmpty: {
    width: '100%', height: '100%',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'repeating-linear-gradient(45deg, #0a0a0a 0 8px, #050505 8px 16px)',
  },
  cardPhotoEmptyText: {
    fontSize: 10, color: '#2a2a2a',
    letterSpacing: '0.22em', textTransform: 'uppercase',
  },
  cardArrow: {
    position: 'absolute', top: 12, right: 14,
    fontSize: 13, letterSpacing: '0.1em',
    transition: 'opacity 180ms linear, color 180ms linear',
    pointerEvents: 'none',
  },
  cardBody: {
    paddingTop: 18,
    display: 'flex', flexDirection: 'column', gap: 6,
  },
  cardPromoter: {
    fontSize: 10, color: '#cfcfcf',
    letterSpacing: '0.22em', textTransform: 'uppercase',
    fontFamily: "'Share Tech Mono', monospace",
  },
  cardTitle: {
    fontFamily: "'Cindie2', sans-serif",
    fontSize: 32, fontWeight: 600,
    letterSpacing: '0.02em', textTransform: 'uppercase',
    lineHeight: 1, marginTop: 2,
    transition: 'color 180ms linear',
  },
  cardSubtitle: {
    fontFamily: "'Neogrotesk Pro', 'Helvetica Neue', sans-serif",
    fontSize: 14, color: '#8A9099',
    letterSpacing: '0.02em',
    marginTop: 4,
  },
  cardMetaRow: {
    display: 'flex', alignItems: 'baseline', gap: 14,
    marginTop: 10,
    paddingTop: 10,
    borderTop: '1px solid #0e0e0e',
  },
  cardDate: {
    fontSize: 12, color: '#cfcfcf',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    fontFamily: "'Share Tech Mono', monospace",
    transition: 'color 180ms linear',
  },
  cardTime: {
    fontSize: 11, color: '#555',
    letterSpacing: '0.14em', textTransform: 'uppercase',
    fontFamily: "'Share Tech Mono', monospace",
    marginLeft: 'auto',
  },

  footerBar: {
    padding: '24px 48px 40px',
    display: 'flex', justifyContent: 'space-between',
    fontSize: 11, color: '#222',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    borderTop: '1px solid #0a0a0a',
  },
};

// Inject responsive grid breakpoint for tablets (only once)
if (typeof document !== 'undefined' && !document.getElementById('events-responsive-css')) {
  const style = document.createElement('style');
  style.id = 'events-responsive-css';
  style.textContent = `
    @media (max-width: 980px) and (min-width: 641px) {
      .proyecto-events-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
      }
    }
  `;
  document.head.appendChild(style);
}

Object.assign(window, { EventsGate });