/* global React */

function WideCard({ emoji, title, desc, img, alt }) {
  return (
    <div className="feature-card wide">
      <div className="wide-text">
        <div style={{display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8, lineHeight: 1}}>
          <span style={{fontSize: 24, display: 'flex', alignSelf: 'center', lineHeight: 1}}>{emoji}</span>
          <h4 style={{fontSize: 18, background: 'linear-gradient(135deg, #a855f7, #ec4899)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', margin: 0}}>{title}</h4>
        </div>
        <p>{desc}</p>
      </div>
      <img src={img} alt={alt} />
    </div>
  );
}

function Features() {
  return (
    <section className="section" id="features">
      <div className="section-eyebrow">Features</div>
      <h2>Everything you need to make a stream <span className="grad">feel like a show.</span></h2>
      <p className="section-sub" style={{fontSize: 16}}>
        Here's a look at some of the many features Bubbly offers. Every overlay is customizable, browser source ready, and built for live creators.
      </p>
      <div className="feature-grid">
        <WideCard
          emoji="🏆"
          title="Follow = Rank"
          desc="When a new follower comes in, Bubbly reveals their rank. Supports Rocket League, Apex Legends, Valorant, Call of Duty, Dead by Daylight, Fortnite, Marvel Rivals, and Rainbow Six."
          img="assets/follow-rank-customization-demo.png"
          alt="Follow = Rank customization screen"
        />
        <WideCard
          emoji="🎁"
          title="Gift Tracker"
          desc="Track gifts live on stream with animated overlays, glow effects, sparkles, and a halo ring. Fully customizable presets, font sizes, and animation speed."
          img="assets/gift-tracker-customization-demo.png"
          alt="Gift Tracker customization screen"
        />
        <WideCard
          emoji="🎮"
          title="Bubbly Controller Engine Overlay"
          desc="Fully customizable PS5, PS4, and Xbox controller overlay. Pick your colorway, tune the finish, and show your inputs live on stream."
          img="assets/controller-customization-demo.png"
          alt="Bubbly Controller Overlay customization screen"
        />
        <WideCard
          emoji="🎵"
          title="Bubbly Spotify Engine Overlay"
          desc="Show what's playing with fully customizable layouts, palettes, and typography. Viewers can queue songs with !play while you keep streaming."
          img="assets/spotify-customization-demo.png"
          alt="Bubbly Spotify Engine customization screen"
        />
      </div>
    </section>
  );
}