// PC Conversion Blocks — based on LPノウハウ: problem → use case → reassurance → CTA.

const ExperienceFlowPC = () => {
  const steps = [
    { no: '01', title: '迷いを選ぶ', body: '恋愛、夢、今日の運勢など、いま気になるテーマから始められます。', icon: '？' },
    { no: '02', title: 'やさしい占いを読む', body: '怖がらせる断定ではなく、気持ちを整理する言葉で受け取れます。', icon: '✦' },
    { no: '03', title: '必要なら見返す・相談する', body: '気になった結果を保存して、必要なときだけ個別相談へ進めます。', icon: '✓' },
  ];

  return (
    <section className="container" style={{ paddingTop: 28, paddingBottom: 42 }}>
      <div style={{ textAlign: 'center', marginBottom: 34 }}>
        <div className="eyebrow">— How It Feels —</div>
        <h2 className="section-title">
          登録後の使い方が、<em>すぐ想像できるように。</em>
        </h2>
        <p style={{
          fontSize: 15, color: 'var(--ink-soft)',
          letterSpacing: '0.08em', lineHeight: 2, margin: '16px auto 0', maxWidth: 680,
        }}>
          「何ができるか」だけでなく、迷った日からどう前向きになるかを、3ステップの視覚素材で見せます。
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {steps.map((s, i) => (
          <article key={s.no} className="card" style={{
            position: 'relative', padding: '32px 28px 30px', minHeight: 250,
            background: i === 1 ? 'linear-gradient(135deg, rgba(255,255,255,0.9), rgba(252,229,236,0.9))' : 'rgba(255,250,248,0.82)',
            overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: 18, right: 20,
              fontFamily: 'var(--latin)', fontStyle: 'italic', fontSize: 48,
              color: 'var(--gold-soft)', opacity: 0.6,
            }}>{s.no}</div>
            <div style={{
              width: 66, height: 66, borderRadius: 22,
              background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
              color: '#fff', display: 'grid', placeItems: 'center', fontSize: 25,
              boxShadow: '0 18px 34px -20px rgba(194,90,130,0.6)', marginBottom: 24,
            }}>{s.icon}</div>
            <h3 style={{ fontSize: 22, lineHeight: 1.55, marginBottom: 12 }}>{s.title}</h3>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--ink-soft)', lineHeight: 2 }}>{s.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
};

const CTAReassurancePC = () => {
  const items = [
    ['無料', '先行登録は無料。課金は発生しません。'],
    ['メールだけ', '登録に必要なのはメールアドレスのみ。'],
    ['停止OK', '配信はいつでも停止できます。'],
    ['最初に通知', '公開時期が決まり次第、優先してお知らせ。'],
  ];

  return (
    <section className="container" style={{ paddingTop: 40, paddingBottom: 20 }}>
      <div className="card" style={{
        padding: '32px 36px',
        background: 'linear-gradient(135deg, rgba(255,255,255,0.92), rgba(251,238,243,0.78))',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '320px 1fr', gap: 30, alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow">— Before You Join —</div>
            <h2 style={{ fontSize: 30, lineHeight: 1.55, marginTop: 10 }}>
              押す前の不安を、<br/>ここでなくします。
            </h2>
            <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 2, marginTop: 12 }}>
              CTA直前に、無料範囲・登録情報・配信停止を明記して、登録の心理的ハードルを下げます。
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {items.map(([label, body]) => (
              <div key={label} style={{
                padding: '18px 14px', borderRadius: 18,
                background: 'rgba(255,255,255,0.72)',
                border: '1px solid rgba(203,168,104,0.22)',
                textAlign: 'center', minHeight: 140,
              }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  minWidth: 70, height: 30, padding: '0 12px', borderRadius: 999,
                  background: 'var(--chip)', color: 'var(--accent-deep)',
                  fontFamily: 'var(--title-font)', fontSize: 13, letterSpacing: '0.12em',
                  marginBottom: 12,
                }}>{label}</div>
                <p style={{ margin: 0, fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.8 }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.ExperienceFlowPC = ExperienceFlowPC;
window.CTAReassurancePC = CTAReassurancePC;