@php
    $fpdTabs = [
        'data'    => ['Data', \Webkul\FestoolProductData\Filament\Pages\ManageFestoolProductData::getUrl(), 'heroicon-o-circle-stack'],
        'browse'  => ['Browse', \Webkul\FestoolProductData\Filament\Pages\BrowseFestoolProducts::getUrl(), 'heroicon-o-magnifying-glass'],
        'builder' => ['Product Builder', \Webkul\FestoolProductData\Filament\Pages\ProductBuilder::getUrl(), 'heroicon-o-wrench-screwdriver'],
    ];
@endphp
<style>
    .fpd-head-wrap { display:block; }
    .fpd-hd { background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem 1.25rem; margin-bottom:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.05); display:flex; align-items:center; gap:.875rem; }
    .fpd-hd-logo { height:44px; width:44px; border-radius:.625rem; overflow:hidden; flex-shrink:0; }
    .fpd-hd-logo img { width:100%; height:100%; object-fit:cover; display:block; }
    .fpd-hd-title { font-size:1.125rem; font-weight:800; color:#111827; }
    .fpd-hd-sub { font-size:.8125rem; color:#6b7280; }
    html.dark .fpd-hd { background:#1f2937; border-color:#374151; box-shadow:none; }
    html.dark .fpd-hd-title { color:#f9fafb; }
    html.dark .fpd-hd-sub { color:#9ca3af; }    .fpd-tabs { display:flex; gap:.25rem; flex-wrap:wrap; background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:.375rem; margin-bottom:1rem; box-shadow:0 1px 2px rgba(0,0,0,.05); }
    .fpd-tab { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:.5rem; font-size:.875rem; font-weight:500; color:#6b7280; text-decoration:none; transition:background .12s,color .12s; }
    .fpd-tab:hover { background:#f3f4f6; color:#374151; }
    .fpd-tab.active { background:#eff6ff; color:#2563eb; }
    .fpd-tab svg { width:1.25rem; height:1.25rem; }
    html.dark .fpd-tabs { background:#1f2937; border-color:#374151; box-shadow:none; }
    html.dark .fpd-tab { color:#9ca3af; }
    html.dark .fpd-tab:hover { background:#374151; color:#e5e7eb; }
    html.dark .fpd-tab.active { background:#1e3a5f; color:#93c5fd; }
</style>
<div class="fpd-head-wrap">
<div class="fpd-hd">
    <div class="fpd-hd-logo"><img src="{{ asset('images/festool-logo.webp') }}" alt="Festool"></div>
    <div>
        <div class="fpd-hd-title">Festool Product Data</div>
        <div class="fpd-hd-sub">Product catalogue, pricing &amp; festool.co.uk web scraper</div>
    </div>
</div>
<nav class="fpd-tabs">
    @foreach ($fpdTabs as $key => [$label, $url, $icon])
        <a href="{{ $url }}" class="fpd-tab {{ ($active ?? '') === $key ? 'active' : '' }}">
            <x-filament::icon :icon="$icon" />
            {{ $label }}
        </a>
    @endforeach
</nav>
</div>