@extends('layouts.app')

@section('content')

<x-page-hero
    label="Cafés & Restaurants"
    badge="Single Location"
    title="Run your café or restaurant without chasing five different tools."
    subtitle="Fast billing, table management, kitchen order routing, online order integration, and daily settlement visibility — in one system you can actually understand."
    cta1="Book a Demo"
    cta2="View Hardware Bundles"
    :cta2url="route('hardware')"
/>

{{-- ── Key features ─────────────────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-14">
            <p class="section-label justify-center">What you get</p>
            <h2 class="heading-md max-w-xl mx-auto text-balance">
                Everything a busy restaurant actually needs.
            </h2>
        </div>
        <x-feature-grid :features="[
            ['icon' => 'monitor',      'title' => 'Fast Billing',                  'description' => 'Touch-optimised POS built for speed at lunch rush. Handle dine-in, takeaway, and delivery from the same screen.'],
            ['icon' => 'layout-dashboard', 'title' => 'Table Management',          'description' => 'Visual floor plan with table status, cover count, merge and split table billing, and timer alerts.'],
            ['icon' => 'tv',           'title' => 'KOT & Kitchen Routing',         'description' => 'Kitchen order tickets sent automatically to the right station — grill, hot, cold, or bar — the moment an order is placed.'],
            ['icon' => 'shopping-bag', 'title' => 'Online Order Integration',      'description' => 'Zomato and Swiggy orders appear in your POS automatically. Accept, modify, and route without a second screen.'],
            ['icon' => 'package',      'title' => 'Inventory & Purchase Tracking', 'description' => 'Know what you have in stock, set reorder alerts, and manage purchases from your regular suppliers.'],
            ['icon' => 'users',        'title' => 'CRM & Loyalty',                 'description' => 'Capture customer phone numbers, track visits, apply loyalty points, and run coupon promotions at checkout.'],
            ['icon' => 'chart-bar',    'title' => 'Daily Sales & Cashier Reports', 'description' => 'End-of-day summary, shift settlement, sales by category, and payment mode breakdown — ready in seconds.'],
            ['icon' => 'credit-card',  'title' => 'UPI, Card & Cash Settlement',   'description' => 'Accept all payment modes and see a clean unified settlement view every evening. No separate payment app.'],
            ['icon' => 'cpu',          'title' => 'Easy Hardware Bundle',           'description' => 'One billing terminal, a receipt printer, and optionally a KDS screen — pre-configured and ready to plug in.'],
        ]" />
    </div>
</section>

{{-- ── POS in action ───────────────────────────────────────────────────── --}}
<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">POS in action</p>
                <h2 class="heading-md max-w-lg text-balance">
                    Billing that keeps up with your busiest hour.
                </h2>
                <p class="subheading mt-4">
                    From the moment an order is placed at the table to the payment being collected at the counter, every step is handled without paper, without shouting across the kitchen, and without reconciliation at midnight.
                </p>
                <div class="mt-8 space-y-4">
                    @foreach([
                        ['1', 'Waiter takes order on handheld or terminal'],
                        ['2', 'KOT fires to the right kitchen station via KDS'],
                        ['3', 'Chef marks item ready — waiter is notified'],
                        ['4', 'Bill printed or sent digitally at table'],
                        ['5', 'Payment collected — card, UPI, or cash'],
                        ['6', 'Stock auto-deducted. Report updated.'],
                    ] as [$step, $desc])
                    <div class="flex items-center gap-4">
                        <div class="number-pill">{{ $step }}</div>
                        <p class="text-sm text-graphite-600">{{ $desc }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
            <div>
                @include('components.screen-mockup', ['label' => 'PhyloPOS — Table Billing', 'type' => 'pos'])
            </div>
        </div>
    </div>
</section>

{{-- ── Onboarding ease ──────────────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site max-w-3xl text-center">
        <p class="section-label justify-center">Getting started</p>
        <h2 class="heading-md text-balance mb-5">
            Up and running in one day. No weeks of training.
        </h2>
        <p class="subheading mx-auto">
            We set up your menu, tables, and hardware. Your team gets a walkthrough. You go live. Most single-restaurant customers are billing on the first day.
        </p>
        <div class="grid grid-cols-3 gap-5 mt-12">
            @foreach([
                ['Day 1', 'Menu setup', 'We load your menu, categories, modifiers, taxes, and pricing.'],
                ['Day 1', 'Hardware install', 'Terminal, printer, and KDS connected and tested.'],
                ['Day 1', 'Team walkthrough', 'One hour with your staff. They know what they need to know.'],
            ] as [$when, $title, $desc])
            <div class="card p-6 text-left">
                <div class="badge-amber mb-3">{{ $when }}</div>
                <h4 class="font-bold text-graphite-900 mb-2">{{ $title }}</h4>
                <p class="text-sm text-graphite-500">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

@include('components.testimonials', ['segment' => 'Single Restaurant'])

<x-cta-band
    title="Running a café or restaurant? Let us show you around."
    sub="Book a 30-minute demo. We will show you billing, kitchen routing, inventory, and payments working together."
/>

@endsection