// Desipass V3 — shared UI primitives (posters, chrome, icons)

const C = window.DESI_COLORS;

// ─────────────────────────────────────────────────────────────
// Event poster — SVG-based, never a photo, never an emoji
// ─────────────────────────────────────────────────────────────
function DesiPoster({ event, size = 'md', style = {} }) {
  const [c1, c2] = event.poster;
  const s = event.posterStyle || 'gradient';

  const scale = size === 'xs' ? 0.5 : size === 'sm' ? 0.7 : size === 'lg' ? 1.6 : 1;
  const titleSize = 24 * scale;
  const metaSize = 10 * scale;

  let inner;

  if (s === 'concert' || s === 'gradient' || s === 'vibrant') {
    // Concert — big gradient with radial halo, artist name large
    inner = (
      <>
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(155deg, ${c1} 0%, ${c2} 100%)`,
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.25), transparent 70%)',
        }} />
        {/* Decorative star shape */}
        <svg style={{ position: 'absolute', top: '18%', right: '12%', opacity: 0.25 }}
          width={`${50 * scale}px`} height={`${50 * scale}px`} viewBox="0 0 50 50">
          <path d="M25 5 L28 20 L44 22 L31 32 L35 47 L25 38 L15 47 L19 32 L6 22 L22 20 Z"
            fill="#fff" />
        </svg>
        <div style={{
          position: 'absolute', inset: 0, padding: '10% 9%',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: '#fff',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: metaSize,
              letterSpacing: '0.14em', opacity: 0.9, fontWeight: 500,
              textTransform: 'uppercase',
            }}>{event.dateShort} · {event.city}</div>
          </div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: titleSize, letterSpacing: '-0.025em', lineHeight: 0.95,
              textShadow: '0 2px 20px rgba(0,0,0,0.3)',
            }}>{event.artist}</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: metaSize,
              letterSpacing: '0.1em', opacity: 0.85, marginTop: 6 * scale,
            }}>{event.venue.toUpperCase()}</div>
          </div>
        </div>
      </>
    );
  } else if (s === 'elegant' || s === 'romantic') {
    // Elegant — serif italic, dark with accent
    inner = (
      <>
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at 50% 40%, rgba(255,220,190,0.15), transparent 60%)',
        }} />
        {/* Ornamental divider */}
        <div style={{
          position: 'absolute', top: '45%', left: '20%', right: '20%',
          height: 1, background: 'rgba(255,255,255,0.4)',
        }} />
        <div style={{
          position: 'absolute', inset: 0, padding: '10% 9%',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: '#fff', textAlign: 'center', alignItems: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: metaSize,
            letterSpacing: '0.18em', opacity: 0.85,
            textTransform: 'uppercase', fontWeight: 500,
          }}>{event.dateShort}</div>
          <div>
            <div style={{
              fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
              fontWeight: 400, fontSize: titleSize * 1.1,
              letterSpacing: '-0.01em', lineHeight: 0.95,
            }}>{event.artist}</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: metaSize * 0.9,
              letterSpacing: '0.2em', opacity: 0.8, marginTop: 10 * scale,
              textTransform: 'uppercase',
            }}>An Evening With</div>
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: metaSize,
            letterSpacing: '0.15em', opacity: 0.75,
            textTransform: 'uppercase',
          }}>{event.venue}</div>
        </div>
      </>
    );
  } else if (s === 'festival') {
    // Festival — saturated, playful, multiple colors
    inner = (
      <>
        <div style={{ position: 'absolute', inset: 0, background: c1 }} />
        <div style={{
          position: 'absolute', width: '60%', aspectRatio: '1',
          top: '-10%', left: '-10%', borderRadius: '50%',
          background: c2, opacity: 0.9,
        }} />
        <div style={{
          position: 'absolute', width: '45%', aspectRatio: '1',
          bottom: '-15%', right: '-15%', borderRadius: '50%',
          background: '#fff', opacity: 0.2, mixBlendMode: 'overlay',
        }} />
        <div style={{
          position: 'absolute', width: '30%', aspectRatio: '1',
          top: '30%', right: '10%', borderRadius: '50%',
          background: '#F5D776', opacity: 0.85,
        }} />
        <div style={{
          position: 'absolute', inset: 0, padding: '10% 9%',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: '#fff',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: metaSize,
            letterSpacing: '0.14em', fontWeight: 600, opacity: 0.95,
          }}>{event.dateShort.toUpperCase()}</div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: titleSize * 1.15, letterSpacing: '-0.03em', lineHeight: 0.9,
              textShadow: '0 3px 15px rgba(0,0,0,0.25)',
            }}>{event.title.split(' ').slice(0, 2).join(' ')}</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: metaSize,
              letterSpacing: '0.1em', marginTop: 8 * scale, fontWeight: 500,
            }}>{event.city.toUpperCase()} · {event.venue.toUpperCase()}</div>
          </div>
        </div>
      </>
    );
  } else if (s === 'dark' || s === 'underground') {
    // Dark — trap / hip-hop aesthetic
    inner = (
      <>
        <div style={{ position: 'absolute', inset: 0, background: c1 }} />
        {/* Grid pattern */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.15 }}>
          <defs>
            <pattern id={`grid-${event.id}`} width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke={c2} strokeWidth="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill={`url(#grid-${event.id})`} />
        </svg>
        {/* Big accent block */}
        <div style={{
          position: 'absolute', top: '15%', left: '8%', right: '45%', height: '30%',
          background: c2, opacity: 0.2, mixBlendMode: 'screen',
        }} />
        <div style={{
          position: 'absolute', inset: 0, padding: '10% 9%',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: '#fff',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: metaSize,
            letterSpacing: '0.18em', fontWeight: 500, color: c2,
          }}>
            {event.dateShort}<br/>
            <span style={{ color: '#fff', opacity: 0.7 }}>{event.city.toUpperCase()}</span>
          </div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: titleSize, letterSpacing: '-0.03em', lineHeight: 0.9,
              color: '#fff',
            }}>{event.artist}</div>
            <div style={{
              width: 30 * scale, height: 2, background: c2, margin: `${8 * scale}px 0`,
            }} />
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: metaSize * 0.85,
              letterSpacing: '0.14em', opacity: 0.6, textTransform: 'uppercase',
            }}>{event.venue}</div>
          </div>
        </div>
      </>
    );
  } else if (s === 'comedy') {
    // Comedy — warm cream, single bold line
    inner = (
      <>
        <div style={{ position: 'absolute', inset: 0, background: c1 }} />
        {/* Retro spotlight */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at 50% 70%, rgba(255,255,255,0.35), transparent 60%)',
        }} />
        <div style={{
          position: 'absolute', inset: 0, padding: '10% 9%',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: c2,
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: metaSize,
            letterSpacing: '0.16em', fontWeight: 600,
            textTransform: 'uppercase',
          }}>LIVE · {event.dateShort}</div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: titleSize * 1.1, letterSpacing: '-0.03em', lineHeight: 0.95,
            }}>{event.artist}</div>
            <div style={{
              fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
              fontSize: titleSize * 0.55, marginTop: 4 * scale, opacity: 0.85,
            }}>{event.title}</div>
          </div>
        </div>
      </>
    );
  } else {
    // club — default catch-all
    inner = (
      <>
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(225deg, ${c1} 0%, ${c2} 100%)`,
        }} />
        {/* Disco light */}
        <div style={{
          position: 'absolute', width: '120%', aspectRatio: '1',
          top: '-30%', left: '-10%', borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%)',
        }} />
        <div style={{
          position: 'absolute', inset: 0, padding: '10% 9%',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: '#fff',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: metaSize,
            letterSpacing: '0.16em',
          }}>{event.dateShort} · 22:00</div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: titleSize * 0.9, letterSpacing: '-0.02em', lineHeight: 0.95,
            }}>{event.title}</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: metaSize * 0.9,
              letterSpacing: '0.1em', opacity: 0.85, marginTop: 6 * scale,
            }}>{event.venue.toUpperCase()}</div>
          </div>
        </div>
      </>
    );
  }

  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: '3/4',
      overflow: 'hidden', borderRadius: 12,
      ...style,
    }}>
      {inner}
    </div>
  );
}

// Avatar fallback for organiser/profile
function Avatar({ name, size = 40, bg }) {
  const initial = (name || '?').charAt(0).toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: size / 2,
      background: bg || C.gradient, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--font-display)', fontWeight: 600,
      fontSize: size * 0.42, letterSpacing: '-0.02em',
      flexShrink: 0,
    }}>{initial}</div>
  );
}

// Price formatter — English format: €65 or €65.50
function fmtEur(n, includeCents = true) {
  if (includeCents) {
    return '€' + n.toFixed(2);
  }
  return '€' + Math.round(n);
}

// Icon helper
function Icon({ name, size = 16, color = 'currentColor', strokeWidth = 2 }) {
  const paths = {
    search: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></>,
    heart: <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>,
    'heart-filled': <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" fill="currentColor"/>,
    pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    chevronRight: <polyline points="9 18 15 12 9 6"/>,
    chevronLeft: <polyline points="15 18 9 12 15 6"/>,
    chevronDown: <polyline points="6 9 12 15 18 9"/>,
    close: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    menu: <><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    share: <><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></>,
    user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    ticket: <><path d="M3 7v2a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z"/><line x1="13" y1="5" x2="13" y2="7"/><line x1="13" y1="11" x2="13" y2="13"/><line x1="13" y1="17" x2="13" y2="19"/></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    check: <polyline points="20 6 9 17 4 12"/>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    minus: <line x1="5" y1="12" x2="19" y2="12"/>,
    filter: <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    list: <><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></>,
    download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>,
    compass: <><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></>,
    info: <><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></>,
    star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
    mic: <><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
    verified: <><path d="M9 12l2 2 4-4"/><path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"/></>,
    bell: <><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,
    external: <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></>,
    home: <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    sparkle: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.64 5.64l2.12 2.12M16.24 16.24l2.12 2.12M5.64 18.36l2.12-2.12M16.24 7.76l2.12-2.12"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, display: 'block' }}>
      {paths[name]}
    </svg>
  );
}

// Button
function Button({ variant = 'primary', size = 'md', children, onClick, style, full, icon, iconRight, disabled, as }) {
  const h = size === 'sm' ? 36 : size === 'lg' ? 52 : 44;
  const px = size === 'sm' ? 16 : size === 'lg' ? 28 : 20;
  const fs = size === 'sm' ? 13 : size === 'lg' ? 15.5 : 14;

  const variants = {
    primary: { background: C.gradient, color: '#fff', border: 0 },
    solid: { background: C.brandPurple, color: '#fff', border: 0 },
    secondary: { background: '#fff', color: C.ink, border: `1px solid ${C.line}` },
    ghost: { background: 'transparent', color: C.ink, border: 0 },
    ink: { background: C.ink, color: '#fff', border: 0 },
  };

  const day = as || 'button';
  return (
    <day onClick={onClick} disabled={disabled} style={{
      height: h, padding: `0 ${px}px`,
      borderRadius: h / 2,
      fontSize: fs, fontWeight: 600,
      fontFamily: 'inherit',
      cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.5 : 1,
      width: full ? '100%' : undefined,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: 8, whiteSpace: 'nowrap',
      ...variants[variant],
      ...style,
    }}>
      {icon && <Icon name={icon} size={fs + 2} />}
      {children}
      {iconRight && <Icon name={iconRight} size={fs + 2} />}
    </day>
  );
}

// Badge/pill
function Badge({ variant = 'default', size = 'md', children, style }) {
  const variants = {
    default: { background: C.bgSoft, color: C.ink, border: `1px solid ${C.line}` },
    ink: { background: C.ink, color: '#fff', border: 0 },
    brand: { background: C.brandRed, color: '#fff', border: 0 },
    soft: { background: C.bgTint, color: C.brandRed, border: 0 },
    outline: { background: 'transparent', color: C.ink2, border: `1px solid ${C.line}` },
    success: { background: '#e6f5ea', color: C.success, border: 0 },
    warning: { background: '#fef4e1', color: C.warning, border: 0 },
  };
  const h = size === 'sm' ? 20 : size === 'lg' ? 28 : 24;
  const fs = size === 'sm' ? 10 : size === 'lg' ? 13 : 11.5;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      height: h, padding: `0 ${h * 0.42}px`,
      borderRadius: h / 2,
      fontSize: fs, fontWeight: 600,
      letterSpacing: '0.02em', whiteSpace: 'nowrap',
      ...variants[variant],
      ...style,
    }}>{children}</span>
  );
}

// Mobile status bar — pill overlay
function StatusBar({ dark = false }) {
  const color = dark ? '#fff' : '#000';
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0,
      height: 54, padding: '18px 30px 0',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      zIndex: 50, color, pointerEvents: 'none',
      fontSize: 15, fontWeight: 600, fontFamily: 'var(--font-ui)',
    }}>
      <span>9:41</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M8.5 10 10 8.5a2 2 0 0 1 2.8 0L14 9.7A6.4 6.4 0 0 0 8.5 7a6.4 6.4 0 0 0-5.5 2.7L4.2 8.5a2 2 0 0 1 2.8 0z M1 4.6 2.4 6a8.6 8.6 0 0 1 12.2 0L16 4.6A10.6 10.6 0 0 0 1 4.6z"/></svg>
        <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M13.5 3h-1a.5.5 0 0 0-.5.5V8a.5.5 0 0 0 .5.5h1A.5.5 0 0 0 14 8V3.5a.5.5 0 0 0-.5-.5zM10 1.5h-1a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5zM6.5 0h-1a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5zM3 4.5H2a.5.5 0 0 0-.5.5v3.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5z"/></svg>
        <svg width="24" height="12" viewBox="0 0 24 12" fill="none" stroke="currentColor" strokeWidth="1">
          <rect x="0.5" y="0.5" width="20" height="11" rx="2.5"/>
          <rect x="2" y="2" width="14" height="8" rx="1" fill="currentColor"/>
          <path d="M21.5 4v4" strokeLinecap="round"/>
        </svg>
      </div>
    </div>
  );
}

// Phone frame
function PhoneFrame({ children, width = 390, height = 844, dark = false }) {
  return (
    <div style={{
      width: width + 14, height: height + 14,
      borderRadius: 54, padding: 7,
      background: '#0d0a12',
      boxShadow: '0 2px 4px rgba(0,0,0,0.15), 0 40px 80px -20px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.2)',
      flexShrink: 0,
    }}>
      <div style={{
        width, height,
        borderRadius: 47, overflow: 'hidden',
        position: 'relative',
        background: dark ? '#0d0a12' : '#fff',
      }}>
        <StatusBar dark={dark} />
        {/* Dynamic island */}
        <div style={{
          position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
          width: 118, height: 36, borderRadius: 99,
          background: '#000', zIndex: 100,
        }} />
        <div style={{
          width: '100%', height: '100%', overflow: 'auto',
          scrollbarWidth: 'none',
        }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// Desktop browser chrome
function BrowserChrome({ children, host = 'desipass.com', width, maxHeight = 1100 }) {
  return (
    <div style={{
      width, background: '#fff',
      borderRadius: 12, overflow: 'hidden',
      boxShadow: '0 30px 80px -20px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1)',
    }}>
      <div style={{
        height: 38, padding: '0 14px',
        display: 'flex', alignItems: 'center', gap: 12,
        background: '#f4f1f6', borderBottom: `1px solid ${C.line}`,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 11, height: 11, borderRadius: 99, background: '#ff5f56' }}/>
          <div style={{ width: 11, height: 11, borderRadius: 99, background: '#ffbd2e' }}/>
          <div style={{ width: 11, height: 11, borderRadius: 99, background: '#27c93f' }}/>
        </div>
        <div style={{
          flex: 1, height: 24, borderRadius: 6,
          background: '#fff', border: `1px solid ${C.line}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 11.5, color: C.ink3, fontFamily: 'var(--font-ui)', letterSpacing: '-0.01em',
          maxWidth: 420, margin: '0 auto',
        }}>🔒 {host}</div>
        <div style={{ width: 40 }}/>
      </div>
      <div style={{ maxHeight, overflowY: 'auto', overflowX: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

window.DesiPoster = DesiPoster;
window.Avatar = Avatar;
window.fmtEur = fmtEur;
window.Icon = Icon;
window.Button = Button;
window.Badge = Badge;
window.StatusBar = StatusBar;
window.PhoneFrame = PhoneFrame;
window.BrowserChrome = BrowserChrome;