// PC Consult section — 2-col with phone left, content right.

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

  return (
    <section>
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: '440px 1fr',
        gap: 80, alignItems: 'center',
      }}>
        {/* Phone */}
        <div style={{
          display: 'flex', justifyContent: 'center',
          position: 'relative',
        }}>
          <div style={{ position: 'relative' }}>
            <div style={{
              padding: 8,
              borderRadius: 36,
              background: 'rgba(255, 255, 255, 0.5)',
              border: '1px solid rgba(203, 168, 104, 0.3)',
              boxShadow: '0 32px 60px -28px rgba(150, 100, 130, 0.4)',
              backdropFilter: 'blur(8px)',
            }}>
              <PhoneScaled scale={1}>
                <ScreenPaidMenu t={t}/>
              </PhoneScaled>
            </div>

            <Twinkle size={20} color="var(--gold)" style={{
              position: 'absolute', top: -16, right: -16,
              animation: 'twinkle 3s ease-in-out infinite',
            }}/>
            <Twinkle size={14} color="var(--accent)" style={{
              position: 'absolute', bottom: 60, left: -18,
              animation: 'twinkle 3.4s ease-in-out infinite 1s',
            }}/>
            <Star4 size={12} color="var(--gold)" style={{
              position: 'absolute', top: 200, right: -22,
              animation: 'twinkle 4s ease-in-out infinite 2s',
            }}/>
          </div>
        </div>

        {/* Content */}
        <div>
          <div className="eyebrow">— With a Reader —</div>
          <h2 className="section-title">
            深く悩む夜には、<br/><em>占い師にも相談できる。</em>
          </h2>
          <p style={{
            fontSize: 16, color: 'var(--ink-soft)',
            letterSpacing: '0.06em', marginTop: 22, lineHeight: 2.1,
            maxWidth: 540,
          }}>
            毎日の小さなヒントはAI占いで。<br/>
            もっと深く相談したいときは、占い師への個別相談を選べます。
          </p>

          {/* AI ↔ Reader compact */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 18,
            margin: '30px 0 30px',
            padding: '20px 24px',
            background: 'rgba(255, 255, 255, 0.6)',
            border: '1px solid rgba(203, 168, 104, 0.3)',
            borderRadius: 18,
            maxWidth: 540,
          }}>
            <LadderColPC tag="日々に" title="毎日の占い" body="気軽に確認"/>
            <ArrowGoldPC/>
            <LadderColPC tag="ふかく" title="占い師鑑定" body="個別で相談" highlight/>
          </div>

          {/* Trust bullets */}
          <div style={{ maxWidth: 540, marginTop: 28 }}>
            {[
              { 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: 14,
                padding: '14px 0',
                borderTop: i === 0 ? 'none' : '1px solid rgba(203, 168, 104, 0.2)',
              }}>
                <BulletIconPC kind={b.ic}/>
                <div style={{
                  fontSize: 14, color: 'var(--ink)',
                  lineHeight: 1.9, letterSpacing: '0.04em',
                  fontFamily: 'var(--title-font)',
                }}>{b.label}</div>
              </div>
            ))}
          </div>

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

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

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

const BulletIconPC = ({ kind }) => {
  const c = 'var(--accent-deep)';
  const wrap = (children) => (
    <div style={{
      width: 32, height: 32, borderRadius: '50%',
      background: 'var(--chip)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, marginTop: 1,
    }}>{children}</div>
  );
  if (kind === 'check') return wrap(
    <svg width="16" height="16" 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="16" height="16" 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="16" height="16" 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>
  );
  return wrap(
    <svg width="16" height="16" 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.ConsultPC = ConsultPC;
