サイトトップページ: 非エンジニア向けClaude Code要件定義体系

/**
 * Design: Technical Documentary Aesthetic
 * Philosophy: 技術的信頼性 × 非エンジニアへの親しみやすさ
 * Palette: Deep Navy (#0D1B2A) + Teal (#00C2A8) + Amber (#F5A623)
 * Typography: Space Grotesk (headings) + DM Sans (body)
 */

import { useState } from "react";
import ScenePromptsSection from "./ScenePromptsSection";
import WorldStandardSection from "./WorldStandardSection";
import ClaudeMdV2Section from "./ClaudeMdV2Section";
import GrowingHarnessSection from "./GrowingHarnessSection";

// ─── Data ────────────────────────────────────────────────────────────────────

const DELIVERABLES = [
  { num: "01", name: "Intent Sheet", role: "目的・対象者・成功条件・不明点へ分解", critical: false },
  { num: "02", name: "Research Brief", role: "何を調べるか・優先情報源を定義", critical: false },
  { num: "03", name: "Evidence Matrix", role: "公式資料・規約・API・制約をID付き管理", critical: true },
  { num: "04", name: "要件定義書", role: "機能要件・非機能要件・制約・対象外を整理", critical: false },
  { num: "05", name: "仕様書", role: "画面・操作・データ・連携・例外処理を定義", critical: false },
  { num: "06", name: "技術要件", role: "API・認証・DB・ホスティング・セキュリティ", critical: false },
  { num: "07", name: "ハーネス設計", role: "sandbox・dry-run・rollback・ログ・承認", critical: true },
  { num: "08", name: "テスト計画", role: "単体・統合・E2E・受入・回帰・運用テスト", critical: true },
  { num: "09", name: "SDD（詳細設計書）", role: "モジュール・データ構造・エラー処理・実装手順", critical: false },
  { num: "10", name: "Risk Register", role: "技術・運用・規約・セキュリティ・事業リスク管理", critical: false },
  { num: "11", name: "Gate Decision Log", role: "Green/Yellow/Red で進行可否を記録・合意", critical: true },
];

const WORKFLOW_STEPS = [
  { num: "01", phase: "入力", name: "自然文でやりたいことを入力", desc: "「Substackを自動化したい」など、専門知識不要の一文から開始", color: "teal" },
  { num: "02", phase: "変換", name: "Intent Sheet へ変換", desc: "目的・対象者・成功条件・不明点へ分解", color: "teal" },
  { num: "03", phase: "調査", name: "リサーチ V1：実現可能性確認", desc: "API・規約・技術スタック・代替手段を調査", color: "default" },
  { num: "04", phase: "判定", name: "ユースケースレベル判定・テンプレート選択", desc: "Level 1〜5 を判定し、必要な成果物セットを決定", color: "default" },
  { num: "05", phase: "調査", name: "リサーチ V2：テンプレート充填", desc: "各空欄を埋めるための問いを立て、AIが調査", color: "amber" },
  { num: "06", phase: "作成", name: "要件定義書・仕様書・技術要件・SDD 作成", desc: "Evidence Matrix を根拠に 11 成果物を生成", color: "default" },
  { num: "07", phase: "設計", name: "ハーネス設計・テスト計画 作成", desc: "sandbox・dry-run・rollback・E2E テストを設計", color: "default" },
  { num: "08", phase: "検証", name: "Codex レビュー", desc: "実装・CI・テスト・破壊的変更・復旧不能リスクを検証", color: "default" },
  { num: "09", phase: "評価", name: "Opus レビュー", desc: "要件・運用・事業リスク・代替案を評価", color: "default" },
  { num: "10", phase: "判定", name: "RYG ゲート判定", desc: "Green / Yellow / Red を判定し Gate Decision Log に記録", color: "amber" },
  { num: "11", phase: "ループ", name: "Red/Yellow → 再リサーチへ戻る", desc: "未解決 Red がある場合は Step 5 へループ", color: "red" },
  { num: "12", phase: "提案", name: "再提案の作成", desc: "代替案・修正案・リスク解除条件を提示", color: "default" },
  { num: "13", phase: "判断", name: "採用・保留・却下の判断（人間）", desc: "赤黄緑の要約を見て、方向性・許容範囲を決定", color: "default" },
  { num: "14", phase: "合意", name: "Green 条件が揃ったら合意 → 実装開始", desc: "未解決 Red なし・全成果物接続済みで実装フェーズへ移行", color: "teal" },
];

const USE_CASE_LEVELS = [
  { level: "L1", name: "単一サービスの半自動化", example: "Substack下書き生成、note記事案作成", risk: "品質不足、手動転記ミス、著作権、表現リスク", docs: "軽量（要件定義、仕様書、テスト計画）", color: "teal" },
  { level: "L2", name: "単一サービスの投稿自動化", example: "Substack自動投稿、note予約投稿支援", risk: "投稿ミス、規約違反、API操作、認証情報漏洩", docs: "標準（要件定義、技術要件、ハーネス、E2Eテスト）", color: "teal" },
  { level: "L3", name: "複数サービス連携", example: "Kindle、note、Substackの連携", risk: "データ不整合、重複投稿、権利管理、フォーマット崩れ", docs: "詳細（連携仕様、リスク台帳、回帰テスト）", color: "amber" },
  { level: "L4", name: "配信・販売・文章作成の複合自動化", example: "メルマガ、販売導線、文章生成、SNS告知", risk: "誤配信、課金、個人情報、ブランド毀損、スパム判定", docs: "SDD必須（監視設計、承認フロー、運用手順）", color: "amber" },
  { level: "L5", name: "企業レベルAI秘書", example: "社内情報検索、メール作成、予定調整", risk: "情報漏洩、権限逸脱、監査不備、意思決定代行", docs: "最高水準（セキュリティ要件、監査ログ、権限設計）", color: "red" },
];

const PRINCIPLES = [
  {
    num: "01",
    name: "逆順アプローチ",
    desc: "型を先に用意し、その型を埋めるためにリサーチV2を行う。非エンジニアは「何を調べるか」を考えなくてよい。テンプレートの空欄が調べるべき問いになる。",
    tags: ["型が先", "Research V2", "テンプレート充填"],
    color: "teal",
  },
  {
    num: "02",
    name: "役割分担",
    desc: "Codexが実装を見て、Opusが要件を見て、人間が目的を判断する。専門的な技術判断はAIが担い、人間は「この目的でよいか」だけを判断する。",
    tags: ["Codex", "Opus", "目的判断のみ"],
    color: "amber",
  },
  {
    num: "03",
    name: "RYGゲート",
    desc: "赤黄緑で進行可否を管理し、未解決のRedがなくなったとき「100%完璧」と定義する。Greenが揃ったら合意し、実装を開始する。",
    tags: ["Green条件", "合意判定", "100%完璧の定義"],
    color: "light",
  },
];

// ─── Sub-components ───────────────────────────────────────────────────────────

function GradientBar() {
  return <div className="h-1 w-full" style={{ background: "linear-gradient(to right, #F5A623, #00C2A8)" }} />;
}

function SectionLabel({ children }: { children: React.ReactNode }) {
  return (
    <span
      className="text-xs font-bold tracking-widest uppercase"
      style={{ color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif", letterSpacing: "2.5px" }}
    >
      {children}
    </span>
  );
}

function SectionTitle({ children }: { children: React.ReactNode }) {
  return (
    <h2
      className="text-3xl font-bold leading-tight"
      style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
    >
      {children}
    </h2>
  );
}

function TitleRule({ color = "#00C2A8" }: { color?: string }) {
  return <div className="w-12 h-0.5 mt-3" style={{ background: color }} />;
}

// ─── Sections ─────────────────────────────────────────────────────────────────

function HeroSection() {
  return (
    <section
      className="relative overflow-hidden"
      style={{ background: "#0D1B2A", minHeight: "100vh", display: "flex", flexDirection: "column" }}
    >
      <GradientBar />
      {/* Background grid pattern */}
      <div
        className="absolute inset-0 opacity-5"
        style={{
          backgroundImage: "linear-gradient(#00C2A8 1px, transparent 1px), linear-gradient(90deg, #00C2A8 1px, transparent 1px)",
          backgroundSize: "48px 48px",
        }}
      />
      <div className="container flex-1 flex flex-col justify-center" style={{ paddingTop: "80px", paddingBottom: "80px" }}>
        <div className="max-w-4xl">
          <div className="mb-6">
            <SectionLabel>Non-Engineer Claude Code System</SectionLabel>
          </div>
          <h1
            className="font-bold leading-none mb-6"
            style={{
              fontFamily: "'Space Grotesk', sans-serif",
              fontSize: "clamp(2.5rem, 6vw, 4.5rem)",
              color: "#F0F4F8",
              lineHeight: 1.1,
            }}
          >
            やりたいことを<br />
            <span style={{ color: "#00C2A8" }}>一文で伝えるだけ</span>で、<br />
            世界最高基準の開発仕様が揃う。
          </h1>
          <p
            className="text-lg leading-relaxed mb-10 max-w-2xl"
            style={{ color: "#8BA3BE", fontFamily: "'DM Sans', sans-serif" }}
          >
            非エンジニアやAI初心者でも、Claude Codeを使って安全・確実にシステムを構築できる。
            要件定義書・仕様書・ハーネス設計・テスト計画・SDDを自動生成し、
            RYGゲートで「100%完璧」を定義する体系。
          </p>
          <div className="flex flex-wrap gap-4">
            <a
              href="#workflow"
              className="inline-flex items-center gap-2 px-6 py-3 font-semibold transition-all"
              style={{
                background: "#00C2A8",
                color: "#0D1B2A",
                fontFamily: "'Space Grotesk', sans-serif",
                fontSize: "14px",
                letterSpacing: "0.5px",
              }}
            >
              全体工程を見る →
            </a>
            <a
              href="#deliverables"
              className="inline-flex items-center gap-2 px-6 py-3 font-semibold transition-all"
              style={{
                background: "transparent",
                color: "#F0F4F8",
                border: "1px solid #2A4F73",
                fontFamily: "'Space Grotesk', sans-serif",
                fontSize: "14px",
              }}
            >
              11の成果物を確認する
            </a>
          </div>
        </div>
      </div>
      {/* Stats row */}
      <div style={{ background: "#0A1520", borderTop: "1px solid #1E3A5F" }}>
        <div className="container">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-0">
            {[
              { val: "14", label: "ステップ", sub: "入力から合意まで" },
              { val: "11", label: "成果物", sub: "自動生成される文書" },
              { val: "5", label: "レベル", sub: "ユースケース複雑度" },
              { val: "3", label: "核心原則", sub: "逆順・役割分担・RYG" },
            ].map((s, i) => (
              <div
                key={i}
                className="py-6 px-6"
                style={{ borderRight: i < 3 ? "1px solid #1E3A5F" : "none" }}
              >
                <div
                  className="font-bold leading-none mb-1"
                  style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "2.5rem", color: "#00C2A8" }}
                >
                  {s.val}
                </div>
                <div className="font-semibold mb-0.5" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8", fontSize: "14px" }}>
                  {s.label}
                </div>
                <div style={{ color: "#4A6580", fontSize: "12px" }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PrinciplesSection() {
  return (
    <section style={{ background: "#0D1B2A", padding: "96px 0" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Core Principles</SectionLabel>
          <div className="mt-3">
            <SectionTitle>3つの核心原則</SectionTitle>
            <TitleRule />
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {PRINCIPLES.map((p) => {
            const accentColor = p.color === "teal" ? "#00C2A8" : p.color === "amber" ? "#F5A623" : "#A8C4E0";
            return (
              <div
                key={p.num}
                style={{
                  background: "#0A1520",
                  borderTop: `3px solid ${accentColor}`,
                  border: "1px solid #1E3A5F",
                  borderTopColor: accentColor,
                  padding: "28px",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                <div
                  className="font-bold leading-none mb-3"
                  style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "3rem", color: accentColor, opacity: 0.3 }}
                >
                  {p.num}
                </div>
                <h3
                  className="font-bold mb-4"
                  style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "20px", color: accentColor }}
                >
                  {p.name}
                </h3>
                <p className="text-sm leading-relaxed flex-1" style={{ color: "#8BA3BE", lineHeight: 1.7 }}>
                  {p.desc}
                </p>
                <div className="flex flex-wrap gap-2 mt-5">
                  {p.tags.map((t) => (
                    <span
                      key={t}
                      className="text-xs px-2 py-1"
                      style={{ background: "#0D1B2A", border: "1px solid #1E3A5F", color: "#4A6580", fontFamily: "'Space Grotesk', sans-serif" }}
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function DeliverablesSection() {
  return (
    <section id="deliverables" style={{ background: "#0A1520", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Deliverables</SectionLabel>
          <div className="mt-3">
            <SectionTitle>実装前に揃える 11 の成果物</SectionTitle>
            <TitleRule color="#F5A623" />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            特に重要な4点（Evidence Matrix、Harness Design、Test Plan、Gate Decision Log）が欠けると、
            要件定義書だけでは AI 開発は容易に破綻する。
          </p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {DELIVERABLES.map((d) => (
            <div
              key={d.num}
              style={{
                background: d.critical ? "rgba(0,194,168,0.04)" : "#0D1B2A",
                border: `1px solid ${d.critical ? "rgba(0,194,168,0.3)" : "#1E3A5F"}`,
                padding: "16px 18px",
                display: "flex",
                gap: "14px",
                alignItems: "flex-start",
              }}
            >
              <div
                className="font-bold flex-shrink-0 mt-0.5"
                style={{
                  fontFamily: "'Space Grotesk', sans-serif",
                  fontSize: "11px",
                  color: d.critical ? "#00C2A8" : "#2A4F73",
                  width: "24px",
                }}
              >
                {d.num}
              </div>
              <div>
                <div
                  className="font-semibold mb-1"
                  style={{
                    fontFamily: "'Space Grotesk', sans-serif",
                    fontSize: "14px",
                    color: d.critical ? "#00C2A8" : "#F0F4F8",
                  }}
                >
                  {d.name}
                  {d.critical && (
                    <span
                      className="ml-2 text-xs px-1.5 py-0.5"
                      style={{ background: "rgba(0,194,168,0.12)", color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif", fontSize: "9px", letterSpacing: "1px", textTransform: "uppercase" }}
                    >
                      Critical
                    </span>
                  )}
                </div>
                <div className="text-xs leading-relaxed" style={{ color: "#4A6580" }}>{d.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkflowSection() {
  const [activeStep, setActiveStep] = useState<number | null>(null);
  return (
    <section id="workflow" style={{ background: "#0D1B2A", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Full Workflow</SectionLabel>
          <div className="mt-3">
            <SectionTitle>全体工程：14ステップのループ</SectionTitle>
            <TitleRule />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            Red / Yellow が残る限り、再リサーチと再提案のループへ戻る。Green が揃ったら合意。
          </p>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
          {WORKFLOW_STEPS.map((s, i) => {
            const accentColor = s.color === "teal" ? "#00C2A8" : s.color === "amber" ? "#F5A623" : s.color === "red" ? "#E05555" : "#2A4F73";
            const isActive = activeStep === i;
            return (
              <div
                key={s.num}
                onClick={() => setActiveStep(isActive ? null : i)}
                style={{
                  background: isActive ? (s.color === "teal" ? "rgba(0,194,168,0.06)" : s.color === "amber" ? "rgba(245,166,35,0.06)" : s.color === "red" ? "rgba(224,85,85,0.06)" : "#0A1520") : "#0A1520",
                  border: `1px solid ${isActive ? accentColor + "55" : "#1E3A5F"}`,
                  padding: "14px 18px",
                  display: "flex",
                  gap: "14px",
                  alignItems: "flex-start",
                  cursor: "pointer",
                  transition: "all 0.15s ease-out",
                }}
              >
                <div
                  className="font-bold flex-shrink-0"
                  style={{
                    fontFamily: "'Space Grotesk', sans-serif",
                    fontSize: "12px",
                    color: accentColor,
                    width: "28px",
                    marginTop: "2px",
                  }}
                >
                  {s.num}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <span
                      className="text-xs px-1.5 py-0.5"
                      style={{ background: accentColor + "18", color: accentColor, fontFamily: "'Space Grotesk', sans-serif", fontSize: "9px", letterSpacing: "1px", textTransform: "uppercase" }}
                    >
                      {s.phase}
                    </span>
                    <span
                      className="font-semibold"
                      style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "13px", color: s.color !== "default" ? accentColor : "#F0F4F8" }}
                    >
                      {s.name}
                    </span>
                  </div>
                  {isActive && (
                    <p className="text-xs leading-relaxed mt-2" style={{ color: "#6A8BA8" }}>
                      {s.desc}
                    </p>
                  )}
                </div>
              </div>
            );
          })}
        </div>
        <p className="mt-4 text-xs text-center" style={{ color: "#2A4F73" }}>
          各ステップをクリックすると詳細が表示されます
        </p>
      </div>
    </section>
  );
}

function UseCaseLevelsSection() {
  return (
    <section style={{ background: "#0A1520", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Use Case Levels</SectionLabel>
          <div className="mt-3">
            <SectionTitle>ユースケース別 複雑度レベル（Level 1〜5）</SectionTitle>
            <TitleRule color="#F5A623" />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            レベルによって必要な設計の厚みが変わる。最初のレベル判定が全体設計を左右する。
          </p>
        </div>
        <div className="flex flex-col gap-2">
          {USE_CASE_LEVELS.map((l) => {
            const accentColor = l.color === "teal" ? "#00C2A8" : l.color === "amber" ? "#F5A623" : "#E05555";
            return (
              <div
                key={l.level}
                style={{
                  background: "#0D1B2A",
                  border: "1px solid #1E3A5F",
                  display: "grid",
                  gridTemplateColumns: "80px 1fr 1fr 1fr",
                  gap: 0,
                }}
              >
                <div
                  className="flex items-center justify-center font-bold"
                  style={{
                    fontFamily: "'Space Grotesk', sans-serif",
                    fontSize: "14px",
                    color: accentColor,
                    background: accentColor + "12",
                    borderRight: "1px solid #1E3A5F",
                    padding: "16px",
                  }}
                >
                  {l.level}
                </div>
                <div className="p-4" style={{ borderRight: "1px solid #1E3A5F" }}>
                  <div className="font-semibold mb-1" style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "13px", color: "#F0F4F8" }}>
                    {l.name}
                  </div>
                  <div className="text-xs" style={{ color: "#4A6580" }}>{l.example}</div>
                </div>
                <div className="p-4 text-xs leading-relaxed" style={{ color: "#6A8BA8", borderRight: "1px solid #1E3A5F" }}>
                  {l.risk}
                </div>
                <div className="p-4 text-xs leading-relaxed" style={{ color: "#6A8BA8" }}>
                  {l.docs}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function RYGSection() {
  const gates = [
    {
      letter: "G",
      name: "Green",
      sub: "進行可能",
      color: "#00C2A8",
      criteria: [
        "根拠・要件・テストが接続されている",
        "ハーネス設計とリスク台帳が完備されている",
        "未解決のRedが存在しない",
        "レビューと完了チェックリストが通過済み",
      ],
      action: "合意して実装を開始する",
    },
    {
      letter: "Y",
      name: "Yellow",
      sub: "条件付き進行",
      color: "#F5A623",
      criteria: [
        "進行可能だが未解決の懸念事項がある",
        "期限・担当・解除条件が明示されている",
        "リスクは認識済みで許容範囲内と判断",
        "期限内に再判定を行うことに合意済み",
      ],
      action: "条件付きで進め、期限内に再判定",
    },
    {
      letter: "R",
      name: "Red",
      sub: "停止・再リサーチ",
      color: "#E05555",
      criteria: [
        "重大な未解決リスクまたは規約違反の疑い",
        "破壊的操作・テスト不能・根拠不足",
        "rollbackまたは復旧手順が未定義",
        "Evidence Matrixに裏付けがない要件",
      ],
      action: "停止し、再リサーチ・再提案へ戻す",
    },
  ];
  return (
    <section style={{ background: "#0D1B2A", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>RYG Gate</SectionLabel>
          <div className="mt-3">
            <SectionTitle>RYGゲートで「100%完璧」を定義する</SectionTitle>
            <TitleRule />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            「完璧」とは将来永遠にバグが発生しないことではない。検証可能な条件がすべて接続された状態を指す。
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
          {gates.map((g) => (
            <div
              key={g.letter}
              style={{
                background: "#0A1520",
                borderTop: `3px solid ${g.color}`,
                border: "1px solid #1E3A5F",
                borderTopColor: g.color,
                display: "flex",
                flexDirection: "column",
              }}
            >
              <div
                className="flex items-center gap-4 p-5"
                style={{ background: g.color + "08", borderBottom: "1px solid #1E3A5F" }}
              >
                <div
                  className="w-10 h-10 flex items-center justify-center font-bold flex-shrink-0"
                  style={{ background: g.color + "18", color: g.color, border: `1px solid ${g.color}44`, fontFamily: "'Space Grotesk', sans-serif", fontSize: "20px" }}
                >
                  {g.letter}
                </div>
                <div>
                  <div className="font-bold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: g.color, fontSize: "18px" }}>{g.name}</div>
                  <div className="text-xs" style={{ color: "#4A6580" }}>{g.sub}</div>
                </div>
              </div>
              <div className="p-5 flex-1">
                <div className="text-xs font-bold tracking-widest uppercase mb-3" style={{ color: "#4A6580", fontFamily: "'Space Grotesk', sans-serif" }}>成立条件</div>
                <ul className="flex flex-col gap-2 mb-4">
                  {g.criteria.map((c, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <div className="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0" style={{ background: g.color }} />
                      <span className="text-xs leading-relaxed" style={{ color: "#8BA3BE" }}>{c}</span>
                    </li>
                  ))}
                </ul>
                <div
                  className="p-3"
                  style={{ background: g.color + "0A", border: `1px solid ${g.color}33` }}
                >
                  <div className="text-xs font-bold tracking-widest uppercase mb-1" style={{ color: g.color, fontFamily: "'Space Grotesk', sans-serif" }}>アクション</div>
                  <div className="font-semibold text-sm" style={{ fontFamily: "'Space Grotesk', sans-serif", color: g.color }}>{g.action}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div
          className="flex flex-col md:flex-row items-start md:items-center gap-6 p-6"
          style={{ background: "#0A1520", borderTop: "3px solid #F0F4F8" }}
        >
          <div className="flex-shrink-0">
            <div className="text-xs font-bold tracking-widest uppercase mb-1" style={{ color: "#4A6580", fontFamily: "'Space Grotesk', sans-serif" }}>本体系における定義</div>
            <div className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}>100% 完璧 とは</div>
          </div>
          <div className="w-px h-12 hidden md:block" style={{ background: "#1E3A5F" }} />
          <p className="text-sm leading-relaxed" style={{ color: "#8BA3BE" }}>
            現時点で確認可能な<strong style={{ color: "#F0F4F8" }}>要件・根拠・テスト・ハーネス・リスク・レビュー・ゲート条件がすべて接続され</strong>、
            <span style={{ color: "#00C2A8", fontWeight: 600 }}>未解決のRedが存在しない状態</span>。
            非エンジニアは「完璧か」を技術的に判断する必要はなく、
            「<strong style={{ color: "#F0F4F8" }}>Greenの条件を満たしているか</strong>」だけを確認すればよい。
          </p>
        </div>
      </div>
    </section>
  );
}

function ResearchV1V2Section() {
  return (
    <section style={{ background: "#0A1520", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Research Phases</SectionLabel>
          <div className="mt-3">
            <SectionTitle>リサーチV1とV2の違い</SectionTitle>
            <TitleRule color="#F5A623" />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            リサーチを2段階に分けることで、「調べる方向性」を自動的に決める。
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          {/* V1 */}
          <div>
            <div
              className="flex items-center gap-4 p-5"
              style={{ background: "rgba(245,166,35,0.08)", border: "1px solid rgba(245,166,35,0.3)", borderBottom: "none" }}
            >
              <div
                className="w-12 h-12 flex items-center justify-center font-bold flex-shrink-0"
                style={{ background: "rgba(245,166,35,0.15)", color: "#F5A623", border: "1px solid rgba(245,166,35,0.4)", fontFamily: "'Space Grotesk', sans-serif", fontSize: "22px" }}
              >
                V1
              </div>
              <div>
                <div className="font-bold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F5A623", fontSize: "18px" }}>リサーチ V1</div>
                <div className="text-xs" style={{ color: "#4A6580" }}>実現可能性の確認フェーズ</div>
              </div>
            </div>
            <div
              className="p-5"
              style={{ background: "#0A1520", border: "1px solid rgba(245,166,35,0.15)", borderTop: "none" }}
            >
              <div className="text-xs font-bold tracking-widest uppercase mb-3" style={{ color: "rgba(245,166,35,0.6)", fontFamily: "'Space Grotesk', sans-serif" }}>調査する内容</div>
              <ul className="flex flex-col gap-2 mb-4">
                {[
                  "公式APIの有無と利用可能な操作範囲",
                  "サービス規約・利用制限・禁止事項の確認",
                  "認証方式・レート制限・課金の有無",
                  "実現可能な技術スタックと代替手段",
                  "既存の類似実装事例とリスク事例",
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <div className="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0" style={{ background: "#F5A623" }} />
                    <span className="text-sm" style={{ color: "#8BA3BE" }}>{item}</span>
                  </li>
                ))}
              </ul>
              <div className="p-3 mb-3" style={{ background: "rgba(245,166,35,0.05)", borderLeft: "2px solid rgba(245,166,35,0.4)" }}>
                <div className="text-xs font-bold tracking-widest uppercase mb-1" style={{ color: "rgba(245,166,35,0.7)", fontFamily: "'Space Grotesk', sans-serif" }}>Substack例</div>
                <p className="text-xs leading-relaxed" style={{ color: "#6A8BA8" }}>
                  「Substackに公式APIはあるか」「投稿・配信の自動化は規約上許可されているか」を調査し、実現可能性と方向性を決定する。
                </p>
              </div>
              <div className="p-3" style={{ background: "rgba(245,166,35,0.06)", borderTop: "1px solid rgba(245,166,35,0.2)" }}>
                <div className="text-xs font-bold tracking-widest uppercase mb-1" style={{ color: "rgba(245,166,35,0.6)", fontFamily: "'Space Grotesk', sans-serif" }}>このフェーズの成果</div>
                <div className="font-semibold text-sm" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F5A623" }}>「作れる」「作れない」「条件付きで作れる」の判定</div>
              </div>
            </div>
          </div>
          {/* V2 */}
          <div>
            <div
              className="flex items-center gap-4 p-5"
              style={{ background: "rgba(0,194,168,0.08)", border: "1px solid rgba(0,194,168,0.3)", borderBottom: "none" }}
            >
              <div
                className="w-12 h-12 flex items-center justify-center font-bold flex-shrink-0"
                style={{ background: "rgba(0,194,168,0.12)", color: "#00C2A8", border: "1px solid rgba(0,194,168,0.35)", fontFamily: "'Space Grotesk', sans-serif", fontSize: "22px" }}
              >
                V2
              </div>
              <div>
                <div className="font-bold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#00C2A8", fontSize: "18px" }}>リサーチ V2</div>
                <div className="text-xs" style={{ color: "#4A6580" }}>テンプレート充填フェーズ</div>
              </div>
            </div>
            <div
              className="p-5"
              style={{ background: "#0A1520", border: "1px solid rgba(0,194,168,0.15)", borderTop: "none" }}
            >
              <div className="text-xs font-bold tracking-widest uppercase mb-3" style={{ color: "rgba(0,194,168,0.6)", fontFamily: "'Space Grotesk', sans-serif" }}>調査する内容</div>
              <ul className="flex flex-col gap-2 mb-4">
                {[
                  "要件定義書の「認証方式」項目をどう埋めるか",
                  "ハーネス設計の「rollback手順」をどう設計するか",
                  "テスト計画の「誤配信防止テスト」をどう定義するか",
                  "Risk Registerの「規約違反リスク」の解除条件は何か",
                  "SDDの「エラー処理」と「復旧手順」の具体的内容",
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <div className="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0" style={{ background: "#00C2A8" }} />
                    <span className="text-sm" style={{ color: "#8BA3BE" }}>{item}</span>
                  </li>
                ))}
              </ul>
              <div className="p-3 mb-3" style={{ background: "rgba(0,194,168,0.05)", borderLeft: "2px solid rgba(0,194,168,0.4)" }}>
                <div className="text-xs font-bold tracking-widest uppercase mb-1" style={{ color: "rgba(0,194,168,0.7)", fontFamily: "'Space Grotesk', sans-serif" }}>Substack例</div>
                <p className="text-xs leading-relaxed" style={{ color: "#6A8BA8" }}>
                  テンプレートの空欄が「調べるべき問い」になる。「投稿失敗時のrollbackはどう実装するか」「dry-runモードで何を確認すべきか」を調査し、各項目を具体的に埋める。
                </p>
              </div>
              <div className="p-3" style={{ background: "rgba(0,194,168,0.06)", borderTop: "1px solid rgba(0,194,168,0.2)" }}>
                <div className="text-xs font-bold tracking-widest uppercase mb-1" style={{ color: "rgba(0,194,168,0.6)", fontFamily: "'Space Grotesk', sans-serif" }}>このフェーズの成果</div>
                <div className="font-semibold text-sm" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#00C2A8" }}>11の成果物テンプレートがすべて埋まった状態</div>
              </div>
            </div>
          </div>
        </div>
        {/* Key insight */}
        <div
          className="flex items-start gap-4 p-5 mt-5"
          style={{ background: "rgba(0,194,168,0.06)", border: "1px solid rgba(0,194,168,0.2)" }}
        >
          <div className="font-bold text-xl flex-shrink-0" style={{ color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}>→</div>
          <p className="text-sm leading-relaxed" style={{ color: "#8BA3BE" }}>
            <strong style={{ color: "#F0F4F8" }}>V1だけでは「作れそう」という感触しか得られない。</strong>
            V2があるから、型が確実に埋まり、実装可能な仕様書が完成する。非エンジニアは「何を調べるか」を考える必要がない。
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── Gap Analysis Section ────────────────────────────────────────────────────
function GapAnalysisSection() {
  const gaps = [
    { area: "要件定義書", score: 75, after: 85, grade: "B", gap: "記入例・完成判定基準の不足", color: "#00C2A8" },
    { area: "SDD（詳細設計書）", score: 55, after: 82, grade: "C", gap: "SDDテンプレートの欠如", color: "#F5A623" },
    { area: "ハーネス設計", score: 72, after: 88, grade: "B", gap: "CLAUDE.md具体的書き方の不足", color: "#00C2A8" },
    { area: "テスト計画", score: 78, after: 90, grade: "B", gap: "境界ケース発見・完了定義の不足", color: "#00C2A8" },
    { area: "セキュリティ対策", score: 58, after: 82, grade: "C", gap: "具体的チェックリストの欠如", color: "#F5A623" },
    { area: "本番移行計画", score: 30, after: 85, grade: "D", gap: "専用ドキュメントの欠如", color: "#E05A5A" },
    { area: "非エンジニア操作性", score: 70, after: 88, grade: "B", gap: "スタートガイドの欠如", color: "#00C2A8" },
  ];
  return (
    <section id="gap-analysis" style={{ background: "#0A1520", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Gap Analysis</SectionLabel>
          <div className="mt-3">
            <SectionTitle>徹底検証：現体系の網羅性スコアリング</SectionTitle>
            <TitleRule color="#E05A5A" />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            3シナリオの仮想テスト（Substack自動化）と7領域スコアリングで、現体系の漏れとリスクを特定した。
            総合スコア63点（C+）から補完後86点（A）への改善計画を示す。
          </p>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
          <div>
            <div className="text-xs font-bold tracking-widest uppercase mb-4" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>仮想テスト3シナリオの結果</div>
            <div className="space-y-3">
              {[
                { label: "シナリオA：体系を正しく使った場合", rate: 85, color: "#00C2A8" },
                { label: "シナリオB：CLAUDE.mdなしで進めた場合", rate: 20, color: "#E05A5A" },
                { label: "シナリオC：E2Eシナリオなしで進めた場合", rate: 40, color: "#F5A623" },
              ].map((s) => (
                <div key={s.label}>
                  <div className="flex justify-between mb-1">
                    <span className="text-xs" style={{ color: "#6A8BA8" }}>{s.label}</span>
                    <span className="text-xs font-bold" style={{ color: s.color, fontFamily: "'Space Grotesk', sans-serif" }}>{s.rate}%</span>
                  </div>
                  <div className="h-1.5" style={{ background: "#1E3A5F" }}>
                    <div className="h-full" style={{ width: `${s.rate}%`, background: s.color, transition: "width 0.6s ease" }} />
                  </div>
                </div>
              ))}
            </div>
            <p className="mt-4 text-xs leading-relaxed" style={{ color: "#4A6580" }}>
              CLAUDE.mdなしでは成功確率が20%に激減。コンテキスト枯渇により30〜50回の会話で必ず迷子になる。
            </p>
          </div>
          <div>
            <div className="text-xs font-bold tracking-widest uppercase mb-4" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>3大リスク（仮想テストで発見）</div>
            <div className="space-y-3">
              {[
                { title: "コンテキスト枯渇", desc: "CLAUDE.mdなしでは30〜50回の会話で設計が崩壊する", severity: "CRITICAL" },
                { title: "完了誤認", desc: "テストが通った≠完成。本番で初めて問題が発覚する", severity: "HIGH" },
                { title: "本番移行の壁", desc: "プロトタイプ→本番への移行手順が存在しない", severity: "HIGH" },
              ].map((r) => (
                <div key={r.title} style={{ background: "#0D1B2A", border: "1px solid #1E3A5F", padding: "12px 16px" }}>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xs font-bold" style={{ color: r.severity === "CRITICAL" ? "#E05A5A" : "#F5A623", fontFamily: "'Space Grotesk', sans-serif" }}>{r.severity}</span>
                    <span className="text-sm font-semibold" style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}>{r.title}</span>
                  </div>
                  <p className="text-xs" style={{ color: "#4A6580" }}>{r.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div>
          <div className="text-xs font-bold tracking-widest uppercase mb-4" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>7領域スコアリング：補完前後の比較</div>
          <div className="overflow-x-auto">
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <thead>
                <tr style={{ borderBottom: "1px solid #1E3A5F" }}>
                  {["領域", "現状スコア", "評価", "補完後", "最重要ギャップ"].map((h) => (
                    <th key={h} className="text-left py-3 px-4 text-xs font-bold tracking-widest uppercase" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {gaps.map((g, i) => (
                  <tr key={g.area} style={{ borderBottom: "1px solid #1E3A5F", background: i % 2 === 0 ? "#0D1B2A" : "transparent" }}>
                    <td className="py-3 px-4 text-sm" style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}>{g.area}</td>
                    <td className="py-3 px-4">
                      <span className="text-sm font-bold" style={{ color: g.color, fontFamily: "'Space Grotesk', sans-serif" }}>{g.score}点</span>
                    </td>
                    <td className="py-3 px-4">
                      <span className="text-xs font-bold px-2 py-0.5" style={{ background: g.grade === "D" ? "rgba(224,90,90,0.12)" : g.grade === "C" ? "rgba(245,166,35,0.12)" : "rgba(0,194,168,0.12)", color: g.grade === "D" ? "#E05A5A" : g.grade === "C" ? "#F5A623" : "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}>{g.grade}</span>
                    </td>
                    <td className="py-3 px-4">
                      <span className="text-sm font-bold" style={{ color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}>{g.after}点</span>
                    </td>
                    <td className="py-3 px-4 text-xs" style={{ color: "#4A6580" }}>{g.gap}</td>
                  </tr>
                ))}
                <tr style={{ borderTop: "2px solid #1E3A5F", background: "rgba(0,194,168,0.04)" }}>
                  <td className="py-3 px-4 text-sm font-bold" style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}>総合平均</td>
                  <td className="py-3 px-4"><span className="text-sm font-bold" style={{ color: "#F5A623", fontFamily: "'Space Grotesk', sans-serif" }}>63点</span></td>
                  <td className="py-3 px-4"><span className="text-xs font-bold px-2 py-0.5" style={{ background: "rgba(245,166,35,0.12)", color: "#F5A623", fontFamily: "'Space Grotesk', sans-serif" }}>C+</span></td>
                  <td className="py-3 px-4"><span className="text-sm font-bold" style={{ color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}>86点</span></td>
                  <td className="py-3 px-4 text-xs" style={{ color: "#4A6580" }}>本番移行・セキュリティ・SDDが最弱点</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Supplement Section ───────────────────────────────────────────────────────
function SupplementSection() {
  const [activeTab, setActiveTab] = useState(0);
  const supplements = [
    {
      num: "補完1",
      title: "SDDテンプレート",
      subtitle: "詳細設計書（Software Design Document）",
      desc: "要件定義書はあるが、『どう実装するか』を定義するSDDテンプレートが欠如していた。Claude Code公式推奨の4フェーズ（Explore→Plan→Implement→Commit）を組み込んだ非エンジニア向けテンプレート。",
      items: ["システム概要・目的・境界の定義", "アーキテクチャ設計・処理フロー", "モジュール設計・エラー処理設計", "セキュリティ設計・シークレット管理", "Explore→Plan→Implement→Commitの4フェーズ手順"],
      color: "#00C2A8",
    },
    {
      num: "補完2",
      title: "CLAUDE.md記入テンプレート",
      subtitle: "200行以内・削除基準付き",
      desc: "CLAUDE.mdの必要性は説明されていたが、『何を書くか・何を書かないか』の具体的な判断基準が不足していた。Claude Code公式の削除基準（これを削除するとClaudeがミスをするか？）を組み込んだテンプレート。",
      items: ["プロジェクト概要（1〜3行）", "技術スタック・必須環境変数", "コマンド・テスト方法", "完了基準（チェックリスト形式）", "書いてはいけないもの（削除基準付き）"],
      color: "#00C2A8",
    },
    {
      num: "補完3",
      title: "境界ケース発見チェックリスト",
      subtitle: "E2Eシナリオ作成時の必須確認項目",
      desc: "非エンジニアは正常系は思いつくが境界ケースを思いつかない。仮想テストで発見した『サーバー再起動後』『トークン失効後』『日本語文字化け』などの境界ケースを網羅したチェックリスト。",
      items: ["永続性・再起動後の動作確認", "認証トークンの有効期限・自動更新", "日本語・特殊文字の文字コード処理", "タイムゾーン（JST/UTC）の処理", "冪等性（重複処理防止）の確認", "外部サービス障害時のフォールバック"],
      color: "#F5A623",
    },
    {
      num: "補完4",
      title: "本番移行チェックリスト",
      subtitle: "プロトタイプ→本番への必須確認項目",
      desc: "現体系で最大の欠落（30点/D評価）。プロトタイプを作れても本番で動かすための知識がなかった。認証・データセキュリティ・信頼性・監視の4カテゴリで本番稼働前の全確認項目を網羅。",
      items: ["認証・アクセス制御（.env/.gitignore確認）", "データセキュリティ（暗号化・バックアップ）", "信頼性・可用性（再起動後の自動再開）", "統合・連携（本番用認証情報での動作確認）", "監視・運用（成功/失敗の確認方法）"],
      color: "#E05A5A",
    },
    {
      num: "補完5",
      title: "セキュリティチェックリスト",
      subtitle: "AI生成コードの45%に脆弱性という統計への対策",
      desc: "AI生成コードの45%がセキュリティ脆弱性を含む（byteiota調査）。非エンジニアには判断基準がないため、コピペで使えるセキュリティ確認プロンプトと具体的なチェックリストを提供。",
      items: ["APIキー・パスワードのハードコード確認", ".envファイルの.gitignore追加確認", "エラーメッセージへの機密情報混入確認", "外部データの入力検証確認", "依存ライブラリの脆弱性確認", "コピペ用セキュリティ確認プロンプト"],
      color: "#E05A5A",
    },
  ];
  return (
    <section id="supplements" style={{ background: "#0D1B2A", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Supplements</SectionLabel>
          <div className="mt-3">
            <SectionTitle>5つの補完ドキュメント：ギャップを埋める</SectionTitle>
            <TitleRule color="#00C2A8" />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            ギャップ診断で特定した7つの弱点を補完する。これらを既存体系に追加することで、
            総合スコアは63点（C+）から86点（A）へと改善される。
          </p>
        </div>
        <div className="flex gap-2 mb-8 flex-wrap">
          {supplements.map((s, i) => (
            <button
              key={s.num}
              onClick={() => setActiveTab(i)}
              className="text-xs font-bold px-3 py-2 transition-all"
              style={{
                fontFamily: "'Space Grotesk', sans-serif",
                background: activeTab === i ? s.color : "#0A1520",
                color: activeTab === i ? "#0D1B2A" : "#6A8BA8",
                border: `1px solid ${activeTab === i ? s.color : "#1E3A5F"}`,
              }}
            >
              {s.num}
            </button>
          ))}
        </div>
        {supplements[activeTab] && (
          <div style={{ border: `1px solid ${supplements[activeTab].color}30`, background: "#0A1520", padding: "32px" }}>
            <div className="flex items-start gap-4 mb-6">
              <div className="text-xs font-bold px-2 py-1 flex-shrink-0" style={{ background: `${supplements[activeTab].color}20`, color: supplements[activeTab].color, fontFamily: "'Space Grotesk', sans-serif" }}>
                {supplements[activeTab].num}
              </div>
              <div>
                <div className="font-bold mb-1" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8", fontSize: "18px" }}>{supplements[activeTab].title}</div>
                <div className="text-xs" style={{ color: supplements[activeTab].color }}>{supplements[activeTab].subtitle}</div>
              </div>
            </div>
            <p className="text-sm leading-relaxed mb-6" style={{ color: "#6A8BA8" }}>{supplements[activeTab].desc}</p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
              {supplements[activeTab].items.map((item) => (
                <div key={item} className="flex items-start gap-2" style={{ padding: "8px 12px", background: "#0D1B2A", border: "1px solid #1E3A5F" }}>
                  <span style={{ color: supplements[activeTab].color, flexShrink: 0 }}>✓</span>
                  <span className="text-xs" style={{ color: "#6A8BA8" }}>{item}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Start Guide Section ──────────────────────────────────────────────────────
function StartGuideSection() {
  const steps = [
    {
      num: "Step 1",
      title: "Claude Codeに最初の指示を出す",
      prompt: `私は[あなたの職業・背景]です。プログラミングの経験はありません。\n以下のシステムを作りたいと思っています：\n\n[やりたいことを1〜3文で説明する]\n\nまず以下の順番で進めてください：\n1. このシステムが実現可能かどうかを調査してください（リサーチV1）\n2. 実現可能であれば、要件定義書のテンプレートを作成してください\n3. テンプレートの各項目を埋めるために必要な情報を私に質問してください`,
      color: "#00C2A8",
    },
    {
      num: "Step 2",
      title: "CLAUDE.md + CONSTRAINTS.md + progress.mdを作成する",
      prompt: `要件定義書が完成しました。\n次に以下のファイルを作成してください：\n\n1. CLAUDE.md（200行以内）\n   - プロジェクト概要・技術スタック・コマンド・完了基準\n2. CONSTRAINTS.md（禁止事項リスト）\n   - 本番環境への誤接続・機密情報のハードコード等\n3. progress.md（進捗管理）\n   - 完了タスク・現在のタスク・次のタスク`,
      color: "#00C2A8",
    },
    {
      num: "Step 3",
      title: "E2Eシナリオを実装前に作成する",
      prompt: `実装を始める前に、E2Eテストシナリオを作成してください。\n\n1. 正常系：全てが正常に動作した場合\n2. 異常系：各ステップで失敗した場合（最低5パターン）\n3. 境界系：以下を確認してください\n   - サーバー再起動後も動作するか\n   - 認証トークンが失効した場合\n   - 日本語テキストの処理\n   - タイムゾーンの処理\n   - 重複処理の防止`,
      color: "#F5A623",
    },
    {
      num: "Step 4",
      title: "Explore→Plan→Implement→Commitの4フェーズで実装する",
      prompt: `実装を始めます。以下の順番で進めてください：\n\nPhase 1（Explore）：planモードで技術を調査\nPhase 2（Plan）：SDDを元に詳細な実装計画を作成\nPhase 3（Implement）：1モジュールずつ実装・dry-runテスト\nPhase 4（Commit）：全テストが通ったらコミット\n\n各フェーズが完了したら私に確認を求めてください。\n私の確認なしに次のフェーズに進まないでください。`,
      color: "#F5A623",
    },
    {
      num: "Step 5",
      title: "本番移行前にセキュリティ・本番移行チェックリストを確認する",
      prompt: `本番稼働前に以下を確認してください：\n\n1. .envファイルが.gitignoreに追加されているか\n2. APIキー・パスワードがコードにハードコードされていないか\n3. サーバー再起動後も自動的に再開するか\n4. エラー発生時に通知が届くか\n5. 全てのE2Eシナリオが本番環境で通るか\n\n全項目がOKになったら「本番稼働準備完了」と報告してください。`,
      color: "#E05A5A",
    },
  ];
  const [copied, setCopied] = useState<number | null>(null);
  const handleCopy = (text: string, i: number) => {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(i);
      setTimeout(() => setCopied(null), 2000);
    });
  };
  return (
    <section id="start-guide" style={{ background: "#0A1520", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="mb-12">
          <SectionLabel>Start Guide</SectionLabel>
          <div className="mt-3">
            <SectionTitle>ゼロから始める5ステップ：コピペ用プロンプト付き</SectionTitle>
            <TitleRule color="#F5A623" />
          </div>
          <p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
            「最初に何をするか」が最大の壁。以下のプロンプトをそのままClaude Codeに貼り付けるだけで、
            世界標準の開発プロセスが始まる。
          </p>
        </div>
        <div className="space-y-4">
          {steps.map((s, i) => (
            <div key={s.num} style={{ border: `1px solid #1E3A5F`, background: "#0D1B2A" }}>
              <div className="flex items-center justify-between p-4" style={{ borderBottom: "1px solid #1E3A5F" }}>
                <div className="flex items-center gap-3">
                  <span className="text-xs font-bold px-2 py-1" style={{ background: `${s.color}20`, color: s.color, fontFamily: "'Space Grotesk', sans-serif" }}>{s.num}</span>
                  <span className="font-semibold text-sm" style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}>{s.title}</span>
                </div>
                <button
                  onClick={() => handleCopy(s.prompt, i)}
                  className="text-xs px-3 py-1.5 transition-all"
                  style={{
                    background: copied === i ? `${s.color}20` : "#0A1520",
                    color: copied === i ? s.color : "#4A6580",
                    border: `1px solid ${copied === i ? s.color : "#1E3A5F"}`,
                    fontFamily: "'Space Grotesk', sans-serif",
                  }}
                >
                  {copied === i ? "✓ コピー済み" : "コピー"}
                </button>
              </div>
              <pre
                className="p-4 text-xs leading-relaxed overflow-x-auto"
                style={{
                  color: "#6A8BA8",
                  fontFamily: "'DM Mono', 'Fira Code', monospace",
                  whiteSpace: "pre-wrap",
                  wordBreak: "break-word",
                }}
              >{s.prompt}</pre>
            </div>
          ))}
        </div>
        <div className="mt-10 p-6" style={{ background: "rgba(0,194,168,0.04)", border: "1px solid rgba(0,194,168,0.2)" }}>
          <div className="font-bold mb-3" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#00C2A8", fontSize: "14px" }}>非エンジニアへのメッセージ</div>
          <p className="text-sm leading-relaxed" style={{ color: "#6A8BA8" }}>
            あなたは「素人だから失敗する」のではない。<strong style={{ color: "#F0F4F8" }}>「素人向けの仕組みがなかったから失敗していた」</strong>のである。
            この5ステップを守れば、プログラミング経験がなくても、世界標準の開発プロセスに従ってシステムを作ることができる。
          </p>
        </div>
      </div>
    </section>
  );
}

function CtaSection() {
  return (
    <section style={{ background: "#0D1B2A", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
      <div className="container">
        <div className="max-w-3xl mx-auto text-center">
          <SectionLabel>Get Started</SectionLabel>
          <h2
            className="font-bold mt-4 mb-6"
            style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "clamp(1.8rem, 4vw, 2.8rem)", color: "#F0F4F8", lineHeight: 1.2 }}
          >
            「やりたいこと」を<br />
            <span style={{ color: "#00C2A8" }}>一文で伝えるだけ</span>でよい。
          </h2>
          <p className="text-sm leading-relaxed mb-10" style={{ color: "#6A8BA8" }}>
            Intent Sheet → Research V1/V2 → 11成果物 → RYGゲート → 合意 → 実装
          </p>
          <div
            className="grid grid-cols-1 sm:grid-cols-3 gap-0 mb-10"
            style={{ border: "1px solid #1E3A5F" }}
          >
            {[
              { key: "対象者", val: "非エンジニア・AI初心者" },
              { key: "工程数", val: "14 ステップ" },
              { key: "根拠", val: "Anthropic 公式資料" },
            ].map((m, i) => (
              <div
                key={m.key}
                className="p-5 text-center"
                style={{ borderRight: i < 2 ? "1px solid #1E3A5F" : "none", background: "#0A1520" }}
              >
                <div className="text-xs font-bold tracking-widest uppercase mb-2" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>{m.key}</div>
                <div className="font-semibold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8", fontSize: "14px" }}>{m.val}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: "#0A1520", borderTop: "1px solid #1E3A5F" }}>
      <GradientBar />
      <div className="container py-8">
        <div className="flex flex-col md:flex-row justify-between items-start gap-4">
          <div>
            <div
              className="font-bold mb-1"
              style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8", fontSize: "16px" }}
            >
              非エンジニア向け Claude Code 要件定義自動化体系
            </div>
            <div className="text-xs" style={{ color: "#2A4F73" }}>
              根拠：Anthropic Engineering Blog — Official Documentation
            </div>
          </div>
          <div className="text-xs" style={{ color: "#2A4F73" }}>
            Intent Sheet → Research V1/V2 → 11 Deliverables → RYG Gate → Agreement
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── Navigation ───────────────────────────────────────────────────────────────

function Nav() {
  const [open, setOpen] = useState(false);
  const links = [
    { href: "#deliverables", label: "11の成果物" },
    { href: "#workflow", label: "全体工程" },
    { href: "#scene-prompts", label: "シーン別プロンプト" },
    { href: "#growing-harness", label: "成長型ハーネス" },
    { href: "#world-standard", label: "世界基準診断" },
    { href: "#claude-md-v2", label: "CLAUDE.md v2.0" },
    { href: "#gap-analysis", label: "ギャップ診断" },
    { href: "#start-guide", label: "スタートガイド" },
  ];
  return (
    <nav
      className="fixed top-0 left-0 right-0 z-50"
      style={{ background: "rgba(13,27,42,0.95)", borderBottom: "1px solid #1E3A5F", backdropFilter: "blur(8px)" }}
    >
      <div className="container flex items-center justify-between" style={{ height: "60px" }}>
        <a
          href="#"
          className="font-bold text-sm"
          style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
        >
          非エンジニア向け Claude Code 体系
        </a>
        <div className="hidden md:flex items-center gap-6">
          {links.map((l) => (
            <a
              key={l.href}
              href={l.href}
              className="text-sm transition-colors"
              style={{ color: "#6A8BA8", fontFamily: "'Space Grotesk', sans-serif" }}
            >
              {l.label}
            </a>
          ))}
        </div>
        <button
          className="md:hidden p-2"
          onClick={() => setOpen(!open)}
          style={{ color: "#6A8BA8" }}
        >
          ☰
        </button>
      </div>
      {open && (
        <div
          className="md:hidden"
          style={{ background: "#0A1520", borderTop: "1px solid #1E3A5F" }}
        >
          {links.map((l) => (
            <a
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              className="block px-6 py-3 text-sm"
              style={{ color: "#6A8BA8", borderBottom: "1px solid #1E3A5F", fontFamily: "'Space Grotesk', sans-serif" }}
            >
              {l.label}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export default function Home() {
  return (
    <div style={{ background: "#0D1B2A" }}>
      <Nav />
      <div style={{ paddingTop: "60px" }}>
        <HeroSection />
        <PrinciplesSection />
        <DeliverablesSection />
        <WorkflowSection />
        <UseCaseLevelsSection />
        <RYGSection />
        <ResearchV1V2Section />
        <GapAnalysisSection />
        <SupplementSection />
        <ScenePromptsSection />
        <GrowingHarnessSection />
        <WorldStandardSection />
        <ClaudeMdV2Section />
        <StartGuideSection />
        <CtaSection />
        <Footer />
      </div>
    </div>
  );
}