/* global React, SKG */
const { C, FS, FF, FM, Icon, PrimaryBtn, SecondaryBtn, AppHeader, Eyebrow } = window.SKG;

// ─────────────────────────────────────────────────────────────
// Onboarding 完了画面 — マッチング待ち & 3 つのCTA
// 要件定義書 §3 ステップ5 / spec §FR-013, §FR-029 に対応
// ─────────────────────────────────────────────────────────────
function MatchingWaitScreen({ onAction }) {
  return (
    <>
      <AppHeader title="準備完了" subtitle="// READY" />
      <div style={{ flex: 1, overflow: 'auto', padding: '24px 18px 40px', display: 'flex', flexDirection: 'column' }}>

        {/* Hero */}
        <div style={{ textAlign: 'center', padding: '20px 8px 30px', position: 'relative' }}>
          <div style={{
            width: 84, height: 84, margin: '0 auto 18px',
            border: `1px solid ${C.cyan}`,
            background: 'rgba(125,249,255,.04)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 0 24px rgba(125,249,255,.25), inset 0 0 16px rgba(125,249,255,.08)`,
            position: 'relative',
          }}>
            <Icon name="sparkles" size={32} color={C.cyan} stroke={1.4} />
            {/* corner accents */}
            {['tl','tr','bl','br'].map(c => {
              const pos = {
                tl: { top: -1, left: -1, borderTop: `1.5px solid ${C.cyan}`, borderLeft: `1.5px solid ${C.cyan}` },
                tr: { top: -1, right: -1, borderTop: `1.5px solid ${C.cyan}`, borderRight: `1.5px solid ${C.cyan}` },
                bl: { bottom: -1, left: -1, borderBottom: `1.5px solid ${C.cyan}`, borderLeft: `1.5px solid ${C.cyan}` },
                br: { bottom: -1, right: -1, borderBottom: `1.5px solid ${C.cyan}`, borderRight: `1.5px solid ${C.cyan}` },
              }[c];
              return <div key={c} style={{ position: 'absolute', width: 12, height: 12, ...pos }} />;
            })}
          </div>
          <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.3em', color: C.cyan, textTransform: 'uppercase', marginBottom: 10 }}>// MATCHING ON</div>
          <div style={{ fontFamily: FF, fontSize: 24, fontWeight: 600, color: C.fg1, letterSpacing: '-0.02em', lineHeight: 1.4 }}>
            マッチング機会を<br/>お待ちしています
          </div>
          <div style={{ fontFamily: FS, fontSize: 12, color: C.fg2, marginTop: 12, lineHeight: 1.7, padding: '0 16px' }}>
            担当コンサルが貴社のニーズ・シーズに合う企業を探します。提案が届き次第、メールでお知らせします。
          </div>
        </div>

        {/* Status mini-stats */}
        <div style={{
          margin: '0 0 24px', padding: 14,
          border: `1px solid ${C.border2}`,
          background: 'linear-gradient(135deg, rgba(165,154,202,.06), transparent)',
          display: 'flex', justifyContent: 'space-around', gap: 8,
        }}>
          {[
            { label: 'プロフィール', val: '72%' },
            { label: 'NEEDS', val: '3 件' },
            { label: 'SEEDS', val: '2 件' },
          ].map((s, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center', borderLeft: i > 0 ? `1px solid ${C.border}` : 'none' }}>
              <div style={{ fontFamily: FF, fontSize: 18, fontWeight: 600, color: C.lilac }}>{s.val}</div>
              <div style={{ fontFamily: FM, fontSize: 9.5, color: C.fg3, letterSpacing: '.1em', marginTop: 4, textTransform: 'uppercase' }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* 3 CTAs (要件定義書 §3 ステップ5) */}
        <Eyebrow>// 次に何をしますか</Eyebrow>
        {[
          { id: 'home', icon: 'layout-dashboard', title: 'ホームを開く', sub: '提案が届くと通知されます', accent: C.lilac },
          { id: 'consult', icon: 'messages-square', title: 'コンサルに相談', sub: '個別の関係づくりを依頼する', accent: C.cyan },
          { id: 'card', icon: 'scan-line', title: '名刺をアップロード', sub: '撮影して連絡先帳に追加', accent: C.magenta },
        ].map((c, i) => (
          <div key={i}
            onClick={() => onAction && onAction(c.id)}
            style={{
              padding: '18px 16px', border: `1px solid ${C.border2}`,
              background: C.bg2, marginBottom: 10,
              display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer',
            }}>
            <div style={{
              width: 44, height: 44, border: `1px solid ${c.accent}`,
              background: 'rgba(165,154,202,.06)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              boxShadow: `0 0 12px ${c.accent}30`,
            }}>
              <Icon name={c.icon} size={20} color={c.accent} stroke={1.6} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: FF, fontSize: 15, fontWeight: 500, color: C.fg1 }}>{c.title}</div>
              <div style={{ fontFamily: FS, fontSize: 11.5, color: C.fg3, marginTop: 3 }}>{c.sub}</div>
            </div>
            <Icon name="arrow-up-right" size={16} color={C.fg2} />
          </div>
        ))}
      </div>
    </>
  );
}

window.SKG_WAIT = { MatchingWaitScreen };