{{--
    SEO Breadcrumb Component
    Use: @include('partials.breadcrumb', ['items' => [['title' => 'Home', 'url' => '/'], ['title' => 'Products', 'url' => '/products'], ['title' => 'Product Name']]])
--}}
@if(!empty($items) && count($items) > 0)
<nav aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList" style="padding: 1rem 0; margin-bottom: 1rem;">
    <ol style="list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem;">
        @foreach($items as $index => $item)
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" style="display: flex; align-items: center; gap: 0.5rem;">
                @if($index > 0)
                    <span style="color: #9ca3af; font-size: 0.75rem;">/</span>
                @endif
                @if(!empty($item['url']) && $index < count($items) - 1)
                    <a href="{{ $item['url'] }}" itemprop="item" style="color: #6b7280; text-decoration: none; transition: color 0.2s;">
                        <span itemprop="name">{{ $item['title'] }}</span>
                    </a>
                @else
                    <span itemprop="item" style="color: #374151; font-weight: 500;">
                        <span itemprop="name">{{ $item['title'] }}</span>
                    </span>
                @endif
                <meta itemprop="position" content="{{ $index + 1 }}">
            </li>
        @endforeach
    </ol>
</nav>

{{-- JSON-LD Breadcrumb Schema --}}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        @foreach($items as $index => $item)
        {
            "@type": "ListItem",
            "position": {{ $index + 1 }},
            "name": "{{ $item['title'] }}"
            @if(!empty($item['url']))
            ,"item": "{{ $item['url'] }}"
            @endif
        }@if($index < count($items) - 1),@endif
        @endforeach
    ]
}
</script>
@endif