@extends('layouts.app')

@section('content')

<x-page-hero
    label="Retail Stores"
    badge="Single Location"
    title="Replace the cash register, the spreadsheet, and the guesswork."
    subtitle="Billing, inventory, barcode scanning, purchase management, discounts, and repeat customer capture — in one system built for owner-operators."
    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">Everything a retail store needs</p>
            <h2 class="heading-md max-w-xl mx-auto text-balance">
                Simple to use. Powerful enough to run a serious store.
            </h2>
        </div>
        <x-feature-grid :features="[
            ['icon' => 'monitor',    'title' => 'Billing & Checkout',          'description' => 'Fast barcode-based billing. Handle cash, UPI, and card. Print receipts or share digitally. Simple enough for any cashier to learn in an hour.'],
            ['icon' => 'package',    'title' => 'Inventory Management',        'description' => 'Track stock in real time. Get low-stock alerts. Know what is selling fast and what is sitting idle.'],
            ['icon' => 'scan',       'title' => 'Barcode Scanning',            'description' => 'Scan products to bill, to receive goods, or to run stock counts. Works with standard USB and wireless scanners.'],
            ['icon' => 'document',   'title' => 'Purchase Management',         'description' => 'Raise purchase orders, receive goods with GRN, and track what you owe to each supplier.'],
            ['icon' => 'trending-up','title' => 'Discounts & Schemes',         'description' => 'Set product discounts, category promotions, and quantity-based pricing. Apply at billing with one tap.'],
            ['icon' => 'users',      'title' => 'Customer Capture & CRM',     'description' => 'Capture customer mobile numbers at checkout. Track purchase history and run simple loyalty or repeat-purchase programs.'],
            ['icon' => 'chart-bar',  'title' => 'Sales Reports',               'description' => 'Daily sales summary, product-wise performance, payment mode breakdown, and cashier settlement — all downloadable.'],
            ['icon' => 'cpu',        'title' => 'Easy Hardware Setup',         'description' => 'One terminal, a barcode scanner, a receipt printer, and a cash drawer. Compact, affordable, and tested together.'],
        ]" />
    </div>
</section>

{{-- ── Migration ease ───────────────────────────────────────────────────── --}}
<section class="section bg-white">
    <div class="container-site max-w-4xl">
        <div class="text-center mb-12">
            <p class="section-label justify-center">Moving from manual</p>
            <h2 class="heading-md text-balance">Switching from a cash register or spreadsheet? We handle it.</h2>
        </div>
        <div class="grid md:grid-cols-3 gap-6">
            @foreach([
                ['We load your products', 'Bring us your product list in any format — paper, Excel, or photos. We create your catalogue.', 'package'],
                ['We set up your hardware', 'Scanner, printer, terminal, cash drawer — installed, tested, and paired in a day.', 'cpu'],
                ['You start billing', 'Your cashier learns the POS in under an hour. We are on call if you need us.', 'monitor'],
            ] as [$title, $desc, $icon])
            <div class="card p-7 text-center" data-animate>
                <div class="w-14 h-14 rounded-xl2 bg-teal-50 flex items-center justify-center mx-auto mb-4">
                    <svg class="w-7 h-7 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        @include('components.icons.' . $icon)
                    </svg>
                </div>
                <h3 class="font-bold text-graphite-900 mb-2">{{ $title }}</h3>
                <p class="text-sm text-graphite-500 leading-relaxed">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<x-cta-band
    title="Ready to upgrade from a cash register?"
    sub="Book a 30-minute demo. We will show you billing, inventory, and hardware working together for a store like yours."
/>

@endsection