// 05 · Cities Index — full grid of every city Desipass serves

function ScreenCities({ onNav }) {
  const C = window.V4;
  const cities = [
    { name: 'Berlin',     count: 18, accent: '#E54558', region: 'East',     pop: '3.7M' },
    { name: 'Frankfurt',  count: 12, accent: '#D4AC4A', region: 'Hesse',    pop: '760k' },
    { name: 'Munich',     count: 9,  accent: '#B83C8C', region: 'Bavaria',  pop: '1.5M' },
    { name: 'Hamburg',    count: 8,  accent: '#1a9d3d', region: 'North',    pop: '1.9M' },
    { name: 'Cologne',    count: 7,  accent: '#E89B3C', region: 'NRW',      pop: '1.1M' },
    { name: 'Stuttgart',  count: 6,  accent: '#3B2E4D', region: 'BW',       pop: '630k' },
    { name: 'Düsseldorf', count: 5,  accent: '#C8344B', region: 'NRW',      pop: '620k' },
    { name: 'Nürnberg',   count: 4,  accent: '#1a9d3d', region: 'Bavaria',  pop: '518k' },
    { name: 'Bremen',     count: 3,  accent: '#3B2E4D', region: 'North',    pop: '570k' },
    { name: 'Leipzig',    count: 3,  accent: '#E89B3C', region: 'East',     pop: '600k' },
    { name: 'Dresden',    count: 2,  accent: '#D4AC4A', region: 'East',     pop: '560k' },
    { name: 'Hannover',   count: 2,  accent: '#B83C8C', region: 'North',    pop: '540k' },
  ];

  const regions = ['All', 'East', 'NRW', 'North', 'Bavaria', 'BW', 'Hesse'];
  const [region, setRegion] = React.useState('All');
  const filtered = region === 'All' ? cities : cities.filter(c => c.region === region);

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

      {/* Hero */}
      <div style={{
        background: `linear-gradient(180deg, ${C.bgAlt} 0%, ${C.bg} 100%)`,
        padding: '70px 0 40px',
      }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px', textAlign: 'center' }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11.5,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: C.red, marginBottom: 16, fontWeight: 600,
          }}>12 cities · One ticket platform</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontSize: 84, fontWeight: 400,
            letterSpacing: '-0.035em', lineHeight: 1, margin: '0 0 22px',
          }}>
            Find shows in your <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.red }}>city.</em>
          </h1>
          <p style={{ fontSize: 17, color: C.ink2, maxWidth: 560, margin: '0 auto', lineHeight: 1.5 }}>
            Every desi-friendly venue across Germany — from Berlin's stadiums to Hannover's intimate clubs. Pick yours.
          </p>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
            {regions.map(r => (
              <button key={r} onClick={() => setRegion(r)} style={{
                height: 38, padding: '0 18px', borderRadius: 99,
                background: region === r ? C.ink : '#fff', color: region === r ? '#fff' : C.ink,
                border: region === r ? 0 : `1px solid ${C.line}`,
                fontSize: 13, fontWeight: 500, cursor: 'pointer',
              }}>{r}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Grid */}
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '40px 40px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {filtered.map(c => (
            <CityCard key={c.name} city={c} onClick={() => onNav('city-events')}/>
          ))}
        </div>

        {/* Coming soon */}
        <div style={{
          marginTop: 60, padding: '40px',
          background: C.paper, borderRadius: 20, border: `1px dashed ${C.lineStrong}`,
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 30, alignItems: 'center',
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.saffron, marginBottom: 10, fontWeight: 600 }}>
              ★ Coming soon
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500, margin: '0 0 8px', letterSpacing: '-0.02em' }}>
              Vienna, Zürich, Amsterdam.
            </h3>
            <p style={{ fontSize: 14, color: C.ink2, maxWidth: 520, margin: 0 }}>
              We're expanding across Europe. Subscribe and we'll let you know the moment your city goes live.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <input placeholder="you@example.com" style={{
              width: 260, height: 48, padding: '0 16px', borderRadius: 99,
              border: `1px solid ${C.line}`, fontSize: 14, background: '#fff',
            }}/>
            <button style={{
              height: 48, padding: '0 24px', borderRadius: 99,
              background: C.red, color: '#fff', border: 0,
              fontSize: 14, fontWeight: 600, cursor: 'pointer',
            }}>Notify me</button>
          </div>
        </div>
      </div>

      <V4Footer/>
    </div>
  );
}

function CityCard({ city, onClick }) {
  const C = window.V4;
  return (
    <div onClick={onClick} style={{
      position: 'relative', borderRadius: 16, overflow: 'hidden',
      aspectRatio: '4/5', cursor: 'pointer',
      background: `linear-gradient(180deg, #f5e8c8 0%, #e8a57a 40%, ${city.accent} 100%)`,
      border: `1px solid ${city.accent}`,
      transition: 'transform 200ms ease, box-shadow 200ms ease',
    }}>
      {/* Sun */}
      <div style={{
        position: 'absolute', top: '24%', right: '20%',
        width: 60, height: 60, borderRadius: '50%',
        background: '#fff', boxShadow: '0 0 50px rgba(255,255,255,0.7)', opacity: 0.95,
      }}/>
      {/* Generic skyline */}
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{
        position: 'absolute', bottom: 80, left: 0, width: '100%', height: '45%',
        color: 'rgba(0,0,0,0.65)',
      }}>
        <rect x="40" y="100" width="50" height="80" fill="currentColor"/>
        <rect x="100" y="60" width="40" height="120" fill="currentColor"/>
        <rect x="150" y="80" width="36" height="100" fill="currentColor"/>
        <rect x="195" y="40" width="50" height="140" fill="currentColor"/>
        <polygon points="220,40 245,40 232,18" fill="currentColor"/>
        <rect x="255" y="70" width="40" height="110" fill="currentColor"/>
        <rect x="305" y="90" width="38" height="90" fill="currentColor"/>
        <rect x="350" y="50" width="40" height="130" fill="currentColor"/>
      </svg>
      {/* Footer */}
      <div style={{
        position: 'absolute', left: 16, right: 16, bottom: 16, color: '#fff',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em' }}>{city.name}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.85 }}>{city.region}</span>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 11.5, opacity: 0.95,
          paddingTop: 8, borderTop: '1px solid rgba(255,255,255,0.3)',
        }}>
          <span>{city.count} upcoming</span>
          <span>pop {city.pop}</span>
        </div>
      </div>
    </div>
  );
}