@namespace Faraon.Client.Components

<div class="marias-pip-wrapper @CustomClass" style="@CustomStyle">
    @if (Suit == Suit.Hearts)
    {
        <!-- ČERVEŇ / SRDCE -->
        <svg viewBox="0 0 32 32" class="pip-svg">
            <defs>
                <radialGradient id="heartGrad" cx="35%" cy="35%" r="65%">
                    <stop offset="0%" stop-color="#ff4d4d"/>
                    <stop offset="70%" stop-color="#c1121f"/>
                    <stop offset="100%" stop-color="#780000"/>
                </radialGradient>
            </defs>
            <path d="M16 28 C16 28 3 19 3 10 C3 5 7.5 2 12 2 C14.5 2 15.5 3.5 16 4.5 C16.5 3.5 17.5 2 20 2 C24.5 2 29 5 29 10 C29 19 16 28 16 28 Z"
                  fill="url(#heartGrad)" stroke="#5e0000" stroke-width="1.2"/>
            <path d="M16 23 C16 23 7 16 7 10.5 C7 7 9 4.5 12 4.5 C14 4.5 15 5.5 16 7 C17 5.5 18 4.5 20 4.5 C23 4.5 25 7 25 10.5 C25 16 16 23 16 23 Z"
                  fill="none" stroke="#ffd166" stroke-width="0.8" opacity="0.65"/>
        </svg>
    }
    else if (Suit == Suit.Leaves)
    {
        <!-- ZELEŇ / LIST -->
        <svg viewBox="0 0 32 32" class="pip-svg">
            <defs>
                <linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#38b000"/>
                    <stop offset="60%" stop-color="#1b4332"/>
                    <stop offset="100%" stop-color="#081c15"/>
                </linearGradient>
            </defs>
            <path d="M16 2 C10 8 5 15 6 24 C7 27.5 11 29.5 16 30 C21 29.5 25 27.5 26 24 C27 15 22 8 16 2 Z"
                  fill="url(#leafGrad)" stroke="#081c15" stroke-width="1.2"/>
            <path d="M16 4 L16 28" stroke="#ffdd00" stroke-width="1.4" stroke-linecap="round"/>
            <path d="M16 10 Q10 13 8 17 M16 16 Q10 19 8 23 M16 10 Q22 13 24 17 M16 16 Q22 19 24 23"
                  stroke="#ffdd00" stroke-width="1.1" fill="none" stroke-linecap="round"/>
        </svg>
    }
    else if (Suit == Suit.Acorns)
    {
        <!-- ŽALUĎ -->
        <svg viewBox="0 0 32 32" class="pip-svg">
            <defs>
                <linearGradient id="acornNutGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#e9c46a"/>
                    <stop offset="60%" stop-color="#bc6c25"/>
                    <stop offset="100%" stop-color="#703604"/>
                </linearGradient>
                <linearGradient id="acornCapGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#8c5835"/>
                    <stop offset="100%" stop-color="#3d2110"/>
                </linearGradient>
            </defs>
            <!-- Stopka -->
            <path d="M16 2 Q15 5 16 7" stroke="#3d2110" stroke-width="2" stroke-linecap="round" fill="none"/>
            <!-- Čiapočka -->
            <path d="M8 12 C7 8 12 7 16 7 C20 7 25 8 24 12 Q16 14 8 12 Z"
                  fill="url(#acornCapGrad)" stroke="#221107" stroke-width="1.2"/>
            <path d="M11 9 L21 11 M13 8 L19 12" stroke="#d4a373" stroke-width="0.8" opacity="0.6"/>
            <!-- Oriešok / Telo žaluďa -->
            <path d="M9 13 C9 22 13 29 16 30.5 C19 29 23 22 23 13 Q16 14.5 9 13 Z"
                  fill="url(#acornNutGrad)" stroke="#432204" stroke-width="1.2"/>
            <path d="M12 15 C12 21 14 26 16 28.5" stroke="#fff3b0" stroke-width="1.1" fill="none" opacity="0.8" stroke-linecap="round"/>
        </svg>
    }
    else
    {
        <!-- GUĽA / ROLNIČKA -->
        <svg viewBox="0 0 32 32" class="pip-svg">
            <defs>
                <radialGradient id="bellGrad" cx="35%" cy="30%" r="70%">
                    <stop offset="0%" stop-color="#fff07c"/>
                    <stop offset="40%" stop-color="#f4a261"/>
                    <stop offset="85%" stop-color="#e76f51"/>
                    <stop offset="100%" stop-color="#8c2f16"/>
                </radialGradient>
            </defs>
            <!-- Očko na zavesenie -->
            <ellipse cx="16" cy="4.5" rx="3.5" ry="2.5" fill="none" stroke="#b07d10" stroke-width="1.5"/>
            <!-- Telo gule -->
            <circle cx="16" cy="18" r="12" fill="url(#bellGrad)" stroke="#66200e" stroke-width="1.2"/>
            <!-- Stredový červeno-zlatý pás -->
            <path d="M4.5 17 Q16 13 27.5 17" stroke="#c1121f" stroke-width="3" fill="none"/>
            <path d="M4.5 17 Q16 13 27.5 17" stroke="#ffe066" stroke-width="1" fill="none"/>
            <!-- Štrbina a stredová dierka -->
            <circle cx="16" cy="23.5" r="2" fill="#2b0d06"/>
            <path d="M10.5 23.5 L21.5 23.5" stroke="#2b0d06" stroke-width="1.6" stroke-linecap="round"/>
        </svg>
    }
</div>

@code {
    [Parameter] public Suit Suit { get; set; } = Suit.Hearts;
    [Parameter] public string CustomClass { get; set; } = "";
    [Parameter] public string CustomStyle { get; set; } = "";
}