@extends('layouts.app')
@php $active_page = 'services'; @endphp



@section('content')
<main>
    <!-- Hero Section -->
    <section class="relative pt-32 pb-20 bg-slate-50 overflow-hidden">
        <div class="absolute inset-0">
            <div class="absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-brand-primary/5 blur-3xl"></div>
            <div class="absolute top-[40%] -left-[10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-3xl"></div>
        </div>
        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/10 text-brand-primary text-xs font-bold uppercase tracking-wider mb-6">
                    {{ $settings['services_hero_tagline'] ?? 'Our Expertise' }}
                </div>
                <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 leading-tight">
                    {!! $settings['services_hero_headline'] ?? 'Comprehensive <span class="text-brand-primary">Services</span>' !!}
                </h1>
                <p class="text-lg text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
                    {{ $settings['services_hero_subtext'] ?? 'Discover the full spectrum of solutions we offer, tailored to meet the diverse needs of modern businesses and communities.' }}
                </p>
            </div>
        </div>
    </section>

    <!-- All Services List -->
    <section class="py-24 bg-white" x-data="servicesPageData">
        <div class="container mx-auto px-6 reveal">
            <!-- Search Bar -->
            <div class="max-w-xl mx-auto mb-16 relative">
                <div class="relative">
                    <svg class="w-6 h-6 text-slate-400 absolute left-4 top-1/2 transform -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    <input type="text" x-model="searchQuery" placeholder="Search services (e.g., 'Design', 'Construction', 'IT')..." class="w-full pl-14 pr-6 py-4 bg-slate-50 border border-slate-200 rounded-full focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition shadow-sm text-slate-700 placeholder-slate-400">
                    <button x-show="searchQuery.length > 0" @click="searchQuery = ''" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-brand-secondary transition">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
            </div>
            
            <div x-show="filteredDivisions.length === 0" class="text-center text-slate-500 py-12" x-cloak>No services found matching your search.</div>
            <div class="grid gap-12">
                <template x-for="(div, index) in filteredDivisions" :key="index">
                    <div class="flex flex-col lg:flex-row gap-8 lg:gap-16 border-b border-slate-100 pb-12 last:border-0">
                        <div class="lg:w-1/3">
                            <div class="w-12 h-12 rounded-xl bg-brand-light text-brand-primary flex items-center justify-center mb-4 p-2.5">
                                <div class="w-full h-full" x-html="div.icon"></div>
                            </div>
                            <h2 class="text-2xl font-bold text-slate-900 mb-3" x-text="div.title"></h2>
                            <p class="text-slate-600 mb-6 leading-relaxed" x-text="div.desc"></p>
                            <a :href="'{{ url('division') }}/' + div.id" class="inline-flex items-center font-bold text-brand-primary hover:text-brand-accent transition">
                                View Division Page <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                            </a>
                        </div>
                        <div class="lg:w-2/3">
                            <h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-6">Key Services</h3>
                            <div class="grid md:grid-cols-2 gap-4">
                                <template x-for="service in div.services">
                                    <div class="flex items-center p-4 rounded-lg bg-slate-50 border border-slate-100 hover:border-brand-accent/30 hover:bg-brand-light/30 transition">
                                        <div class="w-8 h-8 rounded-full bg-white text-brand-accent flex items-center justify-center mr-4 shadow-sm shrink-0">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                        </div>
                                        <span class="font-medium text-slate-800" x-text="service"></span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-brand-dark text-white">
        <div class="container mx-auto px-6 text-center reveal">
            <h2 class="text-3xl font-bold mb-6">{{ $settings['services_cta_heading'] ?? 'Need a Custom Solution?' }}</h2>
            <p class="text-slate-300 mb-8 max-w-2xl mx-auto">{{ $settings['services_cta_text'] ?? 'We understand that every project is unique. Contact us to discuss your specific requirements.' }}</p>
            <a href="{{ route('contact') }}" class="inline-block px-8 py-4 bg-brand-primary text-white font-bold rounded-full hover:bg-brand-accent transition shadow-lg shadow-brand-primary/30 border border-white/10">Get a Quote</a>
        </div>
    </section>
</main>
@endsection

@push('extra_scripts')
@php
    $divisionsJson = $divisions->map(function($d) {
        return [
            'id' => $d->id,
            'title' => $d->title,
            'desc' => $d->description,
            'icon' => \App\Helpers\SvgHelper::sanitize($d->icon ?? ''),
            'services' => array_map('trim', explode(',', $d->services ?? ''))
        ];
    })->toArray();
@endphp
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('servicesPageData', () => ({
            searchQuery: '',
            get filteredDivisions() {
                if (this.searchQuery === '') return this.divisions;
                const query = this.searchQuery.toLowerCase();
                return this.divisions.map(div => {
                    const titleMatch = div.title.toLowerCase().includes(query);
                    const descMatch = div.desc.toLowerCase().includes(query);
                    const serviceMatches = div.services.filter(s => s.toLowerCase().includes(query));
                    
                    if (titleMatch || descMatch) return div;
                    if (serviceMatches.length > 0) return { ...div, services: serviceMatches };
                    return null;
                }).filter(d => d !== null);
            },
            divisions: @json($divisionsJson)
        }));
    });
</script>
@endpush
