/* joseikin.html — オマカセ助成金申請 */

const JNumbers = () => (
  <section style={{padding:'64px 0', background:'var(--paper)'}} data-screen-label="01 Numbers">
    <div className="container">
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20}}>
        {[
          {n:'6', u:'億円+', l:'累計申請額'},
          {n:'500', u:'名+ / 年', l:'対象社員数'},
          {n:'20+', u:'', l:'扱う助成金の種類'},
          {n:'2020', u:'〜', l:'助成金特化の継続年数'}
        ].map((b, i) => (
          <div key={i} style={{
            background:'#fff', border:'1px solid var(--paper-line)',
            borderRadius:'var(--radius)', padding:'26px 24px',
            borderTop:'3px solid var(--accent)'
          }}>
            <div style={{
              fontFamily:'var(--font-serif)', fontWeight:700,
              fontSize:44, color:'var(--navy-700)', lineHeight:1,
              letterSpacing:'.02em'
            }}>
              {b.n}<span style={{fontSize:18, marginLeft:6, color:'var(--ink-700)'}}>{b.u}</span>
            </div>
            <div style={{
              marginTop:10, fontFamily:'var(--font-mono)',
              fontSize:11, letterSpacing:'.12em', color:'var(--ink-500)'
            }}>{b.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const JWhat = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} data-screen-label="02 What">
    <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:64, alignItems:'start'}}>
      <div>
        <Eyebrow>WHAT · 設計する助成金申請</Eyebrow>
        <h2 style={{marginTop:16}}>助成金は<br/>「取り方の設計」で決まる。</h2>
        <img src="assets/svc-joseikin.jpg" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', marginTop:28, display:'block'}}/>
      </div>
      <div className="prose">
        <p>
          助成金は「知っているかどうか」で差が出る、とよく言われます。私たちは少し違います。
          <strong>「取れる要件から逆算して、会社の動きを設計できるか」</strong>で決まると考えています。
        </p>
        <p>
          同じ施策をしていても、申請のタイミング／書類の順番／社内手続きの微妙なズレで、取れるはずの助成金が取れなくなる。
          逆に、最初に設計しておけば、<strong>自然に要件に合う動き</strong>になり、漏らさず取り切れます。
        </p>
        <p>
          代表・山本は、社労士としてのキャリアを通じて<strong>この"設計"の部分を磨いてきた人間</strong>です。
          累計6億円超という数字は、そのまま「設計が効いた会社の数と金額」だと考えていただいて構いません。
        </p>
      </div>
    </div>
  </section>
);

const JKinds = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="03 Kinds">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>COVERAGE · 取り扱う助成金</Eyebrow>
        <h2>中小企業でよく効く、4カテゴリ。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'60ch'}}>
          全部をやろうとはしません。確実に設計でき、取り切れる助成金だけに絞ることで、当社の成功率を維持しています。
        </p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:18}}>
        {[
          {t:'人材採用・定着', e:'HIRE & RETAIN', d:'キャリアアップ助成金、特定求職者雇用開発助成金 など。正社員化や、就職困難者の採用時に。'},
          {t:'人材育成・研修', e:'TRAINING', d:'人材開発支援助成金 各コース。OJT・Off-JT・DX研修 などに。'},
          {t:'働き方改革', e:'WORK STYLE', d:'業務改善助成金、働き方改革推進支援助成金 など。賃上げ・労働時間短縮の設備投資に。'},
          {t:'両立支援', e:'DIVERSITY', d:'両立支援等助成金、65歳超雇用推進助成金 など。育休復帰・高齢者活用に。'}
        ].map((k, i) => (
          <div key={i} style={{
            background:'#fff', border:'1px solid var(--paper-line)',
            borderRadius:'var(--radius)', padding:'26px 22px',
            display:'flex', flexDirection:'column', gap:10
          }}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--accent)'}}>
              0{i+1} · {k.e}
            </div>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', letterSpacing:'.04em'}}>
              {k.t}
            </div>
            <div style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.9}}>{k.d}</div>
          </div>
        ))}
      </div>
      <div style={{marginTop:24, textAlign:'center'}}>
        <a className="btn btn--ghost btn--lg" href="joseikin-list.html">使える助成金をくわしく見る <Arrow/></a>
      </div>
    </div>
  </section>
);

const JPrice = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} data-screen-label="04 Price">
    <div className="container" style={{maxWidth:880, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>PRICE · 料金</Eyebrow>
        <h2>完全成功報酬。取れなければ、<br/>当社に入る報酬も0円です。</h2>
      </div>

      <div className="callout callout--info">
        <h4>報酬の考え方</h4>
        <p>
          <strong>着手金：0円 ／ 月額：0円 ／ 申請が通らなければ：0円。</strong>
          受給額が確定したタイミングで、受給額の一定割合を報酬としていただく、完全成功報酬型です。
        </p>
        <p>
          割合は助成金の種類によって異なります（概ね<strong>受給額の 20〜30%</strong>のレンジ）。
          契約前に必ず書面でご提示し、双方合意の上で進めます。
          追加費用・隠れた固定費は一切ありません。
        </p>
      </div>

      <div className="price-note" style={{marginTop:20}}>
        <b>顧問契約（オマカセロウムくん）との関係：</b>
        顧問契約の中では、<b>取れる助成金の初期診断</b>までを月額で対応します。
        「本格的に取りに行く」案件は、このオマカセ助成金申請に切り替えて、成功報酬型で進めます。
        顧問契約なしの単発でのご依頼も歓迎です。
      </div>
    </div>
  </section>
);

const JNotDo = () => (
  <section style={{padding:'64px 0', background:'var(--paper)'}} data-screen-label="05 Not Do">
    <div className="container" style={{maxWidth:860, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>HONEST · 断る案件もあります</Eyebrow>
        <h2>「取れない助成金」は、<br/>正直にお断りします。</h2>
      </div>
      <div className="callout callout--warn">
        <h4>お受けできない／お勧めしないケース</h4>
        <ul>
          <li><strong>要件を満たさない見込みが高いケース：</strong> 事前診断で「取れる確率が低い」と判断した案件は、無理に進めません。</li>
          <li><strong>形だけ合わせて申請するような取り方：</strong> 後で返還リスクのある取り方は絶対にしません。会社の信用を毀損するより、取らない方がマシだと考えています。</li>
          <li><strong>補助金（経済産業省系）の申請：</strong> 私たちの専門は厚生労働省の"助成金"です。補助金は、適切な支援者を紹介します。</li>
        </ul>
      </div>
    </div>
  </section>
);

const JSteps = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="06 Steps">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>FLOW · 申請までの流れ</Eyebrow>
        <h2>初期診断は無料。<br/>申請から受給まで、平均6〜10ヶ月。</h2>
      </div>
      <div className="timeline">
        <div className="timeline__row">
          <div className="timeline__step">STEP 01<strong>診断</strong></div>
          <div>
            <div className="timeline__title">取れる助成金の初期診断（無料）</div>
            <div className="timeline__body">
              会社の状況・直近1年の動き・今後の予定を伺い、<strong>取れる可能性がある助成金をリストアップ</strong>します。
              ここまでは必ず無料。取れる/取れないを曖昧にしません。
            </div>
          </div>
        </div>
        <div className="timeline__row">
          <div className="timeline__step">STEP 02<strong>設計</strong></div>
          <div>
            <div className="timeline__title">取り方の設計・スケジュール提示</div>
            <div className="timeline__body">
              どの助成金から、どういう順番で取っていくか、計画をご提示。必要な社内動き（契約書・研修・賃金改定など）も合わせて設計します。
            </div>
          </div>
        </div>
        <div className="timeline__row">
          <div className="timeline__step">STEP 03<strong>実行</strong></div>
          <div>
            <div className="timeline__title">計画の実行／書類の整備</div>
            <div className="timeline__body">
              計画書・受講記録・賃金台帳など、書類一式をこちらで整えます。社内で動く部分は、<strong>最小の手間で回る手順書</strong>をお渡しします。
            </div>
          </div>
        </div>
        <div className="timeline__row">
          <div className="timeline__step">STEP 04<strong>申請</strong></div>
          <div>
            <div className="timeline__title">申請・支給決定</div>
            <div className="timeline__body">
              労働局への申請書類を作成・提出。書類不備や照会があれば、当社が直接対応します。社長に時間を使わせません。
            </div>
          </div>
        </div>
        <div className="timeline__row">
          <div className="timeline__step">STEP 05<strong>受給</strong></div>
          <div>
            <div className="timeline__title">受給確定／成功報酬のご請求</div>
            <div className="timeline__body">
              支給決定通知後、助成金が会社口座に入金されます。ご入金確認後、当社から成功報酬をご請求します。
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const JCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="07 CTA">
    <div className="container" style={{textAlign:'center', maxWidth:720, margin:'0 auto'}}>
      <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.24em', color:'rgba(255,255,255,.7)', marginBottom:16}}>
        FREE DIAGNOSIS
      </div>
      <h2 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(26px, 3.2vw, 36px)', lineHeight:1.5, color:'#fff', marginBottom:18, letterSpacing:'.04em'}}>
        <em style={{fontStyle:'normal', background:'linear-gradient(180deg, transparent 62%, rgba(230,126,34,.55) 62% 92%, transparent 92%)', padding:'0 4px'}}>取れる助成金の診断</em>は、無料です。
      </h2>
      <p style={{fontSize:16, lineHeight:2, color:'rgba(255,255,255,.85)', marginBottom:28}}>
        正直に取れる／取れないをお伝えします。診断結果だけ持ち帰りも歓迎。
      </p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a className="btn btn--primary btn--lg" href="contact.html">無料診断を申し込む <Arrow/></a>
        <a className="btn btn--ghost btn--lg" href="service.html" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>他のサービスも見る</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { JNumbers, JWhat, JKinds, JPrice, JNotDo, JSteps, JCTA });
