@props(['name', 'technicalName' => null, 'packing', 'category' => '', 'image' => null])

<div class="product-card" data-reveal>
    <div class="product-card-image">
        @if($image)
            <img src="{{ $image }}" alt="{{ $name }}" loading="lazy">
        @else
            <div class="product-placeholder" style="background: linear-gradient(135deg, #008F3C22, #16A34A33);">
                <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
                    <rect x="16" y="8" width="32" height="48" rx="4" fill="#006B5B" opacity="0.15"/>
                    <rect x="20" y="14" width="24" height="8" rx="2" fill="#006B5B" opacity="0.2"/>
                    <path d="M28 28h8v12h-8z" fill="#16A34A" opacity="0.2"/>
                    <circle cx="32" cy="22" r="3" fill="#006B5B" opacity="0.2"/>
                </svg>
                <span>{{ $name }}</span>
            </div>
        @endif
        @if($category)
            <span class="product-badge">{{ $category }}</span>
        @endif
    </div>
    <div class="product-card-body">
        <h3 class="product-name">{{ $name }}</h3>
        @if($technicalName)
            <p class="product-technical">{{ $technicalName }}</p>
        @endif
        <div class="product-packing">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
            <span>{{ $packing }}</span>
        </div>
    </div>
</div>