feat: add x-fuel.* Blade components

resources/views/components/fuel/forecast.blade.php

@@ -0,0 +1,29 @@
+<div class="relative overflow-hidden rounded-2xl border border-[#e5ded7] bg-[#faf6f3] p-5 shadow-sm">
+    {{-- Pro badge --}}
+    <div class="mb-3 flex items-center justify-between">
+        <div>
+            <p class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">14-Day Forecast</p>
+            <h3 class="text-lg font-black text-[#4a3f3b]">Price Trend</h3>
+        </div>
+        <span class="rounded-full bg-[#bb5b3e] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide text-white">
+            Pro
+        </span>
+    </div>
+
+    {{-- Decorative squiggle chart --}}
+    <svg viewBox="0 0 200 60" class="mb-4 h-16 w-full opacity-40" fill="none" stroke="#bb5b3e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="0,45 20,38 40,42 60,30 80,35 100,20 120,25 140,15 160,22 180,12 200,18" />
+    </svg>
+
+    {{-- Blurred overlay --}}
+    <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-[#faf6f3]/80 backdrop-blur-sm">
+        <iconify-icon icon="lucide:lock" class="mb-2 text-3xl text-[#bb5b3e]"></iconify-icon>
+        <p class="mb-3 text-sm font-bold text-[#4a3f3b]">14-day forecast is a Pro feature</p>
+        <a
+            href="{{ route('register') }}"
+            class="rounded-xl bg-[#bb5b3e] px-5 py-2.5 text-sm font-bold text-white shadow-md"
+        >
+            Unlock Forecast
+        </a>
+    </div>
+</div>

resources/views/components/fuel/radius-select.blade.php

@@ -0,0 +1,10 @@
+<select
+    {{ $attributes->whereStartsWith('wire:') }}
+    class="h-11 w-full rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-3 text-sm font-semibold text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
+>
+    <option value="1">1 mile</option>
+    <option value="2">2 miles</option>
+    <option value="5">5 miles</option>
+    <option value="10">10 miles</option>
+    <option value="20">20 miles</option>
+</select>

resources/views/components/fuel/recommendation.blade.php

@@ -0,0 +1,63 @@
+@props(['prediction'])
+
+@if ($prediction)
+    @php
+        $action = $prediction['action'] ?? 'no_signal';
+        $headline = match ($action) {
+            'fill_now' => 'Fill up now',
+            'wait'     => 'Wait',
+            default    => 'No signal',
+        };
+        $score = (float) ($prediction['confidence_score'] ?? 0);
+        $circumference = 125.6; // 2π × 20
+        $offset = round($circumference * (1 - $score / 100), 1);
+        $label = $prediction['confidence_label'] ?? 'low';
+        $labelColour = match ($label) {
+            'high'   => 'bg-green-100 text-green-700',
+            'medium' => 'bg-amber-100 text-amber-700',
+            default  => 'bg-zinc-100 text-zinc-500',
+        };
+    @endphp
+
+    <div class="rounded-2xl border border-[#e5ded7] bg-[#faf6f3] p-5 shadow-sm">
+        <div class="mb-3 flex items-start justify-between">
+            <div>
+                <p class="mb-1 text-[10px] font-bold uppercase tracking-widest text-[#89726c]">
+                    Recommendation
+                </p>
+                <h2 class="text-3xl font-black leading-tight text-[#8B4860]">
+                    {{ $headline }}
+                </h2>
+            </div>
+
+            <div class="flex flex-col items-center gap-1">
+                <div class="relative h-12 w-12">
+                    <svg class="h-full w-full -rotate-90" viewBox="0 0 48 48">
+                        <circle cx="24" cy="24" r="20" stroke="#eeeae5" stroke-width="4" fill="transparent" />
+                        <circle
+                            cx="24" cy="24" r="20"
+                            stroke="#8B4860" stroke-width="4" fill="transparent"
+                            stroke-dasharray="{{ $circumference }}"
+                            stroke-dashoffset="{{ $offset }}"
+                            stroke-linecap="round"
+                        />
+                    </svg>
+                    <span class="absolute inset-0 flex items-center justify-center text-[11px] font-black text-[#4a3f3b]">
+                        {{ (int) $score }}%
+                    </span>
+                </div>
+                <span class="text-[9px] font-bold uppercase tracking-wider text-[#89726c]">Confidence</span>
+            </div>
+        </div>
+
+        <p class="text-sm font-medium leading-relaxed text-[#6b5a55]">
+            {{ $prediction['reasoning'] ?? '' }}
+        </p>
+
+        <div class="mt-3">
+            <span class="rounded-full px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide {{ $labelColour }}">
+                {{ ucfirst($label) }} confidence
+            </span>
+        </div>
+    </div>
+@endif

resources/views/components/fuel/sort-select.blade.php

@@ -0,0 +1,10 @@
+<select
+    {{ $attributes->whereStartsWith('wire:') }}
+    class="h-11 w-full rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-3 text-sm font-semibold text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
+>
+    <option value="reliable">Best price (reliable)</option>
+    <option value="price">Cheapest first</option>
+    <option value="distance">Nearest first</option>
+    <option value="updated">Recently updated</option>
+    <option value="brand">Brand A–Z</option>
+</select>

resources/views/components/fuel/station-card.blade.php

@@ -0,0 +1,42 @@
+@props(['station'])
+
+@php
+    $colourClass = match($station['price_classification'] ?? '') {
+        'current'  => 'text-green-500',
+        'recent'   => 'text-slate-500',
+        'stale'    => 'text-amber-500',
+        'outdated' => 'text-red-500',
+        default    => 'text-zinc-400',
+    };
+    $miles = number_format(($station['distance_km'] ?? 0) * 0.621371, 1);
+    $price = number_format($station['price'] ?? 0, 1);
+@endphp
+
+<div class="flex items-center justify-between rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-4 py-3.5">
+    <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-2">
+            <p class="truncate text-sm font-bold text-[#4a3f3b]">
+                {{ $station['name'] ?? '' }}
+            </p>
+            @if (! empty($station['is_supermarket']))
+                <span class="shrink-0 rounded bg-lime-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-lime-700">
+                    Supermarket
+                </span>
+            @endif
+        </div>
+        <p class="truncate text-xs text-[#89726c]">
+            {{ $station['address'] ?? '' }}, {{ $station['postcode'] ?? '' }}
+        </p>
+        <p class="text-xs text-[#b0a09a]">{{ $miles }} miles away</p>
+    </div>
+
+    <div class="ml-4 shrink-0 text-right">
+        <p class="text-xl font-black text-[#4a3f3b]">{{ $price }}p</p>
+        <p class="text-[11px] {{ $colourClass }}">
+            {{ $station['price_classification_label'] ?? '' }}
+            @if (! empty($station['price_updated_at']))
+                &middot; {{ \Carbon\Carbon::parse($station['price_updated_at'])->diffForHumans() }}
+            @endif
+        </p>
+    </div>
+</div>

resources/views/components/fuel/station-map.blade.php

@@ -0,0 +1,6 @@
+@props(['results' => []])
+
+<div
+    x-data="stationMap(@entangle('results'))"
+    class="h-56 w-full overflow-hidden border-y border-[#e5ded7] md:h-96"
+></div>

resources/views/components/fuel/type-select.blade.php

@@ -0,0 +1,11 @@
+<select
+    {{ $attributes->whereStartsWith('wire:') }}
+    class="h-11 w-full rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-3 text-sm font-semibold text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
+>
+    <option value="petrol">Petrol (E10)</option>
+    <option value="e5">Super Unleaded (E5)</option>
+    <option value="diesel">Diesel</option>
+    <option value="b7_premium">Premium Diesel</option>
+    <option value="b10">B10 Biodiesel</option>
+    <option value="hvo">HVO</option>
+</select>