// Ear — doodle-style line illustration. Single continuous outline plus two
// inner curls. Sits centered (small) inside its block. Scattered accent
// marks around it come from the layout `decor` system.
//
// Props:
//   listening — adds a small ripple to the left of the ear
//   s         — width in px (default fills parent)

const BauhausEar = ({ listening = false, s }) => {
  const VB = 400;
  const sizing = s
    ? { width: s, height: s }
    : { width: '100%', height: '100%' };

  return (
    <svg
      {...sizing}
      viewBox={`0 0 ${VB} ${VB}`}
      preserveAspectRatio="xMidYMid meet"
      style={{ display: 'block', overflow: 'visible' }}
    >
      {/* offset peach skin fill — peeks out from behind the ear outline */}
      <ellipse cx="200" cy="200" rx="100" ry="135"
        fill="#F4C9B0" stroke="none"
        transform="translate(14 12)" />

      {/* outer ear contour */}
      <path d="M105.488 117.524C113.408 99.7187 120.359 78.852 137.7 68.0142C219.412 16.9436 304.012 96.8239 291.596 183.735C284.41 234.037 231.516 260.946 210.472 303.034C192.435 339.108 121.338 372.909 115.629 321.526"
        stroke="currentColor" strokeWidth="16"
        strokeLinecap="round" strokeLinejoin="round" fill="none" />
      {/* inner curl 1 — helix */}
      <path d="M229.563 238.612C271.782 193.835 261.136 88.7032 191.386 91.8739C138.895 94.26 151.137 164.677 163.351 189.103"
        stroke="currentColor" strokeWidth="16"
        strokeLinecap="round" strokeLinejoin="round" fill="none" />
      {/* inner curl 2 — antihelix */}
      <path d="M152.723 155.103C208.642 151.222 227.658 210.091 191.382 246.368C181.932 255.816 163.669 242.087 152.723 247.56C141.774 253.035 133.574 270.289 122.785 257.701"
        stroke="currentColor" strokeWidth="16"
        strokeLinecap="round" strokeLinejoin="round" fill="none" />

      {/* listening: small ripple to the LEFT of the ear */}
      {listening && (
        <g>
          <path d="M 56 188 A 22 22 0 0 0 56 244"
            stroke="currentColor" strokeWidth="12" strokeLinecap="round"
            fill="none" opacity="0.7" />
          <path d="M 28 168 A 36 36 0 0 0 28 264"
            stroke="currentColor" strokeWidth="12" strokeLinecap="round"
            fill="none" opacity="0.4" />
        </g>
      )}
    </svg>
  );
};

window.BauhausEar = BauhausEar;