/* Kennedy Grace — Videos "coming soon" screen.
   Shown when the Videos tab / "See all my videos" link is tapped, until her
   own video grid is ready. To switch the real grid back on, see index.html. */

function ComingSoonScreen({ onBack }) {
  const { Button, Card } = window.KennedyGraceDesignSystem_5322af;
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', textAlign: 'center', padding: '32px 20px 40px', gap: 4,
    }}>
      {/* floating sticker cluster */}
      <div style={{ position: 'relative', marginBottom: 6 }}>
        <span style={{ fontSize: '3.4rem', filter: 'drop-shadow(0 4px 10px rgba(255,77,157,.28))' }} aria-hidden="true">🎬</span>
        <span style={{ position: 'absolute', top: -6, right: -22, fontSize: '1.3rem' }} aria-hidden="true">✨</span>
        <span style={{ position: 'absolute', bottom: -2, left: -22, fontSize: '1.1rem' }} aria-hidden="true">🎀</span>
      </div>

      <Card tone="candy" pad="lg" floating style={{ width: '100%', maxWidth: 360, marginTop: 4 }}>
        <h2 style={{ margin: '0 0 8px', font: 'var(--text-h1)', fontFamily: 'var(--font-display)', color: '#fff' }}>Videos coming soon!</h2>
        <p style={{ margin: 0, color: '#fff', font: 'var(--text-body-md)', opacity: 0.96, lineHeight: 1.5 }}>
          I'm bringing ALL my vlogs, hauls &amp; GRWMs right here super soon ✨ Don't go anywhere!! 🎀
        </p>
      </Card>

      <p style={{ margin: '22px 0 12px', font: 'var(--text-body-md)', color: 'var(--text-muted)' }}>
        For now, catch all my videos on CoverStar 👇
      </p>

      <a href="https://coverstar.app.link/ATz3w9omV3b" target="_blank" rel="noopener"
         style={{ textDecoration: 'none', display: 'block', width: '100%', maxWidth: 360 }}>
        <Button variant="primary" block leadingEmoji="⭐" trailingEmoji="→">Watch me on CoverStar</Button>
      </a>

      <Button variant="soft" block style={{ maxWidth: 360, marginTop: 10 }} onClick={onBack} leadingEmoji="🏠">Back to home</Button>
    </div>
  );
}

window.ComingSoonScreen = ComingSoonScreen;