import '../../styles/ModelSilhouette.css';

/**
 * Stylized silhouette of a person wearing a t-shirt. Rendered behind the
 * shirt SVG when "Preview on Model" is enabled, so the user can see what
 * their design looks like worn rather than as a flat mockup.
 *
 * The shape is intentionally simple: head + neck + shoulders + arms. The
 * shirt SVG sits on top, hiding the torso area. The result reads as
 * "a person wearing this shirt" without needing a full photographic model.
 *
 * viewBox matches the shirt SVG (480×540) so the two layers register cleanly
 * when stacked in the same wrapper.
 */
export function ModelSilhouette() {
  return (
    <svg
      className="model-silhouette"
      viewBox="0 0 480 540"
      role="img"
      aria-label="Model preview"
      preserveAspectRatio="xMidYMid meet"
    >
      <defs>
        <linearGradient id="model-skin" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#f5d4b8" />
          <stop offset="100%" stopColor="#e8b894" />
        </linearGradient>
        <linearGradient id="model-hair" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3d2817" />
          <stop offset="100%" stopColor="#2a1a0e" />
        </linearGradient>
        <radialGradient id="model-bg" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="rgba(253, 226, 234, 0.7)" />
          <stop offset="100%" stopColor="rgba(253, 226, 234, 0.0)" />
        </radialGradient>
      </defs>

      {/* Soft halo behind the model so it visually recedes from the canvas frame */}
      <rect x="0" y="0" width="480" height="540" fill="url(#model-bg)" />

      {/* Hair — covers the top/sides of the head, gives a silhouette feel */}
      <path
        d="
          M 195 25
          Q 175 35 168 65
          Q 162 92 175 110
          L 200 90
          Q 240 70 280 90
          L 305 110
          Q 318 92 312 65
          Q 305 35 285 25
          Q 240 5 195 25
          Z
        "
        fill="url(#model-hair)"
      />

      {/* Head — slightly narrower than the hair so the hair frames it */}
      <ellipse cx="240" cy="68" rx="44" ry="52" fill="url(#model-skin)" />

      {/* Subtle shadow under the chin where the neck begins */}
      <ellipse cx="240" cy="118" rx="22" ry="6" fill="rgba(31, 29, 35, 0.08)" />

      {/* Neck — short, slightly tapered */}
      <path
        d="
          M 220 110
          Q 218 130 215 145
          L 265 145
          Q 262 130 260 110
          Z
        "
        fill="url(#model-skin)"
      />

      {/* Shoulders & upper arms — the shirt SVG paints on top so we only need
          the parts that peek out. We extend the arms slightly past the shirt
          sleeves on both sides. */}
      <path
        d="
          M 60 145
          Q 100 138 150 145
          L 170 200
          Q 130 220 95 220
          Q 70 215 55 195
          Z
        "
        fill="url(#model-skin)"
      />
      <path
        d="
          M 420 145
          Q 380 138 330 145
          L 310 200
          Q 350 220 385 220
          Q 410 215 425 195
          Z
        "
        fill="url(#model-skin)"
      />

      {/* Forearms peeking out below the shirt sleeves */}
      <path
        d="
          M 95 220
          Q 75 280 70 360
          Q 78 380 95 378
          Q 110 360 115 295
          Q 112 250 110 220
          Z
        "
        fill="url(#model-skin)"
      />
      <path
        d="
          M 385 220
          Q 405 280 410 360
          Q 402 380 385 378
          Q 370 360 365 295
          Q 368 250 370 220
          Z
        "
        fill="url(#model-skin)"
      />
    </svg>
  );
}
