@extends('layouts.app')

@section('content')

<x-page-hero
    label="Pricing"
    title="Flexible pricing for single stores and multi-outlet chains."
    subtitle="Per-outlet pricing with software, support, and optional hardware and payment bundles. Talk to us about chain and enterprise packages."
    cta1="Talk to Sales"
    :cta1url="route('contact')"
    cta2="Book a Demo"
    :cta2url="route('book-demo')"
/>

<section class="section bg-surface">
    <div class="container-site">

        {{-- Tier cards --}}
        <div class="grid md:grid-cols-3 gap-6 mb-16">
            @foreach([
                [
                    'tier'     => 'Starter',
                    'tagline'  => 'Single restaurant, café, or retail store',
                    'price'    => 'Plans from',
                    'for'      => 'Perfect for single-location operators',
                    'features' => [
                        'Full POS & billing',
                        'Table or barcode billing',
                        'Basic inventory & purchase tracking',
                        'Daily sales & cashier reports',
                        'UPI, card, and cash support',
                        '1 terminal licence',
                        'Email + chat support',
                    ],
                    'highlight' => false,
                    'cta'      => 'Get a Quote',
                ],
                [
                    'tier'     => 'Growth',
                    'tagline'  => '2–15 outlet chains — restaurant or retail',
                    'price'    => 'Per outlet',
                    'for'      => 'Most popular for growing chains',
                    'features' => [
                        'Everything in Starter',
                        'Central menu control',
                        'Outlet-wise pricing',
                        'Inventory across outlets',
                        'Role-based permissions',
                        'Chain reporting & outlet comparison',
                        'Payment reconciliation',
                        'Aggregator integration (Zomato/Swiggy)',
                        'Priority support',
                    ],
                    'highlight' => true,
                    'cta'      => 'Talk to Sales',
                ],
                [
                    'tier'     => 'Enterprise',
                    'tagline'  => '15+ outlets — chains, franchises, groups',
                    'price'    => 'Custom',
                    'for'      => 'Tailored for large and complex operations',
                    'features' => [
                        'Everything in Growth',
                        'Central kitchen / commissary module',
                        'Franchise control layer',
                        'Custom reporting & data exports',
                        'API and webhook access',
                        'Dedicated implementation support',
                        'SLA-backed uptime',
                        'On-site training',
                        'Hardware bundle pricing',
                    ],
                    'highlight' => false,
                    'cta'      => 'Contact Sales',
                ],
            ] as $tier)
            <div class="card p-8 flex flex-col
                        {{ $tier['highlight'] ? 'ring-2 ring-emerald-900 shadow-card-hover' : '' }}"
                 data-animate>
                @if($tier['highlight'])
                <div class="badge-emerald mb-4 self-start">Most popular</div>
                @endif
                <h3 class="font-bold text-graphite-900 text-xl mb-1">{{ $tier['tier'] }}</h3>
                <p class="text-sm text-graphite-500 mb-5">{{ $tier['tagline'] }}</p>
                <div class="mb-6">
                    <div class="text-xs text-graphite-400">{{ $tier['price'] }}</div>
                    <div class="text-3xl font-bold text-emerald-900 mt-1">Contact us</div>
                    <div class="text-xs text-graphite-400 mt-1">for current pricing</div>
                </div>
                <ul class="space-y-2.5 flex-1 mb-8">
                    @foreach($tier['features'] as $feature)
                    <li class="feature-check">
                        <div class="feature-check-icon">
                            <svg class="w-3 h-3" 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>
                        <span>{{ $feature }}</span>
                    </li>
                    @endforeach
                </ul>
                <a href="{{ route('contact') }}"
                   class="{{ $tier['highlight'] ? 'btn-primary-lg' : 'btn-outline-emerald' }} w-full justify-center">
                    {{ $tier['cta'] }}
                </a>
            </div>
            @endforeach
        </div>

        {{-- Add-ons --}}
        <div class="card p-8 bg-graphite-50 border-graphite-100">
            <h3 class="font-bold text-graphite-900 text-lg mb-6">Available add-ons</h3>
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
                @foreach([
                    ['Hardware Bundle',      'Terminals, printers, KDS, scanners — quoted per configuration.'],
                    ['Payment Integration',  'Connect card and UPI terminals to your billing flow.'],
                    ['Additional Terminals', 'Add terminal licences per outlet as your counter count grows.'],
                    ['Custom Integration',   'API or webhook integration with your ERP, CRM, or accounting tool.'],
                ] as [$title, $desc])
                <div class="bg-white rounded-xl p-5 border border-graphite-100">
                    <h4 class="font-semibold text-graphite-900 mb-2 text-sm">{{ $title }}</h4>
                    <p class="text-xs text-graphite-500 leading-relaxed">{{ $desc }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- ── FAQ ─────────────────────────────────────────────────────────────── --}}
<x-faq :items="[
    ['q' => 'Is pricing per outlet or per terminal?', 'a' => 'Pricing is primarily per outlet. Additional terminal licences are available at a marginal cost for high-throughput counters. Contact us to discuss your specific setup.'],
    ['q' => 'Is hardware included in the software price?', 'a' => 'Hardware is priced separately. We offer configured bundles by business type — starter, restaurant floor, multi-outlet, and retail counter. You can also use compatible hardware you already own.'],
    ['q' => 'Do you charge per transaction or take a cut of payments?', 'a' => 'No. PhyloPOS is a flat-fee software platform. Payment gateway fees are charged by your payment provider, not by us.'],
    ['q' => 'Can I start with one outlet and add more later?', 'a' => 'Yes. Most customers start with a single-outlet deployment and move to the Growth plan as they expand. We handle the migration and additional outlet configuration.'],
    ['q' => 'Is there a setup or implementation fee?', 'a' => 'Implementation support is included for most deployments. For large chains or complex custom configurations, a scoped implementation engagement may apply. We discuss this upfront.'],
    ['q' => 'What does support look like?', 'a' => 'All plans include email and chat support. Growth and Enterprise customers get priority response SLAs. Enterprise customers get a dedicated implementation and support contact.'],
]" />

<x-cta-band
    title="Not sure which plan fits your operation?"
    sub="Talk to us. We will recommend the right tier, add-ons, and hardware configuration for your business type and outlet count."
    cta1="Talk to Sales"
    :cta1url="route('contact')"
    cta2="Book a Demo"
    :cta2url="route('book-demo')"
/>

@endsection