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

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

  return (
    <section style={{ paddingTop: 32, paddingBottom: 36 }}>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <div className="eyebrow">— How It Feels —</div>
        <h2 className="section-title">
          登録後の使い方が、<br/><em>すぐ想像できるように。</em>
        </h2>
        <p style={{
          fontSize: 12.5, color: 'var(--ink-soft)',
          letterSpacing: '0.07em', lineHeight: 2, marginTop: 14,
        }}>
          「何ができるか」だけでなく、<br/>迷った日からどう前向きになるかを見せます。
        </p>
      </div>

      <div className="card" style={{ padding: '18px 16px', overflow: 'hidden' }}>
        <div style={{ display: 'grid', gap: 12 }}>
          {steps.map((s, i) => (
            <article key={s.no} style={{
              position: 'relative', display: 'grid', gridTemplateColumns: '54px 1fr', gap: 12,
              padding: '14px 12px', borderRadius: 18,
              background: i === 1 ? 'linear-gradient(135deg, rgba(255,255,255,0.82), rgba(252,229,236,0.92))' : 'rgba(255,255,255,0.64)',
              border: '1px solid rgba(203,168,104,0.23)',
            }}>
              <div style={{
                width: 54, height: 54, borderRadius: 18,
                background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
                color: '#fff', display: 'grid', placeItems: 'center',
                boxShadow: '0 12px 24px -16px rgba(194,90,130,0.55)',
              }}>
                <span style={{ fontSize: 20 }}>{s.icon}</span>
              </div>
              <div>
                <div className="latin" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.28em' }}>{s.no}</div>
                <h3 style={{ fontSize: 15.5, lineHeight: 1.55, marginTop: 2, marginBottom: 5 }}>{s.title}</h3>
                <p style={{ margin: 0, fontSize: 12.3, color: 'var(--ink-soft)', lineHeight: 1.9 }}>{s.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

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

  return (
    <section style={{ paddingTop: 32, paddingBottom: 24 }}>
      <div className="card" style={{
        padding: '22px 18px',
        background: 'linear-gradient(160deg, rgba(255,255,255,0.9), rgba(251,238,243,0.82))',
      }}>
        <div style={{ textAlign: 'center', marginBottom: 16 }}>
          <div className="eyebrow" style={{ fontSize: 11 }}>— Before You Join —</div>
          <h2 style={{ fontSize: 19, lineHeight: 1.65, marginTop: 8 }}>
            押す前の不安を、<br/>ここでなくします。
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {items.map(([label, body]) => (
            <div key={label} style={{
              padding: '12px 10px', borderRadius: 16,
              background: 'rgba(255,255,255,0.72)',
              border: '1px solid rgba(203,168,104,0.22)',
              textAlign: 'center', minHeight: 92,
            }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                minWidth: 52, height: 26, padding: '0 10px', borderRadius: 999,
                background: 'var(--chip)', color: 'var(--accent-deep)',
                fontFamily: 'var(--title-font)', fontSize: 11.5, letterSpacing: '0.12em',
                marginBottom: 8,
              }}>{label}</div>
              <p style={{ margin: 0, fontSize: 11.4, color: 'var(--ink-soft)', lineHeight: 1.75 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.ExperienceFlow = ExperienceFlow;
window.CTAReassurance = CTAReassurance;