// 占い師による有料鑑定の紹介 — show real ScreenPaidMenu phone.

const Consult = ({ theme }) => {
  const t = getAppTheme(theme);

  return (
    <section style={{ paddingTop: 24 }}>
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <div className="eyebrow">— With a Reader —</div>
        <h2 className="section-title">
          深く悩む夜には、<br/>
          <em>占い師にも相談できる。</em>
        </h2>
        <p style={{
          fontSize: 13, color: 'var(--ink-soft)',
          letterSpacing: '0.08em', marginTop: 14, lineHeight: 2,
        }}>
          毎日の小さなヒントはAI占いで。<br/>
          もっと深く相談したいときは、占い師への個別相談を選べます。
        </p>
      </div>

      {/* AI ↔ 鑑定 ladder */}
      <div className="card" style={{
        padding: '22px 18px', marginBottom: 28,
        background: 'linear-gradient(160deg, rgba(255,255,255,0.85), var(--card-alt))',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto 1fr',
          alignItems: 'center', gap: 12,
        }}>
          <LadderCol
            tag="日々に"
            title="毎日の占い"
            body={<>気軽に、<br/>毎日確認</>}
          />
          <ArrowGold/>
          <LadderCol
            tag="ふかく"
            title="占い師鑑定"
            body={<>悩みに、<br/>個別で相談</>}
            highlight
          />
        </div>
      </div>

      {/* Phone — ScreenPaidMenu */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
        <div style={{ position: 'relative' }}>
          <PhoneScaled scale={0.82} style={{
            filter: 'drop-shadow(0 20px 40px rgba(150, 100, 130, 0.22))',
          }}>
            <ScreenPaidMenu t={t}/>
          </PhoneScaled>

          {/* sparkles */}
          <Twinkle size={14} color="var(--gold)" style={{
            position: 'absolute', top: -10, right: -12,
            animation: 'twinkle 2.8s ease-in-out infinite',
          }}/>
          <Twinkle size={10} color="var(--accent)" style={{
            position: 'absolute', bottom: 30, left: -14,
            animation: 'twinkle 3.4s ease-in-out infinite 1s',
          }}/>
        </div>
      </div>

      {/* Trust bullets — atmospheric, no numbers */}
      <div className="card" style={{ padding: '20px 20px' }}>
        <div className="latin" style={{
          fontSize: 11, color: 'var(--gold)',
          letterSpacing: '0.28em', marginBottom: 14, textAlign: 'center',
        }}>Why You Can Rely On Us</div>

        {[
          { ic: 'ribbon', label: '不安を煽らず、前向きに受け取れる鑑定スタイル' },
          { ic: 'check',  label: '相談内容と料金は、申し込み前に確認できます' },
          { ic: 'heart',  label: '恋愛・仕事・人生など、悩みに合わせて選べます' },
          { ic: 'star',   label: '初めてでも迷わず進める、わかりやすい相談導線' },
        ].map((b, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
            padding: '10px 0',
            borderTop: i === 0 ? 'none' : '1px solid rgba(203, 168, 104, 0.2)',
          }}>
            <BulletIcon kind={b.ic}/>
            <div style={{
              fontSize: 12.5, color: 'var(--ink)',
              lineHeight: 1.85, letterSpacing: '0.04em',
              fontFamily: 'var(--title-font)',
            }}>{b.label}</div>
          </div>
        ))}
      </div>

      <div style={{
        textAlign: 'center', marginTop: 22,
        fontSize: 10.5, color: 'var(--ink-mute)',
        letterSpacing: '0.18em', lineHeight: 1.9,
      }}>
        ※ 鑑定メニューや相談方法は、リリース時に順次ご案内します。
      </div>
    </section>
  );
};

const LadderCol = ({ tag, title, body, highlight }) => (
  <div style={{
    textAlign: 'center',
    padding: '14px 6px',
    background: highlight ? 'rgba(255, 255, 255, 0.8)' : 'transparent',
    borderRadius: 14,
    border: highlight ? '1px solid rgba(203, 168, 104, 0.4)' : 'none',
  }}>
    <div className="latin" style={{
      fontSize: 10, color: 'var(--gold)',
      letterSpacing: '0.28em', marginBottom: 6,
    }}>{tag}</div>
    <div style={{
      fontFamily: 'var(--title-font)', fontSize: 15,
      letterSpacing: '0.12em', color: highlight ? 'var(--accent-deep)' : 'var(--ink)',
      marginBottom: 8,
    }}>{title}</div>
    <div style={{
      fontSize: 11, color: 'var(--ink-soft)', lineHeight: 1.7,
    }}>{body}</div>
  </div>
);

const ArrowGold = () => (
  <svg width="22" height="14" viewBox="0 0 22 14" aria-hidden>
    <path d="M1 7 H 20 M 14 2 L 20 7 L 14 12" stroke="var(--gold)" strokeWidth="1.2"
      fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const BulletIcon = ({ kind }) => {
  const c = 'var(--accent-deep)';
  const wrap = (children) => (
    <div style={{
      width: 28, height: 28, borderRadius: '50%',
      background: 'var(--chip)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, marginTop: 1,
    }}>{children}</div>
  );
  if (kind === 'check') return wrap(
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d="M5 12l5 5L20 7" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  if (kind === 'heart') return wrap(
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d="M12 20s-7-4.5-7-10.5A4 4 0 0 1 12 6a4 4 0 0 1 7 3.5C19 15.5 12 20 12 20z"
        stroke={c} strokeWidth="1.6" fill={c} fillOpacity="0.18" strokeLinejoin="round"/>
    </svg>
  );
  if (kind === 'star') return wrap(
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d="M12 3l2.4 5.6L20 9.3l-4.3 4 1.2 5.9L12 16l-4.9 3.2 1.2-5.9L4 9.3l5.6-.7L12 3z"
        stroke={c} strokeWidth="1.4" fill={c} fillOpacity="0.18" strokeLinejoin="round"/>
    </svg>
  );
  // ribbon
  return wrap(
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d="M12 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm-3 7l-4 11 7-4 7 4-4-11"
        stroke={c} strokeWidth="1.4" fill={c} fillOpacity="0.15" strokeLinejoin="round"/>
    </svg>
  );
};

window.Consult = Consult;