// lab-art.jsx — Hero illustration in the ManyPixels "two-tone flatline" style.
// Palette-matched; coral elements use var(--cc-coral) so the hue Tweak recolors them.
// ---------------------------------------------------------------------------
const ART_INK = '#1A1A1A';
const ART_CREAM = '#F4F1EA';
const ART_HAIR = '#E5E2DC';
const coral = { fill: 'var(--cc-coral)' };
const coralStroke = { stroke: 'var(--cc-coral)' };

function HeroArt() {
  return (
    <svg viewBox="0 0 480 440" width="100%" role="img"
      aria-label="Claudeがチームの生産性を引き上げる様子のイラスト"
      style={{ display: 'block', maxWidth: 540, margin: '0 auto', overflow: 'visible' }}>
      {/* backdrop */}
      <circle cx="288" cy="150" r="150" fill={ART_CREAM} />
      <path d="M70 96 a70 70 0 0 1 70 -70" fill="none" style={coralStroke} strokeWidth="3" strokeLinecap="round" opacity="0.5" />
      <circle cx="58" cy="250" r="6" style={coral} />
      <circle cx="430" cy="300" r="8" style={coral} opacity="0.5" />
      <circle cx="406" cy="64" r="5" fill={ART_INK} opacity="0.18" />

      {/* main application window */}
      <g>
        <rect x="64" y="104" width="316" height="214" rx="16" fill="#FFFFFF" stroke={ART_INK} strokeWidth="2.5" />
        {/* header bar */}
        <line x1="64" y1="146" x2="380" y2="146" stroke={ART_HAIR} strokeWidth="2" />
        <circle cx="88" cy="125" r="5.5" style={coral} />
        <circle cx="106" cy="125" r="5.5" fill="#FFFFFF" stroke={ART_INK} strokeWidth="1.6" />
        <circle cx="124" cy="125" r="5.5" fill="#FFFFFF" stroke={ART_INK} strokeWidth="1.6" />

        {/* left: task list */}
        {[0, 1, 2].map((i) => {
          const y = 176 + i * 38;
          return (
            <g key={i}>
              <rect x="86" y={y} width="20" height="20" rx="4" style={coral} />
              <path d={`M90 ${y + 10} l4 4 7 -8`} fill="none" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              <rect x="116" y={y + 1} width="78" height="8" rx="4" fill={ART_CREAM} />
              <rect x="116" y={y + 13} width="52" height="6" rx="3" fill={ART_HAIR} />
            </g>
          );
        })}

        {/* divider */}
        <line x1="220" y1="170" x2="220" y2="296" stroke={ART_HAIR} strokeWidth="1.5" strokeDasharray="3 4" />

        {/* right: rising bar chart */}
        <line x1="240" y1="292" x2="360" y2="292" stroke={ART_INK} strokeWidth="2" strokeLinecap="round" />
        <rect x="244" y="256" width="18" height="36" rx="3" fill={ART_INK} opacity="0.85" />
        <rect x="272" y="230" width="18" height="62" rx="3" fill={ART_CREAM} stroke={ART_INK} strokeWidth="1.6" />
        <rect x="300" y="244" width="18" height="48" rx="3" fill={ART_INK} opacity="0.85" />
        <rect x="328" y="200" width="18" height="92" rx="3" style={coral} />
        {/* trend line */}
        <polyline points="250,250 280,238 310,224 348,192" fill="none" style={coralStroke} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M340 190 l10 0 0 10" fill="none" style={coralStroke} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
      </g>

      {/* floating Claude spark badge */}
      <g>
        <circle cx="392" cy="118" r="34" style={coral} />
        <g transform="translate(392,118)" stroke="#FFFFFF" strokeWidth="3.4" strokeLinecap="round">
          <line x1="0" y1="-15" x2="0" y2="15" />
          <line x1="-15" y1="0" x2="15" y2="0" />
          <line x1="-10.6" y1="-10.6" x2="10.6" y2="10.6" />
          <line x1="-10.6" y1="10.6" x2="10.6" y2="-10.6" />
        </g>
      </g>

      {/* floating mini progress card */}
      <g>
        <rect x="40" y="286" width="166" height="76" rx="14" fill="#FFFFFF" stroke={ART_INK} strokeWidth="2.5" />
        <circle cx="68" cy="314" r="13" style={coral} />
        <path d="M62 314 l4 4 8 -9" fill="none" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <rect x="90" y="304" width="92" height="7" rx="3.5" fill={ART_INK} opacity="0.85" />
        <rect x="90" y="318" width="64" height="6" rx="3" fill={ART_HAIR} />
        <rect x="56" y="340" width="134" height="8" rx="4" fill={ART_CREAM} />
        <rect x="56" y="340" width="88" height="8" rx="4" style={coral} />
      </g>
    </svg>
  );
}

Object.assign(window, { HeroArt });