feat: expand station cards with detailed information and add live statistics endpoint

- Add `/stats/live` endpoint returning station count and latest price timestamp with 5-minute cache
- Transform StationCard into expandable component with click/keyboard interaction showing full details
- Display brand label, badges (24h/Supermarket/Motorway), fuel types, amenities, opening hours, and price delta vs average
- Add brand filter dropdown to StationList with dynamic brand extraction from results
- Calculate and display price comparison against filtered stations average
- Redesign map markers to simpler price display; move directions link to popup alongside station details
- Add "locate-me" button to SearchBar for geolocation trigger
- Show "Live" indicator with station count and last-update time on homepage hero
- Remove standalone directions link from marker HTML; consolidate in popup with click propagation handling
- Persist `avgPence` calculation across StationList and pass to cards for delta display
- Add `@iconify-json/lucide` dev dependency and register collection on app mount
- Stop click propagation on card action buttons (directions, remove)

.claude/rules/tiers.md

@@ -103,11 +103,12 @@ Each tier has two prices:
 ### `plans` table
 
 ```
-id                  unsignedBigInteger PK
+id                          unsignedBigInteger PK
-name                string              — free | basic | plus | pro
+name                        string              — free | basic | plus | pro
-stripe_price_id     string nullable     — maps Cashier price to this plan
+stripe_price_id_monthly     string nullable     — Cashier price ID for monthly billing
-features            json                — see shape below
+stripe_price_id_annual      string nullable     — Cashier price ID for annual billing
-active              boolean default true
+features                    json                — see shape below
+active                      boolean default true
 timestamps
 ```
 
@@ -123,7 +124,8 @@ timestamps
     "frequency": "triggered"
   },
   "push": {
-    "enabled": true
+    "enabled": true,
+    "frequency": "triggered"
   },
   "whatsapp": {
     "enabled": true,
@@ -141,7 +143,20 @@ timestamps
 ```
 
 `fuel_types.max: null` means unlimited. `email.frequency` values: `weekly_digest`,
-`daily`, `triggered`. All boolean features default `false` on free.
+`daily`, `triggered`. `push.frequency` values: `none` (when disabled), `daily`,
+`triggered`. All boolean features default `false` on free.
+
+`database/seeders/PlanSeeder.php` is the source of truth. Per-tier reality:
+
+- `price_threshold` and `score_alerts` are **enabled on basic, plus, and pro** (not plus-only).
+- `ai_predictions` is **plus and pro only**.
+- `whatsapp` and `sms` always carry `daily_limit` (and whatsapp carries `scheduled_updates`)
+  even when `enabled: false` — set to `0` on disabled tiers.
+
+> Deeper per-tier feature flags (history window, prediction level, leaderboard size,
+> saved stations, fuel log caps, brand comparison, route planner, family sharing) are
+> defined in `docs/superpowers/specs/2026-04-15-tier-features-design.md` — that spec
+> is the source of truth for entitlements beyond notification channels.
 
 ### `user_notification_preferences` table
 
@@ -184,8 +199,8 @@ missed-count queries.
 
 - Casts `features` to `array`.
 - Has a static `resolveForUser(User $user): Plan` method — looks up the user's
-  active Cashier subscription price ID, matches to `stripe_price_id`, falls back
+  active Cashier subscription price ID, matches to either `stripe_price_id_monthly`
-  to the `free` plan row.
+  or `stripe_price_id_annual`, falls back to the `free` plan row.
 - Cache the resolved plan: `Cache::tags(['plans'])->remember("plan_for_user_{$user->id}", 3600, ...)`.
 - Bust `Cache::tags(['plans'])` in an Eloquent `saved` observer on `Plan`.
 

CLAUDE.md

@@ -1,4 +1,4 @@
-# FuelAlert — Claude Code Instructions
+# Fuel Price — Claude Code Instructions
 
 UK fuel price intelligence app. Subscribers receive fill-up timing recommendations
 based on local price trends. Built solo by a PHP/Laravel developer.

app/Enums/PlanTier.php

@@ -8,4 +8,14 @@ enum PlanTier: string
     case Basic = 'basic';
     case Plus = 'plus';
     case Pro = 'pro';
+
+    public function label(): string
+    {
+        return match ($this) {
+            self::Free => 'Free',
+            self::Basic => 'Daily',
+            self::Plus => 'Smart',
+            self::Pro => 'Pro',
+        };
+    }
 }

app/Filament/Resources/Plans/Schemas/PlanForm.php

@@ -40,9 +40,17 @@ class PlanForm
                     ]),
 
                 Section::make('Push')
+                    ->columns(2)
                     ->schema([
                         Toggle::make('features.push.enabled')
                             ->label('Enabled'),
+                        Select::make('features.push.frequency')
+                            ->label('Frequency')
+                            ->options([
+                                'none' => 'None (disabled)',
+                                'daily' => 'Daily',
+                                'triggered' => 'Triggered',
+                            ]),
                     ]),
 
                 Section::make('WhatsApp')

app/Http/Controllers/Api/StationController.php

@@ -74,7 +74,6 @@ class StationController extends Controller
             : $filtered->sortBy(match ($sort) {
                 'price' => fn ($s) => (int) $s->price_pence,
                 'updated' => fn ($s) => $s->price_effective_at ? -strtotime($s->price_effective_at) : PHP_INT_MAX,
-                'brand' => fn ($s) => strtolower((string) $s->brand_name),
                 default => fn ($s) => (float) $s->distance_km,
             })->values();
 

app/Http/Controllers/Api/StatsController.php

@@ -4,11 +4,33 @@ namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
 use App\Models\Search;
+use App\Models\Station;
+use App\Models\StationPrice;
+use Carbon\CarbonImmutable;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Cache;
 
 class StatsController extends Controller
 {
+    public function live(): JsonResponse
+    {
+        $payload = Cache::remember('api:stats:live', now()->addMinutes(5), function (): array {
+            $stationCount = Station::query()
+                ->where('permanent_closure', false)
+                ->count();
+
+            $latestPriceAt = StationPrice::query()->max('recorded_at');
+
+            return [
+                'station_count' => $stationCount,
+                'latest_price_at' => $latestPriceAt ? CarbonImmutable::parse($latestPriceAt)->toIso8601String() : null,
+            ];
+        });
+
+        return response()->json($payload);
+    }
+
     public function searches(Request $request): JsonResponse
     {
         $period = $request->input('period', 'week');

app/Http/Resources/Api/StationResource.php

@@ -20,12 +20,16 @@ class StationResource extends JsonResource
             'name' => $this->trading_name,
             'brand' => $this->brand_name,
             'is_supermarket' => (bool) $this->is_supermarket,
+            'is_motorway' => (bool) $this->is_motorway_service_station,
             'address' => implode(', ', array_filter([$this->address_line_1, $this->city])),
             'postcode' => $this->postcode,
             'lat' => (float) $this->lat,
             'lng' => (float) $this->lng,
             'distance_km' => round((float) $this->distance_km, 2),
             'fuel_type' => $this->fuel_type,
+            'fuel_types_available' => $this->fuel_types ?? [],
+            'amenities' => $this->amenities ?? [],
+            'open_today' => $this->openTodayPayload(),
             'price_pence' => (int) $this->price_pence,
             'price' => round((int) $this->price_pence / 100, 2),
             'price_updated_at' => $this->price_effective_at
@@ -37,4 +41,50 @@ class StationResource extends JsonResource
             'reliability_label' => $reliability->label(),
         ];
     }
+
+    /**
+     * @return array{is_24_hours: bool, open: ?string, close: ?string, is_open_now: bool}|null
+     */
+    private function openTodayPayload(): ?array
+    {
+        $times = $this->opening_times;
+
+        if (! is_array($times) || empty($times['usual_days'])) {
+            return null;
+        }
+
+        $now = Carbon::now('Europe/London');
+        $dayKey = strtolower($now->format('l'));
+        $today = $times['usual_days'][$dayKey] ?? null;
+
+        if (! is_array($today)) {
+            return null;
+        }
+
+        $is24 = (bool) ($today['is_24_hours'] ?? false);
+        $open = $today['open'] ?? null;
+        $close = $today['close'] ?? null;
+
+        return [
+            'is_24_hours' => $is24,
+            'open' => $open ? substr($open, 0, 5) : null,
+            'close' => $close ? substr($close, 0, 5) : null,
+            'is_open_now' => $this->computeIsOpenNow($is24, $open, $close, $now),
+        ];
+    }
+
+    private function computeIsOpenNow(bool $is24, ?string $open, ?string $close, Carbon $now): bool
+    {
+        if ($is24) {
+            return true;
+        }
+
+        if (! $open || ! $close) {
+            return false;
+        }
+
+        $current = $now->format('H:i:s');
+
+        return $current >= $open && $current < $close;
+    }
 }

app/Models/Plan.php

@@ -70,7 +70,7 @@ class Plan extends Model
             'features' => [
                 'fuel_types' => ['max' => 1],
                 'email' => ['enabled' => true, 'frequency' => 'weekly_digest'],
-                'push' => ['enabled' => false],
+                'push' => ['enabled' => false, 'frequency' => 'none'],
                 'whatsapp' => ['enabled' => false, 'daily_limit' => 0, 'scheduled_updates' => 0],
                 'sms' => ['enabled' => false, 'daily_limit' => 0],
                 'ai_predictions' => false,
@@ -96,4 +96,12 @@ class Plan extends Model
             'active' => 'boolean',
         ];
     }
+
+    /** User-facing display label for this plan (e.g. basic → "Daily"). */
+    public function displayName(): string
+    {
+        $tier = PlanTier::tryFrom((string) $this->name) ?? PlanTier::Free;
+
+        return $tier->label();
+    }
 }

app/Services/PlanFeatures.php

@@ -23,7 +23,7 @@ final class PlanFeatures
                 'features' => [
                     'fuel_types' => ['max' => 1],
                     'email' => ['enabled' => true, 'frequency' => 'weekly_digest'],
-                    'push' => ['enabled' => false],
+                    'push' => ['enabled' => false, 'frequency' => 'none'],
                     'whatsapp' => ['enabled' => false, 'daily_limit' => 0, 'scheduled_updates' => 0],
                     'sms' => ['enabled' => false, 'daily_limit' => 0],
                     'ai_predictions' => false,
@@ -195,4 +195,10 @@ final class PlanFeatures
     {
         return $this->plan->name ?? 'free';
     }
+
+    /** User-facing display label for the resolved tier (e.g. basic → "Daily"). */
+    public function displayName(): string
+    {
+        return $this->plan->displayName();
+    }
 }

database/factories/PlanFactory.php

@@ -14,7 +14,7 @@ class PlanFactory extends Factory
     private static array $defaultFeatures = [
         'fuel_types' => ['max' => 1],
         'email' => ['enabled' => false, 'frequency' => 'weekly_digest'],
-        'push' => ['enabled' => false],
+        'push' => ['enabled' => false, 'frequency' => 'none'],
         'whatsapp' => ['enabled' => false, 'daily_limit' => 0, 'scheduled_updates' => 0],
         'sms' => ['enabled' => false, 'daily_limit' => 0],
         'ai_predictions' => false,
@@ -49,7 +49,7 @@ class PlanFactory extends Factory
             'features' => [
                 'fuel_types' => ['max' => 1],
                 'email' => ['enabled' => true, 'frequency' => 'daily'],
-                'push' => ['enabled' => true],
+                'push' => ['enabled' => true, 'frequency' => 'daily'],
                 'whatsapp' => ['enabled' => true, 'daily_limit' => 5, 'scheduled_updates' => 2],
                 'sms' => ['enabled' => false, 'daily_limit' => 0],
                 'ai_predictions' => false,
@@ -67,7 +67,7 @@ class PlanFactory extends Factory
             'features' => [
                 'fuel_types' => ['max' => 1],
                 'email' => ['enabled' => true, 'frequency' => 'triggered'],
-                'push' => ['enabled' => true],
+                'push' => ['enabled' => true, 'frequency' => 'triggered'],
                 'whatsapp' => ['enabled' => true, 'daily_limit' => 5, 'scheduled_updates' => 2],
                 'sms' => ['enabled' => true, 'daily_limit' => 1],
                 'ai_predictions' => true,
@@ -85,7 +85,7 @@ class PlanFactory extends Factory
             'features' => [
                 'fuel_types' => ['max' => null],
                 'email' => ['enabled' => true, 'frequency' => 'triggered'],
-                'push' => ['enabled' => true],
+                'push' => ['enabled' => true, 'frequency' => 'triggered'],
                 'whatsapp' => ['enabled' => true, 'daily_limit' => 5, 'scheduled_updates' => 2],
                 'sms' => ['enabled' => true, 'daily_limit' => 3],
                 'ai_predictions' => true,

database/seeders/PlanSeeder.php

@@ -17,7 +17,7 @@ class PlanSeeder extends Seeder
                 'features' => [
                     'fuel_types' => ['max' => 1],
                     'email' => ['enabled' => true, 'frequency' => 'weekly_digest'],
-                    'push' => ['enabled' => false],
+                    'push' => ['enabled' => false, 'frequency' => 'none'],
                     'whatsapp' => ['enabled' => false, 'daily_limit' => 0, 'scheduled_updates' => 0],
                     'sms' => ['enabled' => false, 'daily_limit' => 0],
                     'ai_predictions' => false,
@@ -31,7 +31,7 @@ class PlanSeeder extends Seeder
                 'features' => [
                     'fuel_types' => ['max' => 1],
                     'email' => ['enabled' => true, 'frequency' => 'daily'],
-                    'push' => ['enabled' => true],
+                    'push' => ['enabled' => true, 'frequency' => 'daily'],
                     'whatsapp' => ['enabled' => true, 'daily_limit' => 5, 'scheduled_updates' => 2],
                     'sms' => ['enabled' => false, 'daily_limit' => 0],
                     'ai_predictions' => false,
@@ -45,7 +45,7 @@ class PlanSeeder extends Seeder
                 'features' => [
                     'fuel_types' => ['max' => 1],
                     'email' => ['enabled' => true, 'frequency' => 'triggered'],
-                    'push' => ['enabled' => true],
+                    'push' => ['enabled' => true, 'frequency' => 'triggered'],
                     'whatsapp' => ['enabled' => true, 'daily_limit' => 5, 'scheduled_updates' => 2],
                     'sms' => ['enabled' => true, 'daily_limit' => 1],
                     'ai_predictions' => true,
@@ -59,7 +59,7 @@ class PlanSeeder extends Seeder
                 'features' => [
                     'fuel_types' => ['max' => null],
                     'email' => ['enabled' => true, 'frequency' => 'triggered'],
-                    'push' => ['enabled' => true],
+                    'push' => ['enabled' => true, 'frequency' => 'triggered'],
                     'whatsapp' => ['enabled' => true, 'daily_limit' => 5, 'scheduled_updates' => 2],
                     'sms' => ['enabled' => true, 'daily_limit' => 3],
                     'ai_predictions' => true,

docs/tiers.md

@@ -8,14 +8,20 @@ decision — which channels a user can receive, how often, and what features the
 
 ## Tiers at a glance
 
-| Tier  | Price  | Email             | Push    | WhatsApp | SMS          | AI predictions | Fuel types |
+| Tier  | Price  | Email         | Push      | WhatsApp  | SMS        | AI predictions | Price threshold | Score alerts | Fuel types |
-|-------|--------|-------------------|---------|----------|--------------|----------------|------------|
+|-------|--------|---------------|-----------|-----------|------------|----------------|-----------------|--------------|------------|
-| free  | £0     | weekly digest     | —       | —        | —            | —              | 1          |
+| free  | £0     | weekly digest | —         | —         | —          | —              | —               | —            | 1          |
-| basic | £0.99  | daily             | daily   | daily    | —            | —              | 1          |
+| basic | £0.99  | daily         | daily     | daily     | —          | —              | ✓               | ✓            | 1          |
-| plus  | £2.49  | triggered         | triggered | triggered | max 1/day  | yes            | 1          |
+| plus  | £2.49  | triggered     | triggered | triggered | max 1/day  | ✓              | ✓               | ✓            | 1          |
-| pro   | £3.99  | triggered         | triggered | triggered | max 3/day  | yes            | unlimited  |
+| pro   | £3.99  | triggered     | triggered | triggered | max 3/day  | ✓              | ✓               | ✓            | unlimited  |
 
 Tiers are stored in the `plans` table. The `features` JSON column defines every limit and flag.
+`database/seeders/PlanSeeder.php` is the source of truth — this table mirrors it.
+
+> **Deeper entitlements** (history window, prediction level, leaderboard size, saved stations,
+> fuel log caps, brand comparison, route planner, family sharing) are defined in
+> `docs/superpowers/specs/2026-04-15-tier-features-design.md`. That spec extends the
+> `features` JSON shape with additional keys beyond the notification-channel flags below.
 
 ---
 
@@ -38,21 +44,22 @@ Tiers are stored in the `plans` table. The `features` JSON column defines every
 ## The `plans` table
 
 ```
-id                  bigint PK
+id                          bigint PK
-name                string          — free | basic | plus | pro
+name                        string          — free | basic | plus | pro
-stripe_price_id     string nullable — matches Cashier's stripe_price column
+stripe_price_id_monthly     string nullable — Cashier price ID for monthly billing
-features            json            — see shape below
+stripe_price_id_annual      string nullable — Cashier price ID for annual billing
-active              boolean
+features                    json            — see shape below
+active                      boolean
 timestamps
 ```
 
-### `features` JSON shape
+### `features` JSON shape (notification-channel flags)
 
 ```json
 {
   "fuel_types": { "max": 1 },
   "email":      { "enabled": true, "frequency": "triggered" },
-  "push":       { "enabled": true },
+  "push":       { "enabled": true, "frequency": "triggered" },
   "whatsapp":   { "enabled": true, "daily_limit": 5, "scheduled_updates": 2 },
   "sms":        { "enabled": true, "daily_limit": 3 },
   "ai_predictions": true,
@@ -63,8 +70,14 @@ timestamps
 
 `fuel_types.max: null` means unlimited (pro only).
 `email.frequency` values: `weekly_digest`, `daily`, `triggered`.
+`push.frequency` values: `none` (when disabled), `daily`, `triggered`.
+`whatsapp` and `sms` always carry `daily_limit` (and whatsapp carries `scheduled_updates`)
+even when `enabled: false` — set to `0` on disabled tiers. See `PlanSeeder`.
 Boolean features default to `false` on the free tier.
 
+**`price_threshold` and `score_alerts` are enabled on basic and above** (not plus-only).
+**`ai_predictions` is plus and above only.**
+
 ---
 
 ## Resolving the plan for a user
@@ -222,6 +235,45 @@ Test files live in `tests/Feature/Tiers/`:
 
 | File | Covers |
 |------|--------|
-| `PlanFeaturesTest.php` | `canUseChannel`, `canSendNow`, `canTrackFuelType`, `can()`, middleware, log scopes |
+| `PlanFeaturesTest.php` | `canUseChannel`, `canSendNow`, `canTrackFuelType`, `can()`, middleware, log scopes, display name, `push.frequency` shape |
 | `PlanResourceTest.php` | Filament list/edit, no create/delete, saves features correctly |
 | `DispatchUserNotificationJobTest.php` | Sent logging, `tier_restricted`, `daily_limit`, user-disabled suppression, queue name, fan-out |
+
+Unit:
+
+| File | Covers |
+|------|--------|
+| `tests/Unit/Enums/PlanTierTest.php` | `PlanTier::label()` — user-facing display names |
+
+---
+
+## Change log
+
+### 2026-04-20 — display-name layer, `push.frequency`, pricing card rename
+
+Reconciled docs with `PlanSeeder` reality and introduced the display-name layer from `Downloads/pricing-plan.md` v2.
+
+**Entitlement reality (docs were stale before this pass):**
+- `price_threshold` and `score_alerts` are on **basic, plus, pro** — not plus-only.
+- `ai_predictions` is plus+pro only.
+- Schema columns are `stripe_price_id_monthly` and `stripe_price_id_annual` (not a single `stripe_price_id`).
+
+**New: display-name layer.** Backend tier identifiers stay `basic/plus/pro`; UI-facing names are `Free/Daily/Smart/Pro`.
+- `app/Enums/PlanTier.php` — added `label(): string`
+- `app/Models/Plan.php` — added `displayName(): string` (delegates to enum)
+- `app/Services/PlanFeatures.php` — added `displayName(): string`
+
+**New: `push.frequency` key in `features` JSON.** Mirrors `email.frequency` so Daily's "daily push" is distinguishable from Smart/Pro's "triggered push".
+- Values: `none` (when disabled), `daily`, `triggered`
+- Seeded: free=`none`, basic=`daily`, plus=`triggered`, pro=`triggered`
+- Touched: `PlanSeeder`, `PlanFactory`, free-tier stubs in `Plan::resolveForUser` + `PlanFeatures::__construct`, Filament `PlanForm`
+
+**Marketing: homepage pricing cards renamed.** `resources/js/views/Home.vue`:
+- Card labels: `Basic` → `Daily`, `Plus` → `Smart`
+- Badge: `Most Popular` → `Most pick this`
+- CTAs: `Select Basic` → `Choose Daily`, `Join Plus` → `Choose Smart`, `Go Pro` → `Choose Pro`, free unauthed `Get started` → `Start free`
+- Smart retains the existing accent-ring highlight; Pro retains the dark card.
+
+**Deferred:** `Fleet` tier (per-seat B2B), `Start 14-day trial` CTA on Smart (no trial backend), swapping Smart to a dark card (current accent ring is sufficient).
+
+**Operational:** existing DB rows won't have `push.frequency` until `php artisan db:seed --class=PlanSeeder` runs. The seeder is idempotent.

package-lock.json

@@ -18,6 +18,9 @@
                 "vue": "^3.5.32",
                 "vue-router": "^4.6.4"
             },
+            "devDependencies": {
+                "@iconify-json/lucide": "^1.2.102"
+            },
             "optionalDependencies": {
                 "@rollup/rollup-linux-x64-gnu": "4.9.5",
                 "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
@@ -101,6 +104,16 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@iconify-json/lucide": {
+            "version": "1.2.102",
+            "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.102.tgz",
+            "integrity": "sha512-Dm3EEqu5NrmzyDMB2U1+8yroEj2/dB9V4KlH0m/szwwF/ofSf0cPaGTZqkd1aExXjCor+vU53ttRMCGuXf+/cg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "@iconify/types": "*"
+            }
+        },
         "node_modules/@iconify/types": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",

package.json

@@ -24,5 +24,8 @@
         "@rollup/rollup-linux-x64-gnu": "4.9.5",
         "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
         "lightningcss-linux-x64-gnu": "^1.29.1"
+    },
+    "devDependencies": {
+        "@iconify-json/lucide": "^1.2.102"
     }
 }

resources/js/app.js

@@ -1,6 +1,10 @@
 import 'iconify-icon'
+import { addCollection } from 'iconify-icon'
+import lucideIcons from '@iconify-json/lucide/icons.json'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router/index.js'
 
+addCollection(lucideIcons)
+
 createApp(App).use(router).mount('#app')

resources/js/components/LeafletMap.vue

@@ -63,20 +63,17 @@ function buildDirectionsUrl(station, origin) {
 	return base
 }
 
-function buildMarkerHtml(station, index, colour, borderColour, origin) {
+function buildMarkerHtml(station, index, colour, borderColour) {
 	const isFirst = index === 0
+	const w = isFirst ? 46 : 40
 	const h = isFirst ? 20 : 18
 	const fontSize = isFirst ? 11 : 10
-	const iconSize = isFirst ? 11 : 10
 	const star = isFirst
 		? `<span style="margin-right:2px;color:#facc15;font-size:10px;line-height:1;">★</span>`
 		: ''
 
-	const directionsUrl = escHtml(buildDirectionsUrl(station, origin))
+	return `<div style="display:inline-flex;align-items:center;justify-content:center;width:${w}px;height:${h}px;padding:0 5px;background:${colour};color:#fff;font-weight:700;font-size:${fontSize}px;line-height:1;letter-spacing:-0.2px;border-radius:10px;border:1.5px solid ${borderColour};box-shadow:0 1px 3px rgba(0,0,0,0.25);white-space:nowrap;">
-	const navSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>`
+        ${star}${Number(station.price).toFixed(1)}
-
-	return `<div style="display:inline-flex;align-items:center;height:${h}px;padding:0 4px 0 6px;background:${colour};color:#fff;font-weight:700;font-size:${fontSize}px;line-height:1;letter-spacing:-0.2px;border-radius:10px;border:1.5px solid ${borderColour};box-shadow:0 1px 3px rgba(0,0,0,0.25);white-space:nowrap;gap:3px;">
-        ${star}<span>${Number(station.price).toFixed(1)}</span><a data-directions href="${directionsUrl}" target="_blank" rel="noopener" aria-label="Directions" style="display:inline-flex;align-items:center;justify-content:center;width:${h - 6}px;height:${h - 6}px;margin-left:1px;border-radius:50%;background:rgba(255,255,255,0.22);color:#fff;text-decoration:none;">${navSvg}</a>
     </div>`
 }
 
@@ -197,24 +194,31 @@ function renderMarkers() {
 			? '<span style="display:inline-block;background:#84cc16;color:#fff;font-size:10px;padding:1px 5px;border-radius:3px;margin-left:4px;">Supermarket</span>'
 			: ''
 
+		const directionsUrl = escHtml(buildDirectionsUrl(station, props.origin))
+
 		const popup = `
-            <div style="min-width:160px">
+            <div style="min-width:180px">
-                <strong style="font-size:13px">${escHtml(station.name)}</strong>${supermarketTag}<br>
+                <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;">
-                <span style="font-size:20px;font-weight:700;color:${escHtml(colour)}">${Number(station.price).toFixed(1)}p</span><br>
+                    <div style="min-width:0;flex:1;">
+                        <strong style="font-size:13px">${escHtml(station.name)}</strong>${supermarketTag}
+                    </div>
+                    <a data-directions href="${directionsUrl}" target="_blank" rel="noopener" aria-label="Directions" style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;;color:black;text-decoration:none;"><iconify-icon icon="lucide:navigation" style="font-size:16px;"></iconify-icon></a>
+                </div>
+                <div style="margin-top:4px;"><span style="font-size:20px;font-weight:700;color:${escHtml(colour)}">${Number(station.price).toFixed(1)}p</span></div>
                 <span style="font-size:12px;color:#6b7280">${escHtml(miles)} miles away</span><br>
                 <span style="font-size:11px;color:#9ca3af">${escHtml(station.address)}, ${escHtml(station.postcode)}</span>
             </div>
         `
 
 		const isFirst = index === 0
-		const w = isFirst ? 65 : 56
+		const w = isFirst ? 46 : 40
 		const h = isFirst ? 20 : 18
 
 		const icon = L.divIcon({
 			className: '',
 			iconSize: [w, h],
 			iconAnchor: [w / 2, h / 2],
-			html: buildMarkerHtml(station, index, colour, borderColour, props.origin),
+			html: buildMarkerHtml(station, index, colour, borderColour),
 		})
 
 		const marker = L.marker([station.lat, station.lng], {icon}).bindPopup(popup)
@@ -224,6 +228,11 @@ function renderMarkers() {
 			mapInstance.setView([station.lat, station.lng], target, {animate: true})
 		})
 
+		marker.on('popupopen', (e) => {
+			const link = e.popup.getElement()?.querySelector('a[data-directions]')
+			if (link) L.DomEvent.disableClickPropagation(link)
+		})
+
 		markersLayer.addLayer(marker)
 		bounds.push([station.lat, station.lng])
 	})

resources/js/components/SearchBar.vue

@@ -13,8 +13,8 @@
                     type="button"
                     @click="useMyLocation"
                 >
-                    <iconify-icon :class="{ 'animate-spin': locating }" :icon="locating ? 'lucide:loader-circle' : 'lucide:map-pin'" style="font-size:1rem"></iconify-icon>
+					<iconify-icon icon="lucide:locate-fixed" style="font-size:16px;"></iconify-icon>
-					<span class="hidden md:inline-flex">Near me</span>
+					<span class="hidden sr-only">Near me</span>
                 </button>
                 <input
                     id="postcode-input"
@@ -65,7 +65,6 @@
                 <option value="price">Price</option>
                 <option value="distance">Distance</option>
                 <option value="updated">Updated</option>
-                <option value="brand">Brand</option>
             </select>
         </div>
     </div>

resources/js/components/StationCard.vue

@@ -1,12 +1,32 @@
 <template>
-    <div class="bg-zinc-50 p-4 rounded-xl border border-zinc-300 shadow-sm flex flex-col gap-4">
+    <div
+        :aria-expanded="expanded"
+        :class="[
+            'bg-zinc-50 p-4 rounded-xl border shadow-sm flex flex-col gap-4 cursor-pointer transition-colors',
+            expanded ? 'border-accent' : 'border-zinc-300 hover:border-zinc-400',
+        ]"
+        role="button"
+        tabindex="0"
+        @click="toggle"
+        @keydown.enter.prevent="toggle"
+        @keydown.space.prevent="toggle"
+    >
         <div class="flex justify-between items-start gap-3">
             <div class="space-y-0.5 min-w-0 flex-1">
-                <h4 class="font-bold text-lg text-zinc-800 truncate">{{ station.name }}</h4>
+                <p v-if="brandLabel" class="text-[10px] font-black uppercase tracking-widest text-zinc-500">
-                <p class="text-xs text-zinc-500 flex items-center gap-1">
+                    {{ brandLabel }}
-                    <iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
-                    <span class="truncate">{{ locationLine }}</span>
                 </p>
+                <h4 class="font-bold text-lg text-zinc-800 truncate">{{ station.name }}</h4>
+                <template v-if="!expanded">
+                    <p class="text-xs text-zinc-500 flex items-center gap-1">
+                        <iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
+                        <span class="truncate">{{ locationLine }}</span>
+                    </p>
+                    <p v-if="updatedAgo" :class="[priceColor, 'text-xs flex items-center gap-1 font-semibold']">
+                        <iconify-icon class="text-xs" icon="lucide:clock"></iconify-icon>
+                        <span>Updated {{ updatedAgo }}</span>
+                    </p>
+                </template>
             </div>
             <a
                 :href="directionsUrl"
@@ -14,25 +34,94 @@
                 class="hidden md:inline-flex w-10 h-10 items-center justify-center rounded-lg bg-accent/10 text-accent active:bg-accent/20 flex-shrink-0"
                 rel="noopener"
                 target="_blank"
+                @click.stop
             >
                 <iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
             </a>
-            <div class="text-right flex-shrink-0">
+            <div class="text-right shrink-0">
                 <div :class="priceColor" class="text-xl font-black">
                     {{ station.price }}<span class="text-sm font-bold uppercase ml-0.5">p</span>
                 </div>
                 <p :class="priceColor" class="text-[10px] font-bold uppercase tracking-wider">
                     {{ statusLabel }}
                 </p>
+                <p v-if="priceDelta" :class="priceDeltaColor" class="text-[10px] font-bold mt-0.5">
+                    {{ priceDelta }}
+                </p>
             </div>
         </div>
+
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 -translate-y-1"
+            enter-to-class="opacity-100 translate-y-0"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+        >
+            <div v-if="expanded" class="border-t border-zinc-200 pt-3 space-y-3">
+                <div v-if="badges.length" class="flex flex-wrap gap-1.5">
+                    <span
+                        v-for="badge in badges"
+                        :key="badge.label"
+                        :class="[badge.class, 'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider']"
+                    >
+                        <iconify-icon v-if="badge.icon" :icon="badge.icon"></iconify-icon>
+                        {{ badge.label }}
+                    </span>
+                </div>
+
+                <div v-if="fuelTypes.length" class="flex flex-wrap gap-1.5">
+                    <span
+                        v-for="type in fuelTypes"
+                        :key="type"
+                        class="inline-block bg-zinc-200 text-zinc-600 text-[10px] font-bold px-2 py-0.5 rounded"
+                    >
+                        {{ type }}
+                    </span>
+                </div>
+
+                <div class="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
+                    <span>{{ distanceMiles }} mi</span>
+                    <span
+                        v-if="openStatus"
+                        :class="[
+                            openChipClass,
+                            'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-bold',
+                        ]"
+                    >
+                        <span
+                            :class="[openDotClass, 'inline-block size-1.5 rounded-full']"
+                            aria-hidden="true"
+                        ></span>
+                        {{ openStatus }}
+                    </span>
+                </div>
+
+                <div v-if="amenityItems.length" class="flex flex-wrap gap-3 text-xs text-zinc-500">
+                    <span
+                        v-for="item in amenityItems"
+                        :key="item.key"
+                        class="inline-flex items-center gap-1"
+                    >
+                        <iconify-icon :icon="item.icon" class="text-sm"></iconify-icon>
+                        {{ item.label }}
+                    </span>
+                </div>
+
+                <p class="text-[11px] text-zinc-400">
+                    {{ fullAddress }}<span v-if="updatedAgo"> · Updated {{ updatedAgo }}</span>
+                </p>
+            </div>
+        </Transition>
+
         <div class="flex items-center justify-end gap-2 md:hidden">
             <button
                 v-if="removable"
                 aria-label="Remove"
                 class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
                 type="button"
-                @click="emit('remove', station)"
+                @click.stop="emit('remove', station)"
             >
                 <iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
             </button>
@@ -41,6 +130,7 @@
                 class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-accent/10 text-accent font-bold text-sm active:bg-accent/20"
                 rel="noopener"
                 target="_blank"
+                @click.stop
             >
                 <iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
                 Directions
@@ -51,7 +141,7 @@
                 aria-label="Remove"
                 class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
                 type="button"
-                @click="emit('remove', station)"
+                @click.stop="emit('remove', station)"
             >
                 <iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
             </button>
@@ -60,23 +150,50 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
     station: { type: Object, required: true },
     lowestPrice: { type: Number, default: null },
+    avgPence: { type: Number, default: null },
     removable: { type: Boolean, default: false },
     origin: { type: Object, default: null },
 })
 
 const emit = defineEmits(['remove'])
 
+const expanded = ref(false)
+
+function toggle() {
+    expanded.value = !expanded.value
+}
+
 const RELIABILITY_MAP = {
     reliable: { label: 'Current', color: 'text-status-good' },
     stale: { label: 'Stale', color: 'text-status-warn' },
     outdated: { label: 'Outdated', color: 'text-status-bad' },
 }
 
+const AMENITY_META = {
+    customer_toilets: { icon: 'lucide:toilet', label: 'WC' },
+    car_wash: { icon: 'lucide:spray-can', label: 'Wash' },
+    air_pump_or_screenwash: { icon: 'lucide:wind', label: 'Air' },
+    adblue_pumps: { icon: 'lucide:fuel', label: 'AdBlue' },
+    adblue_packaged: { icon: 'lucide:package', label: 'AdBlue' },
+    lpg_pumps: { icon: 'lucide:flame', label: 'LPG' },
+    water_filling: { icon: 'lucide:droplets', label: 'Water' },
+}
+
+const AMENITY_ORDER = [
+    'customer_toilets',
+    'car_wash',
+    'air_pump_or_screenwash',
+    'adblue_pumps',
+    'adblue_packaged',
+    'lpg_pumps',
+    'water_filling',
+]
+
 const reliabilityInfo = computed(() => RELIABILITY_MAP[props.station.reliability] ?? RELIABILITY_MAP.reliable)
 
 const priceColor = computed(() => {
@@ -95,6 +212,21 @@ const locationLine = computed(() => {
     return parts.join(' • ')
 })
 
+const fullAddress = computed(() => {
+    const parts = [props.station.address, props.station.postcode].filter(Boolean)
+    return parts.join(', ')
+})
+
+const updatedAgo = computed(() => {
+    if (!props.station.price_updated_at) return ''
+    const diffMin = Math.floor((Date.now() - new Date(props.station.price_updated_at)) / 60000)
+    if (diffMin < 60) return `${Math.max(diffMin, 0)}m ago`
+    const hours = Math.floor(diffMin / 60)
+    if (hours < 24) return `${hours}h ago`
+    const days = Math.floor(hours / 24)
+    return `${days} day${days === 1 ? '' : 's'} ago`
+})
+
 const directionsUrl = computed(() => {
     const { lat, lng } = props.station
     const base = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`
@@ -103,4 +235,77 @@ const directionsUrl = computed(() => {
     }
     return base
 })
+
+const brandLabel = computed(() => {
+    const brand = props.station.brand
+    if (!brand) return ''
+    if (brand === props.station.name) return ''
+    return brand
+})
+
+const badges = computed(() => {
+    const list = []
+    if (props.station.is_supermarket) {
+        list.push({ label: 'Supermarket', icon: 'lucide:shopping-cart', class: 'bg-lime-500/15 text-lime-700' })
+    }
+    if (props.station.open_today?.is_24_hours || props.station.amenities?.includes('twenty_four_hour_fuel')) {
+        list.push({ label: '24h', icon: 'lucide:clock', class: 'bg-zinc-800 text-white' })
+    }
+    if (props.station.is_motorway) {
+        list.push({ label: 'Motorway', icon: 'lucide:road', class: 'bg-blue-500/15 text-blue-700' })
+    }
+    return list
+})
+
+const fuelTypes = computed(() => {
+    const types = props.station.fuel_types_available
+    if (!Array.isArray(types)) return []
+    return types.map(t => t.replace('_STANDARD', '').replace('_PREMIUM', '+').toUpperCase())
+})
+
+const amenityItems = computed(() => {
+    const amenities = props.station.amenities
+    if (!Array.isArray(amenities)) return []
+    return AMENITY_ORDER
+        .filter(key => amenities.includes(key) && AMENITY_META[key])
+        .map(key => ({ key, ...AMENITY_META[key] }))
+})
+
+const openStatus = computed(() => {
+    const open = props.station.open_today
+    if (!open) return ''
+    if (open.is_24_hours) return ''
+    if (open.is_open_now) return open.close ? `Open until ${open.close}` : 'Open now'
+    return open.open ? `Closed — opens ${open.open}` : 'Closed'
+})
+
+const isOpenNow = computed(() => {
+    const open = props.station.open_today
+    return Boolean(open?.is_24_hours || open?.is_open_now)
+})
+
+const openChipClass = computed(() => (
+    isOpenNow.value
+        ? 'bg-status-good/15 text-status-good'
+        : 'bg-status-bad/10 text-status-bad'
+))
+
+const openDotClass = computed(() => (
+    isOpenNow.value ? 'bg-status-good' : 'bg-status-bad'
+))
+
+const priceDelta = computed(() => {
+    if (props.avgPence == null) return ''
+    const delta = props.station.price_pence - props.avgPence
+    const pence = Math.abs(delta) / 100
+    if (pence < 0.1) return 'as expected'
+    return `${pence.toFixed(1)}p ${delta < 0 ? 'below' : 'above'} average`
+})
+
+const priceDeltaColor = computed(() => {
+    if (props.avgPence == null) return 'text-zinc-500'
+    if (props.station.price_pence < props.avgPence) return 'text-status-good'
+    if (props.station.price_pence > props.avgPence) return 'text-status-bad'
+    return 'text-zinc-500'
+})
 </script>

resources/js/components/StationList.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="space-y-3">
-        <!-- Sort tabs -->
+        <!-- Sort tabs + brand filter -->
-        <div class="flex gap-2 flex-wrap">
+        <div class="flex gap-2 flex-wrap items-center">
             <button
                 v-for="option in sortOptions"
                 :key="option.value"
                 @click="emit('sort', option.value)"
                 :class="[
-                    'px-4 py-1.5 rounded-full text-sm font-bold transition-colors',
+                    'h-10 px-4 rounded-xl text-sm font-bold transition-colors',
                     currentSort === option.value
                         ? 'bg-accent text-white'
                         : 'bg-white border border-zinc-300 text-zinc-500 hover:border-accent'
@@ -15,11 +15,23 @@
             >
                 {{ option.label }}
             </button>
+
+            <select
+                v-if="availableBrands.length > 1"
+                v-model="brandFilter"
+                aria-label="Filter by brand"
+                class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+            >
+                <option value="">All brands</option>
+                <option v-for="brand in availableBrands" :key="brand" :value="brand">{{ brand }}</option>
+            </select>
         </div>
 
         <!-- Count -->
         <p class="text-sm text-zinc-500 font-medium">
-            {{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
+            {{ filteredStations.length }} station{{ filteredStations.length !== 1 ? 's' : '' }}
+            <span v-if="brandFilter">matching <strong>{{ brandFilter }}</strong></span>
+            <span v-else>found</span>
         </p>
 
         <!-- Grouped results when sorting by reliability -->
@@ -33,6 +45,7 @@
                 <StationCard
                     v-for="station in reliable"
                     :key="station.station_id"
+                    :avg-pence="avgPence"
                     :lowest-price="lowestPrice"
                     :origin="origin"
                     :station="station"
@@ -49,7 +62,9 @@
                     <StationCard
                         v-for="station in stale"
                         :key="station.station_id"
+                        :avg-pence="avgPence"
                         :lowest-price="lowestPrice"
+                        :origin="origin"
                         :station="station"
                         class="mb-2"
                     />
@@ -66,7 +81,9 @@
                     <StationCard
                         v-for="station in outdated"
                         :key="station.station_id"
+                        :avg-pence="avgPence"
                         :lowest-price="lowestPrice"
+                        :origin="origin"
                         :station="station"
                         class="mb-2"
                     />
@@ -77,18 +94,19 @@
         <!-- Flat list for other sort modes -->
         <div v-else class="space-y-2">
             <StationCard
-                v-for="station in stations"
+                v-for="station in filteredStations"
                 :key="station.station_id"
-                :station="station"
+                :avg-pence="avgPence"
                 :lowest-price="lowestPrice"
                 :origin="origin"
+                :station="station"
             />
         </div>
     </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import StationCard from './StationCard.vue'
 
 const props = defineProps({
@@ -99,21 +117,41 @@ const props = defineProps({
 
 const emit = defineEmits(['sort'])
 
+const brandFilter = ref('')
+
 const sortOptions = [
     { label: 'Reliable', value: 'reliable' },
     { label: 'Price', value: 'price' },
     { label: 'Distance', value: 'distance' },
     { label: 'Updated', value: 'updated' },
-    { label: 'Brand', value: 'brand' },
 ]
 
-const reliable = computed(() => props.stations.filter(s => s.reliability === 'reliable'))
+const availableBrands = computed(() => {
-const stale = computed(() => props.stations.filter(s => s.reliability === 'stale'))
+    const brands = new Set()
-const outdated = computed(() => props.stations.filter(s => s.reliability === 'outdated'))
+    props.stations.forEach(s => {
+        if (s.brand) brands.add(s.brand)
+    })
+    return [...brands].sort((a, b) => a.localeCompare(b))
+})
+
+const filteredStations = computed(() => {
+    if (!brandFilter.value) return props.stations
+    return props.stations.filter(s => s.brand === brandFilter.value)
+})
+
+const reliable = computed(() => filteredStations.value.filter(s => s.reliability === 'reliable'))
+const stale = computed(() => filteredStations.value.filter(s => s.reliability === 'stale'))
+const outdated = computed(() => filteredStations.value.filter(s => s.reliability === 'outdated'))
 
 const lowestPrice = computed(() => {
-    if (!reliable.value.length && !props.stations.length) return null
+    if (!reliable.value.length && !filteredStations.value.length) return null
-    const pool = reliable.value.length ? reliable.value : props.stations
+    const pool = reliable.value.length ? reliable.value : filteredStations.value
     return Math.min(...pool.map(s => s.price_pence))
 })
+
+const avgPence = computed(() => {
+    const prices = filteredStations.value.map(s => s.price_pence).filter(p => typeof p === 'number')
+    if (!prices.length) return null
+    return prices.reduce((a, b) => a + b, 0) / prices.length
+})
 </script>

resources/js/views/Home.vue

@@ -30,15 +30,19 @@
         </nav>
 
         <!-- Hero -->
-        <section id="hero" class="relative pt-24 md:pt-40 pb-12 md:pb-24 px-6 hero-gradient overflow-hidden">
+        <section id="hero" class="relative pt-24 md:pt-40 pb-6 md:pb-10 px-6 hero-gradient overflow-hidden">
             <div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
                 <div class="space-y-8">
-                    <div class="inline-flex items-center gap-2 px-3 py-1 bg-accent/10 text-accent rounded-full text-xs font-bold uppercase tracking-wider">
+                    <div class="inline-flex items-center gap-2 px-3 py-1 text-accent text-xs tracking-wider">
-                        <iconify-icon icon="lucide:sparkles"></iconify-icon>
+                        <span class="inline-flex items-center gap-1.5 font-bold uppercase">
-                        Save up to £250/year on fuel
+                            <span class="size-1.5 rounded-full bg-status-good animate-pulse"></span>
+                            Live
+                        </span>
+                        <span v-if="liveStats.stationCount">· {{ formattedStationCount }} UK stations</span>
+                        <span>· updated {{ updatedAgo || '…' }}</span>
                     </div>
                     <h1 class="text-4xl sm:text-5xl md:text-7xl font-black font-display text-zinc-800 leading-[1.1] tracking-tighter">
-                        Stop Overpaying <br class="hidden sm:block"><span class="text-accent">for Fuel.</span>
+                        Know exactly <br class="hidden sm:block"><span class="text-accent">when</span> to fuel.
                     </h1>
                     <p class="text-xl text-zinc-500 max-w-lg leading-relaxed">
                         Join 50,000+ UK drivers using real-time insights to find the cheapest petrol and time their fill-ups perfectly.
@@ -46,14 +50,14 @@
 
                     <SearchBar :initial="searchInitial" @search="onSearch" />
 
-                    <div class="flex items-center gap-4 pt-4">
+<!--                    <div class="flex items-center gap-4 pt-4">
                         <div class="flex -space-x-2">
                             <img alt="User" class="w-8 h-8 rounded-full border-2 border-white" src="https://api.dicebear.com/7.x/avataaars/svg?seed=1">
                             <img alt="User" class="w-8 h-8 rounded-full border-2 border-white" src="https://api.dicebear.com/7.x/avataaars/svg?seed=2">
                             <img alt="User" class="w-8 h-8 rounded-full border-2 border-white" src="https://api.dicebear.com/7.x/avataaars/svg?seed=3">
                         </div>
                         <span class="text-sm text-zinc-500 font-medium italic">"Saved me £12 on my first tank!"</span>
-                    </div>
+                    </div>-->
                 </div>
 
                 <!-- Visual mockup card -->
@@ -259,10 +263,10 @@
                         <a :href="ctaHref('free')" class="w-full py-3 px-4 border border-zinc-300 rounded-xl text-center font-bold hover:bg-zinc-100 transition-colors">{{ ctaLabel('free') }}</a>
                     </div>
 
-                    <!-- Basic -->
+                    <!-- Daily (backend: basic) -->
                     <div class="bg-white border border-zinc-300 p-8 rounded-3xl flex flex-col h-full">
                         <div class="mb-8">
-                            <h4 class="text-xl font-bold font-display mb-2">Basic</h4>
+                            <h4 class="text-xl font-bold font-display mb-2">Daily</h4>
                             <div class="flex items-baseline gap-1">
                                 <span class="text-4xl font-black">{{ PRICES[cadence].basic }}</span>
                                 <span class="text-zinc-500 text-sm">{{ PRICE_SUFFIX[cadence] }}</span>
@@ -276,11 +280,11 @@
                         <a :href="ctaHref('basic')" class="w-full py-3 px-4 border border-zinc-300 rounded-xl text-center font-bold hover:bg-zinc-100 transition-colors">{{ ctaLabel('basic') }}</a>
                     </div>
 
-                    <!-- Plus -->
+                    <!-- Smart (backend: plus) -->
                     <div class="bg-white border-2 border-accent p-8 rounded-3xl flex flex-col h-full relative">
-                        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-accent text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap">Most Popular</div>
+                        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-accent text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap">Most pick this</div>
                         <div class="mb-8">
-                            <h4 class="text-xl font-bold font-display mb-2">Plus</h4>
+                            <h4 class="text-xl font-bold font-display mb-2">Smart</h4>
                             <div class="flex items-baseline gap-1">
                                 <span class="text-4xl font-black text-accent">{{ PRICES[cadence].plus }}</span>
                                 <span class="text-zinc-500 text-sm">{{ PRICE_SUFFIX[cadence] }}</span>
@@ -427,16 +431,58 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { useAuth } from '../composables/useAuth.js'
 import { useStations } from '../composables/useStations.js'
+import api from '../axios.js'
 import SearchBar from '../components/SearchBar.vue'
 import LeafletMap from '../components/LeafletMap.vue'
 import StationList from '../components/StationList.vue'
 
 const { isAuthenticated, userTier } = useAuth()
 
+const liveStats = ref({ stationCount: null, latestPriceAt: null })
+const now = ref(Date.now())
+let nowTicker = null
+
+const formattedStationCount = computed(() => {
+    const n = liveStats.value.stationCount
+    return n == null ? '' : n.toLocaleString('en-GB')
+})
+
+const updatedAgo = computed(() => {
+    const iso = liveStats.value.latestPriceAt
+    if (!iso) return ''
+    const diffMin = Math.floor((now.value - new Date(iso).getTime()) / 60000)
+    if (diffMin < 1) return 'just now'
+    if (diffMin < 60) return `${diffMin} min ago`
+    const hours = Math.floor(diffMin / 60)
+    if (hours < 24) return `${hours} hr ago`
+    const days = Math.floor(hours / 24)
+    return `${days} day${days === 1 ? '' : 's'} ago`
+})
+
+onMounted(async () => {
+    try {
+        const { data } = await api.get('/stats/live')
+        liveStats.value = {
+            stationCount: data.station_count,
+            latestPriceAt: data.latest_price_at,
+        }
+    } catch {
+        // leave defaults; hero line degrades to "Live" only
+    }
+
+    nowTicker = setInterval(() => {
+        now.value = Date.now()
+    }, 60000)
+})
+
+onUnmounted(() => {
+    if (nowTicker) clearInterval(nowTicker)
+})
+
 const cadence = ref('monthly')
 
 function ctaHref(tier) {
@@ -454,15 +500,15 @@ function ctaHref(tier) {
 
 function ctaLabel(tier) {
     if (tier === 'free') {
-        return isAuthenticated.value ? 'Go to dashboard' : 'Get started'
+        return isAuthenticated.value ? 'Go to dashboard' : 'Start free'
     }
     if (isAuthenticated.value && userTier.value === tier) {
         return 'Manage subscription'
     }
     return {
-        basic: 'Select Basic',
+        basic: 'Choose Daily',
-        plus: 'Join Plus',
+        plus: 'Choose Smart',
-        pro: 'Go Pro',
+        pro: 'Choose Pro',
     }[tier]
 }
 

resources/views/app.blade.php

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <title>FuelAlert</title>
+    <title>{{ __('Welcome') }} - {{ config('app.name', 'Laravel') }}</title>
     <script>
         window['FUEL_TYPES'] = @json(
             collect(App\Enums\FuelType::cases())

routes/api.php

@@ -20,6 +20,8 @@ Route::get('/fuel-types', function () {
         ->values());
 });
 
+Route::get('/stats/live', [StatsController::class, 'live']);
+
 // Protected endpoints (API key required)
 Route::middleware(['throttle:60,1', VerifyApiKey::class])->group(function (): void {
     Route::get('/stations', [StationController::class, 'index']);

tests/Feature/Tiers/PlanFeaturesTest.php

@@ -208,3 +208,31 @@ it('scopeForFuelType filters by fuel type', function (): void {
 
     expect(UserNotificationPreference::forFuelType(FuelType::E10->value)->where('user_id', $user->id)->count())->toBe(1);
 });
+
+// ─── push frequency ───────────────────────────────────────────────────────────
+
+it('seeds push.frequency for every tier', function (): void {
+    expect(Plan::where('name', 'free')->first()->features['push'])
+        ->toBe(['enabled' => false, 'frequency' => 'none'])
+        ->and(Plan::where('name', 'basic')->first()->features['push'])
+        ->toBe(['enabled' => true, 'frequency' => 'daily'])
+        ->and(Plan::where('name', 'plus')->first()->features['push'])
+        ->toBe(['enabled' => true, 'frequency' => 'triggered'])
+        ->and(Plan::where('name', 'pro')->first()->features['push'])
+        ->toBe(['enabled' => true, 'frequency' => 'triggered']);
+});
+
+// ─── display name ─────────────────────────────────────────────────────────────
+
+it('Plan::displayName returns the user-facing label for each seeded tier', function (): void {
+    expect(Plan::where('name', 'free')->first()->displayName())->toBe('Free')
+        ->and(Plan::where('name', 'basic')->first()->displayName())->toBe('Daily')
+        ->and(Plan::where('name', 'plus')->first()->displayName())->toBe('Smart')
+        ->and(Plan::where('name', 'pro')->first()->displayName())->toBe('Pro');
+});
+
+it('PlanFeatures::displayName delegates to the resolved tier', function (): void {
+    $user = User::factory()->create();
+
+    expect(PlanFeatures::for($user)->displayName())->toBe('Free');
+});

tests/Unit/Enums/PlanTierTest.php

@@ -0,0 +1,10 @@
+<?php
+
+use App\Enums\PlanTier;
+
+it('exposes the user-facing display label for each tier', function () {
+    expect(PlanTier::Free->label())->toBe('Free')
+        ->and(PlanTier::Basic->label())->toBe('Daily')
+        ->and(PlanTier::Plus->label())->toBe('Smart')
+        ->and(PlanTier::Pro->label())->toBe('Pro');
+});