// 悩み別入口 — what to choose based on the user's current concern.

const ConcernEntrances = () => {
  const items = [
    {
      title: '恋愛や相性が気になる',
      body: '相手との距離感や、これからの関係を考えたいときに。',
      menu: '相性占い / タロット / 占い師相談',
    },
    {
      title: '見た夢の意味を知りたい',
      body: '印象に残った夢から、今の気持ちや気になることを見つめたいときに。',
      menu: '夢占い',
    },
    {
      title: '今日の流れを軽く確認したい',
      body: '出かける前や一日の始まりに、前向きなヒントを受け取りたいときに。',
      menu: '今日の運勢 / 開運日占い',
    },
    {
      title: '仕事や人生の方向性を考えたい',
      body: '大きな答えを急がず、次にどう動くかを落ち着いて考えたいときに。',
      menu: '人生占い / 総合占い / 占い師相談',
    },
  ];

  return (
    <section style={{ paddingTop: 8 }}>
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <div className="eyebrow">— Choose by Concern —</div>
        <h2 className="section-title">
          いま知りたいことを、<br/>
          <em>選びやすく。</em>
        </h2>
        <p style={{
          fontSize: 13, color: 'var(--ink-soft)',
          letterSpacing: '0.08em', marginTop: 14, lineHeight: 2,
        }}>
          恋愛、仕事、夢の意味、これからのこと。<br/>
          気になるテーマに合わせて、占いを選べます。
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
        {items.map((it, i) => (
          <article key={it.title} className="card" style={{
            padding: '20px 18px',
            display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14,
            alignItems: 'start',
          }}>
            <div style={{
              width: 34, height: 34, borderRadius: '50%',
              background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--latin)', fontStyle: 'italic', fontSize: 18,
              boxShadow: '0 8px 18px -10px rgba(194, 90, 130, 0.55)',
            }}>{i + 1}</div>
            <div>
              <h3 style={{
                fontFamily: 'var(--title-font)', fontSize: 15.5,
                letterSpacing: '0.08em', color: 'var(--ink)',
                marginBottom: 8, lineHeight: 1.6,
              }}>{it.title}</h3>
              <p style={{
                fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.9,
                margin: '0 0 10px', letterSpacing: '0.03em',
              }}>{it.body}</p>
              <div style={{
                display: 'inline-flex', padding: '6px 10px', borderRadius: 999,
                background: 'var(--chip)', color: 'var(--accent-deep)',
                fontFamily: 'var(--title-font)', fontSize: 10.5,
                letterSpacing: '0.08em', lineHeight: 1.6,
              }}>{it.menu}</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

window.ConcernEntrances = ConcernEntrances;
