/* global React */
const { useState: _useStateMsg } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Representative message
// ─────────────────────────────────────────────────────────────────────────────

function RepMessage() {
  return (
    <Section id="message" label="01 / Message" title="代表メッセージ">
      <div className="grid md:grid-cols-[minmax(0,1fr)_360px] gap-10 md:gap-16 items-center">
        <div>
          <p className="text-xl md:text-3xl leading-[1.85] font-medium mb-8" style={{ textWrap: "pretty" }}>
            <span className="opacity-60">世界の業務が </span>
            <span className="brand-serif italic" style={{ color: "oklch(80% 0.18 var(--hue))" }}>AI</span>
            <span className="opacity-60"> によって</span><br />
            置き換えられていく最中、
          </p>
          <p className="text-xl md:text-3xl leading-[1.85] font-medium mb-8" style={{ textWrap: "pretty" }}>
            <span className="opacity-60">我々が今まで身に着けてきた素養だけでは通用せず</span><br />
            <span className="neon-text" style={{ fontWeight: 700 }}>AI世界で生き抜くための全く新しいハイレベルな素養</span>が必要となります。
          </p>
          <p className="text-lg md:text-2xl leading-[1.9] opacity-80 mb-8" style={{ textWrap: "pretty" }}>AIの進化は劇的に早いうえに、最初は多くの人にとって触れたことのない専門用語や概念が大変多く、一人で身に付けようとしても膨大な情報と変化に呑み込まれて、挫折感や焦燥感を感じるばかり。なかなか思うようにステップアップできません。

          </p>
          <p className="text-lg md:text-2xl leading-[1.9] opacity-80 mb-10" style={{ textWrap: "pretty" }}>「もう今さら、エンジニアのような知識を勉強するのもキツイし、AIの進歩も早すぎて、間に合わないかも…。世の中に乗り遅れた、どうしよう…。」と諦めず、一緒に1つ1つ丁寧にその概念を理解することで、AIが何を言っているのか、何をやっているのかを理解できるようになり、追いついていきましょう。

          </p>
          <div className="my-10 p-6 md:p-8 rounded-2xl neon-border" style={{ background: "oklch(70% 0.22 var(--hue) / 0.06)" }}>
            <div className="brand-mono text-[10px] tracking-[0.3em] uppercase opacity-60 mb-3" style={{ color: "oklch(80% 0.18 var(--hue))" }}>★ Keyword</div>
            <p className="brand-serif text-3xl md:text-5xl leading-[1.4] mb-5 neon-text" style={{ textWrap: "balance" }}>
              『我々自身を<br />エンジニアリング』
            </p>
            <p className="text-base md:text-lg leading-[1.95] opacity-90" style={{ textWrap: "pretty" }}>
              AIが自分自身をエンジニアリングするように、<br />
              AIとの対話を余儀なくされる社会で、<br />
              <strong>我々が我々自身を、新たな自分にエンジニアリングしていく</strong> 必要のある時代が、幕を開けます。
            </p>
          </div>
          <p className="text-lg md:text-2xl leading-[1.9] opacity-80 mb-10" style={{ textWrap: "pretty" }}>
            Codexラボでは、新しいAI世界で自信を持って生きれるような素養を身に付けれるよう、皆様とともに<strong>全力で歩んでいきたい</strong>と思います。
          </p>
          <div className="flex items-baseline gap-3 flex-wrap">
            <span className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60">— Codexラボ代表</span>
            <span className="brand-serif text-2xl md:text-3xl" style={{ color: "oklch(85% 0.18 var(--hue))" }}>ラボとみ</span>
            <span className="brand-mono text-[10px] tracking-[0.2em] uppercase opacity-50">/ Excelラボ代表</span>
          </div>
        </div>
        <div className="relative">
          <div className="absolute -inset-3 rounded-2xl" style={{
            background: "radial-gradient(closest-side, oklch(70% 0.22 var(--hue) / 0.35), transparent 70%)",
            filter: "blur(20px)"
          }} />
          <div className="relative rounded-2xl overflow-hidden neon-border float-y" style={{ aspectRatio: "4/5" }}>
            <img src="assets/portrait-smile.png" alt="代表" className="w-full h-full object-cover" />
            <div className="absolute inset-0 pointer-events-none" style={{
              background: "linear-gradient(180deg, transparent 60%, rgba(7,9,26,0.7) 100%)"
            }} />
            <div className="absolute bottom-3 left-3 right-3 flex items-baseline justify-between">
              <span className="brand-serif text-lg" style={{ color: "#fff" }}>ラボとみ</span>
              <span className="brand-mono text-[9px] tracking-[0.2em] uppercase opacity-80" style={{ color: "#fff" }}>Founder · Codex-Labo</span>
            </div>
          </div>
        </div>
      </div>
    </Section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Challenge — 5 metaphor cards (sepia)
// ─────────────────────────────────────────────────────────────────────────────

function Challenge({ bannerSwap }) {
  const cards = [
  {
    no: "01",
    title: <>AIは「なんでもできる」<br />ようになった。</>,
    en: "Outdated in 2 Months",
    body: <>2026年になって、<strong className="brand-mark">Codex（コーデックス）</strong>と<strong className="brand-mark">Claude Code（クロード・コード）</strong>の進化によって、パソコン上で行う業務の「ほぼ何でも」ができるようになりました。もはや、1年前のように「AIに分からないことを聞いたり、調べたりしてもらう」使い方ではありません。すでにAI開発企業では、コーディングもAIによって行われているのです。そのため開発速度が加速し、毎日AIのバージョンが更新され、機能やボタンが増えています。常に1ヶ月、2ヶ月先には全く別物の能力を持つように進化していくのです。</>,
    img: "assets/pattern-07.png"
  },
  {
    no: "02",
    title: <>文字通り<br />「AIと対話」する時代<br />音声入力が主流に</>,
    en: "Voice over Keyboard",
    body: <>AIへの入力は、もはやキーボードタイピングではなく、音声入力が主流になっています。<strong className="brand-mark">音声認識の精度が、2026年に劇的に進歩した</strong>ことで可能になりました。AIに対してより詳細な指示を伝えるためには、指で打つのでは間に合わなくなったのです。今や、AIを開発している企業での実際のAI開発も、「音声入力」によるAIへの指示で行われています。</>,
    img: "assets/pattern-02.png"
  },
  {
    no: "03",
    title: <>AIの各サービスへの連携設定と<br />社内調整が始まっている。</>,
    en: "Connect Everything, Now",
    body: <><strong className="brand-mark">AIの設定や導入時及び導入後の社内調整には、とにかく時間が掛かります。</strong>早く始めて、じっくりヒアリング・実験や検証をしながら、各システムとの連携や権限と使い方を限界まで拡張していく必要があります。深い理解や判断力や社内調整の胆力も必要となってくるため、まだ着手できていない企業も少なくありません。導入から実用化まで関係者全員の相当なレベルアップと膨大な時間が必要になります。</>,
    img: "assets/pattern-08.png"
  },
  {
    no: "04",
    title: <>CodexやClaude Codeに業務を<br />引き継いでいっている。</>,
    en: "Tuning Claude Code",
    body: <>前述のようにCodex（コーデックス）やClaude Code（クロード・コード）はもはや「何でもできる」AIです。ただし、自分の業務を引き継がせるには、AIへの「引き継ぎ」作業が必要になります。引継ぎ時に、AIへの指導を繰り返し、AIが間違えないように作業手順を一緒に詰めていく必要があるのです。その際、業務の落とし穴や注意点を正確に言語化してAIに伝えてあげないといけないため、<strong className="brand-mark">本人の業務理解がそもそも正確で深くなければうまくポイントや難所を説明できず</strong>に、引き継ぎが雑になり、AIが業務で失敗をしてしまいます。</>,
    img: "assets/pattern-04.png"
  },
  {
    no: "05",
    title: <>AIが直接扱えるように<br />各Webサービスの思想が反転</>,
    en: "Web Built for AI",
    body: <>各Webサービス提供企業は、人間ではなくAIが直接サービスを扱えるよう、仕組みを変えてきています。AIによってあらゆる作業が完結する時代に向け、思想そのものが切り替わってきました。AIが扱えるようになっていないサービスは淘汰されるからです。<strong className="brand-mark">以前は、AIのような自動化ツールはbotと判定されて弾かれていましたが、今は、AIが扱うことを大前提として</strong>、サービスの認証や操作導線が設計されています。「人間が手でWebサービスを操作する世界」から「AIがWebサービスを操作する世界」へと提供企業側の思想が、書き換わったのです。</>,
    img: "assets/pattern-06.png"
  },
  {
    no: "06",
    title: <>導入者も難しさに挫折し、<br />「旧来の単発使い」に戻ってしまう。</>,
    en: "Fallback to Single-Shot AI",
    body: <>実際にAIを使い始めると、例えばCodexやClaude Codeを触り始めると、最初の段階で想像を遥かに超えるほど長い期間、設定やカスタマイズに時間を取られることに気づきます。同時に、普段まったく考えたこともないような難しい用語や機能、知らないツール、知らない概念がたくさん出てきて、恐怖感や挫折感や焦りを感じる人が多いのも事実です。そこで辞めてしまう人も、実際にはかなり多いかもしれません。その結果、「画像を作らせてみた」「わからないことを質問する」といった、<strong className="brand-mark">旧来の単発の使い方に戻ってしまう現象が、相当数起きている</strong>と考えられます。</>,
    img: "assets/pattern-05.png"
  }];


  return (
    <Section id="challenge" label="02 / Reality 2026" title={<>2026年5月段階で、AIによって<br />すでに世界はこのように<span className="neon-text">変革されています。</span></>}>
      <p className="text-base md:text-lg ink-fg-dim opacity-80 mb-12 max-w-2xl leading-[1.9]" style={{ textWrap: "pretty" }}>
        <br className="hidden md:block" />
        <strong>下記は、今日段階で、世界ですでに起こっている現実です</strong>。 6つの局面を見てみましょう。
      </p>
      <div className="flex flex-col gap-8">
        {cards.map((c, i) => {
          const flip = i % 2 === 1;
          return (
            <article key={i} className="sepia-card lift overflow-hidden reality-card">
            <div className={`relative h-full min-h-[260px] md:min-h-[400px] overflow-hidden ${flip ? "md:order-2" : ""}`}>
              <img src={c.img} alt="" className="absolute inset-0 w-full h-full object-cover" style={{ objectPosition: c.no === "05" ? "20% center" : "center", transform: "scale(1.06)" }} />
              <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(239,229,204,0) 40%, rgba(45,30,12,0.45) 100%)" }} />
              <div className="absolute top-4 left-5 brand-mono text-[10px] tracking-[0.25em] uppercase" style={{ color: "#fff", textShadow: "0 1px 4px rgba(0,0,0,0.5)" }}>
                Reality {c.no} · {c.en}
              </div>
            </div>
            <div className={`relative p-7 md:p-10 pr-16 md:pr-20 flex flex-col justify-center min-h-[260px] ${flip ? "md:order-1" : ""}`}>
              <div className="brand-serif text-3xl md:text-4xl font-medium mb-5 leading-[1.3]" style={{ color: "#2c1d08", textWrap: "balance" }}>
                {c.title}
              </div>
              <p className="text-[15px] md:text-[16px] leading-[1.95]" style={{ color: "#3a2c14", textWrap: "pretty" }}>
                {c.body}
              </p>
              <div className="absolute top-5 right-5 md:top-7 md:right-8 brand-serif text-6xl md:text-7xl opacity-20 leading-none pointer-events-none" style={{ color: "#2c1d08", fontVariantNumeric: "lining-nums tabular-nums" }}>
                {c.no}
              </div>
            </div>
          </article>);

        })}
      </div>
    </Section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Value — Talk to AI + Two pillars
// ─────────────────────────────────────────────────────────────────────────────

function Value() {
  return (
    <Section id="value" label="03 / Value" title={<>提供価値 — <span className="neon-text" style={{ whiteSpace: "nowrap" }}>AIの言葉を理解し指示を出せるようになる</span>。</>}>
      <div className="grid md:grid-cols-[1fr_1.1fr] gap-10 md:gap-14 items-start mb-16">
        <div>
          <p className="text-lg md:text-xl leading-[1.95] mb-6 opacity-90" style={{ textWrap: "pretty" }}>
            AIの言葉を理解し、対話できるようになる<br />
            ＝ <strong style={{ color: "oklch(80% 0.18 var(--hue))" }}>業務をAI化するための最大のボトルネック</strong>。
          </p>
          <p className="text-base md:text-lg ink-fg-dim leading-[1.95] opacity-80" style={{ textWrap: "pretty" }}>知能が恐ろしく高いAIと共に業務を行うようになると、すぐに自分自身の「語彙力」「理解力」「言語化能力」という壁に突き当たります。

ITの素養が高くないと、AIが矢継ぎ早に提案してくる提案内容や、AI自身の仕組みの改善提案のほとんどが、用語的にも構造的にも「全く理解できない」のです。 10体のAIから10分ごとに、 自分にとっては「何がなんだかわからないことの指示・判断」をあおがれる、という状態がずっと続きます。 そしてまた、AIにやってほしいことを適切に説明しようとしても「正確な説明の言葉が出てこない」。 なんとなくのイメージは頭にあるけれど、そもそもよくわかってないため、難しすぎてどう説明したらいいかわからない。 AIが喋るのは『日本語』なのですが、前提知識の差がありすぎて、圧倒的な『言葉の壁』を必ず感じます。それを乗り越えるために必要な「IT語彙力」「概念のイメージ」をしっかりと学ぶことが必要です。
          </p>
          <div className="mt-6 p-5 md:p-6 rounded-xl" style={{ background: "linear-gradient(135deg, oklch(28% 0.10 var(--hue) / 0.6), oklch(22% 0.08 var(--hue) / 0.4))", border: "1px solid oklch(60% 0.18 var(--hue) / 0.5)", boxShadow: "0 0 0 1px oklch(70% 0.20 var(--hue) / 0.15) inset, 0 8px 32px oklch(50% 0.20 var(--hue) / 0.15)" }}>
            <p className="text-base md:text-lg leading-[1.85]" style={{ textWrap: "pretty", color: "oklch(95% 0.04 var(--hue))" }}>
              AIも自身を勝手に改善していきますが、<br />
              本当に改善しなければならないボトルネックは、やがて、<br />
              <strong className="neon-text" style={{ fontSize: "1.15em", letterSpacing: "0.01em" }}>「我々自身の能力や理解力」</strong>となってくるのです。
            </p>
          </div>
        </div>
        <div className="glass p-6 md:p-8 relative overflow-hidden">
          <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full" style={{ background: "radial-gradient(closest-side, oklch(70% 0.22 var(--hue) / 0.4), transparent)" }} />
          <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60 mb-4">Core Mission</div>
          <div className="brand-serif neon-text engineer-slogan" style={{ lineHeight: 1.1, letterSpacing: "0", whiteSpace: "nowrap", marginBottom: "1rem" }}>
            Engineer Your Intelligence.
          </div>
          <div className="brand-mono text-[11px] tracking-[0.2em] uppercase opacity-55 mb-5">— Codex Labo Core Mission</div>
          <p className="text-sm md:text-base leading-[1.85] opacity-90">
            <strong>自分の中の素養・常識のレベルを上げ、自信を持ってAIと対話できるようにする。</strong><br /><br />
            そのために、1つ1つの概念をより正確に整理して、解釈していく——<br />
            それが <span className="neon-text">Codexラボのミッション</span>です。
          </p>
        </div>
      </div>

      <div className="brand-mono text-[11px] tracking-[0.25em] uppercase opacity-60 mb-5">★ CODEXラボの教育のポイント · TWO PILLARS</div>
      <div className="grid md:grid-cols-2 gap-5">
        <div className="glass p-7 md:p-9 lift">
          <div className="flex items-baseline gap-3 mb-4">
            <span className="brand-serif text-6xl font-medium neon-text">01</span>
            <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60">Broad · Pinpoint</div>
          </div>
          <h3 className="text-2xl md:text-3xl font-bold mb-3 leading-[1.35]">多くの概念を大づかみだけれど<br />正確なイメージで押さえる</h3>
          <p className="opacity-75 leading-[1.9]">AIと対話すると何千という専門用語に日々さらされます。その中でよく出てくる用語のイメージを正確に理解しないと、なにも積み上がっていきません。膨大なIT用語に関しては、細かくなくても良いけれど、どう「正確」にイメージや位置づけや意義を理解するかが、その後の積み上げを左右します。</p>
        </div>
        <div className="glass p-7 md:p-9 lift">
          <div className="flex items-baseline gap-3 mb-4">
            <span className="brand-serif text-6xl font-medium neon-text">02</span>
            <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60">Mechanism · Mastery</div>
          </div>
          <h3 className="text-2xl md:text-3xl font-bold mb-3 leading-[1.35]">自分の業務に関しては 完全にメカニズムを<br />解説できるように</h3>
          <p className="opacity-75 leading-[1.9]">自分のメイン業務（例：経理の方であれば、AIに引継ぐそのExcelファイルがどのような仕組みになっていて、何をやって、何をやってはいけないか）をAIに指導できるレベルである必要があります。
「仕組みはわからないけど、とりあえず毎月言われた通りに該当のシートのデータを貼って、業務を回してました」という人から「完全にその作業を理解して説明できる」人へ変わっておく必要はあるでしょう。</p>
        </div>
      </div>

      <div className="mt-10 px-6 py-5 rounded-xl flex items-center gap-4 flex-wrap" style={{ background: "oklch(70% 0.22 var(--hue) / 0.08)", border: "1px solid oklch(70% 0.22 var(--hue) / 0.25)" }}>
        <span className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-70">どのような仕組みの作業で、なぜそれをやっているか「完全に説明できる人」</span>
        <span className="text-base md:text-lg font-medium">「回す人」から → <span className="neon-text font-bold">「完全に説明できる人」</span> へのレベルアップ。</span>
      </div>
    </Section>);}Object.assign(window, { RepMessage, Challenge, Value });