import './PopularSection.css'

const MOVIES = [
  { title: 'Дети перемен', rating: '8.4', badge: 'Подписка', color: 'linear-gradient(160deg,#1a3a5c,#0d6e8c)' },
  { title: 'Чёрное солнце', rating: '9.4', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1c0a36,#4a1a7a)' },
  { title: 'Трофей', rating: '6.7', badge: 'Подписка', color: 'linear-gradient(160deg,#3d1a00,#8b4000)' },
  { title: 'Реализация', rating: '8.9', badge: 'Бесплатно', color: 'linear-gradient(160deg,#0a2e1a,#0d6e40)' },
  { title: 'Чебурашка 2', rating: '8.5', badge: 'Подписка', color: 'linear-gradient(160deg,#1a1a3d,#3d3d8c)' },
  { title: 'Склиф', rating: '7.7', badge: 'Подписка', color: 'linear-gradient(160deg,#2e0a0a,#8c1a1a)' },
  { title: 'Простая просьба', rating: '8.2', badge: 'Подписка', color: 'linear-gradient(160deg,#0a1a2e,#1a4a6e)' },
  { title: 'Рикошет', rating: '8.7', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1a2e0a,#4a7a1a)' },
]

export default function PopularSection() {
  return (
    <section className="popular">
      <div className="popular-inner">
        <div className="section-header">
          <h2 className="section-title">Популярно сейчас</h2>
          <button className="section-arrow" aria-label="Показать все">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <polyline points="9 18 15 12 9 6"/>
            </svg>
          </button>
        </div>
        <div className="cards-scroll">
          <div className="cards-track">
            {MOVIES.map((m) => (
              <div key={m.title} className="movie-card">
                <div className="movie-poster" style={{ background: m.color }}>
                  <span className="movie-poster-text">{m.title}</span>
                  <div className={`movie-badge ${m.badge === 'Бесплатно' ? 'badge-free' : 'badge-sub'}`}>
                    {m.badge}
                  </div>
                </div>
                <div className="movie-info">
                  <p className="movie-title">{m.title}</p>
                  <div className="movie-meta">
                    <span className="movie-k">К</span>
                    <span className="movie-rating">{m.rating}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}