/* S2 ホーム（レコメンド）★主役 */
const HomeScreen = ({ nav, onScout }) => {
  const { STUDENTS, HOSPITAL } = window.SV_DATA;
  const { Avatar, Stars, FitBadge, TypeChip, Activity, Button, Card, SectionTitle, Note } = window.SV_UI;
  const Icons = window.SV_Icons;

  const now = STUDENTS.filter((s) => s.group === "now");
  const early = STUDENTS.filter((s) => s.group === "early");

  // 今ぴったりの候補カード（大）
  const NowCard = ({ s, i }) => (
    <Card hover onClick={() => nav.go("detail", s.id)} pad={0} className="fade-up"
      style={{ animationDelay: `${i * 70}ms`, overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "20px 20px 16px", display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
        <div style={{ display: "flex", gap: 13, alignItems: "flex-start" }}>
          <Avatar s={s} size={52} ring />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
              <span className="disp" style={{ fontSize: 17, fontWeight: 700, color: "var(--ink)" }}>{s.name}</span>
              <FitBadge value={s.fit} size="sm" />
            </div>
            <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 5, lineHeight: 1.7 }}>
              <div>{s.role}・{s.year}</div>
              <div>{s.school}</div>
              <div>{s.lab && s.lab !== "—" ? s.lab : "研究室なし"}</div>
            </div>
            <div style={{ marginTop: 8 }}><Activity level={s.activityLevel} text={s.activity} /></div>
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "9px 12px", background: "var(--surface-3)", borderRadius: "var(--r-md)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "var(--ink-2)" }}>
            <Icons.clock size={15} /> 就業可能
          </div>
          <span className="num" style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>{s.available}</span>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 10, justifyContent: "space-between", flexWrap: "wrap" }}>
          <Stars value={s.stars} />
          <TypeChip code={s.type} />
        </div>

        <div style={{ display: "flex", gap: 8, alignItems: "flex-start", lineHeight: 1.6, fontSize: 13, color: "var(--ink)", background: "var(--brand-50)", borderRadius: "var(--r-md)", padding: "11px 12px", border: "1px solid var(--brand-100)", flex: 1 }}>
          <span style={{ color: "var(--brand-500)", flexShrink: 0, marginTop: 1 }}><Icons.sparkle size={16} /></span>
          <span><b style={{ color: "var(--brand-800)", fontWeight: 700 }}>声をかける理由</b><br />{s.reason}</span>
        </div>
      </div>

      <div style={{ display: "flex", gap: 9, padding: "13px 18px", borderTop: "1px solid var(--border)", background: "var(--surface-2)" }}>
        <Button variant="primary" icon={Icons.send} size="sm" style={{ flex: 1 }}
          onClick={(e) => { e.stopPropagation(); onScout(s.id); }}>スカウト</Button>
        <Button variant="ghost" size="sm" iconRight={Icons.arrowRight}
          onClick={(e) => { e.stopPropagation(); nav.go("detail", s.id); }}>詳細</Button>
      </div>
    </Card>
  );

  // 早期接点カード（小・横長）
  const EarlyCard = ({ s, i }) => (
    <Card hover onClick={() => nav.go("detail", s.id)} pad={16} className="fade-up"
      style={{ animationDelay: `${(i + 3) * 70}ms`, display: "flex", alignItems: "center", gap: 14 }}>
      <Avatar s={s} size={46} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span className="disp" style={{ fontSize: 15, fontWeight: 700 }}>{s.name}</span>
          <Stars value={s.stars} size={13} />
        </div>
        <div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 3 }}>{s.role}・{s.year} ／ 就業可能 <span className="num" style={{ fontWeight: 600, color: "var(--ink)" }}>{s.available}</span></div>
        <div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 6, lineHeight: 1.55 }}>{s.reason}</div>
      </div>
      <Button variant="subtle" size="sm" icon={Icons.heart}
        onClick={(e) => { e.stopPropagation(); nav.go("detail", s.id); }}>つながる</Button>
    </Card>
  );

  return (
    <div>
      {/* グリーティング */}
      <div className="fade-up" style={{ marginBottom: 26 }}>
        <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 6 }}>2026年6月10日（水）</div>
        <h1 className="disp" style={{ fontSize: 27, fontWeight: 800, letterSpacing: ".01em", lineHeight: 1.3 }}>
          こんにちは、{HOSPITAL.nameHonorific}。<br />
          <span style={{ color: "var(--brand-700)" }}>今、御院にぴったりの候補が3名</span>います。
        </h1>
      </div>

      {/* 上段：今ぴったりの候補 */}
      <SectionTitle kicker="今、御院にぴったりの候補" icon={Icons.sparkle}
        desc="直近就業可能・条件適合・活性度の高い候補です。" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 40 }}>
        {now.map((s, i) => <NowCard key={s.id} s={s} i={i} />)}
      </div>

      {/* 下段：早期接点 */}
      <SectionTitle kicker="早期接点の候補" icon={Icons.heart} />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 28 }}>
        {early.map((s, i) => <EarlyCard key={s.id} s={s} i={i} />)}
      </div>
    </div>
  );
};

window.SV_Home = HomeScreen;