// PC Emotional Scene — generated visual material + LP know-how: make the benefit felt before feature detail.

const EmotionScenesPC = () => {
  const scenes = [
    ['Morning', '朝の1分で今日の流れを確認', '出かける前に、今日の運勢と気をつけたいことをやさしく確認。'],
    ['Love', '恋愛や相性をひとりで抱えない', '相手との距離感や次の一歩を、タロット・相性診断で落ち着いて考えられます。'],
    ['Dream', '見た夢を忘れる前にメモ', '印象に残った夢をその場で入力。夢占いで今の気持ちを見つめ直せます。'],
  ];

  return (
    <section className="container" style={{ paddingTop: 26, paddingBottom: 34 }}>
      <div className="card" style={{
        padding: 0,
        overflow: 'hidden',
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.08fr) minmax(420px, 0.92fr)',
        alignItems: 'stretch',
        background: 'linear-gradient(135deg, rgba(255,255,255,0.92), rgba(251,238,243,0.78))',
      }}>
        <div style={{ padding: '46px 48px' }}>
          <div className="eyebrow">— Feel the App —</div>
          <h2 className="section-title" style={{ fontSize: 38, lineHeight: 1.55, marginTop: 12 }}>
            占ったあと、<br/><em>少し前向きになれる体験へ。</em>
          </h2>
          <p style={{
            margin: '18px 0 26px', maxWidth: 560,
            fontSize: 15, lineHeight: 2.05,
            color: 'var(--ink-soft)', letterSpacing: '0.07em',
          }}>
            LPノウハウの「成果が見えるFV」「利用シーンの具体化」に合わせて、
            機能名の羅列ではなく、登録後にどんな場面で使えるかを先に見せます。
          </p>

          <div style={{ display: 'grid', gap: 12 }}>
            {scenes.map(([latin, title, body], i) => (
              <article key={title} style={{
                display: 'grid', gridTemplateColumns: '58px 1fr', gap: 16,
                padding: '16px 18px', borderRadius: 22,
                background: 'rgba(255,255,255,0.68)',
                border: '1px solid rgba(203,168,104,0.23)',
              }}>
                <div style={{
                  width: 58, height: 58, borderRadius: '50%',
                  display: 'grid', placeItems: 'center', textAlign: 'center',
                  background: i === 1 ? 'linear-gradient(180deg, #d97a99, #9a7ac5)' : 'linear-gradient(180deg, var(--gold-soft), var(--accent))',
                  color: '#fff', fontFamily: 'var(--latin)', fontStyle: 'italic', fontSize: 15,
                  boxShadow: '0 14px 30px -18px rgba(150,100,130,0.6)',
                }}>{latin}</div>
                <div>
                  <h3 style={{ fontSize: 18, lineHeight: 1.55, marginBottom: 6 }}>{title}</h3>
                  <p style={{ margin: 0, fontSize: 13.2, color: 'var(--ink-soft)', lineHeight: 1.9 }}>{body}</p>
                </div>
              </article>
            ))}
          </div>
        </div>

        <div style={{ position: 'relative', minHeight: 560, overflow: 'hidden' }}>
          <img src="assets/mirise-lp-emotional-hero.png" alt="ミライズのやさしい占い体験イメージ" style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          }}/>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(255,246,243,0.08), rgba(93,58,100,0.20))' }}/>
          <div style={{
            position: 'absolute', left: 28, right: 28, bottom: 28,
            padding: '18px 20px', borderRadius: 22,
            background: 'rgba(255,255,255,0.72)',
            border: '1px solid rgba(255,255,255,0.55)',
            backdropFilter: 'blur(12px)',
            boxShadow: '0 24px 50px -28px rgba(60,35,72,0.55)',
          }}>
            <div style={{ fontFamily: 'var(--title-font)', color: 'var(--ink)', fontSize: 16, letterSpacing: '0.12em' }}>
              見るだけで世界観が伝わる素材を追加
            </div>
            <div style={{ color: 'var(--ink-soft)', fontSize: 12.5, lineHeight: 1.9, marginTop: 6 }}>
              淡い月・星・タロットのビジュアルで、事前登録前の期待感を上げます。
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.EmotionScenesPC = EmotionScenesPC;