@php
    $canonical = config('plocal.public_url').$market['canonical_path'];
    $description = $market['is_demo']
        ? 'Explore the fictional '.$market['location']['name'].' '.$market['service']['name'].' market through PLOCAL’s transparent evaluation demonstration.'
        : 'Explore evaluated '.$market['location']['name'].' '.$market['service']['name'].' businesses on PLOCAL, a transparent local business evaluation platform.';
@endphp
@extends('layouts.public')

@section('title', $market['location']['name'].' '.$market['service']['name'].' Businesses | PLOCAL')
@section('description', $description)
@section('robots', $market['robots'])
@section('canonical', $canonical)
@section('image', config('plocal.public_url').'/assets/img/og-meta/plocal-usa-state.png')
@section('body-class', 'plocal-service-market-page')
@section('body-attributes')data-plocal-market="{{ $market['context'] }}" data-render-source="mysql"@endsection

@push('styles')
    <link rel="stylesheet" href="/assets/css/pages/global.css">
    <link rel="stylesheet" href="/assets/css/pages/breadcrum.css">
    <link rel="stylesheet" href="/assets/css/pages/service-market.css">
    <link rel="stylesheet" href="/assets/css/pages/market-page.css">
    <link rel="stylesheet" href="/assets/css/pages/business-profile.css">
    <link rel="stylesheet" href="/assets/css/pages/plocal-server-rendered.css">
@endpush

@section('content')
    @include('public.partials.site-header')

    <main id="main-content">
        <section class="plocal-market-masthead" aria-labelledby="market-page-title">
            <span class="plocal-market-masthead__route" aria-hidden="true"></span>
            <div class="container">
                <div class="plocal-market-masthead__grid">
                    <p class="plocal-market-masthead__eyebrow">PLOCAL / Service Market / Published</p>
                    <h1 id="market-page-title">
                        <span>{{ $market['location']['name'] }}</span>
                        {{ $market['service']['name'] }} Businesses
                    </h1>
                    <p class="plocal-market-masthead__summary">
                        Explore businesses connected to this published local market through explicit membership and a completed PLOCAL Evaluation.
                    </p>
                    <dl class="plocal-market-masthead__metadata" aria-label="Market metadata">
                        <div><dt>Market</dt><dd>{{ $market['location']['name'] }} {{ $market['service']['name'] }}</dd></div>
                        <div><dt>Location</dt><dd>{{ $market['location']['name'] }}, {{ $market['state']['code'] }}</dd></div>
                        <div><dt>Service</dt><dd>{{ $market['service']['name'] }}</dd></div>
                        <div><dt>Category</dt><dd>{{ $market['category']['name'] }}</dd></div>
                        @if ($market['metro'] !== null)
                            <div><dt>Metro context</dt><dd>{{ $market['metro']['name'] }}</dd></div>
                        @endif
                    </dl>
                    <div class="plocal-market-masthead__bottom">
                        @if ($market['is_demo'])
                            <p class="plocal-market-demo-notice" data-demo-disclosure>
                                <i class="fas fa-flask" aria-hidden="true"></i>
                                Fictional demonstration: these records show the PLOCAL architecture, not production business inventory.
                            </p>
                        @endif
                        <nav aria-label="Breadcrumb">
                            <ol class="plocal-breadcrumb">
                                <li><a href="/">Home</a></li>
                                <li><a href="/usa/">USA</a></li>
                                <li><a href="/{{ $market['state']['slug'] }}/">{{ $market['state']['name'] }}</a></li>
                                <li><a href="/{{ $market['state']['slug'] }}/{{ $market['location']['slug'] }}/">{{ $market['location']['name'] }}</a></li>
                                <li aria-current="page">{{ $market['service']['name'] }}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </section>

        <section class="plocal-market-section plocal-market-explorer" aria-labelledby="business-explorer-title">
            <div class="container">
                <header class="plocal-market-section-head">
                    <span class="plocal-market-section-head__number" aria-hidden="true">01</span>
                    <div class="plocal-market-section-head__title">
                        <span>Business discovery / MySQL-backed Market</span>
                        <h2 id="business-explorer-title">Business Explorer</h2>
                    </div>
                    <p class="plocal-market-section-head__copy">
                        All eligible Businesses receive equal editorial weight. Placement is alphabetical and never determined by score or payment.
                    </p>
                </header>

                <div class="plocal-market-explorer__index-head">
                    <h3>Business Index</h3>
                    <span class="plocal-market-explorer__count">{{ count($market['businesses']) }} results</span>
                </div>
                <ol class="plocal-market-index plocal-market-server-list" data-market-business-list>
                    @foreach ($market['businesses'] as $business)
                        <li class="plocal-market-index-item" data-market-business="{{ $business['canonical_slug'] }}">
                            <article class="plocal-market-index-card">
                                @if (!empty($business['screenshot_reference_public_id']))
                                    <div class="plocal-market-index-card__media">
                                        <img src="{{ route('public.profiles.screenshot', [$business['canonical_slug'], $business['screenshot_reference_public_id']]) }}"
                                             alt="Submitted website screenshot for {{ $business['display_name'] }}." loading="lazy">
                                    </div>
                                @elseif ($business['is_demo'])
                                    <div class="plocal-market-index-card__media">
                                        <img src="/assets/img/breadcrumb/categories/local-business-performance-review.webp"
                                             alt="Generic local Business evaluation demonstration visual; it does not depict {{ $business['display_name'] }}." loading="lazy">
                                        <span class="plocal-market-media-note">Generic visual / fictional demonstration</span>
                                    </div>
                                @endif
                                <div class="plocal-market-index-card__body">
                                    <p class="plocal-market-index-card__meta">{{ $market['location']['name'] }}, {{ $market['state']['code'] }} / {{ $market['service']['name'] }}</p>
                                    <h3>{{ $business['display_name'] }}</h3>
                                    @if ($business['evaluation']['model'] === 'proscore')
                                        <p class="plocal-market-index-card__score">
                                            <span>PLOCAL ProScore</span>
                                            <strong>{{ $business['evaluation']['overall_score'] }}/100</strong>
                                        </p>
                                        @if ($business['is_demo'])
                                            <p class="plocal-market-index-card__demo">Fictional demonstration record</p>
                                        @endif
                                        <dl class="plocal-market-score-grid" aria-label="{{ $business['display_name'] }} category totals">
                                            @foreach ($business['evaluation']['categories'] as $category)
                                                <div class="plocal-market-score-item" data-category-result>
                                                    <dt>{{ $category['name'] }}</dt>
                                                    <dd>{{ $category['earned_points'] }}/{{ $category['maximum_points'] }}</dd>
                                                    <span class="plocal-market-score-item__bar" aria-hidden="true">
                                                        <span style="width: {{ ($category['earned_points'] / $category['maximum_points']) * 100 }}%"></span>
                                                    </span>
                                                </div>
                                            @endforeach
                                        </dl>
                                    @else
                                        <p class="plocal-market-index-card__score">
                                            <span>PLOCAL Score</span>
                                            <strong>{{ $business['evaluation']['plocal_score'] }}/10</strong>
                                        </p>
                                        <dl class="plocal-market-score-grid" aria-label="{{ $business['display_name'] }} evaluation summary">
                                            <div class="plocal-market-score-item" data-category-result>
                                                <dt>Digital</dt>
                                                <dd>{{ $business['evaluation']['digital'] }}/10</dd>
                                                <span class="plocal-market-score-item__bar" aria-hidden="true">
                                                    <span style="width: {{ $business['evaluation']['digital'] * 10 }}%"></span>
                                                </span>
                                            </div>
                                            <div class="plocal-market-score-item" data-category-result>
                                                <dt>Service</dt>
                                                <dd>{{ $business['evaluation']['service'] }}/10</dd>
                                                <span class="plocal-market-score-item__bar" aria-hidden="true">
                                                    <span style="width: {{ $business['evaluation']['service'] * 10 }}%"></span>
                                                </span>
                                            </div>
                                            <div class="plocal-market-score-item" data-category-result>
                                                <dt>Trust</dt>
                                                <dd>{{ $business['evaluation']['trust'] }}/10</dd>
                                                <span class="plocal-market-score-item__bar" aria-hidden="true">
                                                    <span style="width: {{ $business['evaluation']['trust'] * 10 }}%"></span>
                                                </span>
                                            </div>
                                        </dl>
                                    @endif
                                    <div class="plocal-market-index-card__actions">
                                        <a class="plocal-market-profile-link"
                                           href="{{ $business['profile_path'] }}?market={{ $market['context'] }}">
                                            View Full Profile <i class="fas fa-arrow-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </li>
                    @endforeach
                </ol>
            </div>
        </section>

    </main>

    @section('footer-note', $market['is_demo']
        ? 'PLOCAL helps customers discover evaluated local businesses. This page contains fictional demo records.'
        : 'PLOCAL helps customers discover evaluated local businesses.')
@include('public.partials.site-footer')
@endsection