// Desipass V4 — Event Details page (desktop, editorial)

const C4e = window.V4;

function V4EventDetails({ eventId, onNav }) {
  const event = window.findEvent(eventId);
  const tiers = window.getTiersForEvent(event);
  const related = window.DESI_EVENTS
    .filter(e => e.id !== event.id && e.category === event.category)
    .slice(0, 4);

  const [selectedTier, setSelectedTier] = React.useState(tiers[1]?.id || tiers[0].id);
  const [qty, setQty] = React.useState(2);

  const tier = tiers.find(t => t.id === selectedTier);
  const subtotal = tier.price * qty;
  const fees = tier.fee * qty;
  const total = subtotal + fees;
  const soldPct = (tier.sold / tier.capacity) * 100;

  return (
    <div style={{ background: C4e.bg, color: C4e.ink }}>
      <V4TopNav onNav={onNav}/>

      {/* Breadcrumb */}
      <div style={{
        maxWidth: 1440, margin: '0 auto', padding: '20px 40px 0',
        fontSize: 12.5, color: C4e.ink3,
        fontFamily: 'var(--font-mono)', letterSpacing: '0.03em',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <a onClick={() => onNav('landing')} style={{ cursor: 'pointer', color: C4e.ink2 }}>Home</a>
        <V4Icon name="cheR" size={11}/>
        <span>{event.category}s</span>
        <V4Icon name="cheR" size={11}/>
        <span>{event.city}</span>
        <V4Icon name="cheR" size={11}/>
        <span style={{ color: C4e.ink }}>{event.artist}</span>
      </div>

      {/* Hero — cinematic with poster + info side-by-side */}
      <section style={{
        maxWidth: 1440, margin: '0 auto', padding: '28px 40px 60px',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '460px 1fr', gap: 48,
          alignItems: 'stretch',
        }}>
          {/* Left: poster */}
          <div>
            <div style={{
              position: 'relative',
              borderRadius: 14, overflow: 'hidden',
              boxShadow: '0 40px 80px -20px rgba(0,0,0,0.35)',
              aspectRatio: '3/4',
            }}>
              <window.DesiPoster event={event} size="lg" style={{ height: '100%', aspectRatio: 'auto', borderRadius: 0 }}/>
              {/* Play trailer */}
              <button style={{
                position: 'absolute', bottom: 16, right: 16,
                height: 44, padding: '0 18px', borderRadius: 99,
                background: 'rgba(0,0,0,0.6)', color: '#fff', border: 0,
                backdropFilter: 'blur(10px)',
                fontSize: 13, fontWeight: 500, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <V4Icon name="play" size={14}/> Watch trailer
              </button>
            </div>

            {/* Social proof */}
            <div style={{
              marginTop: 18, display: 'flex', alignItems: 'center',
              gap: 12, padding: 16, background: '#fff',
              border: `1px solid ${C4e.line}`, borderRadius: 12,
            }}>
              <div style={{ display: 'flex', marginRight: 4 }}>
                {[C4e.red, C4e.saffron, C4e.pink, C4e.plum].map((c, i) => (
                  <div key={i} style={{
                    width: 32, height: 32, borderRadius: 99,
                    background: c, border: '2px solid #fff',
                    marginLeft: i > 0 ? -10 : 0,
                    color: '#fff', display: 'flex', alignItems: 'center',
                    justifyContent: 'center', fontSize: 11, fontWeight: 600,
                  }}>{'AKRS'[i]}</div>
                ))}
              </div>
              <div style={{ flex: 1, fontSize: 12.5, lineHeight: 1.4 }}>
                <strong style={{ color: C4e.ink }}>
                  {event.attendees.toLocaleString()} people
                </strong>{' '}
                <span style={{ color: C4e.ink2 }}>booked in the last 7 days.</span>
                {' '}
                <span style={{ color: C4e.red, fontWeight: 600 }}>
                  {tier.capacity - tier.sold} seats left in your tier.
                </span>
              </div>
            </div>
          </div>

          {/* Right: hero info */}
          <div style={{ paddingTop: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: C4e.red, fontWeight: 600,
              }}>{event.category}</span>
              <span style={{ color: C4e.ink4 }}>·</span>
              {event.tags.map((t, i) => (
                <span key={i} style={{
                  fontSize: 11.5, padding: '3px 10px', borderRadius: 99,
                  whiteSpace: 'nowrap',
                  background: '#fff', color: C4e.ink2,
                  border: `1px solid ${C4e.line}`,
                }}>{t}</span>
              ))}
            </div>

            <h1 style={{
              fontFamily: 'var(--font-display)', fontSize: 84, fontWeight: 400,
              letterSpacing: '-0.035em', lineHeight: 0.93, margin: '0 0 10px',
              color: C4e.ink, textWrap: 'balance',
            }}>
              {event.artist}
            </h1>
            <div style={{
              fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
              fontSize: 30, color: C4e.ink2, marginBottom: 28,
            }}>{event.title}</div>

            {/* Meta grid — date/venue/duration/language */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
              marginBottom: 32,
              background: '#fff',
              border: `1px solid ${C4e.line}`,
              borderRadius: 14,
              overflow: 'hidden',
            }}>
              {[
                { icon: 'calendar', label: event.day, main: event.date.split(',')[1]?.trim() || event.dateShort, sub: `Doors ${event.doors} · Show ${event.time}` },
                { icon: 'pin', label: event.city, main: event.venue, sub: event.district },
                { icon: 'clock', label: 'Duration', main: event.duration, sub: `Age: ${event.ageRestriction}` },
                { icon: 'mic', label: 'Language', main: event.language.split(' / ')[0], sub: event.language },
              ].map((m, i) => (
                <div key={i} style={{
                  padding: 20, display: 'flex', flexDirection: 'column', gap: 6,
                  borderRight: i < 3 ? `1px solid ${C4e.line}` : 'none',
                }}>
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    color: C4e.ink3, fontSize: 10.5,
                    letterSpacing: '0.12em', textTransform: 'uppercase',
                    fontFamily: 'var(--font-mono)', fontWeight: 600,
                  }}>
                    <V4Icon name={m.icon} size={12}/> {m.label}
                  </div>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
                    letterSpacing: '-0.015em', color: C4e.ink, lineHeight: 1.15,
                  }}>{m.main}</div>
                  <div style={{ fontSize: 11.5, color: C4e.ink3 }}>{m.sub}</div>
                </div>
              ))}
            </div>

            {/* About */}
            <div style={{ marginBottom: 36 }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: C4e.ink3, marginBottom: 12, fontWeight: 600,
              }}>About the show</div>
              <p style={{
                fontSize: 16.5, lineHeight: 1.65, color: C4e.ink2,
                margin: 0, maxWidth: 680,
              }}>{event.description}</p>
            </div>

            {/* Organiser row */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: 18, background: '#fff',
              border: `1px solid ${C4e.line}`, borderRadius: 12,
              maxWidth: 480,
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 99,
                background: C4e.gradient, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
              }}>{event.organiser.name.charAt(0)}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11.5, color: C4e.ink3, marginBottom: 2 }}>Organised by</div>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  fontSize: 15, fontWeight: 600, color: C4e.ink,
                }}>
                  {event.organiser.name}
                  {event.organiser.verified && <V4Icon name="verified" size={14}/>}
                </div>
                <div style={{ fontSize: 12, color: C4e.ink3, marginTop: 2 }}>
                  {event.organiser.events} events · {event.organiser.followers.toLocaleString()} followers
                </div>
              </div>
              <button style={{
                height: 36, padding: '0 16px', borderRadius: 99,
                background: 'transparent', color: C4e.ink,
                border: `1px solid ${C4e.line}`, cursor: 'pointer',
                fontSize: 12.5, fontWeight: 600,
              }}>Follow</button>
            </div>
          </div>
        </div>
      </section>

      {/* Two-col: tiers + sticky booking */}
      <section style={{
        background: '#fff',
        borderTop: `1px solid ${C4e.line}`,
        borderBottom: `1px solid ${C4e.line}`,
        padding: '80px 0',
      }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 420px', gap: 60,
            alignItems: 'flex-start',
          }}>
            {/* Tiers */}
            <div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: C4e.red, marginBottom: 12, fontWeight: 600,
              }}>Choose your ticket</div>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 400,
                letterSpacing: '-0.028em', lineHeight: 1, margin: '0 0 10px',
              }}>
                {tiers.length} tiers <em style={{
                  fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
                  color: C4e.red, fontWeight: 400,
                }}>— pick your spot.</em>
              </h2>
              <p style={{
                fontSize: 14, color: C4e.ink2, marginBottom: 28, maxWidth: 520,
              }}>
                Colors match the venue map below. VIP includes backstage access and meet & greet.
              </p>

              {/* Tier list */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {tiers.map(t => {
                  const pct = (t.sold / t.capacity) * 100;
                  const isActive = t.id === selectedTier;
                  const soldOut = t.sold >= t.capacity;
                  return (
                    <button key={t.id}
                      onClick={() => !soldOut && setSelectedTier(t.id)}
                      disabled={soldOut}
                      style={{
                        textAlign: 'left', width: '100%',
                        padding: 20, borderRadius: 12,
                        background: isActive ? '#fef6f0' : C4e.bg,
                        border: isActive ? `2px solid ${C4e.red}` : `1px solid ${C4e.line}`,
                        cursor: soldOut ? 'not-allowed' : 'pointer',
                        opacity: soldOut ? 0.45 : 1,
                        display: 'flex', alignItems: 'center', gap: 18,
                        fontFamily: 'inherit',
                      }}>
                      {/* Color dot */}
                      <div style={{
                        width: 14, height: 14, borderRadius: 99, flexShrink: 0,
                        background: t.color || C4e.red,
                      }}/>
                      <div style={{ flex: 1 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                          <span style={{
                            fontFamily: 'var(--font-display)', fontSize: 18,
                            fontWeight: 500, color: C4e.ink, letterSpacing: '-0.01em',
                          }}>{t.name}</span>
                          {t.badge && (
                            <span style={{
                              fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
                              padding: '3px 8px', borderRadius: 4,
                              background: C4e.saffron, color: '#fff',
                              textTransform: 'uppercase',
                            }}>{t.badge}</span>
                          )}
                        </div>
                        <div style={{ fontSize: 12.5, color: C4e.ink3, marginBottom: 8 }}>
                          {t.desc}
                        </div>
                        {/* Availability bar */}
                        <div style={{
                          height: 4, borderRadius: 2,
                          background: C4e.line, overflow: 'hidden',
                          width: 200,
                        }}>
                          <div style={{
                            width: `${pct}%`, height: '100%',
                            background: pct > 90 ? C4e.red : pct > 70 ? C4e.saffron : C4e.green,
                          }}/>
                        </div>
                        <div style={{ fontSize: 10.5, color: C4e.ink3, marginTop: 4, fontFamily: 'var(--font-mono)' }}>
                          {soldOut ? 'Sold out' : `${t.capacity - t.sold} of ${t.capacity} left`}
                        </div>
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <div style={{
                          fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500,
                          color: C4e.ink, letterSpacing: '-0.02em',
                        }}>{v4Eur(t.price)}</div>
                        <div style={{ fontSize: 11, color: C4e.ink3 }}>
                          + {v4Eur(t.fee, true)} fee
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>

              {/* Venue map preview */}
              <div style={{ marginTop: 48 }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: C4e.red, marginBottom: 12, fontWeight: 600,
                }}>Venue layout</div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 400,
                  letterSpacing: '-0.02em', margin: '0 0 24px', color: C4e.ink,
                }}>{event.venue}</h3>

                <div style={{
                  borderRadius: 14, overflow: 'hidden',
                  border: `1px solid ${C4e.line}`,
                  background: '#fbf7f2',
                  padding: 28,
                }}>
                  <svg viewBox="0 0 700 400" style={{ width: '100%', height: 'auto' }}>
                    {/* Stage */}
                    <rect x="260" y="40" width="180" height="24" rx="4"
                      fill={C4e.ink} />
                    <text x="350" y="56" fill="#fff" fontSize="11"
                      textAnchor="middle" fontFamily="ui-monospace"
                      letterSpacing="0.15em">STAGE</text>

                    {/* Stalls Premium (closest) */}
                    <path d="M 160 80 Q 350 75 540 80 L 550 130 Q 350 125 150 130 Z"
                      fill="#3B2E4D" opacity={selectedTier === 'premium' ? 1 : 0.5}/>
                    {/* Stalls Tier 2 */}
                    <path d="M 140 140 Q 350 130 560 140 L 580 200 Q 350 190 120 200 Z"
                      fill="#1a9d3d" opacity={selectedTier === 'main' ? 1 : 0.5}/>
                    {/* Upper Tier */}
                    <path d="M 110 210 Q 350 200 590 210 L 610 270 Q 350 260 90 270 Z"
                      fill="#e8910b" opacity={selectedTier === 'upper' ? 1 : 0.5}/>
                    {/* Balcony */}
                    <path d="M 80 280 Q 350 270 620 280 L 640 340 Q 350 330 60 340 Z"
                      fill="#c62828" opacity={selectedTier === 'balcony' ? 1 : 0.5}/>
                    {/* VIP pockets (side) */}
                    <rect x="40" y="100" width="50" height="60" rx="4" fill="#E54558" opacity={selectedTier === 'vip' ? 1 : 0.5}/>
                    <rect x="610" y="100" width="50" height="60" rx="4" fill="#E54558" opacity={selectedTier === 'vip' ? 1 : 0.5}/>

                    {/* Labels */}
                    <text x="350" y="108" fontSize="11" textAnchor="middle" fill="#fff" fontWeight="600">PREMIUM</text>
                    <text x="350" y="170" fontSize="11" textAnchor="middle" fill="#fff" fontWeight="600">TIER 2</text>
                    <text x="350" y="240" fontSize="11" textAnchor="middle" fill="#fff" fontWeight="600">UPPER</text>
                    <text x="350" y="310" fontSize="11" textAnchor="middle" fill="#fff" fontWeight="600">BALCONY</text>
                    <text x="65" y="135" fontSize="10" textAnchor="middle" fill="#fff" fontWeight="700">VIP</text>
                    <text x="635" y="135" fontSize="10" textAnchor="middle" fill="#fff" fontWeight="700">VIP</text>

                    {/* Your seat indicator for selected tier */}
                    <g>
                      {selectedTier && (() => {
                        const positions = {
                          premium: [350, 105],
                          main: [350, 170],
                          upper: [350, 240],
                          balcony: [350, 310],
                          vip: [65, 130],
                        };
                        const pos = positions[selectedTier] || [350, 170];
                        return (
                          <>
                            <circle cx={pos[0]} cy={pos[1]} r="16" fill="none" stroke="#fff" strokeWidth="3"/>
                            <circle cx={pos[0]} cy={pos[1]} r="16" fill="none" stroke={C4e.red} strokeWidth="2"/>
                          </>
                        );
                      })()}
                    </g>
                  </svg>

                  <div style={{
                    display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 18,
                    fontSize: 11.5, color: C4e.ink2, fontFamily: 'var(--font-mono)',
                    letterSpacing: '0.04em',
                  }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: '#E54558' }}/>
                      VIP
                    </span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: '#3B2E4D' }}/>
                      Premium
                    </span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: '#1a9d3d' }}/>
                      Tier 2
                    </span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: '#e8910b' }}/>
                      Upper
                    </span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: '#c62828' }}/>
                      Balcony
                    </span>
                  </div>
                </div>

                {/* Address / how to get there */}
                <div style={{
                  marginTop: 18, padding: 20,
                  background: C4e.bg, borderRadius: 12,
                  border: `1px solid ${C4e.line}`,
                  display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
                }}>
                  <div>
                    <div style={{ fontSize: 10.5, color: C4e.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Address</div>
                    <div style={{ fontSize: 13, color: C4e.ink, lineHeight: 1.4 }}>{event.address}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 10.5, color: C4e.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Nearest U-Bahn</div>
                    <div style={{ fontSize: 13, color: C4e.ink }}>Warschauer Straße · 4 min walk</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 10.5, color: C4e.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Parking</div>
                    <div style={{ fontSize: 13, color: C4e.ink }}>Available on-site · €12</div>
                  </div>
                </div>
              </div>

              {/* FAQ */}
              <div style={{ marginTop: 48 }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: C4e.red, marginBottom: 12, fontWeight: 600,
                }}>Good to know</div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 400,
                  letterSpacing: '-0.02em', margin: '0 0 24px', color: C4e.ink,
                }}>Frequently asked</h3>

                {[
                  { q: 'Can I get a refund if I can\'t attend?', a: 'Full refund up to 48 hours before the show. After that, transfer your ticket to a friend via the app — free for verified users.' },
                  { q: 'Are tickets assigned seats or general admission?', a: `${event.category === 'Club' || event.category === 'Festival' ? 'General admission — first come, first served inside the venue.' : 'Assigned seats. You pick row and seat at checkout.'}` },
                  { q: 'What\'s the age policy?', a: `${event.ageRestriction}. Under 16s must be accompanied by an adult guardian.` },
                  { q: 'Can I bring my camera / phone?', a: 'Phones yes, professional cameras no. Organiser may confiscate DSLRs at the door.' },
                ].map((f, i) => (
                  <details key={i} style={{
                    borderTop: i === 0 ? `1px solid ${C4e.line}` : 'none',
                    borderBottom: `1px solid ${C4e.line}`,
                    padding: '18px 0',
                  }}>
                    <summary style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      cursor: 'pointer', listStyle: 'none',
                      fontSize: 16, fontWeight: 500, color: C4e.ink,
                    }}>
                      {f.q}
                      <V4Icon name="plus" size={16}/>
                    </summary>
                    <p style={{
                      fontSize: 14, color: C4e.ink2, lineHeight: 1.6,
                      margin: '12px 0 0', maxWidth: 620,
                    }}>{f.a}</p>
                  </details>
                ))}
              </div>
            </div>

            {/* Sticky booking card */}
            <div style={{ position: 'sticky', top: 110, alignSelf: 'flex-start' }}>
              <div style={{
                background: '#fff',
                border: `1px solid ${C4e.line}`, borderRadius: 14,
                overflow: 'hidden',
                boxShadow: '0 24px 60px -20px rgba(0,0,0,0.18)',
              }}>
                {/* Header */}
                <div style={{
                  padding: 20, borderBottom: `1px solid ${C4e.line}`,
                  background: C4e.bg,
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div>
                      <div style={{ fontSize: 11, color: C4e.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 2 }}>Selected</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500 }}>{tier.name}</div>
                    </div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em' }}>
                      {v4Eur(tier.price)}
                    </div>
                  </div>
                </div>

                {/* Qty + breakdown */}
                <div style={{ padding: 20 }}>
                  <div style={{ marginBottom: 18 }}>
                    <div style={{
                      fontSize: 11, color: C4e.ink3, fontFamily: 'var(--font-mono)',
                      letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10,
                    }}>Quantity</div>
                    <div style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      padding: '4px 4px 4px 18px',
                      border: `1px solid ${C4e.line}`, borderRadius: 99,
                    }}>
                      <span style={{ fontSize: 15, fontWeight: 500 }}>{qty} ticket{qty > 1 ? 's' : ''}</span>
                      <div style={{ display: 'flex', gap: 4 }}>
                        <button onClick={() => setQty(Math.max(1, qty - 1))} style={{
                          width: 36, height: 36, borderRadius: 99,
                          background: C4e.bg, border: `1px solid ${C4e.line}`,
                          cursor: 'pointer', display: 'flex',
                          alignItems: 'center', justifyContent: 'center',
                        }}><V4Icon name="minus" size={14}/></button>
                        <button onClick={() => setQty(Math.min(8, qty + 1))} style={{
                          width: 36, height: 36, borderRadius: 99,
                          background: C4e.ink, color: '#fff', border: 0,
                          cursor: 'pointer', display: 'flex',
                          alignItems: 'center', justifyContent: 'center',
                        }}><V4Icon name="plus" size={14}/></button>
                      </div>
                    </div>
                  </div>

                  {/* Breakdown */}
                  <div style={{
                    display: 'flex', flexDirection: 'column', gap: 8,
                    paddingBottom: 14, marginBottom: 14,
                    borderBottom: `1px solid ${C4e.line}`,
                    fontSize: 13, color: C4e.ink2,
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span>{qty} × {tier.name}</span>
                      <span>{v4Eur(subtotal, true)}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span>Booking fee</span>
                      <span>{v4Eur(fees, true)}</span>
                    </div>
                  </div>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                    marginBottom: 20,
                  }}>
                    <span style={{ fontSize: 13, color: C4e.ink2 }}>Total</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', color: C4e.ink }}>
                      {v4Eur(total, true)}
                    </span>
                  </div>

                  <button style={{
                    width: '100%', height: 56, borderRadius: 99,
                    background: C4e.red, color: '#fff', border: 0,
                    fontSize: 15, fontWeight: 600, cursor: 'pointer',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  }}>
                    <V4Icon name="ticket" size={18}/>
                    Continue to checkout
                  </button>

                  <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    gap: 10, marginTop: 14, fontSize: 11.5, color: C4e.ink3,
                  }}>
                    <V4Icon name="shield" size={13}/>
                    <span>Secure · Klarna · PayPal · Card</span>
                  </div>
                </div>

                {/* Quick facts */}
                <div style={{
                  padding: 18, background: C4e.bg,
                  borderTop: `1px solid ${C4e.line}`,
                  display: 'flex', flexDirection: 'column', gap: 10,
                }}>
                  {[
                    { icon: 'refresh', text: 'Free cancellation up to 48h before' },
                    { icon: 'truck', text: 'Instant mobile e-ticket · Apple Wallet' },
                    { icon: 'gift', text: 'Unlock Ticket Perks — 4 partner discounts' },
                  ].map((x, i) => (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 10,
                      fontSize: 12, color: C4e.ink2,
                    }}>
                      <V4Icon name={x.icon} size={14}/> {x.text}
                    </div>
                  ))}
                </div>
              </div>

              {/* Countdown */}
              <div style={{
                marginTop: 14, padding: 14,
                background: C4e.plumDeep, color: '#fff',
                borderRadius: 10,
                display: 'flex', alignItems: 'center', gap: 10,
                fontSize: 12.5,
              }}>
                <V4Icon name="clock" size={14}/>
                <span style={{ opacity: 0.7 }}>Prices rise in</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>2d 14h 08m</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Related events */}
      <section style={{ background: C4e.bg, padding: '80px 0' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 40px' }}>
          <V4SectionHead
            eyebrow="You might also like"
            title={<>More <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C4e.red, fontWeight: 400 }}>{event.category.toLowerCase()}s</em> in Germany</>}
            cta="See all" onCta={() => onNav('landing')}
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
            {related.map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
          </div>
        </div>
      </section>

      <V4Footer/>
    </div>
  );
}

Object.assign(window, { V4EventDetails });