@extends('frontend.layouts.app')

@section('title', 'Services — ' . ($settings->company_name ?? 'PT. Gemilang Inti Teknologi'))

@section('content')

{{-- Page Header --}}
<section class="page-header relative overflow-hidden" style="background:linear-gradient(145deg,#ffffff 0%,#fff5f5 100%);">
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div class="absolute -top-32 -right-32 w-96 h-96 rounded-full" style="background:radial-gradient(circle,rgba(204,21,18,.06),transparent 65%);"></div>
        <svg class="absolute top-0 right-0 w-64 h-64 opacity-[.03]" viewBox="0 0 200 200"><defs><pattern id="sp" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.5" fill="#CC1512"/></pattern></defs><rect width="200" height="200" fill="url(#sp)"/></svg>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center" data-aos="fade-up">
        <div class="badge-primary mb-4 justify-center">What We Offer</div>
        <h1 class="text-4xl md:text-5xl font-black text-neutral-900 mb-4" style="font-family:'Sora',sans-serif;">Our Services</h1>
        <p class="text-neutral-500 max-w-2xl mx-auto">Comprehensive technology solutions designed to solve real business challenges — from rapid MVP to enterprise-scale software.</p>
    </div>
    <svg viewBox="0 0 1440 56" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="w-full block" style="height:56px;display:block;margin-top:3rem;margin-bottom:-1px;">
        <path d="M0,56 C480,0 960,0 1440,56 L1440,56 L0,56 Z" fill="#ffffff"/>
    </svg>
</section>

{{-- Services Grid --}}
<section class="py-16 bg-white" style="margin-top:-1px;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($services as $index => $service)
            <div class="group bg-white rounded-2xl p-7 border border-neutral-200 hover:border-red-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden"
                 data-aos="fade-up" data-aos-delay="{{ min(($index%3)*80,200) }}">
                <div class="absolute top-0 left-0 right-0 h-0.5 gradient-primary opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>

                <div class="w-12 h-12 rounded-xl gradient-primary flex items-center justify-center mb-5 shadow-md">
                    <div style="width:22px;height:22px;color:white;">
                        @include('frontend.partials.icon',['icon'=>$service->icon??'code'])
                    </div>
                </div>

                <div class="flex items-start justify-between mb-3">
                    <h3 class="text-lg font-bold text-neutral-900 group-hover:text-red-600 transition-colors leading-tight">{{ $service->title }}</h3>
                    @if($service->is_featured)
                    <span class="ml-3 px-2 py-0.5 rounded-full text-xs font-bold bg-red-50 text-red-600 border border-red-200 flex-shrink-0">Featured</span>
                    @endif
                </div>

                <p class="text-neutral-500 text-sm leading-relaxed mb-5">{{ $service->description }}</p>

                @if($service->features && count(array_filter($service->features)) > 0)
                <ul class="space-y-2 pt-4 border-t border-neutral-100">
                    @foreach(array_filter($service->features) as $feat)
                    <li class="flex items-center gap-2 text-sm text-neutral-600">
                        <svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        {{ $feat }}
                    </li>
                    @endforeach
                </ul>
                @endif
            </div>
            @empty
            <div class="col-span-full text-center py-16">
                <p class="text-neutral-400">No services available at the moment.</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

{{-- CTA --}}
<section class="py-16 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="rounded-3xl overflow-hidden" style="background:linear-gradient(135deg,#CC1512 0%,#e83030 100%);">
            <div class="px-8 py-12 md:px-14 md:py-16 text-center relative overflow-hidden" data-aos="fade-up">
                <svg class="absolute right-0 top-0 opacity-10 w-48 h-48" viewBox="0 0 200 200"><defs><pattern id="csdots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.5" fill="white"/></pattern></defs><rect width="200" height="200" fill="url(#csdots)"/></svg>
                <h2 class="text-2xl md:text-3xl font-black text-white mb-3 relative" style="font-family:'Sora',sans-serif;">Need a Custom Solution?</h2>
                <p class="text-red-100 text-sm max-w-md mx-auto mb-7 relative">Tell us about your specific requirements and our team will build the perfect solution for your business.</p>
                <a href="{{ route('contact') }}" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-white text-red-600 font-bold text-sm hover:bg-red-50 transition-all shadow-lg relative">
                    Get In Touch
                    <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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
            </div>
        </div>
    </div>
</section>

@endsection