{{-- resources/views/storefront/store.blade.php --}}
@extends('storefront.layout')

@section('title', $store->name.' - '.config('app.name', 'FreshMart'))
@section('body_class', 'sf-store-page')

@section('content')
@php
    $cover = \App\Support\StorefrontPresenter::storeCover($store);
    $logo = \App\Support\StorefrontPresenter::storeLogo($store);
    $groupedProducts = $store->products->groupBy(fn ($product) => $product->category?->name ?: 'Popular items');
    $categoryList = $groupedProducts->keys()->take(10);
    $etaLabel = data_get($store->meta, 'eta_label') ?: data_get($store->meta, 'delivery_time_label');
    $radiusLabel = $store->delivery_radius_km ? number_format((float) $store->delivery_radius_km, 1).' km radius' : null;
    $minimumOrderLabel = $store->minimum_order_amount ? \App\Support\StorefrontPresenter::money($store->minimum_order_amount) : ($store->deliveryZone?->minimum_order_amount ? \App\Support\StorefrontPresenter::money($store->deliveryZone->minimum_order_amount) : null);
    $deliveryFeeLabel = data_get($store->meta, 'delivery_fee') !== null ? \App\Support\StorefrontPresenter::money((float) data_get($store->meta, 'delivery_fee')) : null;
    $isOpen = $store->is_open ?? true;
    $isFeatured = $store->is_featured ?? false;
    $reviewSummary = $reviewSummary ?? [
        'average' => (float) ($store->reviews_avg_rating ?? 0),
        'total_ratings' => (int) ($store->reviews_count ?? 0),
        'total_reviews' => (int) ($store->reviews_count ?? 0),
        'distribution' => [5 => 0, 4 => 0, 3 => 0, 2 => 0, 1 => 0],
        'max_count' => 0,
    ];
    $averageRating = number_format((float) data_get($reviewSummary, 'average', $store->reviews_avg_rating ?? 0), 1);
    $reviewsCount = (int) data_get($reviewSummary, 'total_ratings', $store->reviews_count ?? 0);
    $writtenReviewsCount = (int) data_get($reviewSummary, 'total_reviews', 0);
    $ratingDistribution = data_get($reviewSummary, 'distribution', [5 => 0, 4 => 0, 3 => 0, 2 => 0, 1 => 0]);
    $maxRatingCount = max(1, (int) data_get($reviewSummary, 'max_count', 0));
    $ratingFillPercent = max(0, min(100, ((float) data_get($reviewSummary, 'average', 0) / 5) * 100));
    $reviewsUrl = route('storefront.stores.reviews', ['store' => $store->slug ?: $store->id] + ($storefrontQuery ?? []));
    $storeService = $selectedService ?? 'grocery';
    $isFoodStore = in_array($storeService, ['food', 'restaurant'], true);
@endphp

<style>
/* ==========================================
   STORE PAGE - FreshMart Design
   ========================================== */
.fm-store-page {
    padding: 12px 0 80px;
}

.fm-store-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin-bottom: 12px;
    padding: 0 4px;
}

.fm-store-breadcrumb a {
    color: var(--fm-primary, #2daa37);
    text-decoration: none;
}

.fm-store-breadcrumb a:hover {
    text-decoration: underline;
}

.fm-store-breadcrumb span {
    color: var(--fm-text-light, #9ca3af);
}

.fm-store-breadcrumb strong {
    color: var(--fm-text, #1a1a2e);
    font-weight: 600;
}

/* ===== Store Header ===== */
.fm-store-header {
    background: var(--fm-card-bg, #ffffff);
    border-radius: var(--fm-radius, 10px);
    overflow: hidden;
    box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
    margin-bottom: 16px;
}

.fm-store-header__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    background: var(--fm-bg, #f5f7f8);
    overflow: hidden;
}

.fm-store-header__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fm-store-header__media .fm-store-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 64px;
    font-weight: 700;
    color: var(--fm-primary, #2daa37);
    background: linear-gradient(135deg, var(--fm-primary-light, #e8f5e9), var(--fm-bg, #f5f7f8));
}

/* ===== Badges on Cover ===== */
.fm-store-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

.fm-store-badge {
    padding: 2px 10px;
    border-radius: var(--fm-radius-sm, 6px);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fm-store-badge.is-open {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.fm-store-badge.is-closed {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.fm-store-badge.is-featured {
    background: rgba(251, 191, 36, 0.9);
    color: #78350f;
}

.fm-store-badge.is-eta {
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

/* ===== Store Info ===== */
.fm-store-info {
    padding: 16px 20px 20px;
    display: flex;
    gap: 16px;
}

.fm-store-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fm-bg, #f5f7f8);
    border: 2px solid var(--fm-border, #e5e7eb);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-store-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-store-logo span {
    font-size: 24px;
    font-weight: 700;
    color: var(--fm-primary, #2daa37);
}

.fm-store-details {
    flex: 1;
    min-width: 0;
}

.fm-store-details h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
    margin: 0 0 2px;
}

.fm-store-details .fm-store-status-text {
    font-size: 12px;
    color: var(--fm-text-secondary, #6b7280);
    display: block;
}

.fm-store-details .fm-store-status-text.is-open {
    color: #22c55e;
}

.fm-store-details .fm-store-status-text.is-closed {
    color: #ef4444;
}

.fm-store-details p {
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 4px 0 0;
}

.fm-store-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 8px;
}

.fm-store-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--fm-text-secondary, #6b7280);
}

.fm-store-meta span svg {
    width: 14px;
    height: 14px;
    color: var(--fm-text-light, #9ca3af);
}

/* ===== Category Chips ===== */
.fm-category-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 12px;
    margin: 0 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fm-category-chips::-webkit-scrollbar {
    display: none;
}

.fm-category-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 12px 4px 6px;
    background: var(--fm-card-bg, #ffffff);
    border: 1px solid var(--fm-border, #e5e7eb);
    border-radius: var(--fm-radius-full, 9999px);
    text-decoration: none;
    color: var(--fm-text, #1a1a2e);
    font-size: 12px;
    font-weight: 500;
    transition: all var(--fm-transition, 0.25s ease);
}

.fm-category-chip:hover {
    border-color: var(--fm-primary, #2daa37);
    background: var(--fm-primary-light, #e8f5e9);
}

.fm-category-chip:active {
    transform: scale(0.95);
}

.fm-category-chip img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fm-bg, #f5f7f8);
    flex-shrink: 0;
}

.fm-category-chip .fm-chip-fallback {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fm-primary-light, #e8f5e9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--fm-primary, #2daa37);
    flex-shrink: 0;
}

/* ===== Offer Strip ===== */
.fm-store-offer-strip {
    background: var(--fm-primary-light, #e8f5e9);
    border-radius: var(--fm-radius, 10px);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

.fm-store-offer-strip span {
    font-size: 18px;
}

.fm-store-offer-strip strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text, #1a1a2e);
}

.fm-store-offer-strip small {
    font-size: 12px;
    color: var(--fm-text-secondary, #6b7280);
}

.fm-store-offer-strip b {
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-primary, #2daa37);
    background: white;
    padding: 2px 12px;
    border-radius: var(--fm-radius-full, 9999px);
    margin-left: auto;
}

/* ==========================================
   PRODUCT GRID - Same as Home
   ========================================== */
.fm-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.fm-store-section {
    margin: 16px 0;
}

.fm-store-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fm-store-section-head h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
    margin: 0;
}

.fm-store-section-head p {
    font-size: 12px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 0;
}

/* ==========================================
   PRODUCT CARD - Same as Home
   ========================================== */
.fm-product-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 8px;
    box-shadow: var(--fm-shadow);
    transition: transform var(--fm-transition), box-shadow var(--fm-transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.fm-product-card:active {
    transform: scale(0.97);
}

.fm-product-thumb {
    position: relative;
    border-radius: var(--fm-radius-sm);
    overflow: hidden;
    background: var(--fm-bg);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.fm-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fm-product-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--fm-bg);
    color: var(--fm-text-light);
}

.fm-product-placeholder span {
    font-size: 24px;
    font-weight: 700;
    color: var(--fm-primary);
}

.fm-product-placeholder small {
    font-size: 10px;
    margin-top: 2px;
}

.fm-product-discount {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--fm-secondary);
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--fm-radius-sm);
    line-height: 1.3;
    z-index: 2;
}

.fm-product-discount small {
    font-weight: 400;
    font-size: 7px;
    margin-left: 1px;
}

.fm-product-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-text);
    margin: 0 0 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    line-height: 1.3;
    min-height: 30px;
}

.fm-product-unit {
    font-size: 10px;
    color: var(--fm-text-light);
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fm-product-rating-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0 3px;
}

.fm-product-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f59e0b;
    font-weight: 600;
    font-size: 10px;
}

.fm-product-stars svg {
    width: 10px;
    height: 10px;
}

.fm-product-stars strong {
    color: var(--fm-text);
}

.fm-product-reviews {
    font-size: 9px;
    color: var(--fm-text-light);
}

.fm-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: auto;
    padding-top: 3px;
}

.fm-product-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.fm-product-price strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--fm-text);
}

.fm-product-price small {
    font-size: 10px;
    color: var(--fm-text-light);
    text-decoration: line-through;
}

.fm-product-discount-badge {
    margin-top: 2px;
}

.fm-discount-percent {
    font-size: 9px;
    font-weight: 600;
    color: var(--fm-secondary);
    background: #fff5f0;
    padding: 1px 6px;
    border-radius: var(--fm-radius-sm);
    display: inline-block;
}

.fm-discount-saving {
    font-size: 9px;
    color: var(--fm-primary);
    font-weight: 600;
    display: inline-block;
    margin-left: 4px;
}

.fm-product-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fm-primary);
    color: white;
    border: none;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--fm-transition), transform var(--fm-transition);
}

.fm-product-add:active {
    transform: scale(0.9);
}

.fm-product-add.is-out {
    background: var(--fm-text-light);
    cursor: not-allowed;
}

.fm-product-add .fm-add-label {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

.fm-product-add .fm-add-check {
    font-size: 12px;
    font-weight: 700;
    display: none;
}

.fm-product-add.is-added .fm-add-label {
    display: none;
}

.fm-product-add.is-added .fm-add-check {
    display: inline;
}

.fm-product-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--fm-primary-light);
    border-radius: var(--fm-radius-full);
    padding: 1px;
    height: 28px;
}

.fm-stepper-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--fm-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-stepper-btn svg {
    width: 14px;
    height: 14px;
}

.fm-product-stepper strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-text);
    min-width: 16px;
    text-align: center;
}

.fm-product-meta-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--fm-text-light);
    margin-top: 3px;
    flex-wrap: wrap;
}

.fm-low-stock {
    color: var(--fm-secondary);
    font-weight: 600;
}

.fm-in-stock {
    color: #22c55e;
    font-weight: 500;
}

/* ==========================================
   REVIEWS
   ========================================== */
.fm-store-rating-card {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 12px;
    padding: 18px 16px;
    border: 1px solid var(--fm-border, #e5e7eb);
    border-radius: var(--fm-radius, 10px);
    background: var(--fm-card-bg, #ffffff);
    box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
}

.fm-store-rating-card__score {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding-right: 18px;
    border-right: 1px solid var(--fm-border, #e5e7eb);
    text-align: center;
}

.fm-store-rating-stars {
    --rating-fill: 0%;
    position: relative;
    display: inline-block;
    color: #d8dde3;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
}

.fm-store-rating-stars::before {
    content: "★★★★★";
    position: absolute;
    inset: 0;
    width: var(--rating-fill);
    overflow: hidden;
    color: #059b22;
    white-space: nowrap;
}

.fm-store-rating-card__score strong {
    color: var(--fm-text, #1a1a2e);
    font-size: 15px;
    font-weight: 800;
}

.fm-store-rating-card__score span {
    color: var(--fm-text-secondary, #6b7280);
    font-size: 13px;
    line-height: 1.35;
}

.fm-store-rating-card__bars {
    display: grid;
    gap: 8px;
}

.fm-store-rating-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 42px;
    gap: 9px;
    align-items: center;
    color: var(--fm-text-secondary, #6b7280);
    font-size: 13px;
    font-weight: 700;
}

.fm-store-rating-row b {
    color: var(--fm-text, #1a1a2e);
    font-weight: 800;
}

.fm-store-rating-row__track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.fm-store-rating-row__fill {
    display: block;
    width: var(--rating-width);
    height: 100%;
    border-radius: inherit;
    background: #059b22;
}

.fm-store-review-button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--fm-radius-full, 9999px);
    background: var(--fm-primary-light, #e8f5e9);
    color: var(--fm-primary, #2daa37);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.fm-store-review {
    background: var(--fm-card-bg, #ffffff);
    border-radius: var(--fm-radius, 10px);
    padding: 12px 16px;
    box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
    margin-bottom: 6px;
}

.fm-store-review strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text, #1a1a2e);
    display: block;
}

.fm-store-review .fm-review-rating {
    font-size: 12px;
    color: #f59e0b;
    font-weight: 600;
}

.fm-store-review p {
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 4px 0 0;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 380px) {
    .fm-product-grid { gap: 6px; }
    .fm-product-card { padding: 6px; }
    .fm-product-name { font-size: 11px; min-height: 26px; }
    .fm-product-price strong { font-size: 12px; }
    .fm-product-add { width: 24px; height: 24px; font-size: 14px; }
    .fm-product-stepper { height: 24px; }
    .fm-stepper-btn { width: 20px; height: 20px; }
    .fm-stepper-btn svg { width: 12px; height: 12px; }
    .fm-product-stepper strong { font-size: 11px; min-width: 14px; }
    .fm-category-chip { font-size: 11px; padding: 3px 10px 3px 4px; }
    .fm-category-chip img { width: 20px; height: 20px; }
    .fm-category-chip .fm-chip-fallback { width: 20px; height: 20px; font-size: 8px; }
}

@media (max-width: 480px) {
    .fm-store-rating-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .fm-store-rating-card__score {
        padding-right: 0;
        padding-bottom: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--fm-border, #e5e7eb);
    }

    .fm-store-header__media {
        aspect-ratio: 16 / 9;
    }
    
    .fm-store-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 12px 16px 16px;
    }
    
    .fm-store-logo {
        width: 56px;
        height: 56px;
    }
    
    .fm-store-details h1 {
        font-size: 18px;
    }
    
    .fm-store-meta {
        justify-content: center;
    }
    
    .fm-store-offer-strip {
        flex-wrap: wrap;
    }
    
    .fm-store-offer-strip b {
        margin-left: 0;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .fm-store-header__media {
        aspect-ratio: 16 / 5;
    }
    .fm-product-grid { gap: 12px; }
    .fm-product-card { padding: 10px; }
}

@media (min-width: 768px) {
    .fm-store-header__media {
        aspect-ratio: 16 / 4;
    }
    
    .fm-store-info {
        padding: 20px 24px 24px;
    }
    
    .fm-store-logo {
        width: 80px;
        height: 80px;
    }
    
    .fm-store-logo span {
        font-size: 30px;
    }
    
    .fm-store-details h1 {
        font-size: 24px;
    }
    
    .fm-store-section-head h2 {
        font-size: 18px;
    }
    
    .fm-product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    .fm-product-card { padding: 12px; }
    .fm-product-name { font-size: 13px; min-height: 32px; }
    .fm-product-price strong { font-size: 15px; }
    .fm-product-add { width: 30px; height: 30px; font-size: 18px; }
    .fm-product-stepper { height: 30px; }
    .fm-stepper-btn { width: 26px; height: 26px; }
    .fm-stepper-btn svg { width: 16px; height: 16px; }
    .fm-product-stepper strong { font-size: 13px; min-width: 18px; }
}

@media (min-width: 1024px) {
    .fm-store-header__media {
        aspect-ratio: 16 / 3.5;
    }
    .fm-product-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1200px) {
    .fm-product-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
}
</style>

<div class="fm-store-page">
    {{-- Breadcrumb --}}
    <nav class="fm-store-breadcrumb">
        <a href="{{ route('storefront.home', $storefrontQuery ?? []) }}">Home</a>
        <span>›</span>
        <a href="{{ route('storefront.stores.index', $storefrontQuery ?? []) }}">{{ $isFoodStore ? 'Restaurants' : 'Stores' }}</a>
        <span>›</span>
        <strong>{{ $store->name }}</strong>
    </nav>

    {{-- Store Header --}}
    <div class="fm-store-header">
        <div class="fm-store-header__media">
            @if($cover)
                <img src="{{ $cover }}" alt="{{ $store->name }}" fetchpriority="high">
            @else
                <div class="fm-store-placeholder">
                    {{ Str::upper(Str::substr($store->name, 0, 1)) }}
                </div>
            @endif

            {{-- Badges on Cover --}}
            <div class="fm-store-badges">
                @if($isFeatured)
                    <span class="fm-store-badge is-featured">⭐ Featured</span>
                @endif
                <span class="fm-store-badge {{ $isOpen ? 'is-open' : 'is-closed' }}">
                    {{ $isOpen ? 'Open' : 'Closed' }}
                </span>
                @if($etaLabel)
                    <span class="fm-store-badge is-eta">⏱ {{ $etaLabel }}</span>
                @endif
            </div>
        </div>

        {{-- Store Info --}}
        <div class="fm-store-info">
            <div class="fm-store-logo">
                @if($logo)
                    <img src="{{ $logo }}" alt="{{ $store->name }}">
                @else
                    <span>{{ Str::upper(Str::substr($store->name, 0, 1)) }}</span>
                @endif
            </div>
            <div class="fm-store-details">
                <h1>{{ $store->name }}</h1>
                <span class="fm-store-status-text {{ $isOpen ? 'is-open' : 'is-closed' }}">
                    {{ $isOpen ? '● Open now' : '● Currently closed' }}
                </span>
                <p>{{ $store->description ?: ($isFoodStore ? 'Delicious meals from this local restaurant.' : 'Fresh items delivered from this local store.') }}</p>
                <div class="fm-store-meta">
                    @if($averageRating > 0)
                        <span>
                            <svg viewBox="0 0 24 24" fill="#f59e0b" stroke="none">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                            </svg>
                            {{ $averageRating }} ★ ({{ $reviewsCount }} reviews)
                        </span>
                    @endif
                    @if($store->city)
                        <span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            {{ $store->city }}
                        </span>
                    @endif
                    @if($minimumOrderLabel)
                        <span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"/>
                                <line x1="12" y1="8" x2="12" y2="16"/>
                                <line x1="8" y1="12" x2="16" y2="12"/>
                            </svg>
                            Min {{ $minimumOrderLabel }}
                        </span>
                    @endif
                    @if($etaLabel)
                        <span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            {{ $etaLabel }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Category Chips --}}
    @if($categoryList->isNotEmpty())
        <div class="fm-category-chips">
            @foreach($categoryList as $categoryName)
                @php
                    $categorySlug = Str::slug($categoryName);
                    $categoryImage = null;
                    $firstProduct = $groupedProducts->get($categoryName)?->first();
                    if ($firstProduct && $firstProduct->category) {
                        $categoryImage = \App\Support\StorefrontPresenter::categoryImage($firstProduct->category);
                    }
                @endphp
                <a href="#section-{{ $categorySlug }}" class="fm-category-chip">
                    @if($categoryImage)
                        <img src="{{ $categoryImage }}" alt="{{ $categoryName }}" loading="lazy">
                    @else
                        <span class="fm-chip-fallback">{{ Str::upper(Str::substr($categoryName, 0, 1)) }}</span>
                    @endif
                    <span>{{ $categoryName }}</span>
                </a>
            @endforeach
        </div>
    @endif

    {{-- Offer Strip --}}
    @if(($storeCoupons ?? collect())->isNotEmpty())
        @php
            $primaryCoupon = $storeCoupons->first();
        @endphp
        <div class="fm-store-offer-strip">
            <span>🏷</span>
            <strong>{{ $primaryCoupon->title ?: \App\Support\StorefrontPresenter::couponDiscountLabel($primaryCoupon) }}</strong>
            <small>{{ \App\Support\StorefrontPresenter::couponMinimumLabel($primaryCoupon) }}</small>
            <b>{{ $primaryCoupon->code }}</b>
        </div>
    @endif

    {{-- Menu Sections --}}
    @foreach($groupedProducts as $categoryName => $items)
        <section class="fm-store-section" id="section-{{ Str::slug($categoryName) }}">
            <div class="fm-store-section-head">
                <div>
                    <h2>{{ $categoryName }}</h2>
                    <p>{{ $items->count() }} items available</p>
                </div>
            </div>
            <div class="fm-product-grid">
                @foreach($items as $product)
                    @include('storefront.partials.product-card', ['product' => $product])
                @endforeach
            </div>
        </section>
    @endforeach

    {{-- Ratings & Reviews --}}
    @if($reviewsCount > 0)
        <section class="fm-store-section" id="reviews">
            <div class="fm-store-section-head">
                <div>
                    <h2>Ratings & Reviews</h2>
                    <p>Customer feedback for this store</p>
                </div>
                <a href="{{ $reviewsUrl }}" class="fm-store-review-button">View all reviews</a>
            </div>
            <div class="fm-store-rating-card">
                <div class="fm-store-rating-card__score">
                    <span class="fm-store-rating-stars" style="--rating-fill: {{ $ratingFillPercent }}%;">★★★★★</span>
                    <strong>{{ number_format($reviewsCount) }} ratings and {{ number_format($writtenReviewsCount) }} reviews</strong>
                    <span>{{ $averageRating }} average rating</span>
                </div>
                <div class="fm-store-rating-card__bars" aria-label="Rating distribution">
                    @foreach([5, 4, 3, 2, 1] as $ratingValue)
                        @php
                            $ratingBarCount = (int) ($ratingDistribution[$ratingValue] ?? 0);
                            $ratingBarWidth = $maxRatingCount > 0 ? max(4, ($ratingBarCount / $maxRatingCount) * 100) : 0;
                        @endphp
                        <div class="fm-store-rating-row">
                            <b>{{ $ratingValue }} ★</b>
                            <span class="fm-store-rating-row__track">
                                <span class="fm-store-rating-row__fill" style="--rating-width: {{ $ratingBarCount > 0 ? $ratingBarWidth : 0 }}%;"></span>
                            </span>
                            <span>{{ number_format($ratingBarCount) }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
            @if(($reviews ?? collect())->count())
                @foreach($reviews as $review)
                    <div class="fm-store-review">
                        <strong>{{ $review->user?->name ?? trans_key('storefront.fallbacks.customer') }}</strong>
                        <span class="fm-review-rating">{{ number_format((float) $review->rating, 1) }} ★</span>
                        @if($review->comment)
                            <p>{{ $review->comment }}</p>
                        @endif
                    </div>
                @endforeach
            @endif
        </section>
    @endif

    {{-- Reviews --}}
    @if(false && ($reviews ?? collect())->count())
        <section class="fm-store-section" id="reviews">
            <div class="fm-store-section-head">
                <div>
                    <h2>Customer Reviews</h2>
                    <p>Latest feedback for this store</p>
                </div>
            </div>
            @foreach($reviews as $review)
                <div class="fm-store-review">
                    <strong>{{ $review->customer?->name ?? trans_key('storefront.fallbacks.customer') }}</strong>
                    <span class="fm-review-rating">{{ number_format((float) $review->rating, 1) }} ★</span>
                    <p>{{ $review->comment }}</p>
                </div>
            @endforeach
        </section>
    @endif

    {{-- Info Section --}}
    <section class="fm-store-section" id="info">
        <div class="fm-store-section-head">
            <div>
                <h2>Store Information</h2>
                <p>Details about this store</p>
            </div>
        </div>
        <div style="background:var(--fm-card-bg,#ffffff);border-radius:var(--fm-radius,10px);padding:16px;box-shadow:var(--fm-shadow,0 2px 8px rgba(0,0,0,0.06));">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div>
                    <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Store Name</small>
                    <strong style="font-size:14px;color:var(--fm-text,#1a1a2e);">{{ $store->name }}</strong>
                </div>
                @if($store->city)
                    <div>
                        <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Location</small>
                        <strong style="font-size:14px;color:var(--fm-text,#1a1a2e);">{{ $store->city }}</strong>
                    </div>
                @endif
                @if($store->address_line_1)
                    <div style="grid-column:1/-1;">
                        <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Address</small>
                        <strong style="font-size:14px;color:var(--fm-text,#1a1a2e);">
                            {{ collect([$store->address_line_1, $store->address_line_2, $store->city, $store->state, $store->postal_code])->filter()->implode(', ') }}
                        </strong>
                    </div>
                @endif
                <div>
                    <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Status</small>
                    <strong style="font-size:14px;color:{{ $isOpen ? '#22c55e' : '#ef4444' }};">
                        {{ $isOpen ? 'Open now' : 'Currently closed' }}
                    </strong>
                </div>
                @if($minimumOrderLabel)
                    <div>
                        <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Minimum Order</small>
                        <strong style="font-size:14px;color:var(--fm-text,#1a1a2e);">{{ $minimumOrderLabel }}</strong>
                    </div>
                @endif
                @if($etaLabel)
                    <div>
                        <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Estimated Delivery</small>
                        <strong style="font-size:14px;color:var(--fm-text,#1a1a2e);">{{ $etaLabel }}</strong>
                    </div>
                @endif
                @if($deliveryFeeLabel)
                    <div>
                        <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Delivery Fee</small>
                        <strong style="font-size:14px;color:var(--fm-text,#1a1a2e);">{{ $deliveryFeeLabel }}</strong>
                    </div>
                @endif
                @if($radiusLabel)
                    <div>
                        <small style="font-size:11px;color:var(--fm-text-light,#9ca3af);display:block;">Service Radius</small>
                        <strong style="font-size:14px;color:var(--fm-text,#1a1a2e);">{{ $radiusLabel }}</strong>
                    </div>
                @endif
            </div>
        </div>
    </section>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    // ==========================================
    // CATEGORY CHIP SCROLL
    // ==========================================
    const chips = document.querySelector('.fm-category-chips');
    if (chips) {
        let isDown = false;
        let startX;
        let scrollLeft;

        chips.addEventListener('mousedown', (e) => {
            isDown = true;
            startX = e.pageX - chips.offsetLeft;
            scrollLeft = chips.scrollLeft;
        });

        chips.addEventListener('mouseleave', () => {
            isDown = false;
        });

        chips.addEventListener('mouseup', () => {
            isDown = false;
        });

        chips.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - chips.offsetLeft;
            const walk = (x - startX) * 2;
            chips.scrollLeft = scrollLeft - walk;
        });
    }

    // ==========================================
    // CATEGORY CHIP NAVIGATION
    // ==========================================
    document.querySelectorAll('.fm-category-chip').forEach(chip => {
        chip.addEventListener('click', function(e) {
            e.preventDefault();
            const target = this.getAttribute('href');
            if (target) {
                const section = document.querySelector(target);
                if (section) {
                    const headerOffset = 80;
                    const elementPosition = section.getBoundingClientRect().top;
                    const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                    
                    window.scrollTo({
                        top: offsetPosition,
                        behavior: 'smooth'
                    });
                }
            }
        });
    });

});
</script>
@endsection