/* Kennedy Grace — Home hub screen (link-in-bio) */

const { Avatar, Badge, StatBlock, SocialLink, Button, Card } = window.KennedyGraceDesignSystem_5322af;

/* Banner marquee photos. Add more: drop tile-19.png, tile-20.png… in
   assets/banner/ and bump the count below. */
const BANNER_TILES = Array.from({ length: 18 }, (_, i) =>
  `assets/banner/tile-${String(i + 1).padStart(2, '0')}.png`);

function HubScreen({ onSeeVideos }) {
  const { PhotoTile, SectionTitle } = window;
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {/* Cover — auto-scrolling photo marquee cropped from Kennedy's CoverStar feed */}
      <div style={{ height: 138, position: 'relative', overflow: 'hidden', backgroundColor: '#fff' }}>
        <div className="banner-track">
          {BANNER_TILES.concat(BANNER_TILES).map((src, i) => (
            <img key={i} src={src} alt="" aria-hidden="true" className="banner-pic" />
          ))}
        </div>
        {/* soft scrim: darken top for stickers, warm fade at bottom where the avatar sits */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background:
          'linear-gradient(180deg, rgba(42,37,64,0.20), rgba(42,37,64,0) 34%), radial-gradient(135% 100% at 50% 132%, rgba(255,246,251,0.62), transparent 60%)' }} />
        <span style={{ position: 'absolute', top: 12, left: 16, fontSize: '1.4rem', filter: 'drop-shadow(0 1px 3px rgba(0,0,0,.4))' }} aria-hidden="true">✨</span>
        <span style={{ position: 'absolute', top: 11, right: 16, fontSize: '1.2rem', filter: 'drop-shadow(0 1px 3px rgba(0,0,0,.4))' }} aria-hidden="true">🎀</span>
      </div>

      <div style={{ padding: '0 18px 24px', marginTop: -76, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <Avatar src="assets/kennedy-avatar.png" alt="Kennedy Grace" size={156} badge="verified" />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
          <h1 style={{ margin: 0, font: 'var(--text-h1)', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>Kennedy Grace</h1>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
          <span style={{ color: 'var(--text-muted)', font: 'var(--text-body-md)', fontWeight: 'var(--fw-bold)' }}>@slaykennedy952</span>
          <Badge tone="verified" shape="pill">Verified</Badge>
        </div>

        <p style={{ margin: '14px 0 4px', font: 'var(--text-body-md)', color: 'var(--text-body)', lineHeight: 1.5, maxWidth: 320 }}>
          Hi! 🎀 I'm Kennedy, 10 yrs old ☀️ I love polar bears 🐻‍❄️, my family 📸, my friends 🎤 and my dogs Cooper & Bentlee 🐶 — peace out! ✌️
        </p>

        {/* Stats */}
        <div style={{ display: 'flex', justifyContent: 'space-around', width: '100%', maxWidth: 340, margin: '18px 0 6px' }}>
          <StatBlock value="443" label="Following" />
          <StatBlock value="33,604" label="Fans" color="var(--pink-500)" />
          <StatBlock value="487K" label="Starpower" />
        </div>
      </div>

      {/* Giveaway CTA */}
      <div style={{ padding: '0 18px 6px' }}>
        <a href="/coverstar-giveaway" style={{ textDecoration: 'none', display: 'block' }}>
          <Button variant="primary" block leadingEmoji="🎁" trailingEmoji="✨">Enter my CoverStar giveaway!</Button>
        </a>
      </div>

      <div style={{ padding: '14px 18px 8px' }}>
        <SectionTitle accent="✨">Find me everywhere</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <SocialLink platform="coverstar" handle="@slaykennedy952" href="https://coverstar.app.link/ATz3w9omV3b" target="_blank" rel="noopener" />
          <SocialLink platform="instagram" handle="@thekennedygraceofficial" href="https://www.instagram.com/thekennedygraceofficial/" target="_blank" rel="noopener" />
          <SocialLink platform="zigazoo" handle="tap to follow ✨" href="https://app.zigazoo.com/user/IJHuwYAk6dZS1lp9j2GQsv5XkCI2" target="_blank" rel="noopener" />
          <SocialLink platform="tiktok" handle="coming soon" comingSoon />
        </div>
      </div>

      <div style={{ padding: '20px 18px 8px' }}>
        <SectionTitle accent="🎬">Latest vids</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <PhotoTile emoji="🏖️" grad="var(--grad-mint-sky)" ratio="3 / 4" badge={<Badge tone="vlog">Vlog</Badge>} views="10.6K" />
          <PhotoTile emoji="🛍️" grad="var(--grad-cotton)" ratio="3 / 4" badge={<Badge tone="haul">Haul</Badge>} views="17.4K" />
        </div>
        <Button variant="soft" block style={{ marginTop: 12 }} onClick={onSeeVideos} trailingEmoji="→">See all my videos</Button>
      </div>

      <div style={{ padding: '18px', textAlign: 'center' }}>
        <span style={{ font: 'var(--font-script)', fontSize: '1.7rem', color: 'var(--pink-500)' }}>peace out! ✌️</span>
      </div>
    </div>
  );
}

window.HubScreen = HubScreen;