// DiscoverScreen — "Tonight near you". Active/Upcoming toggle + photo-forward
// Social feed with 1-tap Going. Tap a card to open detail.
function DiscoverScreen({ onOpen, going, setGoing }) {
  const { SegmentedToggle, SocialCard } = window.PraigoDesignSystem_290071;
  const { useState } = React;
  const { SOCIALS } = window.PRAIGO_DATA;
  const [view, setView] = useState('active');

  const items = SOCIALS.filter(s => (view === 'active' ? s.isActive : !s.isActive));

  return (
    <div style={{ padding: '8px 16px 24px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '4px 0 12px' }}>
        <div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 600 }}>Tonight near you</div>
          <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-.02em' }}>USC Village</div>
        </div>
        <div className="praigo-wordmark" style={{ fontSize: 22 }}>PRA<span className="i">i</span>GO</div>
      </div>

      <SegmentedToggle
        options={[{ value: 'active', label: 'Active now' }, { value: 'upcoming', label: 'Upcoming' }]}
        value={view} onChange={setView} />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 14 }}>
        {items.map(s => (
          <SocialCard key={s.id} {...s}
            going={!!going[s.id]}
            onToggleGoing={(v) => setGoing(g => ({ ...g, [s.id]: v }))}
            onOpen={() => onOpen(s.id)} />
        ))}
        {items.length === 0 && (
          <div style={{ textAlign: 'center', padding: '48px 24px', color: 'var(--text-secondary)' }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>Nothing nearby yet</div>
            <div style={{ marginTop: 6 }}>Be the first — host a Social and bring people together.</div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DiscoverScreen });