// Desipass V4 — content rails for landing page
// Trending Top 10, Originals band, All Events grid, Cities, App block, Footer

const C4r = window.V4;

// ───────────────────────────────────────────────
// Section header (editorial)
// ───────────────────────────────────────────────
function V4SectionHead({ eyebrow, title, subtitle, cta, onCta, dark, align='left' }) {
  const color = dark ? '#fff' : C4r.ink;
  const sub = dark ? 'rgba(255,255,255,0.6)' : C4r.ink2;
  const rule = dark ? 'rgba(255,255,255,0.15)' : C4r.line;
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
      gap: 40, marginBottom: 28, paddingBottom: 18,
      borderBottom: `1px solid ${rule}`,
    }}>
      <div style={{ textAlign: align }}>
        {eyebrow && (
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11.5,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: dark ? C4r.pink : C4r.red,
            marginBottom: 12, fontWeight: 600,
          }}>{eyebrow}</div>
        )}
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 400,
          letterSpacing: '-0.028em', lineHeight: 1.02, margin: 0, color,
          textWrap: 'balance', maxWidth: 800,
        }}>{title}</h2>
        {subtitle && (
          <p style={{
            fontSize: 15.5, color: sub, maxWidth: 620, margin: '14px 0 0',
            lineHeight: 1.5,
          }}>{subtitle}</p>
        )}
      </div>
      {cta && (
        <button onClick={onCta} style={{
          height: 44, padding: '0 20px', borderRadius: 99,
          background: 'transparent', color,
          border: `1px solid ${rule}`, cursor: 'pointer',
          fontSize: 13, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          whiteSpace: 'nowrap', flexShrink: 0,
        }}>{cta} <V4Icon name="arrow" size={14}/></button>
      )}
    </div>
  );
}

// ───────────────────────────────────────────────
// Trending Top 10 rail — editorial numerals behind posters
// ───────────────────────────────────────────────
function V4TrendingRail({ onNav }) {
  const events = window.DESI_EVENTS.slice(0, 10);
  const scrollRef = React.useRef(null);

  const scroll = (dir) => {
    if (!scrollRef.current) return;
    scrollRef.current.scrollBy({ left: dir * 680, behavior: 'smooth' });
  };

  return (
    <section style={{ background: C4r.bg, padding: '100px 0 90px' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11.5,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: C4r.red, marginBottom: 12, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 24, height: 1, background: C4r.red, display: 'inline-block' }}/>
              Trending this week
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 400,
              letterSpacing: '-0.032em', lineHeight: 1.05, margin: 0, color: C4r.ink,
            }}>
              The <em style={{
                fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
                color: C4r.red, fontWeight: 400,
              }}>ten</em> shows
              everyone's booking
            </h2>
            <p style={{
              fontSize: 15, color: C4r.ink2, marginTop: 14, maxWidth: 560,
              lineHeight: 1.55,
            }}>
              Updated every Monday morning. Ranked by bookings, searches & shares across
              our seven featured cities.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => scroll(-1)} style={navBtn(false)}><V4Icon name="cheL" size={16}/></button>
            <button onClick={() => scroll(1)} style={navBtn(false)}><V4Icon name="cheR" size={16}/></button>
          </div>
        </div>

        <div ref={scrollRef} style={{
          display: 'flex', gap: 28, overflowX: 'auto',
          scrollSnapType: 'x mandatory', scrollbarWidth: 'none',
          paddingBottom: 12, margin: '0 -40px', padding: '0 40px 12px',
        }}>
          {events.map((e, i) => (
            <V4TrendingCard key={e.id} event={e} rank={i + 1} onNav={onNav}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function V4TrendingCard({ event, rank, onNav }) {
  return (
    <div onClick={() => onNav('event', event.id)}
      style={{
        flexShrink: 0, width: 320,
        scrollSnapAlign: 'start',
        cursor: 'pointer',
      }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 320, marginBottom: 16 }}>
        {/* Giant outlined numeral */}
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: rank === 10 ? 240 : 280,
          fontWeight: 500, lineHeight: 0.8, letterSpacing: '-0.06em',
          color: 'transparent',
          WebkitTextStroke: `2px ${C4r.ink}`,
          marginBottom: -20,
          fontFeatureSettings: '"lnum"',
          fontVariantNumeric: 'lining-nums',
          flexShrink: 0,
          marginLeft: rank === 10 ? -20 : 0,
          marginRight: -8,
          alignSelf: 'flex-end',
          whiteSpace: 'nowrap',
        }}>{rank < 10 ? '0' + rank : rank}</div>
        {/* Poster */}
        <div style={{
          width: 200, aspectRatio: '3/4', flexShrink: 0,
          borderRadius: 6, overflow: 'hidden',
          transition: 'transform 400ms ease',
          boxShadow: '0 12px 30px -8px rgba(0,0,0,0.25)',
        }}>
          <window.DesiPoster event={event}/>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10.5,
          letterSpacing: '0.12em', color: C4r.red, fontWeight: 600,
          textTransform: 'uppercase',
        }}>{event.category}</span>
        {event.status === 'selling-fast' && (
          <>
            <span style={{ color: C4r.ink4 }}>·</span>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10.5,
              letterSpacing: '0.1em', color: C4r.saffron, fontWeight: 600,
              textTransform: 'uppercase',
            }}>Selling fast</span>
          </>
        )}
      </div>

      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
        letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 4px',
        color: C4r.ink,
      }}>{event.artist}</h3>
      <div style={{
        fontSize: 13, color: C4r.ink2, marginBottom: 10,
      }}>{event.title}</div>

      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingTop: 12, borderTop: `1px solid ${C4r.line}`,
      }}>
        <div style={{
          fontSize: 12, color: C4r.ink2,
          fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
        }}>
          {event.dateShort} · {event.city}
        </div>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 16,
          color: C4r.ink,
        }}>
          from {v4Eur(event.priceFrom)}
        </div>
      </div>
    </div>
  );
}

function navBtn(dark) {
  return {
    width: 44, height: 44, borderRadius: 99,
    background: dark ? 'rgba(255,255,255,0.08)' : '#fff',
    border: dark ? '1px solid rgba(255,255,255,0.15)' : `1px solid ${C4r.line}`,
    color: dark ? '#fff' : C4r.ink,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer',
  };
}

// ───────────────────────────────────────────────
// Desipass Originals — dark band with sub-brands
// ───────────────────────────────────────────────
function V4Originals({ onNav }) {
  const originals = [
    {
      id: 'candlelight',
      name: 'Candlelight Bollywood',
      tagline: 'A tribute to A.R. Rahman by candlelight.',
      color: '#D4AC4A', bg: '#2a1f1a',
      nextDate: '27 APR · Berlin',
      shows: 14, cities: 7,
      glyph: 'candle',
    },
    {
      id: 'sufi',
      name: 'Sufi Nights',
      tagline: 'Qawwali & ghazal in intimate 200-cap venues.',
      color: '#C8344B', bg: '#2d1218',
      nextDate: '03 MAY · Frankfurt',
      shows: 8, cities: 5,
      glyph: 'moon',
    },
    {
      id: 'popup',
      name: 'Punjabi Pop-up',
      tagline: 'Surprise shows — lineup announced 48 hours before.',
      color: '#E89B3C', bg: '#2a1e10',
      nextDate: '10 MAY · Munich',
      shows: 12, cities: 4,
      glyph: 'lightning',
    },
    {
      id: 'afterdark',
      name: 'Desi After-Dark',
      tagline: 'Late-night club series. Bollywood until sunrise.',
      color: '#B83C8C', bg: '#1f1424',
      nextDate: 'Every Saturday',
      shows: 48, cities: 7,
      glyph: 'disco',
    },
  ];

  const glyphs = {
    candle: (
      <svg viewBox="0 0 60 80" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M30 5 C 28 12, 34 14, 32 20 C 30 24, 34 26, 30 30" strokeLinecap="round"/>
        <rect x="22" y="30" width="16" height="40" rx="2"/>
        <line x1="18" y1="72" x2="42" y2="72"/>
      </svg>
    ),
    moon: (
      <svg viewBox="0 0 60 80" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M42 20 A 22 22 0 1 0 42 60 A 16 16 0 1 1 42 20 Z"/>
        <circle cx="14" cy="18" r="1" fill="currentColor"/>
        <circle cx="50" cy="15" r="1" fill="currentColor"/>
        <circle cx="10" cy="45" r="1" fill="currentColor"/>
      </svg>
    ),
    lightning: (
      <svg viewBox="0 0 60 80" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M32 10 L 18 42 L 28 42 L 24 70 L 42 36 L 32 36 Z" strokeLinejoin="round"/>
      </svg>
    ),
    disco: (
      <svg viewBox="0 0 60 80" fill="none" stroke="currentColor" strokeWidth="1.5">
        <circle cx="30" cy="35" r="18"/>
        <path d="M12 35 L 48 35 M 30 17 L 30 53 M 17 22 L 43 48 M 43 22 L 17 48"/>
        <line x1="30" y1="53" x2="30" y2="70"/>
      </svg>
    ),
  };

  return (
    <section style={{
      background: C4r.plumDeep, color: '#fff',
      padding: '110px 0 100px', position: 'relative', overflow: 'hidden',
    }}>
      {/* Decorative halo */}
      <div style={{
        position: 'absolute', top: '-30%', right: '-10%',
        width: 600, height: 600, borderRadius: '50%',
        background: `radial-gradient(circle, ${C4r.red}22 0%, transparent 70%)`,
        pointerEvents: 'none',
      }}/>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60,
          marginBottom: 56,
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'var(--font-mono)', fontSize: 11.5,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: C4r.pink, marginBottom: 16, fontWeight: 600,
            }}>
              <V4Icon name="sparkle" size={14}/> Desipass Originals
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 72, fontWeight: 400,
              letterSpacing: '-0.032em', lineHeight: 0.95, margin: 0,
              color: '#fff',
            }}>
              Shows only we <em style={{
                fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
                color: C4r.pink, fontWeight: 400,
              }}>curate.</em>
            </h2>
          </div>
          <div style={{ alignSelf: 'flex-end', paddingBottom: 8 }}>
            <p style={{
              fontSize: 17, color: 'rgba(255,255,255,0.7)',
              lineHeight: 1.55, margin: 0, maxWidth: 520,
            }}>
              Four signature series, produced in-house. Small venues, careful lineups,
              no seat you'd regret. Subscribers get first access 72 hours before anyone else.
            </p>
            <button style={{
              marginTop: 22, height: 48, padding: '0 24px', borderRadius: 99,
              background: C4r.pink, color: C4r.plumDeep, border: 0,
              fontSize: 14, fontWeight: 600, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              Join Originals — it's free <V4Icon name="arrow" size={15}/>
            </button>
          </div>
        </div>

        {/* 4 Cards */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
        }}>
          {originals.map(o => (
            <div key={o.id} style={{
              background: o.bg,
              border: `1px solid ${o.color}33`,
              borderRadius: 14, padding: 28, position: 'relative',
              aspectRatio: '3/4', overflow: 'hidden',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              cursor: 'pointer',
            }}>
              {/* Glyph up top */}
              <div style={{
                width: 80, height: 80, color: o.color, opacity: 0.9,
              }}>
                {glyphs[o.glyph]}
              </div>

              {/* Metadata */}
              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10.5,
                  letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: o.color, marginBottom: 14, opacity: 0.9,
                }}>Original series</div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500,
                  letterSpacing: '-0.02em', lineHeight: 1.05,
                  color: '#fff', margin: '0 0 10px',
                }}>{o.name}</h3>
                <p style={{
                  fontSize: 13, color: 'rgba(255,255,255,0.7)',
                  lineHeight: 1.5, margin: '0 0 20px',
                  fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
                }}>{o.tagline}</p>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  paddingTop: 14, borderTop: `1px solid rgba(255,255,255,0.1)`,
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.04em', color: 'rgba(255,255,255,0.55)',
                }}>
                  <span>{o.shows} shows · {o.cities} cities</span>
                  <span style={{ color: o.color }}>{o.nextDate}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────
// All events grid — kept like live site but cleaner
// ───────────────────────────────────────────────
function V4AllEvents({ onNav }) {
  const [cat, setCat] = React.useState('all');
  const categories = [
    { id: 'all', label: 'All events', count: 84 },
    { id: 'Concert', label: 'Concerts', count: 34 },
    { id: 'Festival', label: 'Festivals', count: 12 },
    { id: 'Club', label: 'Club nights', count: 18 },
    { id: 'Comedy', label: 'Comedy', count: 9 },
    { id: 'Theatre', label: 'Theatre', count: 11 },
  ];
  const allEvents = window.DESI_EVENTS;
  const filtered = cat === 'all' ? allEvents : allEvents.filter(e => e.category === cat);

  return (
    <section style={{ background: C4r.bg, padding: '100px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36 }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11.5,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: C4r.red, marginBottom: 12, fontWeight: 600,
            }}>All upcoming · 84 shows</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 400,
              letterSpacing: '-0.028em', lineHeight: 1, margin: 0,
            }}>Browse everything.</h2>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <button style={{
              height: 40, padding: '0 14px', borderRadius: 10,
              background: '#fff', border: `1px solid ${C4r.line}`,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 13, color: C4r.ink2, cursor: 'pointer', fontWeight: 500,
            }}><V4Icon name="filter" size={14}/> All filters</button>
            <button style={{
              height: 40, padding: '0 14px', borderRadius: 10,
              background: '#fff', border: `1px solid ${C4r.line}`,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 13, color: C4r.ink2, cursor: 'pointer', fontWeight: 500,
            }}>Sort: Trending <V4Icon name="cheD" size={13}/></button>
          </div>
        </div>

        {/* Category tabs */}
        <div style={{
          display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap',
          paddingBottom: 20, borderBottom: `1px solid ${C4r.line}`,
        }}>
          {categories.map(c => (
            <button key={c.id} onClick={() => setCat(c.id)} style={{
              height: 38, padding: '0 16px', borderRadius: 99,
              background: cat === c.id ? C4r.ink : 'transparent',
              color: cat === c.id ? '#fff' : C4r.ink,
              border: cat === c.id ? 0 : `1px solid ${C4r.line}`,
              fontSize: 13, fontWeight: 500, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              {c.label}
              <span style={{
                fontSize: 10.5, padding: '2px 7px', borderRadius: 99,
                background: cat === c.id ? 'rgba(255,255,255,0.15)' : C4r.bgAlt,
                color: cat === c.id ? '#fff' : C4r.ink3,
                fontFamily: 'var(--font-mono)',
              }}>{c.count}</span>
            </button>
          ))}
        </div>

        {/* Grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28,
        }}>
          {filtered.slice(0, 8).map(e => (
            <V4EventCard key={e.id} event={e} onNav={onNav}/>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
          <button style={{
            height: 52, padding: '0 28px', borderRadius: 99,
            background: '#fff', color: C4r.ink,
            border: `1px solid ${C4r.line}`,
            fontSize: 14, fontWeight: 600, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            Browse all {allEvents.length * 3}+ events <V4Icon name="arrow" size={15}/>
          </button>
        </div>
      </div>
    </section>
  );
}

function V4EventCard({ event, onNav }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onClick={() => onNav('event', event.id)}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        cursor: 'pointer', transition: 'transform 200ms',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
      }}>
      <div style={{
        position: 'relative', aspectRatio: '3/4',
        borderRadius: 10, overflow: 'hidden', marginBottom: 14,
        boxShadow: hover
          ? '0 20px 40px -10px rgba(0,0,0,0.25)'
          : '0 8px 20px -6px rgba(0,0,0,0.12)',
        transition: 'box-shadow 200ms',
      }}>
        <window.DesiPoster event={event}/>
        {/* Heart button */}
        <button style={{
          position: 'absolute', top: 12, right: 12,
          width: 34, height: 34, borderRadius: 99,
          background: 'rgba(255,255,255,0.95)', border: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', backdropFilter: 'blur(6px)',
        }} onClick={(e) => e.stopPropagation()}>
          <V4Icon name="heart" size={15}/>
        </button>
        {event.status === 'selling-fast' && (
          <div style={{
            position: 'absolute', top: 12, left: 12,
            padding: '5px 10px', borderRadius: 6,
            background: '#fff', color: C4r.red,
            fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
            textTransform: 'uppercase',
          }}>Selling fast</div>
        )}
      </div>

      {/* Meta row */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 11.5, fontFamily: 'var(--font-mono)',
        letterSpacing: '0.06em', color: C4r.ink3, marginBottom: 8,
        textTransform: 'uppercase', fontWeight: 500,
      }}>
        <span style={{ color: C4r.red, fontWeight: 600 }}>{event.category}</span>
        <span>·</span>
        <span>{event.dateShort}</span>
      </div>

      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500,
        letterSpacing: '-0.02em', lineHeight: 1.15, margin: '0 0 4px',
      }}>{event.artist}</h3>
      <div style={{
        fontSize: 13, color: C4r.ink2, marginBottom: 12,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{event.venue} · {event.city}</div>

      <div style={{
        fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 15,
      }}>
        from <span style={{ color: C4r.red }}>{v4Eur(event.priceFrom)}</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────
// Cities — editorial photo cards
// ───────────────────────────────────────────────
function V4Cities() {
  const cities = [
    { name: 'Berlin',     count: 18, accent: '#E54558', silhouette: 'berlin' },
    { name: 'Frankfurt',  count: 12, accent: '#D4AC4A', silhouette: 'frankfurt' },
    { name: 'Munich',     count: 9,  accent: '#B83C8C', silhouette: 'munich' },
    { name: 'Hamburg',    count: 8,  accent: '#1a9d3d', silhouette: 'hamburg' },
    { name: 'Cologne',    count: 7,  accent: '#E89B3C', silhouette: 'cologne' },
    { name: 'Stuttgart',  count: 6,  accent: '#3B2E4D', silhouette: 'stuttgart' },
    { name: 'Düsseldorf', count: 5,  accent: '#C8344B', silhouette: 'dusseldorf' },
  ];

  // Drawn silhouettes per city
  const silhouettes = {
    berlin: ( // Brandenburg gate + TV tower
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{ width: '100%', height: '100%' }}>
        {/* TV tower */}
        <line x1="80" y1="180" x2="80" y2="30" stroke="currentColor" strokeWidth="3"/>
        <circle cx="80" cy="40" r="14" fill="currentColor"/>
        <line x1="80" y1="20" x2="80" y2="10" stroke="currentColor" strokeWidth="2"/>
        {/* Brandenburg gate */}
        <rect x="200" y="100" width="140" height="80" fill="currentColor"/>
        <rect x="210" y="115" width="16" height="65" fill="rgba(255,255,255,0.3)"/>
        <rect x="234" y="115" width="16" height="65" fill="rgba(255,255,255,0.3)"/>
        <rect x="258" y="115" width="16" height="65" fill="rgba(255,255,255,0.3)"/>
        <rect x="282" y="115" width="16" height="65" fill="rgba(255,255,255,0.3)"/>
        <rect x="306" y="115" width="16" height="65" fill="rgba(255,255,255,0.3)"/>
        <rect x="196" y="92" width="148" height="14" fill="currentColor"/>
        {/* Quadriga */}
        <rect x="260" y="80" width="20" height="12" fill="currentColor"/>
        <circle cx="270" cy="76" r="4" fill="currentColor"/>
      </svg>
    ),
    frankfurt: ( // Skyscrapers
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{ width: '100%', height: '100%' }}>
        <rect x="40" y="100" width="40" height="80" fill="currentColor"/>
        <rect x="90" y="60" width="36" height="120" fill="currentColor"/>
        <rect x="136" y="80" width="30" height="100" fill="currentColor"/>
        <rect x="172" y="40" width="44" height="140" fill="currentColor"/>
        <polygon points="194,40 216,40 205,20" fill="currentColor"/>
        <rect x="222" y="70" width="36" height="110" fill="currentColor"/>
        <rect x="264" y="90" width="34" height="90" fill="currentColor"/>
        <rect x="304" y="50" width="40" height="130" fill="currentColor"/>
        <rect x="350" y="110" width="30" height="70" fill="currentColor"/>
      </svg>
    ),
    munich: ( // Frauenkirche twin towers
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{ width: '100%', height: '100%' }}>
        <rect x="100" y="80" width="200" height="100" fill="currentColor"/>
        <rect x="120" y="40" width="36" height="140" fill="currentColor"/>
        <path d="M 120 40 Q 138 10 156 40 Z" fill="currentColor"/>
        <ellipse cx="138" cy="25" rx="22" ry="12" fill="currentColor"/>
        <rect x="244" y="40" width="36" height="140" fill="currentColor"/>
        <path d="M 244 40 Q 262 10 280 40 Z" fill="currentColor"/>
        <ellipse cx="262" cy="25" rx="22" ry="12" fill="currentColor"/>
        <rect x="170" y="110" width="60" height="70" fill="rgba(255,255,255,0.2)"/>
      </svg>
    ),
    hamburg: ( // Port cranes + Elphi
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{ width: '100%', height: '100%' }}>
        {/* Cranes */}
        <line x1="40" y1="180" x2="40" y2="60" stroke="currentColor" strokeWidth="4"/>
        <line x1="40" y1="60" x2="100" y2="80" stroke="currentColor" strokeWidth="4"/>
        <line x1="120" y1="180" x2="120" y2="40" stroke="currentColor" strokeWidth="4"/>
        <line x1="120" y1="40" x2="200" y2="70" stroke="currentColor" strokeWidth="4"/>
        {/* Elphi */}
        <rect x="220" y="100" width="160" height="80" fill="currentColor"/>
        <path d="M 220 100 Q 230 40 250 60 Q 270 30 290 55 Q 310 25 330 60 Q 350 40 380 100 Z" fill="currentColor"/>
      </svg>
    ),
    cologne: ( // Cologne cathedral
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{ width: '100%', height: '100%' }}>
        <rect x="150" y="100" width="100" height="80" fill="currentColor"/>
        <rect x="130" y="40" width="30" height="140" fill="currentColor"/>
        <polygon points="130,40 160,40 145,10" fill="currentColor"/>
        <rect x="240" y="40" width="30" height="140" fill="currentColor"/>
        <polygon points="240,40 270,40 255,10" fill="currentColor"/>
        <rect x="155" y="100" width="90" height="30" fill="currentColor"/>
      </svg>
    ),
    stuttgart: ( // Fernsehturm + hills
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{ width: '100%', height: '100%' }}>
        <path d="M 0 180 Q 100 120 200 140 Q 300 160 400 130 L 400 180 Z" fill="currentColor"/>
        <line x1="200" y1="140" x2="200" y2="40" stroke="currentColor" strokeWidth="3"/>
        <ellipse cx="200" cy="50" rx="16" ry="8" fill="currentColor"/>
        <line x1="200" y1="40" x2="200" y2="20" stroke="currentColor" strokeWidth="2"/>
      </svg>
    ),
    dusseldorf: ( // Rheinturm + buildings
      <svg viewBox="0 0 400 180" preserveAspectRatio="xMidYEnd meet" style={{ width: '100%', height: '100%' }}>
        <rect x="40" y="130" width="100" height="50" fill="currentColor"/>
        <rect x="150" y="100" width="80" height="80" fill="currentColor"/>
        <line x1="280" y1="180" x2="280" y2="30" stroke="currentColor" strokeWidth="3"/>
        <circle cx="280" cy="50" r="10" fill="currentColor"/>
        <rect x="320" y="110" width="60" height="70" fill="currentColor"/>
      </svg>
    ),
  };

  return (
    <section style={{ background: C4r.bgAlt, padding: '100px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }}>
        <V4SectionHead
          eyebrow="Seven cities · Every weekend"
          title={<>Discover by <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C4r.red, fontWeight: 400 }}>city.</em></>}
          subtitle="Every desi-friendly city in Germany — from Berlin's arenas to Düsseldorf's intimate venues."
          cta="See all cities" onCta={() => {}}
        />

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 14,
        }}>
          {cities.map(c => (
            <div key={c.name} style={{
              position: 'relative',
              aspectRatio: '3/4', borderRadius: 14, overflow: 'hidden',
              background: `linear-gradient(180deg, ${c.accent}30 0%, ${c.accent}ee 100%)`,
              cursor: 'pointer', color: '#fff',
              border: `1px solid ${c.accent}`,
            }}>
              {/* Sky wash */}
              <div style={{
                position: 'absolute', inset: 0,
                background: `linear-gradient(180deg, #f5e8c8 0%, #e8a57a 40%, ${c.accent} 85%)`,
              }}/>
              {/* Sun */}
              <div style={{
                position: 'absolute', top: '30%', right: '18%',
                width: 50, height: 50, borderRadius: '50%',
                background: '#fff',
                boxShadow: '0 0 40px rgba(255,255,255,0.6)',
                opacity: 0.9,
              }}/>
              {/* Silhouette */}
              <div style={{
                position: 'absolute', bottom: 60, left: 0, right: 0,
                height: '50%', color: 'rgba(0,0,0,0.8)',
                display: 'flex', alignItems: 'flex-end',
              }}>{silhouettes[c.silhouette]}</div>

              {/* Label */}
              <div style={{
                position: 'absolute', left: 16, right: 16, bottom: 16,
                color: '#fff',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em',
                }}>{c.name}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.06em', opacity: 0.95, marginTop: 2,
                }}>{c.count} upcoming</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────
// Exclusive discounts + App band
// ───────────────────────────────────────────────
function V4AppBand() {
  return (
    <section style={{
      background: `linear-gradient(105deg, ${C4r.red} 0%, #F4B5A0 60%, #D4AC4A 100%)`,
      padding: '80px 0', position: 'relative', overflow: 'hidden',
    }}>
      {/* Glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.35), transparent 60%)',
      }}/>

      <div style={{
        position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 60, alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 99,
            background: 'rgba(255,255,255,0.2)', backdropFilter: 'blur(10px)',
            fontSize: 11, letterSpacing: '0.14em', fontWeight: 600,
            color: '#fff', textTransform: 'uppercase', marginBottom: 20,
          }}><V4Icon name="gift" size={12}/> Ticket Perks · Free for members</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 400,
            letterSpacing: '-0.032em', lineHeight: 0.98, margin: 0, color: '#fff',
          }}>
            Every ticket comes with <em style={{
              fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
              fontWeight: 400, color: '#fff8ea',
            }}>extras.</em>
          </h2>
          <p style={{
            fontSize: 16, color: 'rgba(255,255,255,0.88)',
            lineHeight: 1.55, margin: '18px 0 32px', maxWidth: 520,
          }}>
            Restaurant discounts, hotel deals, Uber credit for pre-show rides.
            Scan your ticket QR to unlock — valid 72 hours around the event.
          </p>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button style={{
              height: 56, padding: '0 24px', borderRadius: 99,
              background: C4r.plumDeep, color: '#fff', border: 0,
              fontSize: 15, fontWeight: 600, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <V4Icon name="sparkle" size={16}/>
              Get the app · See perks
            </button>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6,
              fontSize: 13, color: 'rgba(255,255,255,0.85)',
            }}>
              <V4Icon name="star" size={14}/>
              4.8 · 2,400+ reviews
            </div>
          </div>
        </div>

        {/* Perk cards */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14,
        }}>
          {[
            { brand: 'FoodRista', off: '15% off', sub: 'At 120+ Indian restaurants' },
            { brand: 'Chaayos EU', off: '€5 off', sub: 'On orders over €20' },
            { brand: 'H-Mart Deli', off: '10% off', sub: 'Pre-show snack run' },
            { brand: 'FreeNow', off: '€8 credit', sub: 'Your ride to the show' },
          ].map(p => (
            <div key={p.brand} style={{
              background: 'rgba(255,255,255,0.96)', borderRadius: 14,
              padding: 20, color: C4r.ink,
              boxShadow: '0 10px 30px -10px rgba(0,0,0,0.15)',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8,
                background: C4r.bgAlt, marginBottom: 12,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 600,
                fontSize: 15, color: C4r.red,
              }}>{p.brand.charAt(0)}</div>
              <div style={{ fontSize: 11, color: C4r.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 4 }}>
                {p.brand.toUpperCase()}
              </div>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
                letterSpacing: '-0.02em', color: C4r.red,
              }}>{p.off}</div>
              <div style={{ fontSize: 12, color: C4r.ink2, marginTop: 2 }}>{p.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────
// Footer
// ───────────────────────────────────────────────
function V4Footer() {
  return (
    <footer style={{
      background: C4r.plumDeep, color: 'rgba(255,255,255,0.7)',
      padding: '80px 0 40px',
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40,
          paddingBottom: 50, borderBottom: '1px solid rgba(255,255,255,0.1)',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500,
              letterSpacing: '-0.03em', color: '#fff', marginBottom: 14,
            }}>
              desi<span style={{ color: C4r.red, fontStyle: 'italic', fontFamily: 'var(--font-serif-italic)', fontWeight: 400, fontSize: 36 }}>pass</span>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, maxWidth: 340, margin: '0 0 22px' }}>
              Germany's home for Bollywood, Punjabi and Desi live events. Verified organisers,
              secure checkout, instant mobile tickets.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {['App Store', 'Google Play'].map(x => (
                <button key={x} style={{
                  height: 44, padding: '0 16px', borderRadius: 10,
                  background: '#000', color: '#fff',
                  border: '1px solid rgba(255,255,255,0.2)',
                  fontSize: 12, fontWeight: 500, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                }}>
                  <div style={{ fontSize: 9, opacity: 0.7 }}>Download on</div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{x}</div>
                </button>
              ))}
            </div>
          </div>
          {[
            { h: 'Discover', items: ['Concerts', 'Festivals', 'Club nights', 'Comedy', 'Theatre', 'Originals'] },
            { h: 'Cities', items: ['Berlin', 'Frankfurt', 'Munich', 'Hamburg', 'Cologne', 'Stuttgart'] },
            { h: 'For organisers', items: ['Sell tickets', 'Partner programme', 'Marketing', 'API', 'Case studies'] },
            { h: 'Support', items: ['Help centre', 'Refunds', 'Terms', 'Privacy', 'Impressum', 'Contact'] },
          ].map(col => (
            <div key={col.h}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.5)', marginBottom: 16, fontWeight: 600,
              }}>{col.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(x => (
                  <a key={x} style={{
                    color: 'rgba(255,255,255,0.75)', fontSize: 13,
                    textDecoration: 'none', cursor: 'pointer',
                  }}>{x}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 28, fontSize: 12, color: 'rgba(255,255,255,0.4)',
        }}>
          <div>© 2026 Desipass GmbH · Berlin-Mitte</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <span>🇩🇪 Deutschland</span>
            <span>EN · DE · हिंदी</span>
            <span>Made with ♥ in Berlin</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  V4SectionHead, V4TrendingRail, V4Originals,
  V4AllEvents, V4Cities, V4AppBand, V4Footer,
});