@extends('layouts.app')

@section('content')

<x-page-hero
    label="Integrations"
    title="PhyloPOS works with the tools your business already depends on."
    subtitle="Food aggregators, payment gateways, accounting software, hardware devices, and an open API layer for custom integrations — connect your stack without rebuilding it."
    cta1="Book a Demo"
    cta2="Contact Sales"
    :cta2url="route('contact')"
/>

{{-- ── Integration categories ───────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site">

        @foreach([
            [
                'label'    => 'Food Delivery Aggregators',
                'title'    => 'Aggregator orders land in your POS. Automatically.',
                'subtitle' => 'Stop managing a separate tablet for every platform. Zomato and Swiggy orders flow into PhyloPOS via UrbanPiper, route to the kitchen, and update your inventory — without manual re-entry.',
                'items'    => [
                    ['Zomato',      'Orders auto-imported into POS', 'puzzle'],
                    ['Swiggy',      'Menu sync and order routing', 'puzzle'],
                    ['UrbanPiper',  'Aggregator middleware', 'puzzle'],
                    ['Direct POS',  'For your own app or website', 'globe'],
                ],
                'bg'       => 'bg-surface',
            ],
            [
                'label'    => 'Payment Integrations',
                'title'    => 'Payments embedded into the billing flow.',
                'subtitle' => 'Connect payment terminals and gateways directly to PhyloPOS. Collections recorded against each bill, cashier settlement automated, and reconciliation reports generated at day-close.',
                'items'    => [
                    ['Razorpay',   'POS and online payments', 'credit-card'],
                    ['Pine Labs',  'POS terminals', 'credit-card'],
                    ['PayU',       'Payment gateway', 'credit-card'],
                    ['UPI / BHIM', 'QR and direct UPI', 'credit-card'],
                ],
                'bg'       => 'bg-white',
            ],
            [
                'label'    => 'Accounting & ERP',
                'title'    => 'Push sales and purchase data to your accounting stack.',
                'subtitle' => 'Export daily sales summaries, GST-ready reports, and purchase data to Tally, Zoho Books, or custom ERP via our export layer or API.',
                'items'    => [
                    ['Tally',       'Daily sales and purchase export', 'document'],
                    ['Zoho Books',  'Sync via API', 'document'],
                    ['Custom ERP',  'CSV or API export', 'cog'],
                    ['Excel / CSV', 'All reports exportable', 'document'],
                ],
                'bg'       => 'bg-surface',
            ],
            [
                'label'    => 'Hardware & Peripheral Integrations',
                'title'    => 'Compatible with the hardware your team already uses.',
                'subtitle' => 'PhyloPOS is tested with leading billing terminals, printers, scanners, KDS screens, and payment devices. No proprietary lock-in.',
                'items'    => [
                    ['Epson / Star Printers', 'Receipt and KOT printing', 'printer'],
                    ['USB / BT Scanners',     'Barcode billing and GRN', 'scan'],
                    ['Android KDS',           'Station display screens', 'tv'],
                    ['Weighing Scales',        'Weight-based billing', 'scale'],
                ],
                'bg'       => 'bg-white',
            ],
        ] as $category)
        <div class="mb-20 last:mb-0">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <p class="section-label">{{ $category['label'] }}</p>
                    <h2 class="heading-sm mb-4 text-balance">{{ $category['title'] }}</h2>
                    <p class="text-graphite-500 leading-relaxed mb-8">{{ $category['subtitle'] }}</p>
                    <div class="grid grid-cols-2 gap-3">
                        @foreach($category['items'] as $item)
                        <div class="flex items-center gap-3 p-3 bg-white border border-graphite-100 rounded-xl shadow-xs">
                            <div class="w-8 h-8 rounded-lg bg-teal-50 flex items-center justify-center flex-shrink-0">
                                <svg class="w-4 h-4 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    @include('components.icons.' . $item[2])
                                </svg>
                            </div>
                            <div>
                                <div class="font-semibold text-sm text-graphite-900">{{ $item[0] }}</div>
                                <div class="text-2xs text-graphite-400">{{ $item[1] }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="hidden lg:block">
                    <div class="bg-graphite-900 rounded-xl3 p-8 text-center">
                        <div class="w-16 h-16 rounded-xl2 bg-teal-600/20 flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-teal-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                @include('components.icons.puzzle')
                            </svg>
                        </div>
                        <p class="text-emerald-200 text-sm">{{ $category['label'] }}</p>
                        <p class="text-graphite-500 text-xs mt-2">Tested. Connected. Working.</p>
                    </div>
                </div>
            </div>
            <div class="h-px bg-graphite-100 mt-16"></div>
        </div>
        @endforeach

        {{-- API section --}}
        <div class="mt-4 card p-10 bg-gradient-to-br from-graphite-900 to-emerald-900 border-0 text-center">
            <div class="w-14 h-14 rounded-xl2 bg-teal-600/20 flex items-center justify-center mx-auto mb-5">
                <svg class="w-7 h-7 text-teal-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    @include('components.icons.cog')
                </svg>
            </div>
            <h3 class="font-bold text-white text-xl mb-3">Custom integrations via API</h3>
            <p class="text-emerald-200 max-w-xl mx-auto leading-relaxed mb-6">
                PhyloPOS exposes a REST API and webhook layer for custom integrations — CRM systems, loyalty platforms, ERP pipelines, or bespoke reporting dashboards. Talk to our team about your integration requirements.
            </p>
            <a href="{{ route('contact') }}" class="btn-primary-lg inline-flex">
                Talk to Our Integration Team
            </a>
        </div>
    </div>
</section>

<x-cta-band title="Need a specific integration?" sub="Contact us with your integration requirement. We will check compatibility, timeline, and build scope." />

@endsection