src/wireframe-preview.js

const base = {
  role: "読者の判断を一段進める",
  userQuestion: "自社に必要な情報か",
  body: "内容・証拠・素材量に適した構成を確認するための開発用プレビューです。",
  proof: "確認可能な根拠を配置",
  content: "要点A。要点B。要点C。要点D",
  asset: "写真・画面・図解など役割のある素材",
  implementation: "情報量に応じてPC/SPの優先順位を維持",
  cta: "次へ進む",
  layout: "内容とCV方式に基づいて選択",
};

const samples = [
  ["hero-form", "hero", "FV / フォーム", "相談までを最短距離にする"],
  ["hero-product-stage", "hero", "FV / 商品", "使う姿が、価値を伝える"],
  ["hero-proof-split", "hero", "FV / 実績", "証拠から読み始める"],
  ["hero-copy-led", "hero", "FV / 新概念", "まだない選択肢に、名前をつける"],
  ["pain-cards", "problem", "課題 / 並列", "現場に散らばる三つの摩擦"],
  ["pain-checklist", "problem", "課題 / 診断", "当てはまる項目を確認する"],
  ["pain-narrative", "problem", "課題 / 文脈", "なぜ今まで解けなかったのか"],
  ["risk-timeline", "risk", "リスク / 時系列", "先送りが生む変化を追う"],
  ["before-after", "mechanism", "仕組み / 対比", "導入前後を一目で比べる"],
  ["solution-map", "mechanism", "仕組み / 関係図", "複数の原因を一つにつなぐ"],
  ["process-circles", "process", "工程 / 循環", "継続改善のサイクル"],
  ["process-timeline", "process", "工程 / 手順", "開始から運用までの道筋"],
  ["feature-zigzag", "differentiation", "特徴 / 深掘り", "違いを一つずつ理解する"],
  ["reason-stack", "differentiation", "理由 / 強弱", "核となる理由を主役にする"],
  ["usecase-story", "usecase", "用途 / 物語", "利用前後の一日を追う"],
  ["lineup-catalog", "usecase", "商品 / 一覧", "違いを見比べて選ぶ"],
  ["alternative-matrix", "comparison", "比較 / 選択肢", "代替手段との違いを判断する"],
  ["case-study-featured", "proof", "実績 / 事例", "背景から成果までを読む"],
  ["review-cards", "proof", "実績 / 声", "複数の利用者視点で確かめる"],
  ["estimate-explainer", "pricing", "価格 / 見積", "価格が変わる理由を理解する"],
  ["sample-cta", "cta", "CTA / 体験", "まず成果物を手に取る"],
];

export const wireframeVariantPreviewSections = samples.map(
  ([layoutVariant, type, label, title], index) => ({
    ...base,
    id: `preview-${index + 1}`,
    layoutVariant,
    type,
    label,
    title,
  }),
);