@extends('layouts.app')

@section('content')

<x-page-hero
    label="Customers"
    title="Operators who run on PhyloPOS."
    subtitle="From single cafés to 22-store retail chains and cloud kitchen groups — see how teams across restaurant and retail use PhyloPOS to operate more efficiently."
    cta1="Book a Demo"
    cta2="Contact Sales"
    :cta2url="route('contact')"
/>

{{-- ── Segment filter + testimonials ───────────────────────────────────── --}}
<section class="section bg-surface">
    <div class="container-site">

        {{-- Filter pills --}}
        <div x-data="{ active: 'all' }" class="mb-10">
            <div class="flex flex-wrap gap-2 justify-center mb-10">
                @foreach(['all' => 'All', 'Restaurant Chain' => 'Restaurant Chains', 'Single Restaurant' => 'Cafés & Restaurants', 'Cloud Kitchen' => 'Cloud Kitchens', 'Retail Chain' => 'Retail Chains'] as $key => $label)
                <button @click="active = '{{ $key }}'"
                        class="px-4 py-2 rounded-full text-sm font-medium transition-all"
                        :class="active === '{{ $key }}'
                            ? 'bg-emerald-900 text-white shadow-sm'
                            : 'bg-white border border-graphite-200 text-graphite-600 hover:border-teal-300 hover:text-teal-600'">
                    {{ $label }}
                </button>
                @endforeach
            </div>

            <div class="grid md:grid-cols-2 gap-6">
                @foreach(config('phylopos.testimonials') as $t)
                <div class="testimonial-card"
                     x-show="active === 'all' || active === '{{ $t['segment'] }}'">
                    <div class="flex gap-1 mb-2">
                        @for($i = 0; $i < 5; $i++)
                        <svg class="w-4 h-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        @endfor
                    </div>
                    <blockquote class="text-graphite-700 italic leading-relaxed">"{{ $t['quote'] }}"</blockquote>
                    <div class="flex items-center gap-3 mt-auto pt-4 border-t border-graphite-100">
                        <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-900 font-bold text-sm flex-shrink-0">
                            {{ strtoupper(substr($t['name'], 0, 1)) }}
                        </div>
                        <div>
                            <div class="text-sm font-semibold text-graphite-900">{{ $t['name'] }}</div>
                            <div class="text-xs text-graphite-500">{{ $t['title'] }}, {{ $t['company'] }}</div>
                        </div>
                        <span class="ml-auto badge-emerald">{{ $t['segment'] }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- ── Results section ──────────────────────────────────────────────────── --}}
<section class="section bg-emerald-900 bg-subtle-grid">
    <div class="container-site text-center">
        <p class="section-label text-teal-300 justify-center mb-5">Operational outcomes</p>
        <h2 class="heading-md text-white text-balance max-w-2xl mx-auto mb-12">
            What operators report after six months on PhyloPOS.
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            @foreach([
                ['30%', 'Faster billing at peak hours'],
                ['25%', 'Reduction in kitchen errors'],
                ['40%', 'Less time on EOD reconciliation'],
                ['2 hrs', 'Saved per day in manual management'],
            ] as [$value, $label])
            <div class="glass rounded-xl3 p-7">
                <div class="text-4xl font-bold text-amber-400 mb-2">{{ $value }}</div>
                <div class="text-sm text-emerald-200 leading-relaxed">{{ $label }}</div>
            </div>
            @endforeach
        </div>
        <p class="text-xs text-emerald-400 mt-6">Based on customer feedback. Results vary by business type and configuration.</p>
    </div>
</section>

<x-cta-band title="Ready to see what PhyloPOS can do for your operation?" sub="Book a tailored demo. Tell us your business type and we will show you exactly what matters for your setup." />

@endsection