@extends('layouts.app')

@section('content')

<x-page-hero
    label="Restaurant Chains"
    badge="Multi-Outlet"
    title="Built for restaurant groups, not just one counter."
    subtitle="Standardise menus, pricing, permissions, purchasing, reporting, and payment flows across every outlet — from a single control layer."
    cta1="Book a Chain Demo"
    cta2="View Features"
    :cta2url="route('features.index')"
/>

{{-- ── Core capabilities ───────────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-14">
            <p class="section-label justify-center">Platform capabilities</p>
            <h2 class="heading-md max-w-2xl mx-auto text-balance">
                Every tool your group needs, connected and controllable.
            </h2>
        </div>
        <x-feature-grid :features="[
            ['icon' => 'layout-dashboard', 'title' => 'Central Menu Control',         'description' => 'Create, edit, and push menus from HQ to every outlet instantly. Set category visibility, pricing overrides, and seasonal specials by location.'],
            ['icon' => 'credit-card',      'title' => 'Outlet-Wise Pricing & Taxes',  'description' => 'Set outlet-specific price lists, tax configurations, and service charge rules without duplicating menu management effort.'],
            ['icon' => 'package',          'title' => 'Recipe & Inventory Controls',  'description' => 'Link recipes to menu items, auto-deduct stock on sale, track wastage, and manage supplier purchasing from each outlet or centrally.'],
            ['icon' => 'building-storefront', 'title' => 'Central Kitchen / Commissary', 'description' => 'Route production orders to your central kitchen or commissary. Track batch production, transfers, and outlet-level receiving.'],
            ['icon' => 'lock',             'title' => 'Role-Based Permissions',       'description' => 'Define what each role can see or do — cashier, manager, outlet head, area manager, HQ. Granular access across every function.'],
            ['icon' => 'chart-bar',        'title' => 'Outlet Performance Reporting', 'description' => 'Compare revenue, order count, average ticket, product mix, and cashier efficiency across outlets in one consolidated view.'],
            ['icon' => 'puzzle',           'title' => 'Aggregator Integrations',      'description' => 'Connect Zomato, Swiggy, and other aggregators via UrbanPiper or direct APIs. Orders flow into your POS automatically.'],
            ['icon' => 'tv',               'title' => 'KDS, Captain App & Handhelds', 'description' => 'Deploy KDS screens by station, captain ordering on handhelds, and multi-terminal billing — all in sync.'],
            ['icon' => 'document',         'title' => 'Audit Trail & Wastage Control', 'description' => 'Every deletion, discount, and void is logged against a user and timestamp. Set wastage limits and get alerts when exceeded.'],
            ['icon' => 'trending-up',      'title' => 'Payment Reconciliation',       'description' => 'Reconcile UPI, card, and cash settlements across every outlet and shift. No manual matching across payment dashboards.'],
        ]" />
    </div>
</section>

{{-- ── Multi-outlet dashboard preview ─────────────────────────────────── --}}
<section class="section bg-emerald-900 bg-subtle-grid relative overflow-hidden">
    <div class="container-site relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div>
                <p class="section-label text-teal-300">Central Control</p>
                <h2 class="heading-md text-white max-w-lg text-balance">
                    One dashboard. Every outlet. Live.
                </h2>
                <p class="mt-5 text-emerald-200 leading-relaxed">
                    Your area managers and operations head get a single view — revenue by outlet, order count, kitchen status, payment modes, and cashier activity — all updating in real time.
                </p>
                <ul class="mt-8 space-y-3">
                    @foreach([
                        'Push menu changes to selected or all outlets',
                        'Compare outlet performance at a glance',
                        'Set outlet-level inventory reorder points',
                        'Approve or restrict discounts by outlet',
                        'Monitor cashier settlements remotely',
                    ] as $point)
                    <li class="flex items-center gap-3 text-sm text-emerald-100">
                        <div class="w-5 h-5 rounded-full bg-amber-500/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-3 h-3 text-amber-400" viewBox="0 0 12 12" fill="currentColor">
                                <path d="M10.28 2.28L3.89 8.67l-2.17-2.17-1.06 1.06L3.89 10.8 11.34 3.34z"/>
                            </svg>
                        </div>
                        {{ $point }}
                    </li>
                    @endforeach
                </ul>
                <a href="{{ route('features.central-control') }}" class="btn-primary-lg mt-8 inline-flex">
                    See Central Control Features →
                </a>
            </div>
            <div>
                @include('components.screen-mockup', ['label' => 'Chain Dashboard — All Outlets', 'type' => 'dashboard'])
            </div>
        </div>
    </div>
</section>

{{-- ── Operational workflows ────────────────────────────────────────────── --}}
<section class="section bg-white">
    <div class="container-site">
        <div class="grid lg:grid-cols-2 gap-14 items-start">
            <div>
                <p class="section-label">Kitchen & Service</p>
                <h2 class="heading-sm mb-6">Standardise service without removing outlet flexibility.</h2>
                @include('components.screen-mockup', ['label' => 'KDS — Hot Station', 'type' => 'kds'])
            </div>
            <div class="lg:pt-16">
                <p class="section-label">Inventory & Purchasing</p>
                <h2 class="heading-sm mb-6">Know what is in stock at every outlet before a stockout hurts you.</h2>
                @include('components.screen-mockup', ['label' => 'Inventory — Stock Overview', 'type' => 'inventory'])
            </div>
        </div>
    </div>
</section>

{{-- ── Comparison table ─────────────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site max-w-4xl">
        <div class="text-center mb-12">
            <p class="section-label justify-center">Deployment clarity</p>
            <h2 class="heading-md text-balance">Single outlet vs. chain setup — what changes.</h2>
        </div>
        <div class="card overflow-hidden">
            <table class="comparison-table">
                <thead>
                    <tr>
                        <th class="w-1/2">Capability</th>
                        <th class="text-center">Single Outlet</th>
                        <th class="text-center bg-emerald-50 text-emerald-900">Restaurant Chain</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach([
                        ['Central menu push',              false, true],
                        ['Outlet-wise pricing',            false, true],
                        ['Recipe & inventory controls',    true,  true],
                        ['Central kitchen / commissary',   false, true],
                        ['Role-based permissions',         'Basic', 'Granular'],
                        ['Outlet performance comparison',  false, true],
                        ['Payment reconciliation',         'Outlet', 'All outlets'],
                        ['Aggregator integration',         true,  true],
                        ['KDS & handhelds',                true,  true],
                        ['Audit trail',                    'Basic', 'Full'],
                    ] as [$feature, $single, $chain])
                    <tr>
                        <td class="font-medium text-graphite-700">{{ $feature }}</td>
                        <td class="text-center text-graphite-500">
                            @if($single === true)
                            <svg class="w-5 h-5 text-teal-500 mx-auto" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>
                            @elseif($single === false)
                            <span class="text-graphite-300">—</span>
                            @else
                            <span class="text-sm">{{ $single }}</span>
                            @endif
                        </td>
                        <td class="text-center bg-emerald-50">
                            @if($chain === true)
                            <svg class="w-5 h-5 text-emerald-600 mx-auto" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>
                            @else
                            <span class="text-sm font-semibold text-emerald-700">{{ $chain }}</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>

@include('components.testimonials', ['segment' => 'Restaurant Chain'])
<x-cta-band
    title="Running a restaurant group? Let us show you the chain setup."
    sub="Book a demo tailored to multi-outlet deployments. We will walk through central control, outlet-level visibility, and payment reconciliation."
/>

@endsection