// 06 · City Events — events filtered by a specific city, with city hero

function ScreenCityEvents({ onNav }) {
  const C = window.V4;
  const allEvents = window.DESI_EVENTS;
  const cityName = 'Berlin';
  const cityEvents = allEvents.filter(e => e.city === cityName);
  const accent = '#E54558';
  const [tab, setTab] = React.useState('upcoming');

  const venues = [
    { name: 'Mercedes-Benz Arena', cap: '17,000', shows: 4 },
    { name: 'Tempodrom', cap: '3,800', shows: 2 },
    { name: 'Columbiahalle', cap: '3,500', shows: 2 },
    { name: 'Huxleys Neue Welt', cap: '1,800', shows: 3 },
    { name: 'Astra Kulturhaus', cap: '1,500', shows: 1 },
  ];

  return (
    <div data-screen-label="06 City Events" style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={true}/>

      {/* Cinematic city hero */}
      <div style={{
        position: 'relative', height: 540, marginTop: -88, paddingTop: 88,
        background: `linear-gradient(180deg, #3B1F2E 0%, #1a0f18 100%)`,
        overflow: 'hidden', color: '#fff',
      }}>
        {/* Gradient wash */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(ellipse 80% 60% at 20% 60%, ${accent}55, transparent 60%),
                       radial-gradient(ellipse 60% 50% at 80% 30%, #D4AC4A44, transparent 60%)`,
        }}/>
        {/* Silhouette (Berlin-ish: TV tower + Brandenburg gate) */}
        <svg viewBox="0 0 1440 360" preserveAspectRatio="xMidYEnd meet" style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          width: '100%', height: 280, opacity: 0.55, color: '#000',
        }}>
          <line x1="200" y1="360" x2="200" y2="40" stroke="currentColor" strokeWidth="5"/>
          <circle cx="200" cy="60" r="22" fill="currentColor"/>
          <line x1="200" y1="30" x2="200" y2="8" stroke="currentColor" strokeWidth="3"/>
          <rect x="500" y="200" width="240" height="160" fill="currentColor"/>
          <rect x="520" y="225" width="20" height="135" fill="rgba(255,255,255,0.15)"/>
          <rect x="555" y="225" width="20" height="135" fill="rgba(255,255,255,0.15)"/>
          <rect x="590" y="225" width="20" height="135" fill="rgba(255,255,255,0.15)"/>
          <rect x="625" y="225" width="20" height="135" fill="rgba(255,255,255,0.15)"/>
          <rect x="660" y="225" width="20" height="135" fill="rgba(255,255,255,0.15)"/>
          <rect x="695" y="225" width="20" height="135" fill="rgba(255,255,255,0.15)"/>
          <rect x="494" y="188" width="252" height="20" fill="currentColor"/>
          <rect x="900" y="260" width="80" height="100" fill="currentColor"/>
          <rect x="1000" y="230" width="70" height="130" fill="currentColor"/>
          <rect x="1090" y="200" width="100" height="160" fill="currentColor"/>
          <rect x="1210" y="250" width="80" height="110" fill="currentColor"/>
        </svg>
        {/* Content */}
        <div style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '60px 40px 0' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--font-mono)', fontSize: 11.5, fontWeight: 600,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: C.pink, marginBottom: 20,
          }}>
            <V4Icon name="pin" size={14}/> Germany · Hauptstadt
          </div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontSize: 180, fontWeight: 400,
            letterSpacing: '-0.05em', lineHeight: 0.9, margin: '0 0 20px',
            color: '#fff',
          }}>
            Berl<em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.pink }}>in.</em>
          </h1>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.78)', maxWidth: 540, lineHeight: 1.5, margin: 0 }}>
            The cultural heart of German desi nightlife. {cityEvents.length * 3} upcoming shows across {venues.length}+ venues —
            from sold-out arena tours to underground bhangra clubs.
          </p>
          <div style={{ display: 'flex', gap: 30, marginTop: 40, flexWrap: 'wrap' }}>
            {[
              { k: `${cityEvents.length * 3}`, v: 'Upcoming shows' },
              { k: '17', v: 'Active venues' },
              { k: '42k', v: 'Tickets sold / mo' },
              { k: '4.8★', v: 'Avg rating' },
            ].map(s => (
              <div key={s.v}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, color: '#fff' }}>{s.k}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase' }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Tab bar */}
      <div style={{ background: C.paper, borderBottom: `1px solid ${C.line}`, position: 'sticky', top: 88, zIndex: 10 }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px', display: 'flex', gap: 4 }}>
          {[
            { id: 'upcoming', label: 'Upcoming', count: cityEvents.length * 3 },
            { id: 'weekend', label: 'This weekend', count: 4 },
            { id: 'venues', label: 'Venues', count: venues.length },
            { id: 'organisers', label: 'Organisers', count: 6 },
            { id: 'playlists', label: 'Playlists', count: 3 },
          ].map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              height: 56, padding: '0 18px', border: 0, background: 'transparent',
              color: tab === t.id ? C.ink : C.ink3, fontSize: 14, fontWeight: 500,
              cursor: 'pointer', position: 'relative',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              borderBottom: tab === t.id ? `2px solid ${C.red}` : '2px solid transparent',
            }}>
              {t.label}
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.6 }}>{t.count}</span>
            </button>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '50px 40px 80px' }}>
        {tab === 'upcoming' && (
          <>
            {/* Featured show */}
            {cityEvents[0] && (
              <div style={{
                display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, marginBottom: 60,
                padding: 32, background: C.paper, borderRadius: 20, border: `1px solid ${C.line}`,
              }}>
                <div style={{ aspectRatio: '4/3', borderRadius: 14, overflow: 'hidden' }}>
                  <window.DesiPoster event={cityEvents[0]}/>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', color: C.red, fontWeight: 600, textTransform: 'uppercase', marginBottom: 12 }}>
                    ⭐ Featured · Berlin
                  </div>
                  <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 10px' }}>
                    {cityEvents[0].artist}
                  </h2>
                  <p style={{ fontSize: 15, color: C.ink2, margin: '0 0 24px', lineHeight: 1.5 }}>{cityEvents[0].description}</p>
                  <div style={{ display: 'flex', gap: 22, fontSize: 13, color: C.ink2, marginBottom: 24 }}>
                    <span><V4Icon name="calendar" size={14}/> {cityEvents[0].date}</span>
                    <span><V4Icon name="pin" size={14}/> {cityEvents[0].venue}</span>
                  </div>
                  <div style={{ display: 'flex', gap: 10 }}>
                    <button onClick={() => onNav('event', cityEvents[0].id)} style={{
                      height: 52, padding: '0 24px', borderRadius: 99, background: C.ink, color: '#fff', border: 0,
                      fontSize: 14, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
                    }}>Book from {v4Eur(cityEvents[0].priceFrom)} <V4Icon name="arrow" size={14}/></button>
                    <button style={{
                      height: 52, padding: '0 24px', borderRadius: 99, background: 'transparent', color: C.ink,
                      border: `1px solid ${C.line}`, fontSize: 14, fontWeight: 600, cursor: 'pointer',
                    }}>Add to calendar</button>
                  </div>
                </div>
              </div>
            )}

            {/* All upcoming in city */}
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500, margin: '0 0 24px' }}>All upcoming in Berlin</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
              {cityEvents.map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
              {allEvents.slice(0, 3).map(e => <V4EventCard key={'x'+e.id} event={e} onNav={onNav}/>)}
            </div>
          </>
        )}

        {tab === 'venues' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {venues.map(v => (
              <div key={v.name} style={{
                padding: 24, background: C.paper, borderRadius: 14, border: `1px solid ${C.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer',
              }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500 }}>{v.name}</div>
                  <div style={{ fontSize: 12, color: C.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginTop: 6 }}>
                    Capacity {v.cap} · {v.shows} upcoming
                  </div>
                </div>
                <V4Icon name="arrow" size={16}/>
              </div>
            ))}
          </div>
        )}

        {tab !== 'upcoming' && tab !== 'venues' && (
          <div style={{ padding: '80px', textAlign: 'center', color: C.ink3 }}>
            {tab} tab — similar grid pattern, filtered accordingly.
          </div>
        )}
      </div>

      <V4Footer/>
    </div>
  );
}