// 手描き風SVGイラスト集（PC、雲、猫、観葉植物など）
// 添付の仮.pngのスタイル（ラフな線、薄い水色画面、木目机、グレーの線画）に寄せる

const HandDrawnDesk = ({ scale = 1, opacity = 1, screenText = "", style = {} }) => (
  <svg viewBox="0 0 220 180" style={{ width: 220 * scale, opacity, ...style }} xmlns="http://www.w3.org/2000/svg">
    {/* PC */}
    <g stroke="var(--ink)" strokeWidth="1.6" fill="none" strokeLinejoin="round" strokeLinecap="round">
      {/* モニタ画面 */}
      <path d="M55 25 L165 22 L168 92 L52 95 Z" fill="var(--screen)" />
      {/* スタンド */}
      <path d="M105 95 L100 115 L120 115 L115 95" fill="var(--screen-base)" />
      <path d="M85 115 L135 115 L140 122 L80 122 Z" fill="var(--screen-base)" />
      {/* デスク */}
      <path d="M20 130 L200 125 L210 165 L25 170 Z" fill="var(--wood)" />
      {/* 脚 */}
      <path d="M30 165 L25 178" />
      <path d="M195 162 L200 178" />
      {/* キーボード */}
      <rect x="60" y="135" width="80" height="22" rx="2" fill="var(--keyboard)" />
      <line x1="68" y1="142" x2="132" y2="141" strokeWidth="0.8" />
      <line x1="68" y1="148" x2="132" y2="147" strokeWidth="0.8" />
      <line x1="68" y1="154" x2="132" y2="153" strokeWidth="0.8" />
      {/* マウス */}
      <ellipse cx="155" cy="148" rx="7" ry="5" fill="var(--mouse)" />
    </g>
    {screenText && (
      <text x="62" y="60" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fill: "var(--ink)" }}>
        {screenText}
      </text>
    )}
  </svg>
);

const HandDrawnCloud = ({ scale = 1, style = {} }) => (
  <svg viewBox="0 0 120 70" style={{ width: 120 * scale, ...style }} xmlns="http://www.w3.org/2000/svg">
    <g stroke="var(--ink)" strokeWidth="1.4" fill="var(--cloud)" strokeLinejoin="round" strokeLinecap="round">
      <path d="M15 50 Q5 45 12 35 Q15 25 28 28 Q32 15 50 18 Q60 8 75 18 Q90 14 95 28 Q110 30 108 45 Q115 55 100 58 Q90 65 75 60 Q60 65 45 60 Q30 65 22 58 Q12 58 15 50 Z" />
    </g>
  </svg>
);

const HandDrawnCat = ({ scale = 1, style = {} }) => (
  <svg viewBox="0 0 180 80" style={{ width: 180 * scale, ...style }} xmlns="http://www.w3.org/2000/svg">
    <g stroke="var(--ink)" strokeWidth="1.4" fill="var(--cat)" strokeLinejoin="round" strokeLinecap="round">
      {/* 寝そべる猫 */}
      <path d="M20 55 Q15 45 25 42 Q35 35 55 38 Q90 30 130 40 Q160 45 165 55 Q170 60 165 65 Q150 68 130 65 Q100 68 70 65 Q40 68 25 62 Q18 60 20 55 Z" />
      {/* 耳 */}
      <path d="M30 42 L25 32 L38 38" fill="var(--cat)" />
      <path d="M45 38 L43 28 L52 36" fill="var(--cat)" />
      {/* 顔 */}
      <circle cx="35" cy="50" r="1.2" fill="var(--ink)" stroke="none" />
      <circle cx="45" cy="49" r="1.2" fill="var(--ink)" stroke="none" />
      {/* しっぽ */}
      <path d="M165 60 Q175 55 172 48" fill="none" />
    </g>
  </svg>
);

const HandDrawnPlant = ({ scale = 1, style = {} }) => (
  <svg viewBox="0 0 80 110" style={{ width: 80 * scale, ...style }} xmlns="http://www.w3.org/2000/svg">
    <g stroke="var(--ink)" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      {/* 葉 */}
      <path d="M40 50 Q25 30 20 15 Q35 25 40 50" fill="var(--leaf)" />
      <path d="M40 50 Q55 30 62 18 Q50 28 40 50" fill="var(--leaf)" />
      <path d="M40 55 Q30 35 25 25 Q40 38 40 55" fill="var(--leaf)" />
      <path d="M40 50 Q40 25 42 12" fill="none" strokeWidth="1" />
      {/* 鉢 */}
      <path d="M28 60 L52 60 L48 95 L32 95 Z" fill="var(--pot)" />
      <line x1="28" y1="65" x2="52" y2="65" strokeWidth="0.8" />
    </g>
  </svg>
);

const HandDrawnTower = ({ scale = 1, style = {} }) => (
  <svg viewBox="0 0 100 130" style={{ width: 100 * scale, ...style }} xmlns="http://www.w3.org/2000/svg">
    <g stroke="var(--ink)" strokeWidth="1.4" fill="var(--screen-base)" strokeLinejoin="round" strokeLinecap="round">
      {/* タワー */}
      <path d="M25 25 L75 22 L78 110 L28 113 Z" />
      {/* スリット */}
      <line x1="35" y1="40" x2="68" y2="38" strokeWidth="0.8" />
      <line x1="35" y1="46" x2="68" y2="44" strokeWidth="0.8" />
      <circle cx="40" cy="60" r="3" fill="var(--cat)" />
      <rect x="35" y="80" width="35" height="6" fill="var(--cat)" />
      <rect x="35" y="92" width="35" height="6" fill="var(--cat)" />
    </g>
  </svg>
);

// メインビジュアル：添付画像を活かしたヒーロー
const HeroIllustration = () => (
  <div className="hero-illust" aria-hidden="true">
    <img src="assets/desks-illustration.png" alt="" className="hero-illust-img" />
  </div>
);

// 紙の質感オーバーレイ（CSSノイズ）— SVGフィルター
const PaperTexture = () => (
  <svg style={{ position: "fixed", width: 0, height: 0 }} aria-hidden="true">
    <defs>
      <filter id="paperRoughen">
        <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" />
        <feColorMatrix values="0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0.04 0" />
      </filter>
      <filter id="wobble">
        <feTurbulence baseFrequency="0.02" numOctaves="2" />
        <feDisplacementMap in="SourceGraphic" scale="2" />
      </filter>
    </defs>
  </svg>
);

// 危険なネストしたコード（リファクタリング対象）を表現するアイコン
const CodeRefactorIcon = ({ scale = 1, style = {} }) => (
  <div className="code-refactor-icon" style={{ transform: `scale(${scale})`, transformOrigin: "center", ...style }}>
    <pre className="code-snippet">
      <code>
        <span className="kw">if</span> (data) {"{"}
        {"\n"}  <span className="kw">if</span> (data.user) {"{"}
        {"\n"}    <span className="kw">if</span> (data.user.name) {"{"}
        {"\n"}      <span className="evil">eval</span>(<span className="str">"x="</span> + x); <span className="cmt">{"//☠️ OMG"}</span>
        {"\n"}    {"}"}
        {"\n"}  {"}"}
        {"\n"}{"}"}
      </code>
    </pre>
  </div>
);

// 本番枠アイコン（Chrome拡張機能）
const ChromeExtIcon = ({ scale = 1, style = {} }) => (
  <img
    src="assets/honbanwaku-icon.png"
    alt="本番枠"
    style={{ width: 110 * scale, height: 110 * scale, borderRadius: 22, boxShadow: "3px 3px 0 var(--ink-muted)", background: "var(--paper-tint)", padding: 6, ...style }}
  />
);

Object.assign(window, {
  HandDrawnDesk, HandDrawnCloud, HandDrawnCat, HandDrawnPlant, HandDrawnTower,
  HeroIllustration, PaperTexture, CodeRefactorIcon, ChromeExtIcon,
});
