// Emotional Scene — generated visual material + LP know-how: show the feeling before explaining features.

const EmotionScenes = () => {
  const scenes = [
    {
      title: '朝、今日の流れをそっと確認',
      body: '予定の前に1分だけ。良い日・気をつけたいことを、やさしい言葉で受け取れます。',
      tag: '今日の運勢',
    },
    {
      title: '恋愛や相性を、ひとりで抱えない',
      body: '相手の気持ちが気になる夜に。タロットや相性診断で、次の一歩を落ち着いて考えられます。',
      tag: '恋愛 / 相性',
    },
    {
      title: '気になる夢を、その場でメモ',
      body: '起きたあと忘れそうな夢も、すぐに入力。夢占いで今の気持ちを見つめ直せます。',
      tag: '夢占い',
    },
  ];

  return (
    <section style={{ paddingTop: 34, paddingBottom: 36 }}>
      <div className="card" style={{
        padding: 0,
        overflow: 'hidden',
        background: 'linear-gradient(160deg, rgba(255,255,255,0.92), rgba(251,238,243,0.86))',
      }}>
        <div style={{ position: 'relative', minHeight: 190, overflow: 'hidden' }}>
          <img src="assets/mirise-lp-emotional-hero.png" alt="ミライズのやさしい占い体験イメージ" style={{
            width: '100%', height: 218, objectFit: 'cover', display: 'block',
            filter: 'saturate(1.05) contrast(0.98)',
          }}/>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(93,58,100,0.02), rgba(93,58,100,0.52))',
          }}/>
          <div style={{ position: 'absolute', left: 18, right: 18, bottom: 16 }}>
            <div className="eyebrow" style={{ color: '#f5d990', fontSize: 11 }}>— Feel the App —</div>
            <h2 style={{
              color: '#fff', fontSize: 22, lineHeight: 1.6,
              textShadow: '0 2px 18px rgba(60,35,72,0.36)',
              marginTop: 6,
            }}>占ったあと、<br/>少し前向きになれる体験へ。</h2>
          </div>
        </div>

        <div style={{ padding: '18px 18px 20px' }}>
          <p style={{
            margin: '0 0 16px', fontSize: 12.5, lineHeight: 2,
            color: 'var(--ink-soft)', letterSpacing: '0.06em',
          }}>
            LPノウハウに合わせて、機能説明の前に「使う場面」と「得られる気持ち」が伝わる入口を置きました。
            初見でも、登録後の利用イメージが湧きやすくなります。
          </p>

          <div style={{ display: 'grid', gap: 10 }}>
            {scenes.map((scene, i) => (
              <article key={scene.title} style={{
                display: 'grid', gridTemplateColumns: '38px 1fr', gap: 12,
                padding: '13px 12px', borderRadius: 18,
                background: 'rgba(255,255,255,0.66)',
                border: '1px solid rgba(203,168,104,0.22)',
              }}>
                <div style={{
                  width: 38, height: 38, borderRadius: '50%',
                  display: 'grid', placeItems: 'center',
                  color: '#fff', fontFamily: 'var(--latin)', fontStyle: 'italic', fontSize: 18,
                  background: i === 1
                    ? 'linear-gradient(180deg, #d97a99, #9a7ac5)'
                    : 'linear-gradient(180deg, var(--gold-soft), var(--accent))',
                  boxShadow: '0 10px 22px -14px rgba(150,100,130,0.55)',
                }}>{i + 1}</div>
                <div>
                  <div style={{
                    display: 'inline-flex', padding: '3px 8px', borderRadius: 999,
                    background: 'var(--chip)', color: 'var(--accent-deep)',
                    fontSize: 9.5, fontFamily: 'var(--title-font)', letterSpacing: '0.12em',
                    marginBottom: 5,
                  }}>{scene.tag}</div>
                  <h3 style={{ fontSize: 14.5, lineHeight: 1.55, marginBottom: 5 }}>{scene.title}</h3>
                  <p style={{ margin: 0, fontSize: 11.5, color: 'var(--ink-soft)', lineHeight: 1.85 }}>{scene.body}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.EmotionScenes = EmotionScenes;