/* S8 病院プロフィール設定（ヒアリング起点） */
function ProfileScreen({ nav }) {
  const { HOSPITAL, PROFILE } = window.SV_DATA;
  const { Button, Card, Note, Pill } = window.SV_UI;
  const Icons = window.SV_Icons;

  const Section = ({ icon: Icon, title, sub, children, draft }) => (
    <Card pad={22} style={{ marginBottom: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
        <span style={{ color: "var(--brand-500)" }}><Icon size={19} /></span>
        <h2 className="disp" style={{ fontSize: 16.5, fontWeight: 700 }}>{title}</h2>
        {draft && <Pill bg="var(--brand-50)" color="var(--brand-700)" icon={Icons.sparkle}>SolaVet 下書き</Pill>}
      </div>
      {sub && <p style={{ fontSize: 12.5, color: "var(--ink-2)", marginBottom: 14, lineHeight: 1.55 }}>{sub}</p>}
      <div style={{ marginTop: sub ? 0 : 12 }}>{children}</div>
    </Card>
  );
  const F = ({ label, value, full, area }) => (
    <label style={{ display: "block", gridColumn: full ? "1 / -1" : "auto" }}>
      <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-2)", display: "block", marginBottom: 6 }}>{label}</span>
      {area
        ? <textarea defaultValue={value} rows={3} style={{ ...fInp, lineHeight: 1.6, resize: "vertical" }} />
        : <input defaultValue={value} style={fInp} />}
    </label>
  );

  return (
    <div>
      <div>
        <div style={{ marginBottom: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--brand-600)", fontSize: 12.5, fontWeight: 700, marginBottom: 7 }}><Icons.profile size={15} />病院プロフィール設定</div>
          <h1 className="disp" style={{ fontSize: 23, fontWeight: 800 }}>ヒアリングで伺ったニーズを記録</h1>
          <p style={{ fontSize: 13.5, color: "var(--ink-2)", marginTop: 7, lineHeight: 1.6, maxWidth: 660 }}>タイプや4軸は<b>選びません</b>。「どんな職場か・どんな人に来てほしいか」を伺い、軸への翻訳は SolaVet が内部で行います。下書きを編集して保存してください。</p>
        </div>

        <Section icon={Icons.paw} title="基本情報">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <F label="病院名" value={HOSPITAL.name} />
            <F label="院" value="武蔵小金井院 ／ 東久留米院（2院）" />
            <F label="立地" value="東京都・23区外" />
            <F label="診療対象" value="犬・猫専門" />
          </div>
        </Section>

        <Section icon={Icons.shield} title="診療内容" draft>
          <F label="主な診療" value={PROFILE.care} area full />
        </Section>

        <Section icon={Icons.heart} title="育成方針" draft sub="採った人にどうなってほしいか。">
          <F label="方針" value={PROFILE.growth} area full />
        </Section>

        <Section icon={Icons.sparkle} title="求める人材像（平場のニーズ）" draft sub="ヒアリングで伺った言葉のまま。SolaVet が内部で軸へ翻訳します。">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 14 }}>
            {HOSPITAL.needs.map((n) => (
              <span key={n} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 600, color: "var(--brand-800)", background: "var(--brand-50)", border: "1px solid var(--brand-100)", borderRadius: 999, padding: "7px 13px" }}>
                <Icons.check size={14} />{n}
              </span>
            ))}
            <button style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 13, color: "var(--ink-3)", border: "1px dashed var(--border-strong)", borderRadius: 999, padding: "7px 13px" }}><Icons.plus size={14} />追加</button>
          </div>
        </Section>

        <Section icon={Icons.user} title="就職条件・採用ニーズ" sub="人数・時期・職種・給与レンジ。">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <F label="採用職種・人数" value={PROFILE.conditions.roles} />
            <F label="採用時期" value={PROFILE.conditions.start} />
            <F label="給与レンジ" value={PROFILE.conditions.pay} />
            <F label="休日・福利厚生" value={PROFILE.conditions.welfare} />
          </div>
        </Section>

        <div style={{ marginBottom: 16 }}>
          <Note tone="brand" icon={Icons.link}>ここで編集した「診療内容・育成方針・求める人材像」は、<b>連携中の求人</b>に自動で反映されます。<button onClick={() => nav.go("jobpost")} style={{ color: "var(--brand-700)", fontWeight: 700, textDecoration: "underline", marginLeft: 4 }}>求人管理を開く</button></Note>
        </div>

        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 4 }}>
          <Button variant="ghost">下書きに戻す</Button>
          <Button variant="primary" icon={Icons.check} onClick={() => nav.go("home")}>保存してホームに候補を並べる</Button>
        </div>
      </div>
    </div>
  );
}
const fInp = { width: "100%", padding: "10px 13px", borderRadius: 10, border: "1px solid var(--border-strong)", fontSize: 13.5, fontFamily: "var(--sans)", color: "var(--ink)", fontWeight: 500 };

window.SV_Profile = ProfileScreen;