// shared.jsx — animated logo + shared data used by both variants

// AnimatedLogo — recreated from uploads/logo-online-letters-animated.svg
// with the missing @keyframes provided in index.html.
// Props:
//   width      — render width (height auto-scales from 980x220 viewBox)
//   showMirror — whether to show the mirrored "online" reflection
//   color      — override the brand pink (defaults to #ff2d92)
//   wordmarkColor — override the white "kantahan" color
//   showBadge  — whether to render the spinning .app badge
function AnimatedLogo({ width = 360, showMirror = true, color = '#ff2d92', wordmarkColor = '#f5ecff', showBadge = true, badgeBg }) {
  const letters = [
    { ch: 'o', x: 20,  origin: 39,  anim: 'vu-a 1.1s ease-in-out infinite' },
    { ch: 'n', x: 61,  origin: 81,  anim: 'vu-b 0.9s ease-in-out infinite 0.15s' },
    { ch: 'l', x: 104, origin: 114, anim: 'vu-c 1.3s ease-in-out infinite 0.30s' },
    { ch: 'i', x: 127, origin: 134, anim: 'vu-d 1.0s ease-in-out infinite 0.05s' },
    { ch: 'n', x: 144, origin: 164, anim: 'vu-e 1.2s ease-in-out infinite 0.40s' },
    { ch: 'e', x: 187, origin: 205, anim: 'vu-f 0.8s ease-in-out infinite 0.20s' },
  ];

  return (
    <svg viewBox="0 0 980 220" width={width} role="img" aria-label="online kantahan .app" style={{ overflow: 'visible' }}>
      <defs>
        <path id="kmAppCircle" d="M 65 13 a 52 52 0 1 1 -0.01 0" />
      </defs>

      {/* online — VU animated */}
      <g fontFamily="'Big Shoulders Display', system-ui, sans-serif" fontWeight="800" fontSize="63" fill={color}>
        {letters.map((l, i) => (
          <text
            key={i}
            x={l.x}
            y={145}
            style={{ transformOrigin: `${l.origin}px 145px`, animation: l.anim }}
          >
            {l.ch}
          </text>
        ))}
      </g>

      {/* mirrored "online" reflection */}
      {showMirror && (
        <g transform="translate(0, 290) scale(1,-1)" opacity="0.25" fontFamily="'Big Shoulders Display', system-ui, sans-serif" fontWeight="800" fontSize="63" fill={color}>
          {letters.map((l, i) => (
            <text
              key={i}
              x={l.x}
              y={145}
              style={{ transformOrigin: `${l.origin}px 145px`, animation: l.anim }}
            >
              {l.ch}
            </text>
          ))}
        </g>
      )}

      {/* kantahan wordmark */}
      <text x="220" y="190" fontFamily="'Big Shoulders Display', system-ui, sans-serif" fontWeight="800" fontStretch="125%" fontSize="130" letterSpacing="-1.5" fill={wordmarkColor}>kantahan</text>

      {/* .app spinning badge */}
      {showBadge && (
        <g transform="translate(768, 15)">
          <g style={{ transformOrigin: '65px 65px', animation: 'badge-spin 18s linear infinite' }}>
            <circle cx="65" cy="65" r="62" fill={badgeBg || color} />
            <circle cx="65" cy="65" r="57" fill="none" stroke="rgba(10,6,18,0.4)" strokeWidth="1" strokeDasharray="2 3" />
            <text fontFamily="'JetBrains Mono', ui-monospace, monospace" fontWeight="700" fontSize="9" letterSpacing="1.8" fill="rgba(10,6,18,0.85)">
              <textPath href="#kmAppCircle" startOffset="0">
                ★  OPEN MIC  ★  SING NOW  ★  EST · 1976  ★  B-SIDE  ★
              </textPath>
            </text>
          </g>
          {/* .app text — does NOT spin */}
          <text x="65" y="68" fontFamily="'JetBrains Mono', ui-monospace, monospace" fontWeight="700" fontSize="28" letterSpacing="0.5" fill="#0a0612" textAnchor="middle" dominantBaseline="middle">.app</text>
        </g>
      )}
    </svg>
  );
}

// A tiny inline "online" mark (used inline within copy)
function OnlineMark({ size = 24, color = '#ff2d92' }) {
  return (
    <svg viewBox="0 0 220 90" width={size * 220 / 90} height={size} style={{ verticalAlign: 'middle' }}>
      <g fontFamily="'Big Shoulders Display', system-ui, sans-serif" fontWeight="800" fontSize="63" fill={color}>
        <text x="20"  y="70" style={{ transformOrigin: '39px 70px',  animation: 'vu-a 1.1s ease-in-out infinite' }}>o</text>
        <text x="61"  y="70" style={{ transformOrigin: '81px 70px',  animation: 'vu-b 0.9s ease-in-out infinite 0.15s' }}>n</text>
        <text x="104" y="70" style={{ transformOrigin: '114px 70px', animation: 'vu-c 1.3s ease-in-out infinite 0.30s' }}>l</text>
        <text x="127" y="70" style={{ transformOrigin: '134px 70px', animation: 'vu-d 1.0s ease-in-out infinite 0.05s' }}>i</text>
        <text x="144" y="70" style={{ transformOrigin: '164px 70px', animation: 'vu-e 1.2s ease-in-out infinite 0.40s' }}>n</text>
        <text x="187" y="70" style={{ transformOrigin: '205px 70px', animation: 'vu-f 0.8s ease-in-out infinite 0.20s' }}>e</text>
      </g>
    </svg>
  );
}

// Live VU bars — used as decorative element
function VUBars({ count = 7, color = '#ff2d92', height = 60, width = 4, gap = 6 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'flex-end', gap, height }}>
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          style={{
            width,
            background: color,
            borderRadius: 1,
            animation: `wave-bar ${0.6 + (i % 4) * 0.18}s ease-in-out ${i * 0.07}s infinite alternate`,
          }}
        />
      ))}
    </div>
  );
}

// ── Site-wide constants — change once, updates everywhere ──
const SITE = {
  display:     'https://online.kantahan.app',
  request:     'https://online.kantahan.app/request',
  dj:          'https://online.kantahan.app/dj',
  displayPath: 'online.kantahan.app',
  email:       'hello@kantahan.app',
  mailto:      'mailto:hello@kantahan.app',
};

// Shared feature data
const FEATURES = [
  {
    title: 'Display screen',
    sub: 'Cast the karaoke to any TV',
    body: 'A QR code waits on screen. Guests scan, request, sing. No app installs, no logins.',
    monoTag: 'PROJECTOR / TV / LAPTOP',
  },
  {
    title: 'Request page',
    sub: 'Phones become the songbook',
    body: 'Search a huge YouTube karaoke library or paste any YouTube URL. Drop your name and you’re in line.',
    monoTag: 'WORKS ON ANY PHONE',
  },
  {
    title: 'DJ console',
    sub: 'For the one steering the night',
    body: 'Approve requests, drag the queue, sort by singer rotation, slap up a "Get a drink!" banner.',
    monoTag: 'PAID · ADVANCED MODE',
  },
  {
    title: 'Massive songbook',
    sub: 'YouTube karaoke channels, curated',
    body: 'Stingray, Sing King, KaraFun, Karaoke Version, Filipino classics, Tagalog hits — sortable A→Z.',
    monoTag: '50,000+ TRACKS · GROWING',
  },
  {
    title: 'Singer rotation',
    sub: 'Nobody hogs the mic',
    body: 'Auto-rotate so everyone gets a turn. Or don’t — it’s your party.',
    monoTag: 'TOGGLE ON/OFF',
  },
  {
    title: 'Display messages',
    sub: 'Talk to the room',
    body: '"Get a drink!" · "Taking a short break" · "Sign up at the bar" — banners, scrolls, custom text.',
    monoTag: 'BOTTOM · CENTER · TOP',
  },
];

const PRICING = {
  free: {
    name: 'Free',
    sub: 'For the home party host',
    price: '$0',
    blurb: 'Plug in a laptop, point a TV at it, hand out the QR. Forever.',
    cta: 'Start free',
    href: SITE.display,
    features: [
      { t: true, label: 'Unlimited songs (for now)' },
      { t: true, label: 'Display screen with QR code' },
      { t: true, label: 'Request page for guests' },
      { t: true, label: 'YouTube karaoke library' },
      { t: true, label: 'Custom YouTube URLs' },
      { t: false, label: 'Custom QR / vanity URL' },
      { t: false, label: 'DJ admin console' },
      { t: false, label: 'Multiple rooms' },
      { t: false, label: 'Full-screen karaoke (hide banner)' },
      { t: false, label: '"Call for service" button' },
    ],
  },
  paid: {
    name: 'Pro',
    sub: 'For venues, bars, serious hosts',
    price: 'TBD',
    blurb: 'Run karaoke nights like you mean it. More polish, more control, more rooms.',
    cta: 'Get notified',
    href: '#waitlist',
    features: [
      { t: true, label: 'Everything in Free' },
      { t: true, label: 'Custom URL for your QR codes' },
      { t: true, label: 'Multiple rooms (yours.kantahan.app)' },
      { t: true, label: 'Full DJ admin console' },
      { t: true, label: '"Call for service" button on requests' },
      { t: true, label: 'Hide queue / banner — full-screen karaoke' },
      { t: true, label: 'Hide the bottom banner overlay' },
      { t: true, label: 'Priority feature requests' },
      { t: true, label: 'More to come …' },
    ],
  },
};

const FAQS = [
  {
    q: 'Do I need to install anything?',
    a: `Nope. Open ${SITE.displayPath} on whatever computer is hooked to the TV. Guests scan the QR with their phone. That is it.`,
  },
  {
    q: 'Where do the songs come from?',
    a: 'YouTube. We pull from curated karaoke channels — Stingray, Sing King, KaraFun, Karaoke Version, plus great Tagalog/Filipino karaoke channels — and you can paste any YouTube URL yourself.',
  },
  {
    q: 'Is it really free?',
    a: 'Free version is genuinely free, unlimited songs (for now). Pro adds custom URLs, multiple rooms, the DJ console, full-screen karaoke mode, and a "call for service" button — built for bars and venues.',
  },
  {
    q: 'What does "kantahan" mean?',
    a: 'It is a Filipino word. Roughly: "a singing session," or "to sing for / with someone." It is what your tito calls the night, with feeling.',
  },
  {
    q: 'Does it work offline?',
    a: 'You need internet for YouTube. Once a song is loaded it streams from YouTube — same as opening youtube.com.',
  },
  {
    q: 'Can I run this at my bar?',
    a: 'Yes — Pro is built for it. Custom URL, multiple rooms, full-screen mode, DJ console. Get in touch.',
  },
];

// ── Mock App Screen Components ───────────────────────────────────────────
// Inline renderings of the real Kantahan app screens.
// Used in feature/how-it-works sections instead of static PNG screenshots.

const MOCK_SONGS = [
  { title: 'My Way',              by: 'Sinatra',        singer: 'Tito Jun'     },
  { title: 'Ikaw',                by: 'Yeng C.',        singer: 'Ate Claire'   },
  { title: 'Ang Huling El Bimbo', by: 'Eraserheads',    singer: 'Kuya Ben'     },
  { title: 'Pano',                by: 'Zack Tabudlo',   singer: 'Nica'         },
  { title: 'Probinsyana',         by: 'Basing',         singer: 'Tita Marites' },
  { title: 'Kundiman',            by: 'Spongecola',     singer: 'Rey'          },
];

function MockDisplay() {
  const mono = "'JetBrains Mono', ui-monospace, monospace";
  const disp = "'Big Shoulders Display', system-ui, sans-serif";
  const fg = '#f5ecff', dim = 'rgba(245,236,255,0.45)', pink = '#ff2d92', hr = 'rgba(245,236,255,0.1)';
  return (
    <div style={{ width:'100%', height:'100%', background:'#0a0612', color:fg, fontFamily:mono, display:'flex', flexDirection:'column', overflow:'hidden' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'5px 10px', borderBottom:`1px solid ${hr}` }}>
        <span style={{ fontFamily:disp, fontWeight:800, fontSize:12 }}>kantahan<span style={{ color:pink }}>.app</span></span>
        <span style={{ fontSize:8, letterSpacing:'0.15em', color:'#4ade80' }}>● LIVE</span>
      </div>
      <div style={{ flex:1, display:'flex', overflow:'hidden' }}>
        <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:6, padding:'6px', borderRight:`1px solid ${hr}` }}>
          <svg viewBox="0 0 40 40" width="52" height="52" style={{ background:'#fff', borderRadius:2, padding:3 }}>
            <rect x="0" y="0" width="13" height="13" fill="#111" rx="1"/><rect x="2" y="2" width="9" height="9" fill="#fff"/><rect x="4" y="4" width="5" height="5" fill="#111"/>
            <rect x="25" y="0" width="13" height="13" fill="#111" rx="1"/><rect x="27" y="2" width="9" height="9" fill="#fff"/><rect x="29" y="4" width="5" height="5" fill="#111"/>
            <rect x="0" y="25" width="13" height="13" fill="#111" rx="1"/><rect x="2" y="27" width="9" height="9" fill="#fff"/><rect x="4" y="29" width="5" height="5" fill="#111"/>
            <rect x="15" y="0" width="3" height="3" fill="#111"/><rect x="20" y="0" width="3" height="3" fill="#111"/>
            <rect x="15" y="5" width="3" height="3" fill="#111"/><rect x="21" y="5" width="3" height="3" fill="#111"/>
            <rect x="16" y="15" width="3" height="3" fill="#111"/><rect x="21" y="15" width="3" height="3" fill="#111"/>
            <rect x="27" y="15" width="3" height="3" fill="#111"/><rect x="33" y="15" width="3" height="3" fill="#111"/>
            <rect x="16" y="20" width="3" height="3" fill="#111"/><rect x="25" y="20" width="3" height="3" fill="#111"/><rect x="33" y="20" width="3" height="3" fill="#111"/>
            <rect x="16" y="25" width="3" height="3" fill="#111"/><rect x="22" y="25" width="3" height="3" fill="#111"/><rect x="29" y="25" width="3" height="3" fill="#111"/>
            <rect x="16" y="30" width="3" height="3" fill="#111"/><rect x="22" y="30" width="3" height="3" fill="#111"/><rect x="28" y="30" width="3" height="3" fill="#111"/><rect x="34" y="30" width="3" height="3" fill="#111"/>
            <rect x="16" y="35" width="3" height="3" fill="#111"/><rect x="23" y="35" width="3" height="3" fill="#111"/><rect x="30" y="35" width="3" height="3" fill="#111"/>
          </svg>
          <div style={{ fontSize:7, letterSpacing:'0.12em', color:dim, textAlign:'center', lineHeight:1.3 }}>SCAN TO REQUEST</div>
        </div>
        <div style={{ width:110, padding:'8px 7px', display:'flex', flexDirection:'column', gap:3 }}>
          <div style={{ fontSize:7, letterSpacing:'0.2em', color:pink }}>NOW PLAYING</div>
          <div style={{ fontFamily:disp, fontWeight:700, fontSize:14, lineHeight:1.1 }}>My Way</div>
          <div style={{ fontSize:8, color:dim }}>Tito Jun</div>
          <div style={{ display:'flex', gap:2, alignItems:'flex-end', height:12 }}>
            {[6,10,5,12,8,6,10].map((h,i) => (
              <div key={i} style={{ width:3, height:h, background:pink, borderRadius:1, animation:`wave-bar ${0.6+(i%4)*0.18}s ease-in-out ${i*0.07}s infinite alternate` }} />
            ))}
          </div>
          <div style={{ height:1, background:hr, margin:'2px 0' }} />
          <div style={{ fontSize:7, letterSpacing:'0.2em', color:dim, marginBottom:2 }}>UP NEXT</div>
          {MOCK_SONGS.slice(1,4).map((s,i) => (
            <div key={i} style={{ display:'flex', gap:4, padding:'2px 0', borderBottom:'1px solid rgba(245,236,255,0.05)' }}>
              <span style={{ fontSize:7, color:pink, minWidth:8 }}>{i+1}</span>
              <div style={{ overflow:'hidden' }}>
                <div style={{ fontSize:8, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{s.title}</div>
                <div style={{ fontSize:7, color:dim }}>{s.singer}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MockRequest() {
  const mono = "'JetBrains Mono', ui-monospace, monospace";
  const disp = "'Big Shoulders Display', system-ui, sans-serif";
  const fg = '#f5ecff', dim = 'rgba(245,236,255,0.45)', pink = '#ff2d92', hr = 'rgba(245,236,255,0.1)';
  return (
    <div style={{ width:'100%', height:'100%', background:'#110d22', color:fg, fontFamily:mono, display:'flex', flexDirection:'column', overflow:'hidden' }}>
      <div style={{ padding:'8px 8px 4px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:6, background:'rgba(245,236,255,0.07)', border:`1px solid ${hr}`, borderRadius:4, padding:'5px 8px' }}>
          <span style={{ fontSize:9, color:dim }}>🔍</span>
          <span style={{ fontSize:9, color:dim }}>Search songs…</span>
        </div>
      </div>
      <div style={{ flex:1, overflow:'hidden', padding:'0 8px' }}>
        {MOCK_SONGS.slice(0,4).map((s,i) => (
          <div key={i} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'5px 0', borderBottom:`1px solid ${hr}` }}>
            <div>
              <div style={{ fontFamily:disp, fontWeight:700, fontSize:11, lineHeight:1 }}>{s.title}</div>
              <div style={{ fontSize:8, color:dim }}>{s.by}</div>
            </div>
            <div style={{ background:pink, color:'#0a0612', fontWeight:700, fontSize:8, padding:'3px 7px', borderRadius:2 }}>+</div>
          </div>
        ))}
      </div>
      <div style={{ padding:'6px 8px', borderTop:`1px solid ${hr}` }}>
        <div style={{ background:'rgba(245,236,255,0.06)', border:`1px solid ${hr}`, borderRadius:3, padding:'5px 8px', fontSize:9, color:dim, marginBottom:5 }}>Your name…</div>
        <div style={{ background:pink, color:'#0a0612', fontFamily:disp, fontWeight:800, fontStretch:'125%', fontSize:12, textAlign:'center', padding:'6px', borderRadius:3 }}>REQUEST →</div>
      </div>
    </div>
  );
}

function MockSongbook() {
  const mono = "'JetBrains Mono', ui-monospace, monospace";
  const disp = "'Big Shoulders Display', system-ui, sans-serif";
  const fg = '#f5ecff', dim = 'rgba(245,236,255,0.45)', pink = '#ff2d92', hr = 'rgba(245,236,255,0.1)';
  const songs = [
    { letter:'A', title:'Ako ay Pilipino',        ch:'Klasiks PH'      },
    {             title:'Ang Huling El Bimbo',     ch:'Eraserheads'     },
    {             title:'Atin Cu Pung Singsing',   ch:'Klasiks PH'      },
    { letter:'B', title:'Bakit Ba Ikaw',           ch:'December Avenue' },
    {             title:'Beautiful Girls',          ch:'Sean Kingston'   },
    { letter:'I', title:'Ikaw',                    ch:'Yeng C.'         },
    { letter:'M', title:'My Way',                  ch:'Sinatra'         },
  ];
  const active = new Set(['A','B','I','M']);
  return (
    <div style={{ width:'100%', height:'100%', background:'#110d22', color:fg, fontFamily:mono, display:'flex', flexDirection:'column', overflow:'hidden' }}>
      <div style={{ display:'flex', gap:1, padding:'5px 8px', borderBottom:`1px solid ${hr}`, background:'rgba(245,236,255,0.04)', overflowX:'hidden' }}>
        {'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(l => (
          <span key={l} style={{ fontSize:7, color:active.has(l)?pink:dim, fontWeight:active.has(l)?700:400, minWidth:8, textAlign:'center' }}>{l}</span>
        ))}
      </div>
      <div style={{ flex:1, overflow:'hidden' }}>
        {songs.map((s,i) => (
          <div key={i}>
            {s.letter && (
              <div style={{ padding:'3px 8px 1px', background:'rgba(255,45,146,0.08)', borderBottom:'1px solid rgba(255,45,146,0.2)', fontFamily:disp, fontWeight:800, fontSize:10, color:pink }}>{s.letter}</div>
            )}
            <div style={{ display:'flex', alignItems:'center', padding:'4px 8px', borderBottom:`1px solid ${hr}` }}>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:9 }}>{s.title}</div>
                <div style={{ fontSize:7, color:dim }}>{s.ch}</div>
              </div>
              <span style={{ fontSize:8, color:dim }}>▸</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MockDJ() {
  const mono = "'JetBrains Mono', ui-monospace, monospace";
  const disp = "'Big Shoulders Display', system-ui, sans-serif";
  const fg = '#f5ecff', dim = 'rgba(245,236,255,0.45)', pink = '#ff2d92', hr = 'rgba(245,236,255,0.1)';
  return (
    <div style={{ width:'100%', height:'100%', background:'#0e0a1e', color:fg, fontFamily:mono, display:'flex', flexDirection:'column', overflow:'hidden' }}>
      <div style={{ padding:'5px 8px', borderBottom:`1px solid ${hr}`, display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <span style={{ fontFamily:disp, fontWeight:800, fontSize:11 }}>DJ Console</span>
        <span style={{ fontSize:7, letterSpacing:'0.15em', color:'#4ade80' }}>● CONNECTED</span>
      </div>
      <div style={{ flex:1, display:'flex', overflow:'hidden' }}>
        <div style={{ flex:1.2, padding:'8px', borderRight:`1px solid ${hr}`, display:'flex', flexDirection:'column', gap:4 }}>
          <div style={{ fontSize:7, letterSpacing:'0.2em', color:pink }}>NOW PLAYING</div>
          <div style={{ fontFamily:disp, fontWeight:800, fontSize:15, lineHeight:1 }}>My Way</div>
          <div style={{ fontSize:8, color:dim, marginBottom:2 }}>Tito Jun</div>
          <div style={{ display:'flex', gap:2, alignItems:'flex-end', height:12 }}>
            {[6,10,5,12,8,6,10,7].map((h,i) => (
              <div key={i} style={{ width:3, height:h, background:pink, borderRadius:1, animation:`wave-bar ${0.6+(i%4)*0.18}s ease-in-out ${i*0.07}s infinite alternate` }} />
            ))}
          </div>
          <div style={{ display:'flex', gap:5, alignItems:'center', marginTop:4 }}>
            <button style={{ background:'transparent', border:`1px solid ${hr}`, color:fg, fontSize:9, padding:'3px 6px', borderRadius:2, cursor:'pointer' }}>⏮</button>
            <button style={{ background:pink, border:'none', color:'#0a0612', fontSize:9, padding:'4px 8px', borderRadius:2, cursor:'pointer', fontWeight:700 }}>▶</button>
            <button style={{ background:'transparent', border:`1px solid ${hr}`, color:fg, fontSize:9, padding:'3px 6px', borderRadius:2, cursor:'pointer' }}>⏭</button>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:5 }}>
            <span style={{ fontSize:7, color:dim }}>VOL</span>
            <div style={{ flex:1, height:3, background:hr, borderRadius:2 }}>
              <div style={{ width:'70%', height:'100%', background:pink, borderRadius:2 }} />
            </div>
          </div>
        </div>
        <div style={{ flex:1, padding:'8px 6px', display:'flex', flexDirection:'column', overflow:'hidden' }}>
          <div style={{ fontSize:7, letterSpacing:'0.2em', color:dim, marginBottom:4 }}>QUEUE</div>
          {MOCK_SONGS.slice(1,4).map((s,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:4, padding:'3px 0', borderBottom:`1px solid ${hr}` }}>
              <span style={{ fontSize:7, color:pink, minWidth:8 }}>{i+1}</span>
              <div style={{ flex:1, overflow:'hidden' }}>
                <div style={{ fontSize:8, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{s.title}</div>
                <div style={{ fontSize:7, color:dim }}>{s.singer}</div>
              </div>
              <span style={{ fontSize:6, color:'#4ade80', background:'rgba(74,222,128,0.1)', padding:'1px 4px', borderRadius:2 }}>✓</span>
            </div>
          ))}
          <div style={{ marginTop:4, padding:'4px 5px', background:'rgba(255,45,146,0.08)', border:'1px solid rgba(255,45,146,0.2)', borderRadius:3 }}>
            <div style={{ fontSize:7, color:pink, marginBottom:2 }}>PENDING</div>
            <div style={{ fontSize:8, marginBottom:3 }}>{MOCK_SONGS[4].title}</div>
            <div style={{ display:'flex', gap:3 }}>
              <button style={{ flex:1, background:'#4ade80', border:'none', color:'#0a0612', fontSize:6, fontWeight:700, padding:'2px', borderRadius:2, cursor:'pointer' }}>APPROVE</button>
              <button style={{ background:'transparent', border:`1px solid ${hr}`, color:dim, fontSize:6, padding:'2px 4px', borderRadius:2, cursor:'pointer' }}>✕</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Expose to other scripts
Object.assign(window, { AnimatedLogo, OnlineMark, VUBars, FEATURES, PRICING, FAQS, SITE, MockDisplay, MockRequest, MockSongbook, MockDJ });