/* service-ai-agent.html — AIエージェントとは（AI活用支援の詳細ページ。service-ai.jsx は読み込まない） */

/* ---- 共通: 節の枠と見出し ---- */
const AiSec = ({ id, bg, label, children }) => (
  <section id={id} style={{padding:'72px 0', background:bg, borderTop:'1px solid var(--paper-line)'}} data-screen-label={label}>
    <div className="container">{children}</div>
  </section>
);

const AiHead = ({ eyebrow, title, lead }) => (
  <div className="section-head" style={{marginBottom:32}}>
    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
    <h2>{title}</h2>
    {lead && <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>{lead}</p>}
  </div>
);

const aiCard = { background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'22px 22px' };
const aiNum = { fontFamily:'var(--font-mono)', fontWeight:700, fontSize:13, color:'var(--accent)', letterSpacing:'.06em' };
const aiH3 = { fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16.5, lineHeight:1.55, color:'var(--ink-900)', margin:'6px 0 8px', letterSpacing:'.02em' };
const aiP = { fontSize:13.5, lineHeight:1.9, color:'var(--ink-700)', margin:0 };
const aiGrid = (min) => ({ display:'grid', gridTemplateColumns:`repeat(auto-fit, minmax(${min}px, 1fr))`, gap:16 });

/* ---- 01 スライド4：時代 ---- */
const AI_FLOW = [
  { t:'パソコンに話しかける', s:'人が仕事を頼む' },
  { t:'AIエージェントが進める', s:'プログラミングやホームページ作りも' },
  { t:'業務が最後まで終わる', s:'AIエージェントで完結' }
];
const AiEra = () => (
  <AiSec id="era" bg="var(--paper)" label="01 時代">
    <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:48, alignItems:'center'}}>
      <div>
        <Eyebrow>ERA · AIエージェントの時代</Eyebrow>
        <h2 style={{marginTop:16}}>パソコンに話しかけて、仕事を頼める時代になりました</h2>
        <p className="lead" style={{marginTop:14}}>
          Claude Code や Codex といったAIエージェントを使えば、パソコンに話しかけるだけで仕事を頼めます。これまでエンジニアでなければできなかったプログラミングやホームページ作りも、できるようになりました。業務を最後までAIエージェントで進められるようになりました。
        </p>
      </div>
      <img src="assets/co-ai.jpg" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', display:'block'}}/>
    </div>
    <div style={{marginTop:40}}>
      <h3 style={{...aiH3, fontSize:15, color:'var(--ink-500)'}}>代表的なAIエージェント</h3>
      <div style={{display:'flex', gap:12, flexWrap:'wrap', marginBottom:32}}>
        {['Claude Code', 'Codex'].map(n => (
          <span key={n} style={{...aiCard, padding:'12px 22px', fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)'}}>{n}</span>
        ))}
      </div>
      <h3 style={{...aiH3, fontSize:15, color:'var(--ink-500)'}}>AIエージェントでの仕事の進み方</h3>
      <div style={aiGrid(220)}>
        {AI_FLOW.map((f,i)=>(
          <div key={i} style={{...aiCard, borderTop:'3px solid var(--accent)'}}>
            <span style={aiNum}>{i+1}</span>
            <h4 style={{...aiH3, fontSize:15.5}}>{f.t}</h4>
            <p style={{...aiP, fontSize:13}}>{f.s}</p>
          </div>
        ))}
      </div>
    </div>
  </AiSec>
);

/* ---- 02 スライド5：できること ---- */
const AI_CAN = [
  { n:'ファイルを読む・作る・整理する', d:'フォルダの中の書類をまとめて読み、必要なファイルを作ったり、整理したりします。' },
  { n:'Word・Excel・PDFなどの書類を作る', d:'文書や表を、そのまま使える形式のファイルで作ります。' },
  { n:'外部のサービスとつなぐ', d:'メール・チャット・会計ソフトなどとつないで、情報を読み取ったり、作業を進めたりします。' },
  { n:'ブラウザを操作する', d:'画面を開いて内容を読み取り、入力します。' },
  { n:'プログラムを書いて動かす', d:'集計やデータ変換のためのプログラムを作り、実行します。' },
  { n:'決まった時刻に自動で動く', d:'指定した時刻になると、その都度指示しなくても仕事を始めます。' }
];
const AiCan = () => (
  <AiSec id="can" bg="var(--paper-2)" label="02 できること">
    <AiHead eyebrow="CAN DO · できること" title="AIエージェントは、パソコンの中の仕事をひと通りこなせます"
      lead="ファイルの整理から書類づくり、外部サービスの操作、プログラムの作成まで、パソコンで行う作業を任せられます。やってほしいことを普段の言葉で伝えると、AIエージェントが作業を進めます。" />
    <div style={aiGrid(260)}>
      {AI_CAN.map((c,i)=>(
        <div key={i} style={aiCard}>
          <span style={aiNum}>{i+1}</span>
          <h3 style={aiH3}>{c.n}</h3>
          <p style={aiP}>{c.d}</p>
        </div>
      ))}
    </div>
  </AiSec>
);

/* ---- 03 スライド6：ルーティン ---- */
const AI_ROUTINE = [
  { t:'7:05', tag:'', d:'前日の記録の整理とバックアップ' },
  { t:'7:35', tag:'', d:'社内から寄せられた改善要望の確認' },
  { t:'7:45', tag:'', d:'お金の確認（freeeの口座と入出金を読み、注意点を報告）' },
  { t:'8:00〜18:00', tag:'2時間ごと', d:'メール・Slack・Chatworkの受信チェックと、請求書の振り分け' },
  { t:'8:30', tag:'平日', d:'法改正・助成金・補助金の新しい情報の確認' },
  { t:'13:00', tag:'火・木', d:'人事評価サイトのブログ記事の候補出しと執筆' },
  { t:'17:00', tag:'', d:'労務ニュースのブログ記事の候補出しと執筆' }
];
const AiRoutine = () => (
  <AiSec id="routine" bg="var(--paper)" label="03 ルーティン">
    <AiHead eyebrow="ROUTINE · 自動で動く" title="例えば代表・倉田のAIエージェントは、決まった時刻に自分で仕事を始めます"
      lead="人が指示しなくても、決まった時刻に仕事を始め、結果を報告します。" />
    <div style={{maxWidth:820}}>
      {AI_ROUTINE.map((r,i)=>(
        <div key={i} style={{display:'flex', flexWrap:'wrap', gap:'4px 20px', alignItems:'baseline', padding:'14px 4px', borderTop:'1px solid var(--paper-line)', ...(i===AI_ROUTINE.length-1 ? {borderBottom:'1px solid var(--paper-line)'} : {})}}>
          <div style={{flex:'0 0 150px', fontFamily:'var(--font-mono)', fontWeight:700, fontSize:15, color:'var(--accent)'}}>
            {r.t}
            {r.tag && <span style={{display:'block', fontSize:11.5, fontWeight:500, color:'var(--ink-500)', letterSpacing:'.04em'}}>{r.tag}</span>}
          </div>
          <div style={{flex:'1 1 260px', fontSize:14, lineHeight:1.8, color:'var(--ink-900)'}}>{r.d}</div>
        </div>
      ))}
    </div>
    <p style={{...aiP, marginTop:20, maxWidth:'62ch'}}>このほか、話しかければ、規程や助成金の申請書の作成、給与のチェック、資料づくりも進めます。</p>
  </AiSec>
);

/* ---- 04 スライド7・8：実例 ---- */
const AI_EX1 = [
  { say:'「メールとSlackとChatworkを見て、私が返事をしないといけないものだけ教えて。請求書が来ていたら仕分けておいて」',
    steps:['メール・Slack・Chatworkの新着を集める','返事が要るものだけを選び、一覧にする','届いた請求書を判別し、会計ソフトへ送る','返事をするものの返信案を書く'],
    human:'一覧を見て、返事をするかを決める。返信案を確認して「送って」と言う。' },
  { say:'「freeeの口座と入出金を見て、昨日から動いたお金と、気になるところを教えて」',
    steps:['freeeから口座の残高と入出金を読み取る（書き込みはしない）','昨日からの入金・出金をまとめる','未登録の明細や残高の食い違いなど、注意点を挙げる','レポートにまとめて報告する'],
    human:'注意点を見て、今日動くべきものを決める。' },
  { say:'「今月の給与計算に、入退社や勤怠の反映漏れがないか、先月と比べて確かめて。差が出た人は理由も添えて」',
    steps:['入退社した人を、前月末の一覧と比べて確かめる','残業の上限超過や、有給付与の漏れを調べる','社会保険料・住民税・振込額を前月と比べ、差がある人を挙げる','差の理由を添えて、担当者への報告文にまとめる'],
    human:'説明できない差がないかを判断する。' }
];
const AI_EX2 = [
  { say:'「直近の面談記録から、ネタになりそうなものを拾って、ブログを1本書いて」',
    steps:['直近の面談記録を読み、ネタになりそうな話を拾う','公開済みの記事と重ならないか確かめる','法律や制度を、条文や公式資料で確かめて原稿を書く','チェックにかけて、下書きとして登録する'],
    human:'ネタと構成を選び、下書きを読んで、公開するかを決める。' },
  { say:'「この会社の就業規則を作って。賃金台帳と今の規程はこのフォルダにあるよ。足りない情報は質問表にして」',
    steps:['賃金台帳と今の規程を読み、足りない情報を質問表にまとめる','ひな形に会社の実態を反映して、規程の案を作る','必須の記載事項の漏れ、規程同士の矛盾、賃金台帳との食い違いを点検する'],
    human:'労働条件は会社が決める。提出前に社労士が確認する。' },
  { say:'「パソコンの中に散らばっている研修の資料を集めて、中身をチェックしてから、AIエージェント研修の営業資料を作って」',
    steps:['パソコンの中から研修の資料を探して集める','各資料の内容を確認し、金額・回数に食い違いがないかチェックする','厚生労働省の資料で、助成金の数字を確認する','原稿を書き、デザインを整えてPDFにする'],
    human:'方針を伝え、仕上がりを確認して修正点を伝える。' }
];
const aiColLabel = { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.08em', color:'var(--ink-500)', fontWeight:600, marginBottom:8 };
const AiExampleList = ({ items }) => (
  <div style={{display:'flex', flexDirection:'column', gap:16}}>
    {items.map((e,i)=>(
      <div key={i} style={{...aiCard, display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:'20px 28px'}}>
        <div>
          <div style={aiColLabel}>話しかける言葉（例）</div>
          <p style={{...aiP, fontFamily:'var(--font-serif)', fontWeight:600, color:'var(--ink-900)'}}>{e.say}</p>
        </div>
        <div>
          <div style={aiColLabel}>AIエージェントがやること</div>
          <ol style={{margin:0, paddingLeft:20, fontSize:13.5, lineHeight:1.85, color:'var(--ink-700)'}}>
            {e.steps.map((s,j)=><li key={j}>{s}</li>)}
          </ol>
        </div>
        <div>
          <div style={aiColLabel}>人がやること</div>
          <p style={aiP}>{e.human}</p>
        </div>
      </div>
    ))}
  </div>
);
const AiExamples = () => (
  <AiSec id="examples" bg="var(--paper-2)" label="04 実例">
    <AiHead eyebrow="EXAMPLES · 話しかけ方の例" title="こんなふうに話しかけると、ここまでやります"
      lead="やってほしいことを、普段の言葉で具体的に伝えます。どれも実際の仕事で使っている手順です。" />
    <AiExampleList items={AI_EX1} />
    <div style={{marginTop:56}}>
      <AiHead title="ブログも、就業規則も、営業資料も任せています" lead="人が確認する場面は、どの仕事にも残しています。" />
      <AiExampleList items={AI_EX2} />
    </div>
  </AiSec>
);

/* ---- 05 スライド9：チャットとの違い ---- */
const AI_CHAT_STEPS = [
  { who:'人', t:'人が仕事を受ける' },
  { who:'人', t:'作業の一部をチャットに頼む', with:'AI' },
  { who:'人', t:'AIの回答をもとに、人が仕上げる' },
  { who:'人', t:'人が相手に渡す' }
];
const AI_AGENT_STEPS = [
  { who:'AI', t:'AIが仕事を受ける' },
  { who:'AI', t:'AIが作る' },
  { who:'人', t:'人が確認する' },
  { who:'AI', t:'AIが相手に渡す' }
];
const AiFlowCol = ({ title, steps, accent }) => (
  <div style={{...aiCard, borderTop:`3px solid ${accent}`}}>
    <h3 style={{...aiH3, marginTop:0, marginBottom:14}}>{title}</h3>
    <ol style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:8}}>
      {steps.map((s,i)=>(
        <li key={i} style={{display:'flex', alignItems:'center', gap:12, background:'var(--paper-2)', border:'1px solid var(--paper-line)', borderRadius:8, padding:'11px 14px', fontSize:13.5, lineHeight:1.6, color:'var(--ink-900)'}}>
          <span style={{flexShrink:0, minWidth:28, textAlign:'center', fontFamily:'var(--font-mono)', fontWeight:700, fontSize:12, color:'#fff', background:s.who==='人' ? 'var(--ink-500)' : 'var(--accent)', borderRadius:4, padding:'2px 6px'}}>{s.who}</span>
          <span>{s.t}</span>
        </li>
      ))}
    </ol>
  </div>
);
const AiVsChat = () => (
  <AiSec id="vs-chat" bg="var(--paper)" label="05 チャットとの違い">
    <AiHead eyebrow="CHAT VS AGENT · チャットとの違い" title="チャットは人が仕上げます。AIエージェントなら、人は確認するだけです"
      lead="仕事の仕方が変わりました。チャットでは、人が仕事を受け、作業の一部をチャットに頼みます。AIの回答をもとに、人が仕上げて相手に渡します。AIエージェントでは、AIが仕事を受けて作り、人が確認したら、AIが相手に渡します。人がするのは確認だけです。" />
    <AiLaneCompare />
  </AiSec>
);

/* ---- 06 スライド10：育てる ---- */
const AI_GROW = [
  { n:'ルールを覚えさせる', d:'仕事の決まりや守ってほしいことを文章で伝え、毎回そのルールに沿って動かします。' },
  { n:'情報を持たせる', d:'仕事に必要な情報を覚えさせ、毎回説明しなくても済むようにします。' },
  { n:'道具やアプリの使い方を覚えさせる', d:'普段使うアプリや道具の操作を覚えさせ、AIエージェントが自分で使えるようにします。' },
  { n:'手順書を作る', d:'繰り返す仕事の手順を書き出し、いつでも同じ流れで進められるようにします。' },
  { n:'手順書どおりに自動で起動させる', d:'決めた時刻や条件に合わせて、手順書に沿った仕事が自動で始まるようにします。' }
];
const AiGrow = () => (
  <AiSec id="grow" bg="var(--paper-2)" label="06 育てる">
    <AiHead eyebrow="GROW · 育てる" title="しかも、AIエージェントは育てていけます"
      lead="Claude Code や Codex は、教えるほど任せられる仕事が増えていきます。次の5つを通じて育てます。" />
    <div style={aiGrid(260)}>
      {AI_GROW.map((g,i)=>(
        <div key={i} style={aiCard}>
          <span style={aiNum}>{i+1}</span>
          <h3 style={aiH3}>{g.n}</h3>
          <p style={aiP}>{g.d}</p>
        </div>
      ))}
    </div>
  </AiSec>
);

/* ---- 07 スライド11＋用語：仕組みの理解 ---- */
const AI_MECH_STEPS = ['自社に導入する', '仕組みを理解する', '自分たちで育てる'];
const AI_MECH_FACTS = [
  { v:'全6回', l:'回数' },
  { v:'1回2時間', l:'1回あたり' },
  { v:'オンライン（同時双方向型）', l:'実施形式' }
];
const AI_TERMS = [
  ['CLAUDE.md', 'AIエージェントに読ませる、仕事のルールのメモ'],
  ['スキル', '仕事の手順書。呼べば同じ流れで動く'],
  ['ルーティン', '決まった時刻に仕事を始めさせる設定'],
  ['MCP', '外部のサービスとつなぐ仕組み'],
  ['API', 'サービス同士がやりとりする窓口'],
  ['作業ディレクトリ', 'AIエージェントが仕事をするフォルダ'],
  ['パーミッション', 'AIに許す操作の範囲を決める設定'],
  ['Python', '集計や変換に使うプログラムの言葉'],
  ['GAS', 'Googleのサービスを動かすプログラム'],
  ['HTML', 'Webページや資料の画面を作る言葉']
];
const AiMechanism = () => (
  <AiSec id="mechanism" bg="var(--paper)" label="07 仕組みの理解">
    <AiHead eyebrow="MECHANISM · 仕組みの理解" title="育てるには、仕組みの理解が要ります"
      lead="AIエージェントを育てるには、どのように動くのかを理解する必要があります。この研修では、自社にAIエージェントを導入し、その仕組みを理解して、自分たちで育てられるようになることを目指します。" />
    <div style={{...aiGrid(220), marginBottom:16}}>
      {AI_MECH_STEPS.map((s,i)=>(
        <div key={i} style={{...aiCard, borderTop:'3px solid var(--accent)'}}>
          <span style={aiNum}>{i+1}</span>
          <h3 style={{...aiH3, marginBottom:0}}>{s}</h3>
        </div>
      ))}
    </div>
    <div style={{...aiGrid(220), marginBottom:56}}>
      {AI_MECH_FACTS.map((f,i)=>(
        <div key={i} style={{...aiCard, background:'var(--paper-2)'}}>
          <div style={{fontFamily:'var(--font-serif)', fontWeight:900, fontSize:20, lineHeight:1.4, color:'var(--ink-900)'}}>{f.v}</div>
          <div style={{fontSize:12, color:'var(--ink-500)', marginTop:4}}>{f.l}</div>
        </div>
      ))}
    </div>
    <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(19px,2.4vw,24px)', lineHeight:1.55, color:'var(--ink-900)', margin:'0 0 12px'}}>こうした言葉が分かると、AIエージェントに指示が出せます</h3>
    <p className="lead" style={{maxWidth:'62ch', marginBottom:24}}>
      聞き慣れない言葉ばかりですが、どれもAIエージェントを動かすための言葉です。意味が分かれば、AIエージェントと同じ言葉で会話でき、思いどおりに指示できるようになります。
    </p>
    <div style={aiGrid(260)}>
      {AI_TERMS.map(([w, m], i)=>(
        <div key={i} style={{...aiCard, padding:'16px 18px'}}>
          <div style={{fontFamily:'var(--font-mono)', fontWeight:700, fontSize:14, color:'var(--accent)', marginBottom:4}}>{w}</div>
          <div style={{fontSize:13, lineHeight:1.8, color:'var(--ink-700)'}}>{m}</div>
        </div>
      ))}
    </div>
    <p style={{...aiP, marginTop:20}}>研修では、これらを自社の仕事を題材に、手を動かしながら学びます。</p>
  </AiSec>
);

/* ---- 08 締め：研修へ ---- */
const AiAgentClose = () => (
  <AiSec id="training" bg="var(--paper-2)" label="08 研修へ">
    <AiHead eyebrow="TRAINING · 研修" title="研修では、この仕組みを全6回・計12時間で学びます"
      lead="業種ごとの実務に合わせたコースで、自社の仕事を題材に学びます。" />
    <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
      <a className="btn btn--primary btn--lg" href="service-ai-courses.html">研修の内容とコースを見る <Arrow/></a>
      <a className="btn btn--ghost btn--lg" href="service-ai.html">AI活用支援に戻る</a>
    </div>
  </AiSec>
);

Object.assign(window, { AiEra, AiCan, AiRoutine, AiExamples, AiVsChat, AiGrow, AiMechanism, AiAgentClose });