// === Tokai CAIO — Sections ===
const { useState } = React;

/* ---------- Header ---------- */
function Header() {
  return (
    <header className="site-header">
      <div className="shell row">
        <a href="#top" className="brand">
          <img src="assets/logo.png" alt="東海CAIO ロゴ" />
          <span className="txt">
            <span className="name">東海CAIO</span>
            <small>TOKAI · CAIO / GIFU</small>
          </span>
        </a>
        <nav className="nav">
          <a href="#about">東海CAIOとは</a>
          <a href="#domain">選ばれる理由</a>
          <a href="#plans">サービスプラン</a>
          <a href="#flow">導入の流れ</a>
          <a href="#faq">FAQ</a>
          <a href="https://calendar.app.google/HMb4Y4uYsKm6HfzQ8" className="pill" target="_blank" rel="noopener noreferrer">初回相談 →</a>
        </nav>
      </div>
    </header>);

}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="shell">
        <div className="hero-meta">
          <span className="region">岐阜・愛知・三重を中心に全国対応</span>
          <span className="div">|</span>
          <span>TOKAI CAIO</span>
          <span className="div">|</span>
          <span>AI AGENT INTEGRATION</span>
        </div>
        <h1>
          AIを<span className="underline">使えるだけ</span>で<br />
          終わらせず、<br />
          <span className="accent">売上につなげる。</span>
        </h1>
        <p className="hero-sub">
          東海CAIOは、岐阜を拠点に、中小企業・個人事業主のための<br />
          <strong>外部AI責任者（CAIO）</strong>として伴走するサービスです。<br />
          ChatGPT・Claude・Gemini などのAIツールを使い、<br />
          現場で使えるAIエージェントを設計し、売上導線と業務効率化につなげます。
        </p>
        <div className="hero-cta">
          <a href="https://calendar.app.google/HMb4Y4uYsKm6HfzQ8" className="btn btn-primary" target="_blank" rel="noopener noreferrer">初回相談を予約する <span className="arr"></span></a>
          <a href="#plans" className="btn btn-ghost">サービスを見る</a>
        </div>

        <div className="hero-strip">
          <div className="lead">
            <span className="lab">Based in</span>
            <span className="v">岐阜 / 東海エリア</span>
          </div>
          <div className="stat">
            <span className="lab">First call</span>
            <span className="v">30<small>分〜 / 相談可</small></span>
          </div>
          <div className="stat">
            <span className="lab">Lead time</span>
            <span className="v">段階<small>導入</small></span>
          </div>
          <div className="stat">
            <span className="lab">Format</span>
            <span className="v">伴走<small>型</small></span>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- About / CAIOとは ---------- */
function About() {
  return (
    <section className="section" id="about" data-screen-label="02 CAIOとは">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>02 — ABOUT CAIO</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">What is CAIO</span>
            <h2 className="sec-title">CAIOは、<em>AIを経営成果につなげる</em>外部の責任者。</h2>
          </div>
        </div>

        <div className="about-grid">
          <div className="about-body">
            <p>
              <strong>CAIO（Chief AI Officer）</strong>は、社内にAI責任者を置けない中小企業・個人事業主のために、外部から
              <strong>AI戦略・実装・定着</strong>までを一気通貫で担うポジションです。
            </p>
            <p>
              ChatGPTやClaudeを「触ってみた」で止まる会社が大半です。東海CAIOは、AIを<strong>業務効率化だけで終わらせず</strong>、
              反響獲得・商談化・受注までの<strong>売上導線</strong>に組み込み、数字で語れる成果につなげます。
            </p>
            <p>
              ツール販売ではなく、<strong>あなたの会社専属の頭脳</strong>として伴走するのが、CAIOです。
              岐阜・東海エリアの企業文化を理解した上で、無理のないペースで現場運用に落とし込みます。
            </p>
          </div>

          <div className="about-defs" aria-label="CAIOの定義">
            <dl>
              <div className="row"><dt>Role</dt><dd>外部AI責任者として戦略・設計・実装・定着まで担当</dd></div>
              <div className="row"><dt>Goal</dt><dd>AIを経営成果（売上・粗利・時間）に直結させる</dd></div>
              <div className="row"><dt>Method</dt><dd>現場ヒアリング → 業務分解 → エージェント設計 → 改善ループ</dd></div>
              <div className="row"><dt>Stack</dt><dd>Claude Code / Codex / Gemini / ChatGPT / GAS / Workspace</dd></div>
              <div className="row"><dt>Form</dt><dd>月額定額の伴走型 / 単発スポット / プロジェクト型</dd></div>
              <div className="row"><dt>Area</dt><dd>岐阜・愛知・三重を中心に、オンラインで全国対応</dd></div>
            </dl>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Pain points ---------- */
function Pain() {
  const pains = [
  { t: "AIサービスを契約したが、一部の人しか利用できていない。", d: "「使ってね」では現場は動きません。業務に組み込まれた仕組みづくりからご支援します。" },
  { t: "AIで業務効率化はしたいが、何から始めれば良いか分からない。", d: "多種多様な業界での活用事例を蓄積しています。御社専用にオーダーメイドでプランニングします。" },
  { t: "AI導入が「便利になっただけ」で、売上に貢献していない。", d: "業務効率化だけで終わらせず、売上導線まで設計に組み込み、数字で語れる成果につなげます。" },
  { t: "担当者任せにすると、結局ブラックボックスになる。", d: "現場が運用できる粒度まで業務を分解し、内製化までを伴走で支援。属人化を防ぎます。" },
  { t: "AIエージェントを試したが、業務に合わなかった。", d: "汎用エージェントではなく、御社の業務フローに合わせて設計し直し、現場で使える形に仕上げます。" },
  { t: "情報が早すぎて、何が自社にとって正解か判断できない。", d: "経営目線で「やる・やらない」を切り分ける外部CAIOとして、判断材料を整理してお渡しします。" }];

  return (
    <section className="section" id="pain" data-screen-label="03 課題">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>03 — PAIN POINTS</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">Common Issues</span>
            <h2 className="sec-title">こんな課題、<em>ありませんか？</em></h2>
            <p className="sec-lead">中小企業・個人事業主様から多くいただく相談です。
1つでも当てはまったら、初回相談で解像度を上げましょう。
            </p>
          </div>
        </div>

        <div className="pain-grid">
          {pains.map((p, i) =>
          <div className="pain" key={i}>
              <div className="pain-i">
                <span>ISSUE / {String(i + 1).padStart(2, "0")}</span>
                <span className="check"></span>
              </div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Domains ---------- */
function Domain() {
  const tools = ["Claude Code", "Codex", "Gemini", "ChatGPT", "Google Workspace", "GAS"];
  const items = [
  {
    lab: "REASON 01",
    ico: "01",
    h: "外部AI責任者として伴走する、上流設計から定着まで一貫体制。",
    p: "ツール販売や単発コンサルではなく、業務整理・設計・実装・定着まで、現場で使える形に落とし込みます。",
    f: ["業務整理", "設計・実装", "定着支援"]
  },
  {
    lab: "REASON 02",
    ico: "02",
    h: "小さく試して、現場で使える形に育てる。",
    p: "いきなり大きなシステムを作るのではなく、資料作成・問い合わせ対応・リスト整理など、成果が見えやすい業務から始めます。",
    f: ["小さく開始", "実務で検証", "段階的に拡張"]
  },
  {
    lab: "REASON 03",
    ico: "03",
    h: "不動産に強く、一般企業の業務改善にも対応。",
    p: "不動産実務の経験を強みとして持ちながら、資料作成・営業導線・バックオフィスなど、業種を問わず使えるAI運用を設計します。",
    f: ["不動産得意", "一般企業対応", "業務別に設計"]
  },
  {
    lab: "REASON 04",
    ico: "04",
    h: "業務効率だけではなく、売上導線まで設計。",
    p: "反響対応・商談化・リピートを貢献領域に設定。減らせた時間を、相談獲得や受注につながる行動へ変換します。",
    f: ["売上導線設計", "KPI設定", "ダッシュボード提供"]
  },
  {
    lab: "REASON 05",
    ico: "05",
    h: "相談・スポット・伴走の3段階で始められる。",
    p: "まずは相談から始め、必要に応じてスポット制作や月次伴走へ進めます。中小企業・個人事業主が無理しない規模で始められる設計です。",
    f: ["初回相談", "スポット対応", "月次伴走"]
  },
  {
    lab: "REASON 06",
    ico: "06",
    h: "岐阜・東海エリアを拠点に、対面相談も検討できる距離感。",
    p: "全国オンライン対応を基本に、岐阜・東海エリアでは状況に応じて対面相談も検討できます。地元企業の温度感を理解して伴走します。",
    f: ["全国オンライン", "東海エリア", "地元企業伴走"]
  }];

  return (
    <section className="section" id="domain" data-screen-label="04 選ばれる理由">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>04 — WHY US</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">Why choose us</span>
            <h2 className="sec-title">選ばれる<em>6つの理由</em>。</h2>
            <p className="sec-lead">
              机上の検証ではなく、現場で使えるAIエージェントを設計するのがCAIOの仕事です。中小企業・個人事業主が東海CAIOを選ぶ理由を、数字と事実でご説明します。
            </p>
            <div className="dom-tools">
              {tools.map((t) =>
              <span key={t} className="tag"><span className="dot"></span>{t}</span>
              )}
            </div>
          </div>
        </div>

        <div className="dom-grid">
          {items.map((d, i) =>
          <div className="dom" key={i}>
              <div className="ico">{d.ico}</div>
              <div>
                <span className="lab">{d.lab} / {String(i + 1).padStart(2, "0")}</span>
                <h4>{d.h}</h4>
                <p>{d.p}</p>
                <div className="dom-feat">
                  {d.f.map((x, j) =>
                <span key={x} className={d.localFlag === j ? "local" : ""}>{x}</span>
                )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Plans ---------- */
function Plans() {
  const plans = [
  {
    no: "PLAN 01", name: "スポット相談", en: "SPOT",
    pre: "", v: "3,000", u: "円〜 / 60分",
    desc: "まずは課題整理から。AI活用ロードマップと、最初の1手をその場で持ち帰っていただきます。",
    list: [
    "課題ヒアリング・現状診断",
    "AI活用ロードマップ提示",
    "ツール選定アドバイス",
    "初手アクションリスト",
    "後日テキストサマリ送付"],

    cta: "スポットを予約",
    featured: false
  },
  {
    no: "PLAN 02", name: "伴走支援", en: "PARTNER",
    pre: "月額", v: "30,000", u: "円〜 / 月",
    desc: "外部CAIOとして月次で伴走。戦略・設計・実装レビュー・定着まで、経営成果に直結するAI運用を回します。",
    list: [
    "月次または隔週ミーティング",
    "チャットでの相談",
    "エージェント設計・運用レビュー",
    "売上導線への組み込み支援",
    "改善KPIの整理",
    "必要に応じた勉強会"],

    cta: "伴走支援を相談",
    featured: true
  },
  {
    no: "PLAN 03", name: "プロジェクト導入", en: "BUILD",
    pre: "プロジェクト", v: "50,000", u: "円〜",
    desc: "特定業務のAIエージェントを設計から実装・定着まで一括で構築。小さく試して運用に乗せます。",
    list: [
    "業務分解・要件定義",
    "エージェント設計・実装",
    "GAS / Workspace連携構築",
    "現場オペレーション設計",
    "運用マニュアル整備",
    "運用定着サポート"],

    cta: "構築を相談",
    featured: false
  }];

  return (
    <section className="section" id="plans" data-screen-label="05 プラン">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>05 — SERVICE PLANS</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">Service plans</span>
            <h2 className="sec-title">3つの関わり方から、<em>無理なく</em>選べる。</h2>
            <p className="sec-lead">
              スポット相談から、月次伴走、プロジェクト導入まで。会社のフェーズに合わせて選択ください。価格は税込・目安です。
            </p>
          </div>
        </div>

        <div className="plans">
          {plans.map((p, i) =>
          <div className={"plan" + (p.featured ? " featured" : "")} key={i}>
              {p.featured && <div className="plan-flag">RECOMMENDED</div>}
              <div className="plan-no">{p.no}</div>
              <h3 className="plan-name">{p.name}</h3>
              <span className="plan-name-en">{p.en}</span>
              <div className="plan-price">
                {p.pre && <span className="pre">{p.pre}</span>}
                <span className="v">¥{p.v}</span>
                <span className="u">{p.u}</span>
              </div>
              <p className="plan-desc">{p.desc}</p>
              <ul className="plan-list">
                {p.list.map((li) => <li key={li}>{li}</li>)}
              </ul>
              <a href="https://calendar.app.google/HMb4Y4uYsKm6HfzQ8" className={"btn " + (p.featured ? "btn-primary" : "btn-ghost")} target="_blank" rel="noopener noreferrer">
                {p.cta} <span className="arr"></span>
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Process ---------- */
function Flow() {
  const steps = [
  { n: "STEP 01", t: "初回相談・現状診断", d: "課題と目的を整理し、AIで成果につながる業務を見極めます。", time: "30分〜" },
  { n: "STEP 02", t: "業務分解・要件定義", d: "現場ヒアリングで業務を分解し、エージェントの設計図を作成します。", time: "1〜2週" },
  { n: "STEP 03", t: "エージェント実装", d: "Claude / Codex / GASを使って実装し、現場で触れる形にします。", time: "1〜3週" },
  { n: "STEP 04", t: "現場での運用テスト", d: "実業務に組み込み、実データで精度・運用性を検証・調整します。", time: "2週〜" },
  { n: "STEP 05", t: "定着・改善ループ", d: "KPIを追いながら改善を続け、社内で運用できる体制まで支援します。", time: "継続" }];

  return (
    <section className="section process" id="flow" data-screen-label="06 流れ">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>06 — PROCESS</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">Implementation flow</span>
            <h2 className="sec-title">小さく始めて、<br />現場運用までを伴走。</h2>
            <p className="sec-lead">
              「導入してから動かない」をなくすため、定着・改善まで一貫して伴走します。
            </p>
          </div>
        </div>

        <div className="steps">
          {steps.map((s, i) =>
          <div className="step" key={i}>
              <div className="step-num"><span>{s.n}</span><span className="dash"></span></div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <div className="step-time">期間目安 / {s.time}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Profile ---------- */
function Profile() {
  return (
    <section className="section" id="profile" data-screen-label="07 プロフィール">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>07 — PROFILE</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">Profile</span>
            <h2 className="sec-title">現場をくぐった人間が、<em>現場で使える</em>AIを設計する。</h2>
          </div>
        </div>

        <div className="profile profile-no-photo">
          <div className="profile-meta">
            <div className="who">FOUNDER · CAIO</div>
            <h3>中島　誉　Nakajima Homare</h3>
            <div className="role">東海CAIO 代表 / AIエージェント導入パートナー — Based in 岐阜</div>
            <p>
              愛知県出身。東京で不動産賃貸仲介・管理業務に従事し、カナダでデジタルマーケティングを学び、ロンドンの日系不動産会社で管理実務を担当。
              帰国後、AIエージェント導入支援サービス「東海CAIO」を立ち上げました。
              中小企業・個人事業主に向けて、Claude Code・Codex・Gemini・ChatGPT・GASを使った
              「現場で使えるAIエージェント」を、戦略から実装・定着まで一気通貫で設計しています。
            </p>
            <p>
              「AIを使えるだけで終わらせず、売上につなげる」を信条に、業務効率化と売上導線整備を両輪で支援。
              不動産業界を得意領域としつつ、業種を問わず資料作成・営業導線・バックオフィス改善まで伴走します。
            </p>

            <div className="exp">
              <div className="exp-item">
                <div className="y">前職</div>
                <div className="t">不動産賃貸仲介・管理</div>
                <div className="d">東京で不動産実務を経験</div>
              </div>
              <div className="exp-item">
                <div className="y">海外</div>
                <div className="t">カナダ・ロンドン</div>
                <div className="d">デジタルマーケティングと海外不動産管理を経験</div>
              </div>
              <div className="exp-item">
                <div className="y">現在</div>
                <div className="t">東海CAIO 創業</div>
                <div className="d">岐阜を拠点に中小企業の伴走支援</div>
              </div>
              <div className="exp-item">
                <div className="y">専門</div>
                <div className="t">エージェント設計</div>
                <div className="d">Claude / Codex / GAS / Workspace</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
function FAQ() {
  const faqs = [
  { q: "AIに詳しくなくても大丈夫ですか？", a: "はい。むしろ「触ったことがあるけれど使いこなせていない」段階のお客様が中心です。経営課題から逆算して、必要なところだけ導入するので、AIの知識は前提にしません。" },
  { q: "岐阜・東海エリア以外でも対応できますか？", a: "はい。原則オンライン（Zoom / Google Meet）で全国対応しています。岐阜・東海エリアは状況に応じて対面相談も検討できます。" },
  { q: "ツールの月額費用は別ですか？", a: "Claude / ChatGPT / Workspace等のツール利用料は実費でお客様のご契約となります。CAIO費用とは別建てです。事前に最小構成をご提案します。" },
  { q: "情報セキュリティはどう担保しますか？", a: "NDA締結のうえ、社外秘データは原則ローカル・社内アカウント上で扱います。共有方法・アクセス権限は初回でご相談しながら設計します。" },
  { q: "不動産業以外でも依頼できますか？", a: "はい。資料作成、営業導線、問い合わせ対応、バックオフィス整理などは業種を問わず対応できます。不動産は得意領域というだけで、対応範囲を限定するものではありません。" },
  { q: "途中で解約はできますか？", a: "伴走支援は1ヶ月単位で相談できます。契約条件は開始前に確認し、無理のない範囲で進めます。" }];

  return (
    <section className="section" id="faq" data-screen-label="08 FAQ">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>08 — FAQ</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">Frequently asked</span>
            <h2 className="sec-title">よくあるご質問</h2>
          </div>
        </div>

        <div className="faqs">
          {faqs.map((f, i) =>
          <details className="faq" key={i}>
              <summary>
                <span className="q-no">Q.{String(i + 1).padStart(2, "0")}</span>
                <span>{f.q}</span>
                <span className="toggle"></span>
              </summary>
              <div className="a">{f.a}</div>
            </details>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  return (
    <section className="section cta-final" id="contact" data-screen-label="09 相談CTA">
      <div className="shell">
        <div className="sec-head">
          <div className="sec-num"><span>09 — GET STARTED</span><span className="pin"></span></div>
          <div>
            <span className="sec-kicker">Free consultation</span>
            <h2 className="sec-title">まずは、<em>初回相談</em>から。</h2>
          </div>
        </div>

        <div className="cta-card">
          <div>
            <h3>AIを<em>経営成果</em>に<br />つなげるなら、<br />東海CAIOへ。</h3>
            <p>
              「使えるだけ」で終わらせない。売上導線まで一気通貫で設計する伴走型のAIエージェント導入支援です。
              ご相談はオンラインで全国対応、岐阜・東海エリアは状況に応じて対面相談も検討できます。
            </p>
            <p style={{ color: "rgba(244,239,230,0.5)", fontSize: "13px", marginTop: "16px" }}>
              ※ 営業目的のご連絡はご遠慮ください。同業の方からのお問合せも、状況により承ります。
            </p>
          </div>

          <div className="cta-side">
            <div className="row"><span className="l">Lead time</span><span className="v">小さく試して段階導入</span></div>
            <div className="row"><span className="l">Format</span><span className="v">オンライン / 対面相談（東海）</span></div>
            <div className="row"><span className="l">First call</span><span className="v">30分〜 / 相談可</span></div>
            <div className="row"><span className="l">Reply</span><span className="v">内容確認後に返信</span></div>
            <div className="actions">
              <a className="btn btn-primary" href="https://calendar.app.google/HMb4Y4uYsKm6HfzQ8" target="_blank" rel="noopener noreferrer">初回相談を予約 <span className="arr"></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="shell row">
        <div>© 2026 Tokai CAIO — Based in 岐阜.</div>
        <div className="links">
          <a href="https://calendar.app.google/HMb4Y4uYsKm6HfzQ8" target="_blank" rel="noopener noreferrer">お問い合わせ</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Header, Hero, About, Pain, Domain, Plans, Flow, Profile, FAQ, FinalCTA, Footer });