app/src/components/OctopusLogo.jsx

import { useId } from 'react';

export default function OctopusLogo({ size = 48 }) {
  const id = useId();
  const gradId = `octo${id.replace(/:/g, '')}`;

  const legs = [
    [-30, 'W'],
    [-10, 'B'],
    [10,  'W'],
    [30,  'W'],
  ];

  const ox = 24, oy = 25;

  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id={gradId} x1="10" y1="8" x2="38" y2="44" gradientUnits="userSpaceOnUse">
          <stop stopColor="#a78bfa" />
          <stop offset="1" stopColor="#06b6d4" />
        </linearGradient>
      </defs>

      {/* Guitar fretboard leg — far left */}
      <g transform={`rotate(-46, ${ox}, ${oy})`}>
        {/* Fretboard body */}
        <rect x={ox - 2.2} y={oy} width={4.4} height={19} rx={0.6}
          fill="#2d1f4e" stroke="#9b8ec4" strokeWidth={0.5} />
        {/* Fret lines */}
        {[4, 7.5, 10.5, 13, 15.5, 17.5].map((fy, i) => (
          <line key={i} x1={ox - 2.2} y1={oy + fy} x2={ox + 2.2} y2={oy + fy}
            stroke="#c8c5d6" strokeWidth={0.4} />
        ))}
        {/* Strings */}
        {[-1.2, -0.4, 0.4, 1.2].map((sx, i) => (
          <line key={i} x1={ox + sx} y1={oy + 0.5} x2={ox + sx} y2={oy + 18.5}
            stroke="#a78bfa" strokeWidth={0.25} opacity={0.6} />
        ))}
      </g>

      {/* Tentacle legs — four piano keys, one black */}
      {legs.map(([angle, type], i) => {
        const isBlack = type === 'B';
        const w = isBlack ? 3 : 4.2;
        const h = 19;
        const rx = isBlack ? 0.6 : 0.8;
        return (
          <g key={i} transform={`rotate(${angle}, ${ox}, ${oy})`}>
            <rect x={ox - w / 2} y={oy} width={w} height={h} rx={rx}
              fill={isBlack ? '#1e1b4b' : '#f5f3fa'}
              stroke={isBlack ? '#c8c5d6' : '#9b8ec4'}
              strokeWidth={isBlack ? 0.8 : 0.5} />
          </g>
        );
      })}

      {/* Drumstick leg — far right */}
      <g transform={`rotate(46, ${ox}, ${oy})`}>
        {/* Stick shaft — tapers from 1.8 to 1.0 */}
        <polygon
          points={`${ox - 0.9},${oy} ${ox + 0.9},${oy} ${ox + 0.5},${oy + 16} ${ox - 0.5},${oy + 16}`}
          fill="#f5f3fa" stroke="#9b8ec4" strokeWidth={0.5} strokeLinejoin="round" />
        {/* Bead (tip) */}
        <ellipse cx={ox} cy={oy + 17.8} rx={1.4} ry={1.8}
          fill="#e8dff5" stroke="#9b8ec4" strokeWidth={0.5} />
      </g>

      {/* Head */}
      <ellipse cx="24" cy="16" rx="14" ry="12" fill={`url(#${gradId})`} />
      <circle cx="19" cy="14" r="2.5" fill="#07070e" />
      <circle cx="29" cy="14" r="2.5" fill="#07070e" />
      <circle cx="20" cy="13.3" r="0.9" fill="white" opacity="0.9" />
      <circle cx="30" cy="13.3" r="0.9" fill="white" opacity="0.9" />
    </svg>
  );
}