@extends('layouts.app')

@section('content')

<x-page-hero
    label="Feature — Central Control"
    badge="Multi-Outlet"
    title="Manage every outlet from one control layer."
    subtitle="Push menus, pricing, and promotions. Compare outlet performance. Control purchasing. Manage permissions across your entire chain from a single HQ dashboard."
    cta1="Book a Chain Demo"
    cta2="View Restaurant Chain Solution"
    :cta2url="route('solutions.restaurant-chains')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="grid lg:grid-cols-2 gap-14 items-start">
            <div>
                <p class="section-label">HQ capabilities</p>
                <h2 class="heading-md text-balance mb-8">
                    What HQ can do from the central dashboard.
                </h2>
                <x-feature-grid cols="2" :features="[
                    ['icon' => 'layout-dashboard', 'title' => 'Menu Push',              'description' => 'Create or edit menu items centrally. Push to selected outlets or all outlets instantly.'],
                    ['icon' => 'trending-up',      'title' => 'Pricing Control',        'description' => 'Set chain-wide or outlet-specific price lists. Override at outlet level within defined limits.'],
                    ['icon' => 'document',         'title' => 'Promotion Management',   'description' => 'Create and push promotions, combo deals, and limited-time offers from HQ.'],
                    ['icon' => 'lock',             'title' => 'Permission Management',  'description' => 'Define and update role permissions across all outlets. No on-site visits required.'],
                    ['icon' => 'chart-bar',        'title' => 'Consolidated Reporting', 'description' => 'Chain-wide revenue, outlet comparisons, cashier reports, and payment reconciliation in one view.'],
                    ['icon' => 'package',          'title' => 'Central Purchasing',     'description' => 'Raise purchase orders on behalf of outlets or manage a central warehouse and distribution.'],
                ]" />
            </div>
            <div class="lg:sticky lg:top-24">
                @include('components.screen-mockup', ['label' => 'HQ Dashboard — Chain Control', 'type' => 'dashboard'])
            </div>
        </div>
    </div>
</section>

<x-cta-band title="Running a chain? Let us walk you through central control." sub="Book a demo focused on multi-outlet management — menu control, outlet reporting, and payment reconciliation across your chain." />

@endsection