@extends('layouts.app')

@section('content')

<x-page-hero
    label="Feature — Staff & Permissions"
    title="Everyone sees what they need. Nothing they shouldn't."
    subtitle="Define roles, control what each staff member can see and do, set outlet-specific permissions, and maintain a full audit trail of every transaction and modification."
    cta1="Book a Demo"
    cta2="View All Features"
    :cta2url="route('features.index')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-12">
            <p class="section-label justify-center">Role-based access</p>
            <h2 class="heading-md text-balance max-w-2xl mx-auto">
                Set the right permissions for every role in your operation.
            </h2>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-14">
            @foreach([
                ['Cashier',     'Can bill, collect payment, and view their own shift report. Cannot edit items, apply unapproved discounts, or void without manager PIN.'],
                ['Captain',     'Can take orders on handheld, send to KDS. Cannot access billing or settlement.'],
                ['Manager',     'Can approve voids, apply discounts, view shift reports, and manage staff for their outlet.'],
                ['Area Manager','Can view all outlets in their zone. Can compare performance and access consolidated reports.'],
                ['HQ / Owner',  'Full access — push menus, set pricing, manage permissions, view all outlet data and chain-level reports.'],
                ['Franchise',   'Can manage their own outlet fully, within the brand standards and menus set by the franchisor.'],
            ] as [$role, $desc])
            <div class="card p-6" data-animate>
                <div class="badge-emerald mb-3">{{ $role }}</div>
                <p class="text-sm text-graphite-600 leading-relaxed">{{ $desc }}</p>
            </div>
            @endforeach
        </div>

        <div class="text-center mb-12">
            <p class="section-label justify-center">Audit trail</p>
            <h2 class="heading-md text-balance max-w-xl mx-auto">
                Every action logged. Nothing hidden.
            </h2>
        </div>

        <x-feature-grid :features="[
            ['icon' => 'document',  'title' => 'Bill void logging',           'description' => 'Every voided bill logged with user, time, reason, and manager approval.'],
            ['icon' => 'trending-up','title' => 'Discount audit trail',       'description' => 'Who applied the discount, how much, on which bill, and whether it was within their permission level.'],
            ['icon' => 'lock',      'title' => 'Login and session tracking',  'description' => 'Every staff login, shift start, and shift close is timestamped and attributable.'],
            ['icon' => 'shield',    'title' => 'Menu modification log',       'description' => 'Any menu change — item added, price edited, category disabled — is logged with user and timestamp.'],
            ['icon' => 'users',     'title' => 'Cashier wise transaction log', 'description' => 'Every transaction linked to the cashier who processed it. Tamper-evident.'],
            ['icon' => 'chart-bar', 'title' => 'Exception reports',           'description' => 'Automated reports highlighting high-discount transactions, unusual voids, and off-hours activity.'],
        ]" />
    </div>
</section>

<x-cta-band title="Want to see role-based access in action?" sub="Book a demo and we will walk through the permission model for your team structure." />

@endsection