@extends('layouts.app')

@section('content')

<x-page-hero
    label="About PhyloPOS"
    title="Built by people who have seen what operational chaos actually costs."
    subtitle="PhyloPOS was built because most growing restaurant and retail operators outgrow disconnected tools faster than they expect — and the cost of patching things together is invisible until it isn't."
    cta1="Book a Demo"
    cta2="Talk to Sales"
    :cta2url="route('contact')"
/>

{{-- ── Why it exists ────────────────────────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site max-w-4xl">
        <div class="prose max-w-none text-graphite-700 leading-relaxed">
            <div class="grid md:grid-cols-2 gap-10 mb-16">
                <div>
                    <h2 class="heading-sm text-graphite-900 mb-4">Why PhyloPOS exists</h2>
                    <p class="mb-4">
                        Most restaurant and retail software is built for one thing — billing. But the real operational cost for a growing business isn't at the billing counter. It is in the gap between billing and inventory, between kitchen and floor, between outlet performance and the spreadsheet your area manager maintains at 11 PM.
                    </p>
                    <p>
                        PhyloPOS was built to close those gaps. Not with integrations that partially work, but with a connected platform where billing, inventory, kitchen operations, hardware, and payments are designed to work together from day one.
                    </p>
                </div>
                <div>
                    <h2 class="heading-sm text-graphite-900 mb-4">India-ready. Globally informed.</h2>
                    <p class="mb-4">
                        We built PhyloPOS for the on-ground reality of Indian restaurants and retail — UPI-first payments, GST-compliant reporting, aggregator integrations, Hindi-language support for kitchen staff, and deployments that work on variable connectivity.
                    </p>
                    <p>
                        At the same time, we track global POS best practice — from Toast and Square in the US to Lightspeed in Europe — and bring the structural rigour of enterprise POS to businesses that need it but cannot afford the complexity.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ── Principles ────────────────────────────────────────────────────────── --}}
<section class="section bg-white">
    <div class="container-site">
        <div class="text-center mb-12">
            <p class="section-label justify-center">How we operate</p>
            <h2 class="heading-md text-balance">The principles we build by.</h2>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach([
                ['Operations first',   'Every feature is evaluated by how it changes what a cashier, manager, or owner actually does on the ground — not by how it looks in a demo.', 'lightning'],
                ['Deployment matters', 'Software that is hard to deploy is software that doesn\'t work. We obsess over time to live, staff training curve, and hardware setup.', 'cpu'],
                ['Security by default','Forms, data, and admin access are hardened from day one. We treat operator data as if it were financial data.', 'shield'],
                ['Reliability is non-negotiable', 'Billing downtime costs money every minute. Our uptime SLA, local-first architecture, and offline resilience reflect that.', 'wifi'],
                ['Honest pricing',     'No percentage of transactions. No hidden add-on fees. No bait-and-switch on features. Flat licence. Clear scope.', 'document'],
                ['Support that works', 'Your business doesn\'t stop at 5 PM. Neither does our support team. Chat, call, or escalate — we respond.', 'phone'],
            ] as [$title, $desc, $icon])
            <div class="card p-7" data-animate>
                <div class="w-11 h-11 rounded-xl bg-emerald-900 flex items-center justify-center mb-4">
                    <svg class="w-5 h-5 text-amber-400" 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>

{{-- ── Proof stats ──────────────────────────────────────────────────────── --}}
@include('components.proof-strip')

<x-cta-band title="Want to understand if PhyloPOS is the right fit?" sub="Book a call with our team. No pressure. We will tell you honestly what PhyloPOS does well — and where it might not be the right fit." />

@endsection