@props(['tone' => 'brand'])

@php
    // Illustration de container générée en SVG (remplaçable par une vraie photo).
    $tones = [
        'brand' => ['#7dd2e0', '#55bfd0', '#1c7d8c'],
        'ink' => ['#6e6c6c', '#555353', '#3d3b3b'],
        'sand' => ['#3f9fae', '#1c7d8c', '#0f4a55'],
    ];
    [$light, $mid, $dark] = $tones[$tone] ?? $tones['brand'];
@endphp

<svg {{ $attributes->merge(['class' => 'h-full w-full']) }} viewBox="0 0 400 260" preserveAspectRatio="xMidYMid slice"
     role="img" aria-label="Illustration d’un container de stockage">
    <defs>
        <linearGradient id="sky-{{ $tone }}" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#f4f4f3" />
            <stop offset="100%" stop-color="#dcdcda" />
        </linearGradient>
        <pattern id="corrugated-{{ $tone }}" width="14" height="8" patternUnits="userSpaceOnUse">
            <rect width="14" height="8" fill="{{ $mid }}" />
            <rect width="5" height="8" fill="{{ $light }}" />
        </pattern>
    </defs>

    <rect width="400" height="260" fill="url(#sky-{{ $tone }})" />
    <rect y="196" width="400" height="64" fill="#c4c4c1" />

    {{-- Container arrière --}}
    <g opacity="0.55">
        <rect x="16" y="74" width="150" height="96" fill="{{ $dark }}" />
        <rect x="16" y="74" width="150" height="10" fill="{{ $mid }}" />
    </g>

    {{-- Container principal --}}
    <g>
        <rect x="96" y="86" width="268" height="110" fill="url(#corrugated-{{ $tone }})" />
        <rect x="96" y="86" width="268" height="12" fill="{{ $dark }}" />
        <rect x="96" y="188" width="268" height="8" fill="{{ $dark }}" />

        {{-- Portes --}}
        <rect x="228" y="102" width="126" height="82" fill="{{ $dark }}" opacity="0.85" />
        <rect x="290" y="102" width="3" height="82" fill="{{ $light }}" opacity="0.5" />
        <rect x="240" y="112" width="6" height="62" rx="3" fill="{{ $light }}" opacity="0.8" />
        <rect x="336" y="112" width="6" height="62" rx="3" fill="{{ $light }}" opacity="0.8" />
        <circle cx="286" cy="146" r="6" fill="#f4f4f3" />
    </g>

    {{-- Ombre au sol --}}
    <ellipse cx="230" cy="200" rx="150" ry="9" fill="#000" opacity="0.12" />
</svg>