// hifi-icons.jsx — hand-drawn-feeling service icons in the same brand tone.
// Soft outline + accent fills. Each icon ships at 120×120 viewBox.

function IconWeb({ size = 120 }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ display: 'block' }} aria-hidden="true">
      {/* monitor body */}
      <rect x="14" y="22" width="92" height="62" rx="8" fill="#fff" stroke="#306b3a" strokeWidth="2.2" />
      {/* screen */}
      <rect x="20" y="28" width="80" height="46" rx="3" fill="#eef5ea" />
      {/* tabs / top bar */}
      <line x1="20" y1="38" x2="100" y2="38" stroke="#306b3a" strokeWidth="1.6" />
      <circle cx="26" cy="33" r="1.6" fill="#7ab26a" />
      <circle cx="32" cy="33" r="1.6" fill="#7ab26a" />
      <circle cx="38" cy="33" r="1.6" fill="#7ab26a" />
      {/* content blocks */}
      <rect x="26" y="44" width="30" height="3.5" rx="1.5" fill="#7ab26a" />
      <rect x="26" y="52" width="42" height="2.5" rx="1.2" fill="#bcd8b8" />
      <rect x="26" y="58" width="38" height="2.5" rx="1.2" fill="#bcd8b8" />
      <rect x="26" y="64" width="24" height="2.5" rx="1.2" fill="#bcd8b8" />
      <rect x="74" y="44" width="20" height="24" rx="3" fill="#d5e8cf" stroke="#7ab26a" strokeWidth="1.4" />
      {/* stand */}
      <line x1="60" y1="84" x2="60" y2="94" stroke="#306b3a" strokeWidth="2.2" strokeLinecap="round" />
      <path d="M 42 98 Q 60 92 78 98" stroke="#306b3a" strokeWidth="2.2" strokeLinecap="round" fill="none" />
      {/* sparkle */}
      <path d="M 92 16 L 94 22 L 100 24 L 94 26 L 92 32 L 90 26 L 84 24 L 90 22 Z"
        fill="#7ab26a" opacity=".7" />
    </svg>
  );
}

function IconSystem({ size = 120 }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ display: 'block' }} aria-hidden="true">
      {/* outer panel */}
      <rect x="18" y="20" width="84" height="80" rx="10" fill="#fff" stroke="#306b3a" strokeWidth="2.2" />
      {/* corner notch */}
      <path d="M 18 30 L 102 30" stroke="#306b3a" strokeWidth="1.6" />
      <circle cx="24" cy="25" r="1.4" fill="#7ab26a" />
      <circle cx="30" cy="25" r="1.4" fill="#7ab26a" />
      {/* gear left */}
      <g transform="translate(40,62)">
        <circle r="14" fill="#d5e8cf" stroke="#306b3a" strokeWidth="2" />
        <circle r="5" fill="#fff" stroke="#306b3a" strokeWidth="1.8" />
        {[0, 60, 120, 180, 240, 300].map((deg, i) => (
          <rect
            key={i}
            x="-2" y="-17" width="4" height="6" rx="1"
            fill="#306b3a"
            transform={`rotate(${deg})`}
          />
        ))}
      </g>
      {/* small gear right */}
      <g transform="translate(76,76)">
        <circle r="8" fill="#7ab26a" stroke="#306b3a" strokeWidth="1.8" />
        <circle r="2.8" fill="#fff" />
        {[0, 72, 144, 216, 288].map((deg, i) => (
          <rect
            key={i}
            x="-1.2" y="-10.5" width="2.4" height="4" rx=".8"
            fill="#306b3a"
            transform={`rotate(${deg})`}
          />
        ))}
      </g>
      {/* small dot above gears */}
      <circle cx="72" cy="42" r="3" fill="#7ab26a" />
      <line x1="72" y1="45" x2="72" y2="56" stroke="#306b3a" strokeWidth="1.4" strokeDasharray="2 2" />
    </svg>
  );
}

function IconAI({ size = 120 }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ display: 'block' }} aria-hidden="true">
      {/* head outline */}
      <path
        d="M 32 36
           Q 32 22 48 22
           L 72 22
           Q 88 22 88 38
           L 88 64
           Q 88 80 72 80
           L 66 80
           L 64 90
           L 60 80
           L 48 80
           Q 32 80 32 64 Z"
        fill="#fff" stroke="#306b3a" strokeWidth="2.2"
      />
      {/* face: smiling soft */}
      <circle cx="50" cy="50" r="3" fill="#306b3a" />
      <circle cx="70" cy="50" r="3" fill="#306b3a" />
      <path d="M 50 62 Q 60 70 70 62" stroke="#306b3a" strokeWidth="2" fill="none" strokeLinecap="round" />
      {/* antenna */}
      <line x1="60" y1="22" x2="60" y2="12" stroke="#306b3a" strokeWidth="2" strokeLinecap="round" />
      <circle cx="60" cy="10" r="3" fill="#7ab26a" />
      {/* glow / sparkles */}
      <path d="M 22 38 l 1 4 l 4 1 l -4 1 l -1 4 l -1 -4 l -4 -1 l 4 -1 z" fill="#7ab26a" />
      <path d="M 96 60 l 1 3 l 3 1 l -3 1 l -1 3 l -1 -3 l -3 -1 l 3 -1 z" fill="#7ab26a" opacity=".7" />
      {/* tiny binary leaves */}
      <text x="38" y="94" fontFamily="DM Sans, sans-serif" fontSize="8" fill="#7ab26a" fontWeight="700" letterSpacing="2">01</text>
      <text x="68" y="100" fontFamily="DM Sans, sans-serif" fontSize="8" fill="#7ab26a" fontWeight="700" letterSpacing="2" opacity=".7">10</text>
    </svg>
  );
}

// AI variant B — "Chat & sparkles" / 対話で寄り添うAI
function IconAIChat({ size = 120 }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ display: 'block' }} aria-hidden="true">
      {/* back bubble (smaller, behind) */}
      <path
        d="M 24 30
           Q 24 20 34 20
           L 70 20
           Q 80 20 80 30
           L 80 48
           Q 80 58 70 58
           L 44 58
           L 36 66
           L 38 58
           L 34 58
           Q 24 58 24 48 Z"
        fill="#d5e8cf" stroke="#306b3a" strokeWidth="1.8"
      />
      {/* front bubble (larger, foreground) */}
      <path
        d="M 40 52
           Q 40 40 52 40
           L 96 40
           Q 108 40 108 52
           L 108 78
           Q 108 90 96 90
           L 70 90
           L 60 100
           L 62 90
           L 52 90
           Q 40 90 40 78 Z"
        fill="#fff" stroke="#306b3a" strokeWidth="2.2"
      />
      {/* sparkle constellation inside the front bubble */}
      <path d="M 60 64 l 2 6 l 6 2 l -6 2 l -2 6 l -2 -6 l -6 -2 l 6 -2 z" fill="#7ab26a" />
      <path d="M 84 60 l 1.4 4 l 4 1.4 l -4 1.4 l -1.4 4 l -1.4 -4 l -4 -1.4 l 4 -1.4 z" fill="#306b3a" />
      <path d="M 92 78 l 1 3 l 3 1 l -3 1 l -1 3 l -1 -3 l -3 -1 l 3 -1 z" fill="#7ab26a" opacity=".7" />
      {/* small dot to anchor back bubble's content */}
      <circle cx="38" cy="38" r="2" fill="#306b3a" />
      <circle cx="48" cy="38" r="2" fill="#306b3a" opacity=".6" />
      <circle cx="58" cy="38" r="2" fill="#306b3a" opacity=".3" />
    </svg>
  );
}

// AI variant C — "Hand & spark" / 手のひらにのる小さなAI
function IconAISpark({ size = 120 }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ display: 'block' }} aria-hidden="true">
      {/* palm */}
      <path
        d="M 26 78
           Q 26 64 40 64
           L 84 64
           Q 96 64 96 76
           L 96 88
           Q 96 100 84 100
           L 38 100
           Q 26 100 26 88 Z"
        fill="#d5e8cf" stroke="#306b3a" strokeWidth="2"
      />
      {/* wrist gradient line */}
      <path d="M 30 100 Q 60 108 90 100" stroke="#306b3a" strokeWidth="1.4" opacity=".4" fill="none" />
      {/* central rising spark - 4-pointed star */}
      <g transform="translate(60,40)">
        <path
          d="M 0 -22 L 6 -6 L 22 0 L 6 6 L 0 22 L -6 6 L -22 0 L -6 -6 Z"
          fill="#7ab26a" stroke="#306b3a" strokeWidth="1.6" strokeLinejoin="round"
        />
        <circle r="3" fill="#fff" />
      </g>
      {/* small ascending sparkles */}
      <path d="M 92 30 l 1.4 4 l 4 1.4 l -4 1.4 l -1.4 4 l -1.4 -4 l -4 -1.4 l 4 -1.4 z" fill="#7ab26a" />
      <path d="M 24 22 l 1 3 l 3 1 l -3 1 l -1 3 l -1 -3 l -3 -1 l 3 -1 z" fill="#306b3a" opacity=".7" />
      <circle cx="100" cy="54" r="2" fill="#306b3a" opacity=".5" />
      <circle cx="22" cy="48" r="2" fill="#306b3a" opacity=".5" />
    </svg>
  );
}

window.IconWeb = IconWeb;
window.IconSystem = IconSystem;
window.IconAI = IconAI;
window.IconAIChat = IconAIChat;
window.IconAISpark = IconAISpark;