/* freee.html — オマカセfreee導入 */

const FrWhy = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="01 Why">
    <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:64, alignItems:'start'}}>
      <div>
        <Eyebrow>WHY · なぜ必要か</Eyebrow>
        <h2 style={{marginTop:16}}>ツールを入れただけでは、<br/>業務は変わらない。</h2>
        <img src="assets/svc-freee.jpg" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', marginTop:28, display:'block'}}/>
      </div>
      <div className="prose">
        <p>
          freee人事労務は優れたクラウドですが、<strong>"入れる"と"使える"の間には、はっきり距離があります</strong>。
          設定の仕方、勤怠とのつなぎ方、社員への案内の仕方、月次の運用フロー。このどれかが欠けると、
          結局Excelと紙が残り続けます。
        </p>
        <p>
          このサービスは「設定代行」ではありません。
          設計 → 設定 → 社員トレーニング → 運用 → 定着チェックまでを、<strong>約4ヶ月のプロジェクトとして伴走</strong>します。
          現場で"使える状態"まで持っていくのが目的です。
        </p>
        <p>
          freee認定アドバイザー／社労士法人の両方の目線で入るので、
          「freeeの機能としては正しいが、労務の現場では使いにくい」みたいなズレも、設計段階で潰します。
        </p>
      </div>
    </div>
  </section>
);

const FrTimeline = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="02 Timeline">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>TIMELINE · 4ヶ月の伴走</Eyebrow>
        <h2>毎月のゴールが見える、プロジェクト型。</h2>
      </div>
      <div className="timeline">
        <div className="timeline__row">
          <div className="timeline__step">MONTH 01<strong>設計</strong></div>
          <div>
            <div className="timeline__title">現状ヒアリング／あるべき業務設計</div>
            <div className="timeline__body">
              現在の業務フロー・規則・勤怠・給与のやり方を棚卸し。
              freeeで回す"あるべき運用"を設計し、設定項目と社内ルールを確定します。
            </div>
          </div>
        </div>
        <div className="timeline__row">
          <div className="timeline__step">MONTH 02<strong>設定</strong></div>
          <div>
            <div className="timeline__title">マスタ・勤怠・給与・社員情報の構築</div>
            <div className="timeline__body">
              設計に沿って、freee人事労務の設定を当社で構築します。
              勤怠システムとの連携、銀行連携、freee会計とのつなぎも、使える形で整えます。
            </div>
          </div>
        </div>
        <div className="timeline__row">
          <div className="timeline__step">MONTH 03<strong>研修</strong></div>
          <div>
            <div className="timeline__title">社員説明会／担当者トレーニング</div>
            <div className="timeline__body">
              全社員向けの操作説明、労務担当向けの運用トレーニングを実施。
              マニュアルも会社専用に作成し、運用チームに渡します。
            </div>
          </div>
        </div>
        <div className="timeline__row">
          <div className="timeline__step">MONTH 04<strong>定着</strong></div>
          <div>
            <div className="timeline__title">初回月次運用／振り返り／引き渡し</div>
            <div className="timeline__body">
              初めての月次給与・勤怠締めを、当社が横で伴走。
              つまずいたポイントを拾って運用ルールに反映し、ドキュメントを完成。
              プロジェクト完了後は、顧問契約で継続運用するか、自走に移行するかを選べます。
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FrPrice = () => (
  <section style={{padding:'64px 0', background:'var(--paper)'}} data-screen-label="03 Price">
    <div className="container" style={{maxWidth:880, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>PRICE · 料金</Eyebrow>
        <h2>一括プロジェクト型。<br/>途中で増える費用はありません。</h2>
      </div>
      <div className="pricetbl-wrap">
        <table className="pricetbl">
          <thead>
            <tr>
              <th>社員数</th>
              <th>導入費用 (一括)<small>4ヶ月伴走込み</small></th>
              <th>導入後の運用 (任意)<small>オマカセロウムくんへ</small></th>
            </tr>
          </thead>
          <tbody>
            <tr><th>〜30名</th><td>600,000円</td><td>月額 45,000円〜</td></tr>
            <tr><th>31〜60名</th><td>900,000円</td><td>月額 65,000円〜</td></tr>
            <tr><th>61〜100名</th><td>1,200,000円</td><td>月額 90,000円〜</td></tr>
            <tr><th>101名〜</th><td colSpan={2} style={{textAlign:'center', color:'var(--ink-500)', fontFamily:'var(--font-sans)', fontWeight:500, fontSize:14}}>個別お見積もり</td></tr>
          </tbody>
        </table>
      </div>
      <div className="price-note">
        <b>含まれるもの：</b> 業務設計／freee人事労務の各種設定／連携設定／社員説明会／担当者研修／会社専用マニュアル作成／初回月次運用の伴走／全期間のチャット・オンライン相談し放題。<br/>
        <b>別料金：</b> freeeの月額ライセンス料（freee社へ直接お支払い）／勤怠システムの選定と導入（相談ベース）。
      </div>
    </div>
  </section>
);

const FrNotDo = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} data-screen-label="04 Not Do">
    <div className="container" style={{maxWidth:860, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>HONEST · 正直に</Eyebrow>
        <h2>合わない会社もあります。</h2>
      </div>
      <div className="callout callout--warn">
        <h4>このサービスがお勧めできないケース</h4>
        <ul>
          <li><strong>freee以外のツールを使いたい会社：</strong> 私たちはfreee人事労務に特化しています。他のクラウドをご希望の場合は、適したパートナーをご紹介します。</li>
          <li><strong>社内で一切リソースを出せない会社：</strong> 伴走型なので、月1〜2時間のミーティングや、社員説明会の調整は必要です。完全丸投げは成功しません。</li>
          <li><strong>今の業務フローを絶対に変えたくない会社：</strong> 必ずどこかで「これはfreeeに合わせましょう」が発生します。ある程度の変化は前提です。</li>
        </ul>
      </div>
    </div>
  </section>
);

const FrCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="05 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 CONSULTATION</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'}}>freeeの使い方</em>を見せてください。
      </h2>
      <p style={{fontSize:16, lineHeight:2, color:'rgba(255,255,255,.85)', marginBottom:28}}>
        画面を共有いただければ、どこまで活用できているか／何を直すと楽になるか、30分で整理します。
      </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, { FrWhy, FrTimeline, FrPrice, FrNotDo, FrCTA });
