// User voices — marquee with quote cards

const VOICES = [
  { name: '@haruka_lo', tag: 'インディーロック好き', quote: 'Spotifyの友達とApple Musicの友達が、初めて同じ場所でプレイリスト交換できるようになった。', color: '#FF6B1A' },
  { name: '@dj_kenta', tag: 'DJ / クラブミュージック', quote: 'プレイリスト単位で投稿できるSNSは初めて。1曲じゃなくて流れを共有できるのが嬉しい。', color: '#7A2DD4' },
  { name: '@miu.____', tag: 'シティポップ / R&B', quote: '人のおすすめプレイリストを聴くだけで、知らなかった曲がどんどん増えていく。', color: '#E5223A' },
  { name: '@takeshi.42', tag: 'ヒップホップ', quote: 'タグ検索で「#ドライブ」って打つだけで、知らない人の最高の選曲が手に入る。', color: '#FF1F8F' },
  { name: '@noa_____', tag: 'K-POP / J-POP', quote: '推しの最新曲をすぐシェアできる。コメントで盛り上がるのが楽しすぎる。', color: '#3FA9F5' },
  { name: '@yuto.beats', tag: 'ビートメイカー', quote: 'プレイリストにタグ付けて投げるだけで、ジャンルごとのリスナーに届く感覚がある。', color: '#FF6B1A' },
  { name: '@chika.song', tag: 'シンガーソングライター', quote: '自分の曲を入れたプレイリストを投稿したら、知らない人がいいねしてくれて泣いた。', color: '#1ED760' },
  { name: '@rentaro_m', tag: '邦楽インディー', quote: '深夜にプレイリスト投げるのが日課になった。コメント来るとマジで嬉しい。', color: '#7A2DD4' },
];

function Voices({ tweaks }) {
  const accent = tweaks.accentColor;
  // Two rows of marquee, opposite directions
  const rowA = VOICES;
  const rowB = [...VOICES].reverse();

  return (
    <section id="voices" style={{
      padding: '160px 0',
      borderTop: '1px solid var(--line)',
      overflow: 'hidden',
    }}>
      <div className="container">
        <Reveal>
          <SectionHead
            kicker="USER VOICES / 利用者の声"
            title="口コミ。"
            sub="※サンプル。リリース後に集めた感想を順次掲載予定です。"
          />
        </Reveal>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <MarqueeRow voices={rowA} accent={accent} direction="left" speed={60} />
        <MarqueeRow voices={rowB} accent={accent} direction="right" speed={75} />
      </div>
    </section>
  );
}

function MarqueeRow({ voices, accent, direction = 'left', speed = 60 }) {
  // duplicate twice for seamless loop
  const items = [...voices, ...voices];
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="marquee-track" style={{
        display: 'flex', gap: 20, width: 'max-content',
        animation: `marquee-${direction} ${speed}s linear infinite`,
      }}>
        {items.map((v, i) => (
          <VoiceCard key={i} v={v} accent={accent} />
        ))}
      </div>
      <style>{`
        @keyframes marquee-left {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        @keyframes marquee-right {
          0% { transform: translateX(-50%); }
          100% { transform: translateX(0); }
        }
        .marquee-track:hover { animation-play-state: paused; }
      `}</style>
    </div>
  );
}

function VoiceCard({ v, accent }) {
  return (
    <div style={{
      width: 380, flexShrink: 0,
      padding: 28,
      background: 'rgba(255,255,255,0.025)',
      border: '1px solid var(--line)',
      borderRadius: 20,
      display: 'flex', flexDirection: 'column', gap: 16,
      transition: 'background 0.3s, border-color 0.3s, transform 0.3s',
      cursor: 'default',
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
      e.currentTarget.style.borderColor = `${v.color}55`;
      e.currentTarget.style.transform = 'translateY(-4px)';
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.background = 'rgba(255,255,255,0.025)';
      e.currentTarget.style.borderColor = 'var(--line)';
      e.currentTarget.style.transform = 'translateY(0)';
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 40, height: 40, borderRadius: '50%',
          background: `linear-gradient(135deg, ${v.color}, ${v.color}aa)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 16,
          color: '#fff',
        }}>
          {v.name.replace('@', '').charAt(0).toUpperCase()}
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{v.name}</div>
          <div style={{ fontSize: 11, color: 'rgba(245,243,238,0.5)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.04em' }}>{v.tag}</div>
        </div>
      </div>
      <p style={{
        fontSize: 14, lineHeight: 1.7, color: 'rgba(245,243,238,0.85)',
      }}>
        <span className="serif-it" style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontSize: 26, color: v.color, lineHeight: 0, marginRight: 4 }}>"</span>
        {v.quote}
      </p>
    </div>
  );
}

window.Voices = Voices;