{{--
    Icon resolver for the public website.

    Order of resolution:
      1. brand/social glyph shipped in resources/views/website/icons
      2. supplementary outline icons defined below
      3. the app-wide <x-ui.icon> set
      4. a visible neutral placeholder

    Step 4 matters: <x-ui.icon> renders nothing for an unknown name, which in a
    builder context looks like a broken layout with no explanation. A visible
    placeholder tells the editor the icon name is wrong.
--}}
@props(['name' => null, 'class' => 'w-5 h-5'])

@php
    $key = \Illuminate\Support\Str::of((string) $name)->lower()->trim()->replace([' ', '_'], '-')->value();

    $aliases = [
        'x' => 'twitter', 'x-twitter' => 'twitter', 'fb' => 'facebook',
        'ig' => 'instagram', 'yt' => 'youtube', 'location' => 'map-pin',
        'mail' => 'envelope', 'email' => 'envelope', 'tel' => 'phone',
        'mobile' => 'device-phone-mobile', 'close' => 'x-mark', 'tick' => 'check',
    ];
    $key = $aliases[$key] ?? $key;

    $socialView = 'website.icons.' . $key;

    // Outline paths on a 24x24 grid, stroked with currentColor.
    $supplementary = [
        'map-pin' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21s7-5.686 7-11a7 7 0 10-14 0c0 5.314 7 11 7 11z"/><circle cx="12" cy="10" r="2.5" stroke-width="2"/>',
        'phone' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h2.2a1 1 0 01.97.757l.75 3a1 1 0 01-.29.98l-1.4 1.32a13 13 0 005.71 5.71l1.32-1.4a1 1 0 01.98-.29l3 .75A1 1 0 0120 16.8V19a1 1 0 01-1 1A15 15 0 014 5z"/>',
        'envelope' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.5 7l8.5 6 8.5-6"/>',
        'check' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>',
        'x-mark' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>',
        'star' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"/>',
        'globe' => '<circle cx="12" cy="12" r="9" stroke-width="2"/><path stroke-width="2" d="M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18"/>',
        'device-phone-mobile' => '<rect x="7" y="3" width="10" height="18" rx="2" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="M11 18.5h2"/>',
        'arrow-down-tray' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0l-4-4m4 4l4-4M4 19h16"/>',
        'link' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 13a4 4 0 006 .5l2.5-2.5a4 4 0 00-5.66-5.66L11.5 6.7M14 11a4 4 0 00-6-.5L5.5 13a4 4 0 005.66 5.66l1.3-1.3"/>',
        'share' => '<circle cx="18" cy="6" r="2.5" stroke-width="2"/><circle cx="6" cy="12" r="2.5" stroke-width="2"/><circle cx="18" cy="18" r="2.5" stroke-width="2"/><path stroke-width="2" d="M8.3 10.8l7.4-3.6M8.3 13.2l7.4 3.6"/>',
        'whatsapp' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.5 20.5l1.3-4a8 8 0 113.2 3.1z"/><path stroke-linecap="round" stroke-width="2" d="M9 9.5c0 3 2.5 5.5 5.5 5.5"/>',
        'squares-2x2' => '<rect x="3" y="3" width="7" height="7" rx="1.5" stroke-width="2"/><rect x="14" y="3" width="7" height="7" rx="1.5" stroke-width="2"/><rect x="3" y="14" width="7" height="7" rx="1.5" stroke-width="2"/><rect x="14" y="14" width="7" height="7" rx="1.5" stroke-width="2"/>',
        'view-columns' => '<rect x="3" y="4" width="18" height="16" rx="2" stroke-width="2"/><path stroke-width="2" d="M9 4v16M15 4v16"/>',
        'rectangle-group' => '<rect x="3" y="4" width="8" height="7" rx="1.5" stroke-width="2"/><rect x="13" y="4" width="8" height="12" rx="1.5" stroke-width="2"/><rect x="3" y="13" width="8" height="7" rx="1.5" stroke-width="2"/>',
        'identification' => '<rect x="3" y="5" width="18" height="14" rx="2" stroke-width="2"/><circle cx="9" cy="11" r="2" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="M6 16c.8-1.3 1.8-2 3-2s2.2.7 3 2M14.5 10H18M14.5 13.5H18"/>',
        'arrows-up-down' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4v16m0-16L5 7m3-3l3 3M16 20V4m0 16l-3-3m3 3l3-3"/>',
    ];
@endphp

@if (view()->exists($socialView))
    @include($socialView, ['class' => $class])
@elseif (isset($supplementary[$key]))
    <svg {{ $attributes->merge(['class' => $class]) }} fill="none" stroke="currentColor"
         viewBox="0 0 24 24" aria-hidden="true" focusable="false">{!! $supplementary[$key] !!}</svg>
@elseif ($key !== '')
    @php
        // Probe the shared set; it renders empty output for unknown names.
        $shared = trim(\Illuminate\Support\Facades\Blade::render(
            '<x-ui.icon :name="$n" :class="$c" />',
            ['n' => $key, 'c' => $class],
        ));
    @endphp
    @if ($shared !== '')
        {!! $shared !!}
    @else
        <svg {{ $attributes->merge(['class' => $class]) }} fill="none" stroke="currentColor"
             viewBox="0 0 24 24" aria-hidden="true" focusable="false"
             data-unknown-icon="{{ $key }}">
            <rect x="3.5" y="3.5" width="17" height="17" rx="3" stroke-width="1.5" stroke-dasharray="3 3"/>
        </svg>
    @endif
@endif
