@extends('layouts.app')

@section('content')

<x-page-hero
    label="Feature — Kitchen Operations"
    title="No paper tickets. No missed orders. No shouting across the kitchen."
    subtitle="KDS screens, KOT routing by station, order status tracking, and kitchen-to-counter coordination for restaurants, bars, and cloud kitchens."
    cta1="Book a Demo"
    cta2="View KDS Hardware"
    :cta2url="route('hardware')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="grid lg:grid-cols-2 gap-14 items-center">
            <div>
                <p class="section-label">Kitchen Display System</p>
                <h2 class="heading-md text-balance mb-6">
                    Every order, every station, visible in real time.
                </h2>
                <p class="subheading">
                    A Kitchen Display System replaces paper KOT tickets with a live screen at each station. Orders appear the moment they are placed, are tracked through prep, and marked done when ready — creating a closed loop from order to service.
                </p>
                <div class="mt-8 space-y-4">
                    @foreach([
                        ['Order placed at POS or handheld', 'The moment a captain or cashier sends an order, it appears on the relevant KDS screen.'],
                        ['Routed to the right station', 'Hot counter, cold counter, bar, grill, or pantry — each item goes to the station that prepares it.'],
                        ['Chef marks item ready', 'One tap on the KDS. The counter or waiter is notified. No shouting needed.'],
                        ['Order complete — time tracked', 'Prep time is logged per item and per order. Kitchen performance visible in reports.'],
                    ] as [$step, $desc])
                    <div class="flex gap-4 p-4 bg-white border border-graphite-100 rounded-xl shadow-xs">
                        <div class="number-pill flex-shrink-0 self-start">
                            {{ $loop->iteration }}
                        </div>
                        <div>
                            <h4 class="font-semibold text-graphite-900 mb-1 text-sm">{{ $step }}</h4>
                            <p class="text-xs text-graphite-500">{{ $desc }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div>
                @include('components.screen-mockup', ['label' => 'KDS — Hot Station', 'type' => 'kds'])
            </div>
        </div>
    </div>
</section>

{{-- ── Full capabilities ─────────────────────────────────────────────────── --}}
<section class="section bg-white">
    <div class="container-site">
        <div class="text-center mb-12">
            <p class="section-label justify-center">Full kitchen capabilities</p>
            <h2 class="heading-md text-balance max-w-xl mx-auto">
                From first ticket to final delivery.
            </h2>
        </div>
        <x-feature-grid :features="[
            ['icon' => 'tv',            'title' => 'KDS Screens',                     'description' => 'Deploy Android-based KDS screens at every station. No proprietary hardware required.'],
            ['icon' => 'printer',       'title' => 'KOT Printing',                    'description' => 'Print kitchen order tickets to any connected thermal printer by station or item category.'],
            ['icon' => 'lightning',     'title' => 'Instant Order Routing',           'description' => 'Orders route to stations in under 2 seconds from placement. Zero delay at peak hours.'],
            ['icon' => 'layout-dashboard','title' => 'Station-Based Routing Rules',  'description' => 'Set routing rules per item category — hot, cold, bar, bakery, grill. Configurable by outlet.'],
            ['icon' => 'clock',         'title' => 'Prep Time Tracking',              'description' => 'Track how long each order spends in prep. Identify bottlenecks by station or shift.'],
            ['icon' => 'tablet',        'title' => 'Captain App Integration',         'description' => 'Captain takes order on handheld. Fires to KDS. No manual re-entry at counter.'],
            ['icon' => 'package',       'title' => 'Central Kitchen Coordination',    'description' => 'Route production orders from outlets to your central kitchen or commissary via the same KDS flow.'],
            ['icon' => 'shield',        'title' => 'Order Modification Control',      'description' => 'Modifications to sent orders require manager permission — preventing unauthorised changes mid-prep.'],
            ['icon' => 'chart-bar',     'title' => 'Kitchen Performance Reports',    'description' => 'Average prep time, orders per hour, wastage by station, and peak load by time of day.'],
        ]" />
    </div>
</section>

{{-- ── Use cases ────────────────────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-12">
            <p class="section-label justify-center">Deployed in</p>
            <h2 class="heading-md text-balance">Kitchen operations across every format.</h2>
        </div>
        <div class="grid md:grid-cols-3 gap-6">
            @foreach([
                ['Restaurant',      'Table service restaurants with multiple kitchen stations — hot, cold, desserts. KDS at each.', 'chef-hat'],
                ['Bar & Club',      'Bar station KDS for drink orders, separate food KDS for kitchen. Captain orders on handhelds.', 'cocktail'],
                ['Cloud Kitchen',   'Multi-brand order routing. Each brand\'s items go to the right station or prep area.', 'kitchen-set'],
            ] as [$type, $desc, $icon])
            <div class="card p-7" data-animate>
                <div class="w-12 h-12 rounded-xl bg-emerald-900 flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-amber-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        @include('components.icons.' . $icon)
                    </svg>
                </div>
                <h3 class="font-bold text-graphite-900 mb-2">{{ $type }}</h3>
                <p class="text-sm text-graphite-500 leading-relaxed">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<x-cta-band title="Want to see the KDS in action?" sub="Book a live demo of kitchen order routing, station management, and prep time tracking for your operation type." />

@endsection