@extends('layouts.app')

@section('content')

<x-page-hero
    label="Embedded Payments"
    title="Embedded payments that work where the sale actually happens."
    subtitle="Accept card, UPI, and wallets with unified settlement visibility and clean store-level reconciliation — embedded directly into your POS workflow, not bolted on after."
    cta1="Book a Demo"
    cta2="View Hardware"
    :cta2url="route('hardware')"
/>

{{-- ── Why embedded payments ────────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div>
                <p class="section-label">The problem with separate payment tools</p>
                <h2 class="heading-md max-w-lg text-balance">
                    Two systems. Double the reconciliation pain.
                </h2>
                <p class="subheading mt-4">
                    Most operators use a separate payment app or bank terminal alongside their POS. Every day ends with manual matching of POS totals against payment gateway reports — across multiple outlets, multiple modes, multiple cashiers.
                </p>
                <div class="mt-8 space-y-3">
                    @foreach([
                        'Manual EOD matching between POS and payment app',
                        'Payment failures not reflected in POS',
                        'Refunds processed outside the billing flow',
                        'No outlet-level or cashier-level payment visibility',
                        'Month-end reconciliation taking days',
                    ] as $pain)
                    <div class="flex items-start gap-3 text-sm text-red-600 bg-red-50 rounded-xl p-3 border border-red-100">
                        <span class="text-red-400 font-bold mt-0.5 flex-shrink-0">–</span>
                        {{ $pain }}
                    </div>
                    @endforeach
                </div>
            </div>

            <div>
                <p class="section-label">With PhyloPOS payments</p>
                <h2 class="heading-md max-w-lg text-balance">
                    Payment collected. POS updated. Reconciled instantly.
                </h2>
                <p class="subheading mt-4">
                    PhyloPOS connects your payment terminal directly to the billing flow. Every transaction — UPI, card, wallet — is recorded against the bill, the cashier, and the outlet. Settlement happens automatically at day-close.
                </p>
                <div class="mt-8 space-y-3">
                    @foreach([
                        'Payment mode auto-recorded against each bill',
                        'Cashier-level payment settlement built in',
                        'Outlet-level payment reconciliation at day-close',
                        'Refunds flow back into POS records',
                        'No separate payment dashboard required',
                    ] as $benefit)
                    <div class="flex items-start gap-3 text-sm text-emerald-700 bg-emerald-50 rounded-xl p-3 border border-emerald-100">
                        <svg class="w-4 h-4 text-teal-500 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
                        </svg>
                        {{ $benefit }}
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ── Payment modes ────────────────────────────────────────────────────── --}}
<section class="section bg-white">
    <div class="container-site">
        <div class="text-center mb-14">
            <p class="section-label justify-center">Payment modes</p>
            <h2 class="heading-md max-w-xl mx-auto text-balance">
                Every payment mode your customers use.
            </h2>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach([
                ['UPI', 'Scan & pay instantly', 'credit-card'],
                ['Credit Card', 'Visa, Mastercard, Amex', 'credit-card'],
                ['Debit Card', 'All major networks', 'credit-card'],
                ['Wallets', 'Paytm, PhonePe, GPay', 'credit-card'],
                ['Cash', 'Tracked & reconciled', 'archive'],
                ['Split Pay', 'Multiple modes per bill', 'puzzle'],
            ] as [$mode, $desc, $icon])
            <div class="card p-5 text-center" data-animate>
                <div class="w-10 h-10 rounded-xl bg-teal-50 flex items-center justify-center mx-auto mb-3">
                    <svg class="w-5 h-5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        @include('components.icons.' . $icon)
                    </svg>
                </div>
                <div class="font-semibold text-graphite-900 text-sm mb-1">{{ $mode }}</div>
                <div class="text-xs text-graphite-400">{{ $desc }}</div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── Settlement dashboard mockup ──────────────────────────────────────── --}}
<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">Settlement visibility</p>
                <h2 class="heading-md text-white text-balance">
                    One view. All outlets. All payment modes. All reconciled.
                </h2>
                <p class="mt-5 text-emerald-200 leading-relaxed">
                    At day-close, every cashier submits their settlement. Every outlet's payment mode breakdown is visible from HQ. No more chasing shift supervisors for UPI totals.
                </p>
                <div class="mt-8 grid grid-cols-2 gap-4">
                    @foreach([
                        ['₹84,200', 'UPI Collected', 'text-teal-300'],
                        ['₹52,100', 'Card Collected', 'text-emerald-300'],
                        ['₹48,000', 'Cash Collected', 'text-amber-300'],
                        ['₹1,84,300', 'Total — All Modes', 'text-white font-bold'],
                    ] as [$value, $label, $cls])
                    <div class="glass rounded-xl p-5">
                        <div class="text-2xl font-bold {{ $cls }}">{{ $value }}</div>
                        <div class="text-xs text-emerald-300 mt-1">{{ $label }}</div>
                    </div>
                    @endforeach
                </div>
                <a href="{{ route('book-demo') }}" class="btn-primary-lg mt-8 inline-flex">
                    See It in Action →
                </a>
            </div>
            <div>
                @include('components.screen-mockup', ['label' => 'Payment Settlement — All Outlets', 'type' => 'dashboard'])
            </div>
        </div>
    </div>
</section>

{{-- ── Payment terminal compatibility ───────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site max-w-4xl">
        <div class="text-center mb-12">
            <p class="section-label justify-center">Compatible payment terminals</p>
            <h2 class="heading-md text-balance">Works with terminals you already have or ones we supply.</h2>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @foreach(['Pine Labs', 'Razorpay POS', 'PayU Terminal', 'HDFC SmartHub', 'SBI Exclusif', 'ICICI Kotak', 'mSwipe', 'Ingenico'] as $terminal)
            <div class="card p-4 text-center">
                <div class="w-10 h-10 rounded-lg bg-graphite-100 flex items-center justify-center mx-auto mb-2">
                    <span class="text-xs font-bold text-graphite-500">{{ strtoupper(substr($terminal, 0, 2)) }}</span>
                </div>
                <div class="text-sm text-graphite-600">{{ $terminal }}</div>
            </div>
            @endforeach
        </div>
        <p class="text-center text-sm text-graphite-400 mt-6">Don't see your terminal? Contact us — compatibility testing is free.</p>
    </div>
</section>

<x-cta-band
    title="Ready to stop reconciling payments manually?"
    sub="Book a demo of the payments flow — from collection at the counter to settlement across every outlet."
/>

@endsection