@extends('layouts.app')

@section('content')

<x-page-hero
    label="Solutions"
    title="One platform. Purpose-built for every type of operation."
    subtitle="Whether you run a single neighbourhood café or a 50-outlet restaurant chain, PhyloPOS has a deployment model, feature set, and hardware stack designed for your scale and operational complexity."
    cta1="Book a Demo"
    cta2="Compare Plans"
    :cta2url="route('pricing')"
/>

<section class="section bg-surface">
    <div class="container-site">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach(config('phylopos.industries') as $industry)
            <a href="{{ $industry['url'] }}"
               class="card-hover p-8 group flex flex-col gap-5" data-animate>
                <div class="w-14 h-14 rounded-xl2 bg-emerald-50 flex items-center justify-center
                            group-hover:bg-emerald-900 transition-all duration-300">
                    <svg class="w-7 h-7 text-emerald-800 group-hover:text-amber-300 transition-colors"
                         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        @include('components.icons.' . $industry['icon'])
                    </svg>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-graphite-900 mb-2 group-hover:text-emerald-900 transition-colors">
                        {{ $industry['title'] }}
                    </h2>
                    <p class="text-graphite-500 leading-relaxed text-sm">{{ $industry['description'] }}</p>
                </div>
                <div class="flex items-center gap-1.5 text-teal-500 font-semibold text-sm mt-auto">
                    Learn more
                    <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </a>
            @endforeach

            {{-- Franchise card --}}
            <a href="{{ route('solutions.franchise') }}"
               class="card-hover p-8 group flex flex-col gap-5" data-animate>
                <div class="w-14 h-14 rounded-xl2 bg-amber-50 flex items-center justify-center
                            group-hover:bg-amber-500 transition-all duration-300">
                    <svg class="w-7 h-7 text-amber-600 group-hover:text-graphite-900 transition-colors"
                         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        @include('components.icons.globe')
                    </svg>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-graphite-900 mb-2 group-hover:text-emerald-900 transition-colors">
                        Franchise Networks
                    </h2>
                    <p class="text-graphite-500 leading-relaxed text-sm">
                        Give franchisors full visibility and franchisees operational autonomy. Standardise brand, pricing, and reporting across the network.
                    </p>
                </div>
                <div class="flex items-center gap-1.5 text-teal-500 font-semibold text-sm mt-auto">
                    Learn more
                    <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </a>
        </div>
    </div>
</section>

@include('components.integrations-strip')
<x-cta-band title="Not sure which solution fits?" sub="Tell us your business type and we will walk you through the right setup, feature set, and hardware bundle." />

@endsection