@extends('layouts.app')

@section('content')

<x-page-hero
    label="Retail Chains"
    badge="Multi-Store"
    title="Central catalogue, outlet-wise stock, chain-level control."
    subtitle="Manage your product master centrally, control pricing and promotions across stores, track inventory in real time, and reconcile payments — all from one platform."
    cta1="Book a Chain Demo"
    cta2="View Features"
    :cta2url="route('features.index')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="text-center mb-14">
            <p class="section-label justify-center">Retail chain capabilities</p>
            <h2 class="heading-md max-w-2xl mx-auto text-balance">
                Every system a multi-store retailer needs, integrated.
            </h2>
        </div>
        <x-feature-grid :features="[
            ['icon' => 'layout-dashboard', 'title' => 'Central Product Catalogue',   'description' => 'Manage your full product master from HQ. Push items, categories, barcodes, pricing, and promotions to selected or all stores.'],
            ['icon' => 'package',          'title' => 'Outlet-Wise Stock Visibility', 'description' => 'See live stock across every store from HQ. Know which store is low before a stockout hurts your business.'],
            ['icon' => 'trending-up',      'title' => 'Price Lists & Promotions',    'description' => 'Set store-specific or chain-wide price lists, seasonal promotions, batch discounts, and membership pricing.'],
            ['icon' => 'scan',             'title' => 'Barcode Billing Workflows',   'description' => 'Scan-to-bill at every counter. Add barcodes to products centrally or at outlet level.'],
            ['icon' => 'document',         'title' => 'GRN, PO & Stock Transfer',   'description' => 'Manage purchase orders to suppliers, receive goods with GRN, and transfer stock between stores with audit trail.'],
            ['icon' => 'archive',          'title' => 'Stock Audit',                 'description' => 'Run physical stock counts and reconcile against system stock by category, section, or product.'],
            ['icon' => 'chart-bar',        'title' => 'Multi-Store Reporting',       'description' => 'Compare revenue, footfall, category sales, cashier efficiency, and shrinkage across stores in one report.'],
            ['icon' => 'lock',             'title' => 'Cashier Control & Returns',  'description' => 'Define return/exchange workflows, set cashier permissions, and log every transaction against a user.'],
            ['icon' => 'credit-card',      'title' => 'Payments & Reconciliation',  'description' => 'Accept UPI, card, and cash. Reconcile by store, cashier, and shift with daily payment settlement reports.'],
        ]" />
    </div>
</section>

{{-- ── Inventory visual ─────────────────────────────────────────────────── --}}
<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">Inventory & Purchasing</p>
                <h2 class="heading-md text-white text-balance">
                    Know your stock across all stores before it becomes a problem.
                </h2>
                <p class="mt-5 text-emerald-200 leading-relaxed">
                    Retail chains bleed margin through undetected stockouts, manual receiving errors, and unreconciled supplier invoices. PhyloPOS connects purchasing, receiving, and stock — across every store.
                </p>
                <div class="mt-8 space-y-3">
                    @foreach([
                        'Auto-deduct stock on each sale',
                        'Reorder alerts by store or category',
                        'GRN linked to PO — discrepancies flagged',
                        'Stock transfer between stores with audit',
                        'Supplier-wise purchase history and outstanding',
                    ] as $point)
                    <li class="flex items-center gap-3 text-sm text-emerald-100 list-none">
                        <div class="w-5 h-5 rounded-full bg-teal-500/20 flex items-center justify-center flex-shrink-0">
                            <svg class="w-3 h-3 text-teal-400" 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>
                        {{ $point }}
                    </li>
                    @endforeach
                </div>
                <a href="{{ route('features.inventory-purchasing') }}" class="btn-outline-white mt-8 inline-flex">
                    Full Inventory Features →
                </a>
            </div>
            <div>
                @include('components.screen-mockup', ['label' => 'Stock Overview — All Stores', 'type' => 'inventory'])
            </div>
        </div>
    </div>
</section>

@include('components.testimonials', ['segment' => 'Retail Chain'])
<x-cta-band
    title="Managing a retail chain? Let us show you the multi-store setup."
    sub="Central catalogue, store-level inventory, barcode workflows, and payment reconciliation — all in one demo."
/>

@endsection