// Event detail — Phase 2 layout: 6-block structure per implementation brief §5.1
// Blocks: Hero, What You'll Do, Who Should Come, Social Proof, FAQ, Secondary CTA + Form

function EventDetailV2({ event, t, onBack, onSubmit, user, onOpenAuth, onViewConfirmation, onGoToSignup }) {
  const existingReg = React.useMemo(() => {
    if (!user?.email) return null;
    const regs = window.Auth.getRegistrationsForUser(user.email);
    return regs.find(r => r.eventId === event.id && r.status === 'confirmed') || null;
  }, [user, event.id]);

  const heroCtaRef = React.useRef(null);
  const [stickyVisible, setStickyVisible] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      if (!heroCtaRef.current) return;
      const rect = heroCtaRef.current.getBoundingClientRect();
      setStickyVisible(rect.bottom < 40);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const handleReserve = (source) => {
    if (window.dataLayer) window.dataLayer.push({ event: 'cta_click', event_id: event.id, cta: source });
    onGoToSignup && onGoToSignup();
  };

  const spotsLeft = event.capacity > 0 ? event.capacity - event.signed : Infinity;
  const isFull = event.capacity > 0 && spotsLeft <= 0;

  const dateObj = new Date(event.date + 'T00:00:00');
  const dayStr = dateObj.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
  const dateStr = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase();
  const tzStr = Intl.DateTimeFormat().resolvedOptions().timeZone.split('/').pop().replace('_', ' ') + ' TIME';

  return (
    <div style={{ background: t.bg, color: t.fg, minHeight: '100vh' }}>
      {/* Back bar */}
      <div style={{ padding: '18px 24px', borderBottom: `1px solid ${t.line}` }}>
        <button onClick={onBack} style={{
          background: 'transparent', border: 'none', color: t.dim,
          fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 11,
          letterSpacing: '0.2em', cursor: 'pointer', padding: 0,
        }}>◀ BACK TO CALENDAR</button>
      </div>

      {/* BLOCK 1 — HERO */}
      <window.EventHero event={event} t={t}
        dayStr={dayStr} dateStr={dateStr} tzStr={tzStr}
        spotsLeft={spotsLeft} isFull={isFull}
        existingReg={existingReg}
        heroCtaRef={heroCtaRef}
        onReserveClick={() => handleReserve('hero')}
        onViewConfirmation={() => onViewConfirmation && onViewConfirmation(existingReg)}
      />

      {/* BLOCK 2 — WHAT YOU'LL DO */}
      <window.EventWhatYoullDo event={event} t={t} />

      {/* BLOCK 3 — WHO SHOULD COME */}
      <window.EventWhoShouldCome event={event} t={t} />

      {/* BLOCK 4 — SOCIAL PROOF */}
      <window.EventSocialProof event={event} t={t} />

      {/* BLOCK 5 — FAQ */}
      <window.EventFAQ event={event} t={t} />

      {/* Bottom CTA strip — funnels to dedicated signup page */}
      {!existingReg && (
        <section style={{
          background: t.cellBg, padding: '48px 24px',
          borderTop: `4px solid ${t.brass}`, textAlign: 'center',
        }}>
          <div style={{ maxWidth: 640, margin: '0 auto' }}>
            <h2 style={{
              fontFamily: 'Bebas Neue, sans-serif', fontWeight: 400,
              fontSize: 'clamp(28px, 4vw, 44px)', lineHeight: 1,
              color: t.fg, margin: '0 0 12px', letterSpacing: '0.02em',
            }}>{isFull ? 'EVENT IS FULL' : 'READY TO LOCK IN?'}</h2>
            <p style={{
              fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 14,
              color: t.dim, margin: '0 0 24px', lineHeight: 1.55,
            }}>{isFull
              ? 'Join the waitlist. We release spots as no-shows cancel.'
              : 'Takes about a minute. No fluff, just the essentials.'}</p>
            <button onClick={() => handleReserve('bottom')} style={{
              padding: '18px 36px', minHeight: 56,
              background: t.brass, color: '#0F1114', border: 'none',
              fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.3em', cursor: 'pointer',
            }}>{isFull ? 'JOIN WAITLIST →' : 'RESERVE MY SPOT →'}</button>
          </div>
        </section>
      )}

      {/* Sticky mobile CTA */}
      {!existingReg && !isFull && (
        <div style={{
          position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 40,
          background: t.bg, borderTop: `1px solid ${t.lineStrong}`,
          padding: '10px 16px', display: 'flex', gap: 12, alignItems: 'center',
          transform: stickyVisible ? 'translateY(0)' : 'translateY(100%)',
          transition: 'transform 0.25s ease-out',
          boxShadow: stickyVisible ? '0 -8px 24px rgba(0,0,0,0.35)' : 'none',
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 13,
              color: t.fg, letterSpacing: '0.08em',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{event.title}</div>
            <div style={{
              fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 10,
              color: t.dim, letterSpacing: '0.1em', marginTop: 2,
            }}>{dateStr} · {event.time}</div>
          </div>
          <button onClick={() => handleReserve('sticky')} style={{
            padding: '12px 20px', minHeight: 44,
            background: t.brass, color: '#0F1114', border: 'none',
            fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 12,
            letterSpacing: '0.25em', cursor: 'pointer', whiteSpace: 'nowrap',
          }}>RESERVE →</button>
        </div>
      )}
    </div>
  );
}

window.EventDetailV2 = EventDetailV2;