// PC version: 6-capability grid (3×2). Bigger tiles, more breathing room.

const CapabilitiesPC = () => {
  const items = [
    {
      glyph: 'sun', title: '今日の運勢',
      body: 'その日の運勢を、短くわかりやすく確認。\nラッキーカラーやナンバーも一緒に見られます。',
      free: true,
    },
    {
      glyph: 'cloud', title: '夢占い',
      body: '見た夢の内容を入力すると、\n印象に残った場面の意味をやさしく読み解きます。',
      free: true,
    },
    {
      glyph: 'tarot', title: 'タロット占い',
      body: '恋愛や仕事などのテーマに合わせて、\n今の状況とこれからのヒントを占えます。',
      free: true,
    },
    {
      glyph: 'heart', title: '相性占い',
      body: '気になる相手との相性や距離感を、\nふたりの情報からわかりやすく鑑定します。',
      free: true,
    },
    {
      glyph: 'compass', title: '人生・総合占い',
      body: '自分らしさやこれからの流れを、\n前向きに考えるためのヒントとして届けます。',
      free: true,
    },
    {
      glyph: 'chat', title: '占い師に相談',
      body: 'ひとりで抱え込みたくない悩みは、\n占い師に個別で相談できます。',
      free: false,
    },
  ];

  return (
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow">— What You Can Do —</div>
          <h2 className="section-title">
            ミライズで、<em>できること。</em>
          </h2>
          <p style={{
            fontSize: 15, color: 'var(--ink-soft)',
            letterSpacing: '0.1em', marginTop: 18, lineHeight: 2,
            maxWidth: 560, margin: '18px auto 0',
          }}>
            気軽な毎日の占いから、占い師による有料鑑定まで。<br/>
            気になるタイミングで、自分に合う占いを選べます。
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
        }}>
          {items.map((it) => (
            <CapabilityTilePC key={it.title} item={it}/>
          ))}
        </div>

        {/* Legend */}
        <div style={{
          marginTop: 36, display: 'flex', justifyContent: 'center',
          gap: 24, fontSize: 13, color: 'var(--ink-soft)',
          fontFamily: 'var(--title-font)',
          letterSpacing: '0.16em',
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <DotPC color="var(--accent)"/>毎日の占い（無料〜）
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <DotPC color="var(--gold)"/>占い師鑑定（有料）
          </span>
        </div>
      </div>
    </section>
  );
};

const DotPC = ({ color }) => (
  <span style={{
    width: 10, height: 10, borderRadius: '50%',
    background: color, display: 'inline-block',
  }}/>
);

const CapabilityTilePC = ({ item }) => (
  <article style={{
    background: 'rgba(255, 250, 248, 0.85)',
    border: '1px solid rgba(203, 168, 104, 0.28)',
    borderRadius: 22,
    padding: '36px 30px 30px',
    position: 'relative',
    backdropFilter: 'blur(8px)',
    boxShadow: '0 14px 32px -22px rgba(150, 100, 130, 0.3)',
    transition: 'transform 0.3s ease, box-shadow 0.3s ease',
  }}
  onMouseEnter={(e) => {
    e.currentTarget.style.transform = 'translateY(-4px)';
    e.currentTarget.style.boxShadow = '0 24px 48px -22px rgba(150, 100, 130, 0.35)';
  }}
  onMouseLeave={(e) => {
    e.currentTarget.style.transform = 'translateY(0)';
    e.currentTarget.style.boxShadow = '0 14px 32px -22px rgba(150, 100, 130, 0.3)';
  }}>
    {/* Badge */}
    <div style={{
      position: 'absolute', top: 16, right: 16,
      fontFamily: 'var(--latin)',
      fontSize: 10, letterSpacing: '0.22em',
      padding: '3px 12px', borderRadius: 999,
      background: item.free ? 'var(--chip)' : 'rgba(203, 168, 104, 0.18)',
      color: item.free ? 'var(--accent-deep)' : 'var(--gold)',
      fontWeight: 600,
    }}>{item.free ? 'FREE' : 'READER'}</div>

    {/* Glyph */}
    <div style={{ marginBottom: 20 }}>
      <CapGlyphPC kind={item.glyph}/>
    </div>

    {/* Title */}
    <h3 style={{
      fontFamily: 'var(--title-font)',
      fontSize: 22, lineHeight: 1.5,
      letterSpacing: '0.08em',
      color: 'var(--ink)', marginBottom: 12,
    }}>{item.title}</h3>

    {/* Body */}
    <p style={{
      fontSize: 14, color: 'var(--ink-soft)',
      lineHeight: 2, margin: 0, whiteSpace: 'pre-line',
      letterSpacing: '0.03em',
    }}>{item.body}</p>
  </article>
);

const CapGlyphPC = ({ kind }) => {
  const sz = 64;
  const wrapStyle = {
    width: sz, height: sz, borderRadius: 18,
    background: 'linear-gradient(150deg, var(--card-alt), var(--chip))',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    border: '1px solid rgba(203, 168, 104, 0.3)',
  };
  const c = 'var(--accent-deep)';
  const sw = 1.4;
  const G = (children) => (
    <div style={wrapStyle}>
      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">{children}</svg>
    </div>
  );
  switch (kind) {
    case 'sun': return G(<>
      <circle cx="12" cy="12" r="4" stroke={c} strokeWidth={sw}/>
      {[0, 45, 90, 135, 180, 225, 270, 315].map((deg, i) => {
        const r = (deg * Math.PI) / 180;
        const x1 = 12 + Math.cos(r) * 6.5, y1 = 12 + Math.sin(r) * 6.5;
        const x2 = 12 + Math.cos(r) * 9, y2 = 12 + Math.sin(r) * 9;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={c} strokeWidth={sw} strokeLinecap="round"/>;
      })}
    </>);
    case 'cloud': return G(<>
      <path d="M 7 16 Q 3 16 4 12 Q 5 9 9 10 Q 10 6 14 7 Q 18 6 18 11 Q 21 11 20 14 Q 20 16 18 16 Z"
        stroke={c} strokeWidth={sw} fill="rgba(255,255,255,0.5)" strokeLinejoin="round"/>
      <circle cx="11" cy="19" r="0.8" fill="var(--gold)"/>
      <circle cx="14" cy="20.5" r="0.6" fill="var(--gold)"/>
    </>);
    case 'tarot': return G(<>
      <rect x="7" y="4" width="10" height="16" rx="1.5" stroke={c} strokeWidth={sw} fill="rgba(255,255,255,0.65)"/>
      <path d="M12 8 v 8 M 9 12 h 6" stroke="var(--gold)" strokeWidth="1"/>
      <circle cx="12" cy="12" r="1.6" stroke={c} strokeWidth="0.8" fill="none"/>
    </>);
    case 'heart': return G(<>
      <path d="M12 19s-6-4-6-9a3 3 0 0 1 6-1.5A3 3 0 0 1 18 10c0 5-6 9-6 9z"
        stroke={c} strokeWidth={sw} fill="var(--accent)" fillOpacity="0.18" strokeLinejoin="round"/>
    </>);
    case 'compass': return G(<>
      <circle cx="12" cy="12" r="7.5" stroke={c} strokeWidth={sw}/>
      <path d="M12 6.5 L14 12 L12 17.5 L10 12 Z" fill={c} opacity="0.85"/>
      <circle cx="12" cy="12" r="1" fill="var(--gold)"/>
    </>);
    case 'chat': return G(<>
      <path d="M20 11.5c0 3.6-3.4 6.5-7.5 6.5-1 0-2-.2-2.9-.5L6 19l.8-3.2C5.3 14.6 4.5 13.1 4.5 11.5 4.5 7.9 7.9 5 12 5s8 2.9 8 6.5z"
        stroke={c} strokeWidth={sw} fill="rgba(255,255,255,0.6)" strokeLinejoin="round"/>
      <circle cx="9" cy="11.5" r="0.8" fill={c}/>
      <circle cx="12" cy="11.5" r="0.8" fill={c}/>
      <circle cx="15" cy="11.5" r="0.8" fill={c}/>
    </>);
    default: return null;
  }
};

window.CapabilitiesPC = CapabilitiesPC;