<?php
declare(strict_types=1);

function render_pot_visual(string $sizeClass = ''): void
{
    ?>
    <div class="pot-visual <?= e($sizeClass) ?>" aria-hidden="true">
        <svg class="pot-svg" viewBox="0 0 640 520">
            <g class="pot-group">
                <ellipse class="pot-shadow" cx="320" cy="455" rx="205" ry="22"/>

                <path class="pot-shell" d="M158 272h324l-28 148c-4 22-23 38-45 38H231c-22 0-41-16-45-38z"/>
                <path class="pot-inner" d="M198 302h244l-18 99c-2 13-14 23-27 23H243c-13 0-25-10-27-23z"/>

                <path class="pot-handle"
                      d="M154 308H94c-25 0-43 18-43 41s18 41 43 41h35"/>
                <path class="pot-handle"
                      d="M486 308h60c25 0 43 18 43 41s-18 41-43 41h-35"/>

                <g class="pot-lid">
                    <path class="pot-lid-shape" d="M170 268c15-82 76-132 150-132s135 50 150 132z"/>
                    <rect class="pot-lid-rim" x="155" y="258" width="330" height="25" rx="13"/>
                    <circle class="pot-knob" cx="320" cy="130" r="32"/>
                    <circle class="pot-red-dot" cx="320" cy="130" r="13"/>
                </g>

                <path class="pot-steam pot-steam-1" d="M245 164 C205 126, 278 104, 235 42"/>
                <path class="pot-steam pot-steam-2" d="M320 152 C286 110, 352 92, 316 20"/>
                <path class="pot-steam pot-steam-3" d="M395 164 C435 126, 362 104, 405 42"/>
            </g>
        </svg>
    </div>
    <?php
}