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

// ─────────────────────────────────────────────────────────────
// Screen 0 (補) — Company Profile Onboarding
// 要件定義書 §3 / spec §FR-006〜011 に対応
// 「3分で完了」を意識した最小入力。タグはプリセット選択 + 自由記述。
// ─────────────────────────────────────────────────────────────
function CompanyProfileScreen({ onComplete }) {
  const needsTags = [
    { id: 'sales', label: '販路拡大', on: true },
    { id: 'tech', label: '技術提携', on: true },
    { id: 'capital', label: '資本提携', on: false },
    { id: 'talent', label: '人材紹介', on: false },
    { id: 'global', label: '海外進出', on: true },
    { id: 'rd', label: '共同研究', on: false },
  ];
  const seedsTags = [
    { id: 'platform', label: 'SaaS基盤', on: true },
    { id: 'ai', label: 'AI推論', on: true },
    { id: 'consult', label: 'コンサル', on: false },
    { id: 'data', label: 'データ分析', on: false },
    { id: 'design', label: 'デザイン', on: false },
  ];
  const industries = ['IT・SaaS', '製造業', '金融', '小売', 'ヘルスケア'];
  const sizes = ['〜10名', '11-50名', '51-100名', '101-500名', '501名〜'];

  return (
    <>
      <AppHeader title="会社プロフィール" subtitle="// ONBOARDING · 1/1" back onBack={onComplete && (() => onComplete('back'))} />
      <div style={{ flex: 1, overflow: 'auto', padding: '18px 18px 100px' }}>

        {/* Hero copy */}
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.lilac, textTransform: 'uppercase' }}>// 5 分でバリュー</div>
          <div style={{ fontFamily: FF, fontSize: 22, fontWeight: 600, color: C.fg1, marginTop: 6, lineHeight: 1.4, letterSpacing: '-0.02em' }}>
            貴社のニーズとシーズを<br/>教えてください
          </div>
          <div style={{ fontFamily: FS, fontSize: 12, color: C.fg2, marginTop: 8, lineHeight: 1.7 }}>
            プロフィールを充実させるほど、コンサルが最適な提案をお届けできます。
          </div>
        </div>

        {/* Progress */}
        <div style={{ marginBottom: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: FM, fontSize: 10, color: C.fg2, letterSpacing: '.06em', marginBottom: 6 }}>
            <span>入力進捗</span>
            <span style={{ color: C.lilac, fontWeight: 500 }}>40%</span>
          </div>
          <div style={{ height: 4, background: C.bg3, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, width: '40%', background: `linear-gradient(90deg, ${C.lilac}, ${C.cyan})`, boxShadow: `0 0 12px ${C.lilac}` }} />
          </div>
        </div>

        {/* Section 1: Basic */}
        <Eyebrow>// 基本情報</Eyebrow>
        <Field label="会社名" required value="株式会社コアラボ" icon="building-2" />

        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: FS, fontSize: 11, fontWeight: 500, color: C.fg2, letterSpacing: '.06em', marginBottom: 8, textTransform: 'uppercase' }}>
          業種 <span style={{ color: C.magenta, fontFamily: FM }}>·</span>
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
          {industries.map((it, i) => (
            <span key={it} style={{
              padding: '7px 12px',
              border: `1px solid ${i === 0 ? C.lilac : C.border2}`,
              color: i === 0 ? C.lilac : C.fg2,
              background: i === 0 ? 'rgba(165,154,202,.08)' : 'transparent',
              fontFamily: FS, fontSize: 11.5, letterSpacing: '.04em',
              boxShadow: i === 0 ? `0 0 12px rgba(165,154,202,.25)` : 'none',
            }}>{it}</span>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: FS, fontSize: 11, fontWeight: 500, color: C.fg2, letterSpacing: '.06em', marginBottom: 8, textTransform: 'uppercase' }}>
          規模 (従業員数)
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
          {sizes.map((sz, i) => (
            <span key={sz} style={{
              padding: '7px 12px',
              border: `1px solid ${i === 1 ? C.lilac : C.border2}`,
              color: i === 1 ? C.lilac : C.fg2,
              background: i === 1 ? 'rgba(165,154,202,.08)' : 'transparent',
              fontFamily: FM, fontSize: 11, letterSpacing: '.04em',
            }}>{sz}</span>
          ))}
        </div>

        <Field label="所在地" placeholder="東京都千代田区..." value="東京都港区芝公園 4-2-8" icon="map-pin" />
        <Field label="Web サイト" placeholder="https://..." value="https://corelabs.jp" icon="globe" />
        <Field label="事業内容" multiline placeholder="200字以内" value="産業向け SaaS 基盤と AI 推論エンジンの開発・提供。製造業を中心に DX 案件を支援。" />

        {/* Section 2: Contact */}
        <Eyebrow style={{ marginTop: 28 }}>// 連絡担当者</Eyebrow>
        <Field label="氏名" required value="林 健太郎" icon="user" />
        <Field label="役職" value="代表取締役 CEO" icon="briefcase" />
        <Field label="メール" required value="hayashi@corelabs.jp" icon="mail" />

        {/* Section 3: Needs */}
        <Eyebrow style={{ marginTop: 28 }}>// 求めているもの (NEEDS · 最大 5)</Eyebrow>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
          {needsTags.map(t => (
            <span key={t.id} style={{
              padding: '7px 12px',
              border: `1px solid ${t.on ? C.cyan : C.border2}`,
              color: t.on ? C.cyan : C.fg2,
              background: t.on ? 'rgba(125,249,255,.06)' : 'transparent',
              fontFamily: FS, fontSize: 11.5, letterSpacing: '.04em',
              boxShadow: t.on ? `0 0 10px rgba(125,249,255,.18)` : 'none',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {t.on && <Icon name="check" size={11} color={C.cyan} stroke={2.4} />}
              {t.label}
            </span>
          ))}
        </div>
        <Field multiline placeholder="自由記述 (任意)" value="アジア圏の製造業、特に IoT 領域で実績ある企業との提携機会" />

        {/* Section 4: Seeds */}
        <Eyebrow style={{ marginTop: 28 }}>// 提供できるもの (SEEDS · 最大 5)</Eyebrow>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
          {seedsTags.map(t => (
            <span key={t.id} style={{
              padding: '7px 12px',
              border: `1px solid ${t.on ? C.magenta : C.border2}`,
              color: t.on ? C.magenta : C.fg2,
              background: t.on ? 'rgba(255,110,199,.06)' : 'transparent',
              fontFamily: FS, fontSize: 11.5, letterSpacing: '.04em',
              boxShadow: t.on ? `0 0 10px rgba(255,110,199,.18)` : 'none',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {t.on && <Icon name="check" size={11} color={C.magenta} stroke={2.4} />}
              {t.label}
            </span>
          ))}
        </div>
        <Field multiline placeholder="自由記述 (任意)" value="エッジ AI を組み込んだ品質検査ソリューション。OEM 連携可能。" />

        {/* Section 5: Matching opt-in */}
        <Eyebrow style={{ marginTop: 28 }}>// マッチング設定</Eyebrow>
        <div style={{
          padding: 14, border: `1px solid ${C.cyan}`,
          background: 'rgba(125,249,255,.04)',
          marginBottom: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: FS, fontSize: 13, color: C.fg1, fontWeight: 500 }}>マッチング機会を受け取る</div>
            <div style={{ fontFamily: FS, fontSize: 11, color: C.fg3, marginTop: 3, lineHeight: 1.5 }}>コンサルからの提案を受信します</div>
          </div>
          <div style={{
            width: 38, height: 22, position: 'relative',
            background: C.cyan,
            border: `1px solid ${C.cyan}`,
            boxShadow: `0 0 12px rgba(125,249,255,.4)`,
          }}>
            <div style={{
              position: 'absolute', top: 2, left: 18,
              width: 16, height: 16,
              background: C.bg1,
            }} />
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: FS, fontSize: 11, fontWeight: 500, color: C.fg2, letterSpacing: '.06em', marginBottom: 8, textTransform: 'uppercase' }}>
          公開範囲
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 22 }}>
          {[
            { id: 'open', label: '社名公開', sub: '双方承諾後に開示', icon: 'eye', active: false },
            { id: 'anon', label: '業種のみ匿名', sub: '推奨', icon: 'eye-off', active: true },
          ].map(o => (
            <div key={o.id} style={{
              flex: 1, padding: '12px 10px',
              border: `1px solid ${o.active ? C.lilac : C.border2}`,
              background: o.active ? 'rgba(165,154,202,.08)' : 'transparent',
              boxShadow: o.active ? `0 0 12px rgba(165,154,202,.25)` : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <Icon name={o.icon} size={14} color={o.active ? C.lilac : C.fg2} />
                <span style={{ fontFamily: FS, fontSize: 12, fontWeight: 500, color: o.active ? C.lilac : C.fg1, letterSpacing: '.04em' }}>{o.label}</span>
              </div>
              <div style={{ fontFamily: FM, fontSize: 9.5, color: C.fg3, letterSpacing: '.04em', marginLeft: 22 }}>{o.sub}</div>
            </div>
          ))}
        </div>

        <PrimaryBtn full icon="arrow-right" onClick={() => onComplete && onComplete('done')}>マッチングを開始する</PrimaryBtn>
        <div style={{ fontFamily: FS, fontSize: 10.5, color: C.fg3, textAlign: 'center', marginTop: 12, lineHeight: 1.6 }}>
          後からアカウント設定でいつでも変更できます。
        </div>
      </div>
    </>
  );
}

window.SKG_PROFILE = { CompanyProfileScreen };