// 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}`,
    }} className="mobile-flex-col mobile-align-start mobile-gap-2">
      <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,
        }} className="mobile-fs-32">{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 rail — clean poster cards, no giant numerals
// ───────────────────────────────────────────────
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 * 560, behavior: 'smooth' });
  };

  return (
    <section style={{ background: C4r.bg, padding: '80px 0 72px' }} className="mobile-py-4">
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }} className="mobile-px-4">

        {/* Header row */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 36,
        }} className="mobile-flex-col mobile-align-start mobile-gap-2">
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: C4r.red, marginBottom: 10, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 20, height: 1, background: C4r.red, display: 'inline-block' }}/>
              Trending this week
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 400,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: C4r.ink,
            }} className="mobile-fs-24">
              Shows everyone's booking right now
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 8, flexShrink: 0 }} className="mobile-hide">
            <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>

        {/* Scroll rail */}
        <div ref={scrollRef} style={{
          display: 'flex', gap: 20, overflowX: 'auto',
          scrollSnapType: 'x mandatory', scrollbarWidth: 'none',
          margin: '0 -40px', padding: '4px 40px 16px',
        }} className="mobile-edge-to-edge mobile-px-0 mobile-mx-0">
          {events.map((e, i) => (
            <V4TrendingCard key={e.id} event={e} rank={i + 1} onNav={onNav}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function V4TrendingCard({ event, rank, onNav }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={() => onNav('event', event.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        flexShrink: 0, width: 220,
        scrollSnapAlign: 'start',
        cursor: 'pointer',
      }}>

      {/* Poster */}
      <div style={{
        position: 'relative',
        aspectRatio: '3/4',
        borderRadius: 10, overflow: 'hidden',
        marginBottom: 14,
        boxShadow: hover
          ? '0 18px 40px -10px rgba(0,0,0,0.28)'
          : '0 6px 18px -6px rgba(0,0,0,0.14)',
        transition: 'box-shadow 200ms, transform 200ms',
        transform: hover ? 'translateY(-3px)' : 'none',
      }}>
        <window.DesiPoster event={event}/>

        {/* Rank badge — top left */}
        <div style={{
          position: 'absolute', top: 10, left: 10,
          width: 28, height: 28, borderRadius: 99,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)',
          color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.04em',
        }}>
          {rank < 10 ? '0' + rank : rank}
        </div>

        {/* Selling fast badge — top right */}
        {event.status === 'selling-fast' && (
          <div style={{
            position: 'absolute', top: 10, right: 10,
            padding: '4px 9px', borderRadius: 99,
            background: C4r.red, color: '#fff',
            fontSize: 9.5, fontWeight: 700,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            fontFamily: 'var(--font-mono)',
          }}>Hot</div>
        )}

        {/* Price pill — bottom left */}
        <div style={{
          position: 'absolute', bottom: 10, left: 10,
          padding: '5px 11px', borderRadius: 99,
          background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
          color: '#fff',
          fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 500,
          letterSpacing: '-0.01em',
        }}>
          from {v4Eur(event.priceFrom)}
        </div>
      </div>

      {/* Info below poster */}
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 10.5,
        letterSpacing: '0.1em', textTransform: 'uppercase',
        color: C4r.red, fontWeight: 600, marginBottom: 5,
      }}>
        {event.dateShort} · {event.city}
      </div>

      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 500,
        letterSpacing: '-0.015em', lineHeight: 1.2,
        color: C4r.ink, marginBottom: 3,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{event.artist}</div>

      <div style={{
        fontSize: 12.5, color: C4r.ink3, lineHeight: 1.3,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{event.venue}</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',
    }} className="mobile-py-4">
      {/* 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' }} className="mobile-px-4">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60,
          marginBottom: 56,
        }} className="mobile-grid-1 mobile-gap-4">
          <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',
            }} className="mobile-fs-32">
              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 }} className="mobile-w-full">
            <p style={{
              fontSize: 17, color: 'rgba(255,255,255,0.7)',
              lineHeight: 1.55, margin: 0, maxWidth: 520,
            }} className="mobile-fs-14">
              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,
        }} className="mobile-grid-1 mobile-gap-4">
          {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' }} className="mobile-py-4">
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }} className="mobile-px-4">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36 }} className="mobile-flex-col mobile-align-start mobile-gap-2">
          <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,
            }} className="mobile-fs-32">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}`,
        }} className="mobile-scroll-row mobile-edge-to-edge">
          {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,
        }} className="mobile-grid-2 mobile-gap-2">
          {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 — clean photo-style cards (4+3 grid)
// ───────────────────────────────────────────────
function V4Cities() {
  const cities = [
    { name: 'Berlin',     count: 18,
      bg: 'linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #533483 100%)' },
    { name: 'Frankfurt',  count: 12,
      bg: 'linear-gradient(160deg, #0d1117 0%, #1a2332 40%, #2d3561 70%, #4a4580 100%)' },
    { name: 'Munich',     count: 9,
      bg: 'linear-gradient(160deg, #1a0a00 0%, #3d1a00 40%, #7a3b1e 70%, #b85c38 100%)' },
    { name: 'Hamburg',    count: 8,
      bg: 'linear-gradient(160deg, #001219 0%, #003049 40%, #005f73 70%, #0a9396 100%)' },
    { name: 'Cologne',    count: 7,
      bg: 'linear-gradient(160deg, #10002b 0%, #240046 40%, #3c096c 70%, #7b2d8b 100%)' },
    { name: 'Stuttgart',  count: 6,
      bg: 'linear-gradient(160deg, #1b1b1b 0%, #2d2d2d 40%, #1a3a1a 70%, #2d5a2d 100%)' },
    { name: 'Düsseldorf', count: 5,
      bg: 'linear-gradient(160deg, #1a0505 0%, #3d0c0c 40%, #7a1e1e 70%, #b83232 100%)' },
  ];

  return (
    <section style={{ background: C4r.bg, padding: '80px 0' }} className="mobile-py-4">
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 60px' }} className="mobile-px-4">

        {/* Header */}
        <div style={{
          display: 'flex', alignItems: 'flex-end',
          justifyContent: 'space-between', marginBottom: 32,
        }} className="mobile-flex-col mobile-align-start mobile-gap-2">
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: C4r.red, marginBottom: 10, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 20, height: 1, background: C4r.red, display: 'inline-block' }}/>
              Seven cities · Every weekend
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 400,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: C4r.ink,
            }} className="mobile-fs-24">
              Explore by city
            </h2>
          </div>
          <button style={{
            height: 40, padding: '0 18px', borderRadius: 99,
            background: 'transparent', color: C4r.ink,
            border: `1px solid ${C4r.line}`, cursor: 'pointer',
            fontSize: 13, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            whiteSpace: 'nowrap',
          }} className="mobile-hide">See all cities <V4Icon name="arrow" size={13}/></button>
        </div>

        {/* Row 1 — 4 cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }} className="mobile-grid-2 mobile-gap-2">
          {cities.slice(0, 4).map(c => <V4CityCard key={c.name} city={c}/>)}
        </div>
        {/* Row 2 — 3 cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="mobile-grid-2 mobile-gap-2">
          {cities.slice(4).map(c => <V4CityCard key={c.name} city={c}/>)}
        </div>
      </div>

      <style>{`
        .v4-city-card { transition: transform 220ms ease, box-shadow 220ms ease; }
        .v4-city-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4) !important; }
        .v4-city-card:hover .city-arrow { opacity: 1 !important; transform: translate(0,0) !important; }
        .v4-city-card:hover .city-overlay { opacity: 1 !important; }
      `}</style>
    </section>
  );
}

function V4CityCard({ city }) {
  return (
    <div className="v4-city-card" style={{
      position: 'relative', aspectRatio: '4/3',
      borderRadius: 12, overflow: 'hidden',
      background: city.bg,
      cursor: 'pointer',
      boxShadow: '0 4px 16px -4px rgba(0,0,0,0.25)',
    }}>
      {/* Noise texture overlay for depth */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.06, mixBlendMode: 'overlay', pointerEvents: 'none' }}>
        <filter id={`noise-${city.name}`}>
          <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
        </filter>
        <rect width="100%" height="100%" filter={`url(#noise-${city.name})`}/>
      </svg>

      {/* Bottom gradient for text legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 45%, transparent 100%)',
      }}/>

      {/* Hover overlay */}
      <div className="city-overlay" style={{
        position: 'absolute', inset: 0,
        background: 'rgba(0,0,0,0.18)',
        opacity: 0, transition: 'opacity 220ms',
      }}/>

      {/* Arrow — slides in from bottom-right on hover */}
      <div className="city-arrow" style={{
        position: 'absolute', top: 14, right: 14,
        width: 36, height: 36, borderRadius: 99,
        background: 'rgba(255,255,255,0.95)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#1a1418',
        opacity: 0,
        transform: 'translate(4px, -4px)',
        transition: 'opacity 220ms, transform 220ms',
      }}>
        <V4Icon name="arrowUR" size={15}/>
      </div>

      {/* City name + count */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '16px 18px 18px',
        color: '#fff',
      }}>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 22, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.1,
          marginBottom: 4,
        }}>{city.name}</div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.06em', opacity: 0.8,
        }}>
          <V4Icon name="calendar" size={11}/> {city.count} upcoming events
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────
// 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',
    }} className="mobile-py-4">
      {/* 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',
      }} className="mobile-grid-1 mobile-px-4 mobile-gap-4">
        <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',
          }} className="mobile-fs-32">
            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,
          }} className="mobile-fs-14 mobile-my-2">
            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' }} className="mobile-flex-col mobile-align-start mobile-gap-2">
            <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,
        }} className="mobile-grid-1 mobile-gap-2">
          {[
            { 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',
    }} className="mobile-py-4">
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }} className="mobile-px-4">
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40,
          paddingBottom: 50, borderBottom: '1px solid rgba(255,255,255,0.1)',
        }} className="mobile-grid-1 mobile-gap-4">
          <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)',
        }} className="mobile-flex-col mobile-gap-2">
          <div>© 2026 Desipass GmbH · Berlin-Mitte</div>
          <div style={{ display: 'flex', gap: 20 }} className="mobile-flex-col mobile-gap-1">
            <span>🇩🇪 Deutschland</span>
            <span>EN · DE · हिंदी</span>
            <span>Made with ♥ in Berlin</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ───────────────────────────────────────────────
// Trust strip — lean single-row replacement for AppBand
// ───────────────────────────────────────────────
function V4TrustStrip() {
  const items = [
    { icon: 'ticket',   text: 'Instant mobile e-ticket',        sub: 'Apple Wallet & Google Pay' },
    { icon: 'refresh',  text: 'Free cancellation',               sub: 'Up to 48h before the show' },
    { icon: 'wallet',   text: 'Klarna · Pay in 3',               sub: 'Split any ticket, interest-free' },
    { icon: 'shield',   text: 'Verified organisers only',        sub: 'Every event is checked by us' },
    { icon: 'globe',    text: 'Support in EN · DE · हिंदी',      sub: 'Available 24 / 7' },
  ];

  return (
    <section style={{
      background: '#fff',
      borderTop: `1px solid ${C4r.line}`,
      borderBottom: `1px solid ${C4r.line}`,
    }} className="mobile-py-2">
      <div style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 60px',
        display: 'grid',
        gridTemplateColumns: `repeat(${items.length}, 1fr)`,
      }} className="mobile-scroll-row mobile-edge-to-edge">
        {items.map((item, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '24px 0',
            borderRight: i < items.length - 1 ? `1px solid ${C4r.line}` : 'none',
            paddingRight: i < items.length - 1 ? 28 : 0,
            paddingLeft: i > 0 ? 28 : 0,
          }} className="mobile-border-none mobile-px-4" style={{ flexShrink: 0, minWidth: 260 }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10, flexShrink: 0,
              background: `${C4r.red}12`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: C4r.red,
            }}>
              <V4Icon name={item.icon} size={18}/>
            </div>
            <div>
              <div style={{
                fontSize: 13.5, fontWeight: 600, color: C4r.ink,
                marginBottom: 2, lineHeight: 1.2,
              }}>{item.text}</div>
              <div style={{
                fontSize: 12, color: C4r.ink3, lineHeight: 1.3,
              }}>{item.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

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