/* global React */
// Brand data — palette, categories, and content for cynix.jp showcase.

const PALETTE = [
  {
    group: "Primary / Tech",
    swatches: [
      { name: "primary-deep-navy", hex: "#0A2540", label: "Deep Navy", text: "#FAF7F0" },
      { name: "primary-midnight", hex: "#14253D", label: "Midnight", text: "#FAF7F0" },
      { name: "tech-electric-blue", hex: "#0066FF", label: "Electric Blue", text: "#FFFFFF" },
      { name: "tech-cyber-cyan", hex: "#00D4FF", label: "Cyber Cyan", text: "#0A2540" },
    ],
  },
  {
    group: "Accent",
    swatches: [
      { name: "accent-sunrise-orange", hex: "#FF6B2B", label: "Sunrise Orange", text: "#FFFFFF" },
      { name: "accent-gold-leaf", hex: "#FFB800", label: "Gold Leaf 金箔", text: "#0A2540" },
      { name: "accent-sakura-pink", hex: "#FF4D97", label: "Sakura Pink 桜", text: "#FFFFFF" },
    ],
  },
  {
    group: "Neutral / Wa",
    swatches: [
      { name: "neutral-washi-cream", hex: "#FAF7F0", label: "Washi 和紙", text: "#0A2540" },
      { name: "neutral-sumi-ink", hex: "#1A1D24", label: "Sumi Ink 墨", text: "#FAF7F0" },
      { name: "neutral-mist-gray", hex: "#E5E8EE", label: "Mist Gray 霞", text: "#0A2540" },
      { name: "neutral-slate", hex: "#5A6478", label: "Slate", text: "#FAF7F0" },
    ],
  },
];

const CATEGORIES = [
  {
    id: "server",
    slug: "/server",
    title: "サーバー・VPS",
    sub: "中小企業のWeb基盤、徹底比較。",
    meta: "24記事 · 最終更新 2026/04/25",
    chars: ["navi"],
    tint: "server",
    iconColor: "#0066FF",
    icon: (s) => (
      <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="#0066FF" strokeWidth="1.5">
        <rect x="3" y="4" width="18" height="6" rx="1.5" />
        <rect x="3" y="14" width="18" height="6" rx="1.5" />
        <circle cx="7" cy="7" r="0.8" fill="#00D4FF" />
        <circle cx="7" cy="17" r="0.8" fill="#00D4FF" />
        <line x1="11" y1="7" x2="18" y2="7" />
        <line x1="11" y1="17" x2="18" y2="17" />
      </svg>
    ),
  },
  {
    id: "domain",
    slug: "/domain-ssl",
    title: "ドメイン・SSL",
    sub: "信頼性を、最初の3,000円で。",
    meta: "18記事 · 最終更新 2026/04/22",
    chars: ["haru"],
    tint: "domain",
    iconColor: "#FFB800",
    icon: (s) => (
      <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="#FFB800" strokeWidth="1.5">
        <circle cx="12" cy="11" r="7" />
        <path d="M5 11h14M12 4c2 2.5 3 5 3 7s-1 4.5-3 7c-2-2.5-3-5-3-7s1-4.5 3-7Z" />
        <rect x="9" y="14" width="6" height="6" rx="1.5" fill="#FFB800" stroke="none" opacity="0.9" />
        <path d="M11 14v-1a1 1 0 0 1 2 0v1" stroke="#0A2540" strokeWidth="1.2" />
      </svg>
    ),
  },
  {
    id: "saas",
    slug: "/saas",
    title: "B2B SaaS・業務効率化",
    sub: "会計・コラボ・CRM。中小企業のSaaSナビ。",
    meta: "31記事 · 最終更新 2026/04/24",
    chars: ["navi"],
    tint: "saas",
    iconColor: "#0066FF",
    icon: (s) => (
      <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="#0066FF" strokeWidth="1.5">
        <rect x="3" y="3" width="8" height="8" rx="1.5" />
        <rect x="13" y="3" width="8" height="8" rx="1.5" />
        <rect x="3" y="13" width="8" height="8" rx="1.5" />
        <rect x="13" y="13" width="8" height="5" rx="1.5" fill="#4FCBA9" stroke="none" />
        <rect x="13" y="19" width="8" height="2" rx="1" fill="#4FCBA9" stroke="none" />
      </svg>
    ),
  },
  {
    id: "ec",
    slug: "/ec",
    title: "ネットショップ・EC構築",
    sub: "Shopify・BASE・futureshop、開店から運用まで。",
    meta: "22記事 · 最終更新 2026/04/23",
    chars: ["haru"],
    tint: "ec",
    iconColor: "#FF7A8E",
    icon: (s) => (
      <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="#FF7A8E" strokeWidth="1.5">
        <path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7Z" />
        <path d="M9 7V5a3 3 0 0 1 6 0v2" />
        <circle cx="9" cy="13" r="0.8" fill="#0066FF" />
        <circle cx="15" cy="13" r="0.8" fill="#0066FF" />
      </svg>
    ),
  },
  {
    id: "ai",
    slug: "/ai-tools",
    title: "AIツール・自動化",
    sub: "ChatGPT・Claude・Midjourney・Notion AI。最新ガイド。",
    meta: "19記事 · 最終更新 2026/04/25",
    chars: ["navi", "haru"],
    tint: "ai",
    iconColor: "#8A4FFF",
    icon: (s) => (
      <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="#8A4FFF" strokeWidth="1.5">
        <circle cx="6" cy="6" r="2" />
        <circle cx="18" cy="6" r="2" />
        <circle cx="6" cy="18" r="2" />
        <circle cx="18" cy="18" r="2" />
        <circle cx="12" cy="12" r="2.5" fill="#FF4D97" stroke="none" />
        <line x1="8" y1="6" x2="16" y2="6" />
        <line x1="8" y1="18" x2="16" y2="18" />
        <line x1="6" y1="8" x2="6" y2="16" />
        <line x1="18" y1="8" x2="18" y2="16" />
        <line x1="7.5" y1="7.5" x2="10.5" y2="10.5" />
        <line x1="16.5" y1="7.5" x2="13.5" y2="10.5" />
        <line x1="7.5" y1="16.5" x2="10.5" y2="13.5" />
        <line x1="16.5" y1="16.5" x2="13.5" y2="13.5" />
      </svg>
    ),
  },
  {
    id: "rsv",
    slug: "/reservation",
    title: "予約・業務システム",
    sub: "店舗・サロン・教室の運営、ITで簡単に。",
    meta: "16記事 · 最終更新 2026/04/20",
    chars: ["haru"],
    tint: "rsv",
    iconColor: "#6FB6E5",
    icon: (s) => (
      <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="#6FB6E5" strokeWidth="1.5">
        <rect x="3" y="5" width="18" height="16" rx="2" />
        <line x1="3" y1="10" x2="21" y2="10" />
        <line x1="8" y1="3" x2="8" y2="7" />
        <line x1="16" y1="3" x2="16" y2="7" />
        <path d="M8 15l2 2 4-4" stroke="#FFB800" />
      </svg>
    ),
  },
];

const NAVI_SPEC = [
  { k: "Build", v: "Asian Japanese male, 35歳, athletic-slim 178cm" },
  { k: "Face", v: "Refined intellectual jawline, light smile lines, modern textured short hair" },
  { k: "Glasses", v: "Black-rimmed minimalist round-frame designer (Oliver Peoples-inspired)" },
  { k: "Eyes", v: "Calm dark brown, direct camera gaze, confident composure" },
  { k: "Skin", v: "Natural matte, very light 5 o'clock stubble, no over-smoothing" },
  { k: "Outfit", v: "Dark navy slim unstructured blazer / charcoal Henley T / silver minimalist watch" },
  { k: "Pose", v: "3/4 turn, arms relaxed crossed at chest, holding sleek silver tablet" },
  { k: "Lighting", v: "Editorial soft key from upper-left 45°, warm 3200K on skin" },
  { k: "Style ref", v: "Forbes Asia / WIRED Japan editorial portrait" },
];

const HARU_SPEC = [
  { k: "Build", v: "Asian Japanese female, 28歳, slim athletic 162cm" },
  { k: "Face", v: "Soft oval, warm intelligent expression, natural makeup" },
  { k: "Hair", v: "Medium-length straight dark brown with subtle layers, side-parted bangs" },
  { k: "Eyes", v: "Bright warm brown, slightly larger than average (NOT anime), curious genuine interest" },
  { k: "Skin", v: "Natural matte, subtle highlights on cheekbones, slight blush, no airbrushing" },
  { k: "Outfit", v: "Cream beige oversized cashmere knit / white shirt collar peeking / thin gold chain" },
  { k: "Pose", v: "Slight forward lean, head tilted 5° right, hand near chin (curiosity gesture)" },
  { k: "Lighting", v: "Editorial soft warm key from upper-right 30°, warmer 3500K" },
  { k: "Style ref", v: "VOGUE Japan / Domani editorial portrait" },
];

const ASSIGNMENT = [
  { cat: "/server/", who: "三宅", reason: "技術専門性" },
  { cat: "/domain-ssl/", who: "春香", reason: "親しみやすさ" },
  { cat: "/saas/", who: "三宅", reason: "業務効率の専門知識" },
  { cat: "/ec/", who: "春香", reason: "起業家共感" },
  { cat: "/ai-tools/", who: "三宅 + 春香", reason: "専門×普及の両軸" },
  { cat: "/reservation/", who: "春香", reason: "中小事業者共感" },
];

window.cynixData = { PALETTE, CATEGORIES, NAVI_SPEC, HARU_SPEC, ASSIGNMENT };