// PC 悩み別入口 — guide users to the right fortune menu by concern.

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

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

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

window.ConcernEntrancesPC = ConcernEntrancesPC;