// Features section — 3 main features focused on user value

function Features({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <section id="features" style={{ padding: '160px 0 120px', position: 'relative' }} className="features-section">
      <div className="container">
        <Reveal>
          <SectionHead
            kicker="FEATURES / 機能"
            title={<>知らない音楽を、<br /><span style={{ color: accent }}>DIGれる。</span></>}
            sub="趣味の合う人のプレイリストを AI がレコメンド。タグで気分に合った一枚を探す。再生は、あなたが普段使ってる音楽サービスで。"
          />
        </Reveal>

        <FeatureRow
          n="01"
          tag="DIG / レコメンド"
          title={<>趣味の合う人の、<br />イケてる音楽を。</>}
          body="AI があなたの好みを学習し、まだ聴いたことのないジャンルや、音楽の系統が近い人のプレイリストをレコメンド。「次の一曲」じゃなく、「次のシーン」を掘りに行く。"
          bullets={[
            'AI レコメンドで未知のプレイリストに出会う',
            '音楽の趣味が近い人をフォローしてつながる',
            '自分の知らないジャンル・年代を発見する',
          ]}
          chips={['#AI Recommend', '#Discover', '#Match']}
          screen="assets/screen-home.jpg"
          screenLabel="フィード"
          accent={accent}
        />

        <FeatureRow
          n="02"
          tag="ARTISTS"
          title={<>あのアーティストが<br />聴いてる音楽を。</>}
          body="好きなアーティストが普段聴いている曲。彼らがつくるムード。今後、有名アーティスト本人によるプレイリスト公開もスタート予定です。"
          bullets={[
            'アーティストの選曲をそのまま追体験',
            '本人公開プレイリストを順次解放（予定）',
            'フォローして新着プレイリストを通知',
          ]}
          chips={['#Artists', '#Coming Soon', '#Follow']}
          screen="assets/screen-profile.jpg"
          screenLabel="アーティスト"
          accent={accent}
          reverse
        />

        <FeatureRow
          n="03"
          tag="TAG SEARCH"
          title={<>気分に合うアルバムを、<br />タグ検索で。</>}
          body="ドライブ中、自分のプレイリストじゃ物足りない夜。タグで検索すれば、世界中のユーザーがつくった「その瞬間に効く」プレイリストが見つかる。"
          bullets={[
            'タグ検索で気分やシーンに合わせて探す',
            '#80年代 #R&B #ドライブ #作業用 #雨の日',
            'お気に入りに保存していつでも呼び出し',
          ]}
          chips={['#80年代', '#R&B', '#ドライブ', '#作業用', '#雨の日']}
          screen="assets/screen-post.jpg"
          screenLabel="タグ検索"
          accent={accent}
        />
      </div>
    </section>
  );
}

function FeatureRow({ n, tag, title, body, bullets, chips, screen, screenLabel, accent, reverse }) {
  return (
    <Reveal>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 80,
        alignItems: 'center',
        padding: '80px 0',
        borderTop: '1px solid var(--line)',
        direction: reverse ? 'rtl' : 'ltr',
      }} className="feature-row">
        <div style={{ direction: 'ltr' }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 28,
          }}>
            <span style={{
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 56, fontWeight: 500,
              color: 'transparent', WebkitTextStroke: `1px ${accent}`,
              lineHeight: 0.9,
              letterSpacing: '-0.02em',
            }}>{n}</span>
            <span style={{
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: accent,
            }}>{tag}</span>
          </div>

          <h3 className="display" style={{
            fontSize: 'clamp(32px, 3.4vw, 48px)',
            fontWeight: 700, lineHeight: 1.1,
            letterSpacing: '-0.025em',
            marginBottom: 24,
            textWrap: 'balance',
          }}>{title}</h3>

          <p style={{
            fontSize: 16, lineHeight: 1.75, color: 'rgba(245,243,238,0.7)',
            marginBottom: 28, maxWidth: 480,
          }}>{body}</p>

          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            display: 'flex', flexDirection: 'column', gap: 12,
            marginBottom: 28,
          }}>
            {bullets.map((b, i) => (
              <li key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                fontSize: 15, color: 'rgba(245,243,238,0.85)',
              }}>
                <span style={{
                  marginTop: 9, width: 6, height: 6, borderRadius: '50%',
                  background: accent, flexShrink: 0,
                  boxShadow: `0 0 10px ${accent}`,
                }}></span>
                {b}
              </li>
            ))}
          </ul>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {chips.map(c => (
              <span key={c} style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11, letterSpacing: '0.05em',
                padding: '6px 12px', borderRadius: 999,
                border: '1px solid rgba(245,243,238,0.14)',
                color: 'rgba(245,243,238,0.7)',
                background: 'rgba(255,255,255,0.02)',
              }}>{c}</span>
            ))}
          </div>
        </div>

        <div className="feature-phone-wrap" style={{
          direction: 'ltr',
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: '15% 10%',
            background: `radial-gradient(circle, ${accent}40 0%, transparent 65%)`,
            filter: 'blur(40px)', zIndex: 0,
          }}></div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <PhoneFrame src={screen} width={300} glow={`${accent}40`} />
            <div style={{
              position: 'absolute', top: -16, left: -16,
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
              padding: '6px 10px', borderRadius: 6,
              background: '#0d0d0e', border: '1px solid var(--line)',
              color: 'rgba(245,243,238,0.7)',
            }}>{screenLabel}</div>
          </div>
        </div>

        <style>{`
          @media (max-width: 960px) {
            .feature-row { grid-template-columns: 1fr !important; direction: ltr !important; gap: 48px !important; padding: 60px 0 !important; }
          }
          @media (max-width: 640px) {
            .feature-row { gap: 32px !important; padding: 48px 0 !important; }
            .feature-phone-wrap { transform: scale(0.78); transform-origin: top center; margin: -28px 0 -40px; }
          }
        `}</style>
      </div>
    </Reveal>
  );
}

window.Features = Features;