@extends('layouts.app')

@section('content')

<x-page-hero
    label="Bars, Clubs & Lounges"
    badge="Nightlife & Premium Hospitality"
    title="Rush-proof billing for bars, clubs, and premium lounges."
    subtitle="Handle a full house, multiple bar stations, captain ordering, cover charges, and end-of-night settlement — without losing a single transaction in the chaos."
    cta1="Book a Demo"
    cta2="View Hardware"
    :cta2url="route('hardware')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-14">
            <p class="section-label justify-center">Designed for the nightlife floor</p>
            <h2 class="heading-md max-w-2xl mx-auto text-balance">
                Every workflow a bar or club operator actually runs.
            </h2>
        </div>
        <x-feature-grid :features="[
            ['icon' => 'layout-dashboard', 'title' => 'Table & Section Mapping',      'description' => 'Visual floor plans with sections — bar seating, VIP, terrace, main floor. See which tables are occupied, running, and billed.'],
            ['icon' => 'tablet',           'title' => 'Captain Order-Taking',          'description' => 'Captains take orders on handhelds at the table. Orders fire to the bar or kitchen station immediately.'],
            ['icon' => 'lightning',        'title' => 'Fast Billing Under Rush',       'description' => 'Touch-optimised POS built for high speed. Multi-item orders, quick modifiers, and fast payment collection.'],
            ['icon' => 'tv',               'title' => 'Printer & KDS Routing by Station', 'description' => 'Route drink orders to the bar, food orders to the kitchen, and desserts to the pantry — all from the same order.'],
            ['icon' => 'document',         'title' => 'Cover Charges & Event Billing', 'description' => 'Apply cover charges, entry fees, minimum spends, and event packages at order or table level.'],
            ['icon' => 'lock',             'title' => 'Role-Based Access & Audit',    'description' => 'Tighter access controls for bartenders vs. managers. All voids, discounts, and cancellations logged and auditable.'],
            ['icon' => 'cpu',              'title' => 'Multiple Terminals & Handhelds', 'description' => 'Run 4–6 terminals across the floor and bar simultaneously. All in sync. No double-billing.'],
            ['icon' => 'credit-card',      'title' => 'Payments & Settlement',         'description' => 'Accept UPI, card, and cash across every terminal. Settle by cashier or shift with full payment mode breakdowns.'],
        ]" />
    </div>
</section>

{{-- ── Rush-hour flow ───────────────────────────────────────────────────── --}}
<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-14 items-center">
            <div>
                <p class="section-label text-teal-300">Peak hour control</p>
                <h2 class="heading-md text-white text-balance">
                    Friday night at 11 PM. 200 covers. Zero missed orders.
                </h2>
                <p class="mt-5 text-emerald-200 leading-relaxed">
                    PhyloPOS handles the simultaneous pressure of multiple bar stations, food orders from the kitchen, captain orders from 15 tables, and payment queues at the counter — all in one system.
                </p>
                <div class="mt-8 space-y-4">
                    @foreach([
                        ['Captain takes table order on handheld → fires to bar and kitchen in 2 seconds'],
                        ['Bartender sees order on KDS → makes drinks → marks done'],
                        ['Multiple payment modes collected simultaneously at 3 terminals'],
                        ['Night-close: settlement by cashier, shift, and payment mode in one report'],
                    ] as [$step])
                    <div class="glass rounded-xl p-4 text-sm text-emerald-100">{{ $step }}</div>
                    @endforeach
                </div>
            </div>
            <div>
                @include('components.screen-mockup', ['label' => 'Bar KDS — Drinks Station', 'type' => 'kds'])
            </div>
        </div>
    </div>
</section>

<x-cta-band
    title="Running a bar or club? Let us show you the nightlife setup."
    sub="Demo the table management, captain ordering, station routing, and shift settlement — built for high-volume hospitality."
/>

@endsection