// kit.jsx — shared design tokens + simple line icons for 確定申告サポート LP
// Exports to window: TOKENS, Icon set, Badge, StatusBadge, Logo, helpers
const { useState, useEffect, useRef } = React;

const TOKENS = {
  bg: "#FFFFFF",
  primary: "#2DB1FF",
  primaryDeep: "#1E8FD6",
  yellow: "#FFD93D",
  navy: "#1A2B4C",
  green: "#4CAF82",
  greenDeep: "#3A9E72",
  gray: "#7A8290",
  ink: "#1A2B4C",
};

// ---- Simple line icons --------------------------------------------------
// All icons: 24x24 viewBox, stroke-based, rounded caps/joins. size + color props.
function svgProps(size, color, sw) {
  return {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: sw || 1.7, strokeLinecap: "round",
    strokeLinejoin: "round", "aria-hidden": "true",
  };
}

// 確定申告 = 書類 + チェック
function IconDocCheck({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
      <path d="M14 3v5h5" />
      <path d="M8.5 13.5l2 2 4-4.5" />
    </svg>
  );
}
// 後見人 = 見守りハート + シールド感（手のひらにハート）
function IconCareHeart({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M12 20.5C7 17 4 13.8 4 10.2A4 4 0 0 1 12 8a4 4 0 0 1 8 2.2c0 3.6-3 6.8-8 10.3z" />
    </svg>
  );
}
// AI入力サポート = きらめき
function IconSparkle({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M12 3l1.8 4.9L18.7 9.7 13.8 11.5 12 16.4l-1.8-4.9L5.3 9.7l4.9-1.8z" />
      <path d="M18.5 14.5l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z" />
    </svg>
  );
}
// 辺確定 / 確認 = 虫眼鏡 + チェック
function IconReview({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <circle cx="10.5" cy="10.5" r="6.5" />
      <path d="M20 20l-4.2-4.2" />
      <path d="M8 10.6l1.8 1.8 3-3.4" />
    </svg>
  );
}
// 提出 = 紙ひこうき
function IconSend({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M21 4L3 11l6 2.5L21 4z" />
      <path d="M21 4l-9 16-2.9-6.5L21 4z" />
    </svg>
  );
}
// 財産管理 = 財布
function IconWallet({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18a1 1 0 0 1 1 1v1.5" />
      <path d="M3.5 8h15A1.5 1.5 0 0 1 20 9.5v8A1.5 1.5 0 0 1 18.5 19h-13A1.5 1.5 0 0 1 4 17.5V8z" />
      <path d="M16.5 13.5h.01" />
    </svg>
  );
}
// 後見人制度案内 = 天秤（やさしめ）
function IconScale({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M12 4v15" />
      <path d="M7 19h10" />
      <path d="M5 8h14" />
      <path d="M5 8l-2.2 4.4a2.5 2.5 0 0 0 4.4 0L5 8z" />
      <path d="M19 8l-2.2 4.4a2.5 2.5 0 0 0 4.4 0L19 8z" />
    </svg>
  );
}
// 専門家連携 = ふたりの人
function IconPeople({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <circle cx="8.5" cy="8" r="3" />
      <circle cx="16.5" cy="9" r="2.4" />
      <path d="M3.5 19c0-2.8 2.2-4.8 5-4.8s5 2 5 4.8" />
      <path d="M14.5 14.6c2.4-.2 5 1.4 5 4.4" />
    </svg>
  );
}
// 家族（Hero用）= 大人+子/高齢者
function IconFamily({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <circle cx="7.5" cy="7" r="2.5" />
      <circle cx="16.5" cy="7" r="2.5" />
      <path d="M3.5 19v-2.2A3.3 3.3 0 0 1 6.8 13.5h1.4a3.3 3.3 0 0 1 3.3 3.3V19" />
      <path d="M12.5 19v-2.2a3.3 3.3 0 0 1 3.3-3.3h1.4a3.3 3.3 0 0 1 3.3 3.3V19" />
    </svg>
  );
}
// カレンダー（ステータス用）
function IconCalendar({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <rect x="3.5" y="5" width="17" height="15" rx="2.5" />
      <path d="M3.5 9.5h17" />
      <path d="M8 3v4M16 3v4" />
      <path d="M7.5 13.5h3M7.5 16.5h6" />
    </svg>
  );
}
// 吹き出し（会話）
function IconChat({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M20 12a7 7 0 0 1-7 7H8l-4 3v-4.2A7 7 0 0 1 4.6 8 7 7 0 0 1 20 12z" />
      <path d="M8.5 12h.01M12 12h.01M15.5 12h.01" />
    </svg>
  );
}
function IconArrowRight({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M5 12h13" />
      <path d="M13 6l6 6-6 6" />
    </svg>
  );
}
function IconCheck({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M5 12.5l4.5 4.5L19 6.5" />
    </svg>
  );
}
function IconShield({ size = 24, color = "currentColor", sw }) {
  return (
    <svg {...svgProps(size, color, sw)}>
      <path d="M12 3l7 2.5v5.5c0 4.4-3 8-7 9.5-4-1.5-7-5.1-7-9.5V5.5z" />
      <path d="M9 12l2 2 4-4.2" />
    </svg>
  );
}

Object.assign(window, {
  TOKENS,
  IconDocCheck, IconCareHeart, IconSparkle, IconReview, IconSend,
  IconWallet, IconScale, IconPeople, IconFamily, IconCalendar,
  IconChat, IconArrowRight, IconCheck, IconShield,
});