/* global React */

function Hero({ headlineStyle }) {
  const headlines = {
    playful: <>Make your stream feel <span className="grad">alive</span> in minutes.</>,
    direct: <>Stream overlays that <span className="grad">just work</span> in any streaming software.</>,
    creator: <>Overlays, gifts, and chat games for <span className="grad">creators in a hurry</span>.</>,
  };

  return (
    <section className="hero" id="top">
      <div>
        <div className="hero-eyebrow">
          <span className="dot"></span>
          Live overlay app for creators
        </div>
        <h1>{headlines[headlineStyle] || headlines.playful}</h1>
        <p className="lede">
          Bubbly is a local-first dashboard for stream overlays, chat-powered mini-games,
          gift widgets, goals, and music tools, built for fast setup and playful customization.
        </p>
        <div className="hero-ctas">
          <button className="btn btn-primary btn-lg">
            <WindowsIcon /> Get Bubbly for Windows
          </button>
          <div style={{display: 'flex', flexDirection: 'column', gap: 8, marginTop: 10}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap'}}>
              <span style={{fontSize: 12, fontWeight: 800, color: 'var(--ink-soft)'}}>v0.5.1 Beta</span>
              <span style={{fontSize: 12, fontWeight: 800, color: 'var(--ink-soft)'}}>No account required</span>
            </div>
            <span style={{fontSize: 11, fontWeight: 700, color: 'rgba(90,74,131,0.55)'}}>Windows 10 / 11 · 64-bit</span>
          </div>
        </div>
        <div className="hero-meta">
          <span className="chip">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
            Local-first
          </span>
          <span className="chip">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
            Works in any streaming software
          </span>
          <span className="chip">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
            TikTok first overlays
          </span>
        </div>
      </div>

      <div className="preview-wrap">
        <img
          className="dashboard-shot"
          src="assets/bubbly-app-example.png"
          alt="Bubbly dashboard preview"
        />
        <div className="float-gift">
          <img className="gift-art" src="assets/heart-me.webp" alt="Heart Me" />
          <div>
            <div className="who">@maisie sent</div>
            <div className="what">Heart Me x1</div>
          </div>
        </div>
        <div className="float-boss">
          <img className="gift-art" src="assets/galaxy.webp" alt="Galaxy" />
          <div>
            <div className="who">@okayhammy sent</div>
            <div className="what">Galaxy x1</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DashboardMock() {
  return (
    <div className="dashboard">
      <div className="dashboard-top">
        <div className="dots"><span></span><span></span><span></span></div>
        <div className="title">Bubbly Dashboard</div>
        <div className="pill"><span className="dot"></span> Live</div>
      </div>
      <div className="dashboard-body">
        <div className="sidebar">
          <div className="sidebar-section">Streams</div>
          <div className="nav-item active"><span className="icon">◉</span> Dashboard</div>
          <div className="nav-item"><span className="icon">✦</span> Overlays</div>
          <div className="nav-item"><span className="icon">♥</span> Gifts</div>
          <div className="nav-item"><span className="icon">◎</span> Goals</div>
          <div className="sidebar-section" style={{marginTop: 10}}>Engines</div>
          <div className="nav-item"><span className="icon">⚔</span> Boss Battle</div>
          <div className="nav-item"><span className="icon">♚</span> Chat Battle</div>
          <div className="nav-item"><span className="icon">♪</span> Spotify</div>
        </div>
        <div className="dashboard-main">
          <div className="dashboard-h">
            <div>
              <h3>Tonight's stream</h3>
              <p>3 overlays running · TikTok connected</p>
            </div>
            <button className="btn btn-primary btn-sm">Go Live</button>
          </div>
          <div className="overlay-grid">
            <div className="overlay-card">
              <div className="title-row">
                <span className="label">Likes goal</span>
                <span className="status">● Live</span>
              </div>
              <div className="big">6,820</div>
              <div className="sub">of 10,000 likes</div>
              <div className="progress-track"><div className="progress-fill" style={{width: '68%'}}></div></div>
            </div>
            <div className="overlay-card dark">
              <div className="title-row">
                <span className="label">Top gifter</span>
                <span className="status">🔥 streak</span>
              </div>
              <div className="big">@kavi</div>
              <div className="sub">12,400 coins · 4 gifts</div>
              <div className="progress-track boss-hp"><div className="progress-fill" style={{width: '82%'}}></div></div>
            </div>
            <div className="overlay-card" style={{gridColumn: '1 / -1'}}>
              <div className="label" style={{marginBottom: 8}}>Live feed</div>
              <div className="event-feed">
                <div className="event">
                  <div className="avatar" style={{background: 'linear-gradient(135deg,#ff8fab,#a855f7)'}}>M</div>
                  <span className="who">maisie</span>
                  <span className="what">sent a Rose</span>
                  <span className="gift">× 25</span>
                </div>
                <div className="event">
                  <div className="avatar" style={{background: 'linear-gradient(135deg,#22d3ee,#80ed99)'}}>J</div>
                  <span className="who">jordan</span>
                  <span className="what">followed you</span>
                </div>
                <div className="event">
                  <div className="avatar" style={{background: 'linear-gradient(135deg,#ffe66d,#ff4d6d)'}}>P</div>
                  <span className="who">prismaa</span>
                  <span className="what">queued a song</span>
                  <span className="gift" style={{background: 'linear-gradient(135deg,#22d3ee,#a855f7)', color: 'white'}}>!play</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}