@extends('layouts.app')

@section('content')

<x-page-hero
    label="Feature — Reporting & Analytics"
    title="Operational visibility that is actually actionable."
    subtitle="Daily sales reports, cashier settlements, outlet comparisons, category performance, payment reconciliation, and wastage analysis — all ready the moment you need them."
    cta1="Book a Demo"
    cta2="View All Features"
    :cta2url="route('features.index')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="grid lg:grid-cols-2 gap-14 items-start">
            <div>
                <p class="section-label">Reports catalogue</p>
                <h2 class="heading-md max-w-lg text-balance mb-8">
                    Every report your operations or finance team actually uses.
                </h2>
                <div class="space-y-2">
                    @foreach([
                        ['Daily Sales Summary',          'Consolidated sales by payment mode, order type, and category for any date range.'],
                        ['Cashier Settlement Report',    'Expected vs. actual cash, UPI, and card collected by each cashier, per shift.'],
                        ['Outlet Comparison Report',     'Revenue, order count, average ticket, and product mix across all outlets side by side.'],
                        ['Category Sales Report',        'Which categories and items are driving revenue and which are underperforming.'],
                        ['Item-Wise Sales Report',       'Every item sold in a period — quantity, revenue, contribution to total.'],
                        ['Payment Mode Report',          'UPI, card, cash, and wallet breakdowns by outlet, cashier, and time period.'],
                        ['Inventory Consumption Report', 'Theoretical vs. actual consumption. Variance by item and category.'],
                        ['Wastage Report',               'Wastage logged by item, reason, station, and user — with cost impact.'],
                        ['Purchase & Supplier Report',   'PO status, GRN history, and outstanding payables by supplier.'],
                        ['Staff Shift Report',           'Active sessions, sales per staff member, and modification logs by shift.'],
                        ['Kitchen Performance Report',   'Avg prep time, orders per hour, and station load by time of day.'],
                        ['Tax & GST Report',             'Tax collected by category, tax rate, and outlet — ready for filing.'],
                    ] as [$title, $desc])
                    <div class="flex items-start gap-3 p-3.5 bg-white border border-graphite-100 rounded-xl hover:border-teal-200 hover:bg-teal-50 transition-all cursor-default" data-animate>
                        <div class="w-5 h-5 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <svg class="w-3 h-3 text-emerald-700" viewBox="0 0 12 12" fill="currentColor">
                                <path d="M10.28 2.28L3.89 8.67l-2.17-2.17-1.06 1.06L3.89 10.8 11.34 3.34z"/>
                            </svg>
                        </div>
                        <div>
                            <div class="font-semibold text-graphite-900 text-sm">{{ $title }}</div>
                            <div class="text-xs text-graphite-500 mt-0.5">{{ $desc }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="lg:sticky lg:top-24 space-y-6">
                @include('components.screen-mockup', ['label' => 'Chain Dashboard — All Outlets', 'type' => 'dashboard'])

                <div class="grid grid-cols-2 gap-4">
                    @foreach([
                        ['Real-time', 'All reports update live — no waiting for overnight batch jobs.', 'lightning'],
                        ['Exportable', 'Download as CSV or PDF. Integrate with accounting tools.', 'document'],
                        ['Multi-outlet', 'Consolidated chain reports and per-outlet drilldown.', 'globe'],
                        ['Role-based', 'Cashiers see their reports; managers see the chain.', 'lock'],
                    ] as [$title, $desc, $icon])
                    <div class="card p-4">
                        <svg class="w-5 h-5 text-teal-500 mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            @include('components.icons.' . $icon)
                        </svg>
                        <div class="font-semibold text-graphite-900 text-sm mb-1">{{ $title }}</div>
                        <p class="text-xs text-graphite-500 leading-relaxed">{{ $desc }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<x-cta-band title="Want to see the dashboard and reports?" sub="Book a 30-minute demo. We will show you the reports that matter most for your business." />

@endsection