@extends('layouts.app')

@section('content')

<x-page-hero
    label="Cloud Kitchens"
    badge="Delivery-First"
    title="One kitchen. Multiple brands. Every order accounted for."
    subtitle="Manage multi-brand menus, aggregator order flows, kitchen routing, and prep-to-dispatch coordination — without a patchwork of apps."
    cta1="Book a Demo"
    cta2="View Integrations"
    :cta2url="route('integrations')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-14">
            <p class="section-label justify-center">Cloud kitchen operations</p>
            <h2 class="heading-md max-w-2xl mx-auto text-balance">
                Every capability a delivery-first brand depends on.
            </h2>
        </div>
        <x-feature-grid :features="[
            ['icon' => 'shopping-bag', 'title' => 'Multi-Brand Menu Control',      'description' => 'Manage separate menus for each virtual brand from one platform. Items, categories, pricing, and modifiers per brand.'],
            ['icon' => 'puzzle',       'title' => 'Aggregator Order Flow',          'description' => 'Zomato and Swiggy orders flow in automatically via UrbanPiper. Accept, route, and track from one screen.'],
            ['icon' => 'tv',           'title' => 'Kitchen Routing by Brand/Station', 'description' => 'Orders from each brand route to the right station or KDS. No paper tickets. No missed items.'],
            ['icon' => 'clock',        'title' => 'Prep Status Tracking',           'description' => 'Track each order from receipt to prep, ready, and dispatch. Reduce delivery time SLA breaches.'],
            ['icon' => 'lightning',    'title' => 'Peak Handling & Order Throttling', 'description' => 'Manage order acceptance rates during peak hours to protect kitchen capacity and delivery timelines.'],
            ['icon' => 'package',      'title' => 'Production & Inventory Control', 'description' => 'Recipe-linked inventory deduction per brand. Batch production tracking and raw material purchasing.'],
            ['icon' => 'archive',      'title' => 'Packaging & Item Mapping',       'description' => 'Map packaging materials to items. Track packaging stock alongside ingredients.'],
            ['icon' => 'chart-bar',    'title' => 'Brand-Level Reporting',          'description' => 'Revenue, order count, average ticket, and item performance split by brand — not just by day.'],
        ]" />
    </div>
</section>

{{-- ── Aggregator flow ──────────────────────────────────────────────────── --}}
<section class="section bg-white">
    <div class="container-site">
        <div class="grid lg:grid-cols-2 gap-14 items-center">
            <div>
                <p class="section-label">Aggregator integration</p>
                <h2 class="heading-md max-w-lg text-balance">
                    Orders from Zomato and Swiggy land directly in your kitchen.
                </h2>
                <p class="subheading mt-4">
                    No second tablet. No manual re-entry. Orders from every aggregator flow into PhyloPOS, fire to the right station, and update your inventory — automatically.
                </p>
                <div class="mt-8 space-y-3">
                    @foreach([
                        'Customer places order on Zomato',
                        'Order appears in PhyloPOS within seconds',
                        'Routes to correct brand station / KDS',
                        'Prep tracked — ready, packed, dispatched',
                        'Revenue and stock updated automatically',
                    ] as $i => $step)
                    <div class="flex items-center gap-4">
                        <div class="number-pill">{{ $i + 1 }}</div>
                        <p class="text-sm text-graphite-600">{{ $step }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
            <div>
                @include('components.screen-mockup', ['label' => 'Cloud Kitchen — Order Board', 'type' => 'kds'])
            </div>
        </div>
    </div>
</section>

@include('components.testimonials', ['segment' => 'Cloud Kitchen'])
<x-cta-band
    title="Running a cloud kitchen? Let us show you the delivery-first setup."
    sub="Multi-brand menus, aggregator order flow, and kitchen routing — all in one 30-minute demo."
/>

@endsection