/* Systems pages: 育成就労 and 特定技能 */

function IkuseiPage() {
  return (
    <main>
      {/* 英語表記：法務省 日本法令外国語訳DB「育成就労＝Employment for Skill Development」に準拠 */}
      <PageHero
        kicker="EMPLOYMENT FOR SKILL DEVELOPMENT PROGRAM"
        title="育成就労制度"
        lead="2027年4月から開始される新しい外国人材受入制度。「人材育成」と「人材確保」の2つを目的に再設計された制度です。"
        photo={PHOTOS.ikuseiHero}
        crumbs="育成就労制度"
        fixId="34"
      />

      <section className="section">
        <div className="container">
          <div className="data-grid">
            <FadeUp>
              <div className="section-num">OVERVIEW</div>
              {/* 修正依頼 #39：見出しを差し替え。文字数が増えたため1段小さいサイズにし、改行位置を明示
                  （usp-h2-long と同じ「長い見出しはサイズを1段下げて改行位置を保つ」運用） */}
              <h2 className="section-title" data-nq-fix="39" style={{marginTop:16, fontSize:"clamp(26px, 3vw, 38px)"}}>
                外国人材の「育成」と<br/>「長期定着」を両立する<br/>新採用ルート。
              </h2>
            </FadeUp>
            <FadeUp delay={100} className="prose">
              {/* 修正依頼 #40：第1段落（育成就労制度は、2027年4月の施行に向けて〜）を削除 */}
              <p>
                当組合は、監理支援機関として、受入企業様および外国人材ご本人の双方を、入国前のマッチングから3年後のキャリア選択まで、ワンストップでご支援いたします。
              </p>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* 3 features diagram */}
      <section className="section tight">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">FEATURES</div>
              <h2 className="section-title">本制度の 3 つの特徴</h2>
            </div>
          </FadeUp>
          <FadeUp>
            <FeaturesDiagram />
          </FadeUp>
        </div>
      </section>

      {/* 制度の要点 */}
      <section className="section section-soft">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">KEY POINTS</div>
              <h2 className="section-title">制度の要点</h2>
            </div>
          </FadeUp>
          <FadeUp>
            {/* data-nq-fix="37"：表の文字拡大（CSSのみの変更） */}
            <table className="info-table" data-nq-fix="37">
              <tbody>
                <tr><th style={{width:"28%"}}>目的</th><td>「人材確保」と「人材育成」の2軸</td></tr>
                <tr><th>在留期間</th><td>原則3年。修了後、特定技能1号へ移行すれば通算原則8年の就労が可能</td></tr>
                <tr><th>入国時の日本語要件</th><td>A1相当（日本語能力試験 N5レベル）を新たに要件化</td></tr>
                <tr><th>転籍</th><td>一定条件下で、同一業種内・本人意向による転籍が可能</td></tr>
                <tr><th>監理体制</th><td>監理支援機関（要件・監督が強化）</td></tr>
                <tr><th>受入企業の責任</th><td>人材育成計画の策定／キャリア形成支援／育成体制の強化</td></tr>
              </tbody>
            </table>
          </FadeUp>
        </div>
      </section>

      {/* 7-step flow */}
      <section className="section">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">PROCESS</div>
              <h2 className="section-title">受入から帰国までの 7 ステップ</h2>
            </div>
          </FadeUp>
          <FadeUp>
            <ProcessDiagram />
          </FadeUp>
        </div>
      </section>

      {/* 7ステップを支えるサポート体制
          修正依頼（第1回）p.12：組合案内ページの「組合によるサポート」をここへ移設し、
          各サポートが7ステップのどこで効いてくるのかを示す形に再構成。 */}
      <SupportBySteps />

      {/* 入国後講習のご案内 */}
      <section className="section section-soft">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">CURRICULUM</div>
              <h2 className="section-title">入国後講習のご案内</h2>
            </div>
          </FadeUp>
          <FadeUp className="data-grid">
            <div>
              <h3 className="serif" style={{fontSize:"clamp(22px, 2.8vw, 30px)", lineHeight:1.7, marginBottom:24, letterSpacing:"0.08em"}}>
                約 1 ヶ月の<br/>体系的な入国後講習
              </h3>
              {/* 修正依頼 p.9：「グループ内日本語学校が直接運営」→「グループ傘下の日本語学校との連携」 */}
              <p style={{fontSize:16, lineHeight:2.05, color:"var(--ink-soft)", marginBottom:20}}>
                グループ傘下の日本語学校「ループインターナショナル日本語学校」との連携により、入国直後の約1ヶ月間、日本語・生活・職業別の集中講習を実施いたします。
              </p>
              <p style={{fontSize:16, lineHeight:2.05, color:"var(--ink-soft)", marginBottom:0}}>
                配属前にN5（A1）相当の日本語力と、日本の生活ルール・労働安全の基礎を身につけたうえで、企業様の現場へお引き渡しします。
              </p>
              {/* 所在地は確定。定員・講師数は未確定（保留）のため {{TODO}} を残す。 */}
              <div style={{marginTop:32, padding:"24px 28px", background:"#fff", border:"1px solid var(--line)"}}>
                <div style={{fontSize:11, letterSpacing:"0.25em", color:"var(--accent)", marginBottom:8}}>OUR FACILITY</div>
                {/* 修正依頼 p.9：施設名に（庄本入国後講習センター）を併記 */}
                <div className="serif" style={{fontSize:16, letterSpacing:"0.08em", color:"var(--primary)", marginBottom:6}}>
                  ループインターナショナル日本語学校<br/>
                  <span style={{fontSize:14}}>（庄本入国後講習センター）</span>
                </div>
                <div style={{fontSize:12.5, color:"var(--ink-soft)", lineHeight:1.9}}>
                  〒532-0002 大阪府大阪市淀川区東三国2-32-17 ループ大阪<br/>
                  {`{{TODO: 定員・講師数（組合確定待ち）}}`}
                </div>
              </div>
            </div>
            <div>
              {/* TODO(client): 入国後講習（約1ヶ月）の各回の時間数・詳細カリキュラムは未確定です。下記は項目の見本です。 */}
              {[
                { wk: "1週目", ttl: "オリエンテーション・生活立ち上げ", body: "在留カード手続き、住居案内、銀行口座開設、生活ルール、緊急連絡先の確認。" },
                { wk: "2〜3週目", ttl: "日本語講習（基礎）", body: "基礎会話、N5（A1）相当の文法・語彙。生活シーンでのロールプレイ。" },
                { wk: "4週目", ttl: "業種別語彙・労働安全", body: "受入分野に応じた専門語彙・安全標識、労働基準・相談窓口・コンプライアンスの基礎。" },
              ].map((c, i) => (
                <div key={i} className="curriculum">
                  <div className="wk">{c.wk}</div>
                  <div>
                    <div className="ttl">{c.ttl}</div>
                    <div className="body">{c.body}</div>
                  </div>
                  <div className="hours">{`{{TODO}}`}</div>
                </div>
              ))}
            </div>
          </FadeUp>
        </div>
      </section>

      {/* Our strength callout */}
      <section className="usp-block">
        <div className="usp-image" style={{backgroundImage:`url(${PHOTOS.classroom})`}}></div>
        <div className="usp-text">
          <FadeUp>
            <div className="section-num">OUR ADVANTAGE</div>
          </FadeUp>
          {/* 修正依頼 p.10：見出し・本文を差し替え */}
          <FadeUp delay={100}>
            {/* 文字数が多い見出しのため usp-h2-long で1段小さいサイズに（意図した改行位置を保つ） */}
            <h2 className="usp-h2-long">入国後講習は、グループ傘下の<br/>日本語学校との連携により、<br/>万全の体制で運営。</h2>
          </FadeUp>
          <FadeUp delay={200}>
            <p>
              新制度で重要視される「日本語能力」。当組合では、グループ傘下の日本語学校「ループインターナショナル日本語学校」との連携による万全の態勢で、質の高いカリキュラムによる講習を提供しています。
            </p>
            {/* 依頼書原文の「背後供御の即戦力化」は誤変換とみて「配属後の即戦力化」と解釈。要確認 */}
            <p>
              N4取得を見据えた日本語教育に加え、きめ細かなメンタル面のサポートや生活習慣の指導、法的講習までフォロー。外部委託では実現できない一貫した教育品質により、配属後の即戦力化を牽引します。
            </p>
            <button className="btn btn-outline" style={{marginTop:24}} onClick={() => navigate("about")}>
              グループ法人について <span className="arrow"><Icon name="arrow" size={14}/></span>
            </button>
          </FadeUp>
        </div>
      </section>

      {/* 8年キャリアパス図。TOPページの構成見直し（TOP構成 01-01〜01-07）で
          トップから外れたため、制度の文脈が近い本ページへ移設。 */}
      <section className="section tight">
        <div className="container">
          <FadeUp>
            <TimelineDiagram />
          </FadeUp>
        </div>
      </section>

      <ReferenceLinks />
      <CTABand/>
    </main>
  );
}

/* 組合によるサポート × 受入から帰国までの7ステップ（修正依頼 p.12 / 修正対応報告書 2-6）
   各カードの上部に 1〜7 のステップインジケータを置き、そのサポートが
   どの段階を支えるのかを、直上の7ステップ図と対応づけて示す。 */
function SupportBySteps() {
  return (
    <section className="section section-soft">
      <div className="container">
        <FadeUp className="section-head center">
          <div className="section-num">SUPPORT / 01 — 06</div>
          <h2 className="section-title">7 ステップを支える、組合のサポート体制</h2>
          <div className="section-en">HOW WE SUPPORT EACH STEP</div>
        </FadeUp>
        <FadeUp className="spt-intro">
          上の「受入から帰国までの 7 ステップ」の各段階を、当組合の 6 つのサポート体制がお支えします。
          カード上部の数字は、そのサポートが力を発揮するステップを表しています。
        </FadeUp>
        <div className="spt-grid">
          {SUPPORT.map((s, i) => (
            <FadeUp key={i} className="spt-card" delay={(i % 3) * 80}>
              <div className="spt-card-head">
                <span className="spt-num">SUPPORT / {s.num}</span>
                <span className="spt-steps">{s.stepLabel}</span>
              </div>
              <div className="spt-dots" aria-label={`対応ステップ：${s.stepLabel}`}>
                <span className="spt-dots-label">STEP</span>
                {[1, 2, 3, 4, 5, 6, 7].map((n) => (
                  <span key={n} className={`spt-dot ${s.steps.includes(n) ? "on" : ""}`} aria-hidden="true">{n}</span>
                ))}
              </div>
              <div className="spt-icon"><Icon name={s.icon} size={24}/></div>
              <h3 className="spt-title">{s.title}</h3>
              <p className="spt-body">{s.body}</p>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

/* 制度説明ページの参照公的資料（A-9）。OTIT に加え 出入国在留管理庁・厚生労働省・JITCO を掲載。
   ※制度説明の文面は公開前に組合の最終チェックに回す前提（C-2）。 */
function ReferenceLinks() {
  const refs = [
    { name: "出入国在留管理庁（ISA）", href: "https://www.moj.go.jp/isa/" },
    { name: "厚生労働省", href: "https://www.mhlw.go.jp/" },
    { name: "外国人育成就労機構（旧：外国人技能実習機構／OTIT）", href: "https://www.otit.go.jp/" },
    { name: "国際人材協力機構（JITCO）", href: "https://www.jitco.or.jp/" },
  ];
  return (
    <section className="section tight">
      <div className="container" style={{maxWidth:880}}>
        <FadeUp>
          <div className="section-num">REFERENCES</div>
          <h3 className="serif" style={{fontSize:18, letterSpacing:"0.08em", margin:"12px 0 16px"}}>参照公的資料</h3>
          <div style={{display:"flex", flexWrap:"wrap", gap:"10px 20px"}}>
            {refs.map((r, i) => (
              <a key={i} href={r.href} target="_blank" rel="noopener noreferrer"
                 style={{fontSize:13.5, color:"var(--primary)", textDecoration:"underline", textUnderlineOffset:3}}>
                {r.name} <Icon name="arrow" size={12}/>
              </a>
            ))}
          </div>
          <p style={{fontSize:11.5, color:"var(--ink-mute)", marginTop:16, lineHeight:1.8}}>
            ※本ページの制度に関する記述は、上記公的資料に基づき作成しています。最新の制度内容は各機関の公表資料をご確認ください。
          </p>
        </FadeUp>
      </div>
    </section>
  );
}

function TokuteiPage() {
  return (
    <main>
      <PageHero
        kicker="SPECIFIED SKILLED WORKER PROGRAM"
        title="特定技能制度"
        lead="即戦力となる外国人材を受け入れる在留資格。当組合では、グループ内で登録支援機関を運営し、法定10項目の支援を一貫してご提供しています。"
        photo={PHOTOS.tokuteiHero}
        crumbs="特定技能制度"
      />

      <section className="section">
        <div className="container">
          <div className="data-grid">
            <FadeUp>
              <div className="section-num">OVERVIEW</div>
              <h2 className="section-title" style={{marginTop:16, fontSize:"clamp(28px, 3.6vw, 44px)"}}>
                即戦力人材を、<br/>支援機関ごと、ご一緒に。
              </h2>
            </FadeUp>
            <FadeUp delay={100} className="prose">
              {/* 修正依頼 p.11：「…で、…で」の重複を解消 */}
              <p>
                特定技能制度は、2019年に新設された在留資格です。深刻な人手不足が認められた特定産業分野において、一定の専門性・技能を持つ外国人材の受入を可能にします。
              </p>
              <p>
                {/* 要確認: 登録支援機関の帰属法人は資料間で矛盾のため法人名を断定しない（凍結） */}
                受入企業様には法定10項目の支援を実施する義務がありますが、これを「登録支援機関」に委託することが可能です。当組合のグループ内登録支援機関が、すべての支援業務を引き受けます。
              </p>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* PATHWAY DIAGRAM — 2 routes to SSW */}
      <section className="section section-soft tight">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">PATTERNS</div>
              <h2 className="section-title">特定技能になるには</h2>
            </div>
          </FadeUp>
          <FadeUp>
            <PathwayDiagram />
          </FadeUp>
        </div>
      </section>

      {/* 受入の流れ */}
      <section className="section section-soft">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">PROCESS</div>
              <h2 className="section-title">受入の流れ（直接受入の場合）</h2>
            </div>
          </FadeUp>
          <FadeUp className="hflow">
            {[
              { label: "ご相談・要件整理", body: "業種・人数・時期を伺い、適切な受入計画を策定します。" },
              { label: "候補者選定・面接", body: "現地候補者リストより、書類審査・オンライン面接を実施。", accent: true },
              { label: "雇用契約・在留資格申請", body: "雇用契約締結後、在留資格認定証明書を申請します。" },
              { label: "入国・配属", body: "空港送迎・住居手配・生活オリエンテーションを実施。" },
              { label: "支援・定着フォロー", body: "法定10項目の支援を継続的に実施。定期面談・行政手続きも対応。" },
            ].map((s, i) => (
              <div key={i} className={`hstep ${s.accent ? "accent" : ""}`}>
                <div className="hstep-circle">{String(i+1).padStart(2,"0")}</div>
                <div className="hstep-label">{s.label}</div>
                <div className="hstep-body">{s.body}</div>
              </div>
            ))}
          </FadeUp>
        </div>
      </section>

      {/* 法定10項目 */}
      <section className="section">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">SUPPORT</div>
              <h2 className="section-title">法定 10 項目の支援内容</h2>
            </div>
          </FadeUp>
          <FadeUp>
            <SupportDiagram />
          </FadeUp>
        </div>
      </section>

      {/* 16 fields */}
      <section className="section section-soft">
        <div className="container">
          <FadeUp className="section-head">
            <div>
              <div className="section-num">FIELDS</div>
              <h2 className="section-title">対応する {SSW_FIELD_COUNT} 特定産業分野</h2>
            </div>
          </FadeUp>
          <FadeUp>
            <FieldsDiagram />
          </FadeUp>
        </div>
      </section>

      {/* Link to case studies */}
      <section className="section tight">
        <div className="container">
          <FadeUp className="case-link-block">
            <div>
              <div className="section-num" style={{marginBottom:12}}>CASE STUDIES</div>
              <h3 className="serif" style={{fontSize:"clamp(22px, 2.8vw, 30px)", letterSpacing:"0.08em", lineHeight:1.6, marginBottom:14}}>
                実際の受入企業様の事例を、ご覧いただけます。
              </h3>
              <p style={{fontSize:14, lineHeight:2, color:"var(--ink-soft)", margin:0}}>
                業種別の事例と、現場で活躍する外国人材ご本人の声をご紹介しています。
              </p>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("cases")}>
              活躍事例を見る <span className="arrow"><Icon name="arrow" size={14}/></span>
            </button>
          </FadeUp>
        </div>
      </section>

      <ReferenceLinks />
      <CTABand/>
    </main>
  );
}

Object.assign(window, { IkuseiPage, TokuteiPage, ReferenceLinks, SupportBySteps });