@extends('layouts.app')

@section('title', 'Goco Technology — Our Services')
@section('meta_description', "Explore Goco Technology's core IT services: Custom Software Development, Mobile App Development, and Strategic IT Consulting.")
@section('meta_keywords', 'Goco Technology Services, Custom Software Development, Mobile App Development, IT Consulting')
@section('html_class', 'heading-black')

@section('content')

    <!-- Page Banner / Breadcrumb -->
    <section class="breadcrumb section-bg-two mb-0 py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <h1 class="mb-0 splitTextStyleOne text-capitalize">Our Core IT Services</h1>
                    <p class="text-neutral-500 tw-mt-4 tw-text-lg">Empowering digital transformation through tailored software, mobile engineering, and expert advisory.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="py-120 bg-neutral-50">
        <div class="container">
            <div class="row gy-5">
                <!-- Service 1 -->
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-duration="600">
                    <div class="bg-white tw-p-8 tw-rounded-2xl common-shadow-thirteen h-100 d-flex flex-column justify-content-between border border-neutral-100 hover-border-main-600 tw-duration-300 position-relative">
                        <div>
                            <div class="tw-w-16 tw-h-16 bg-main-50 text-main-600 rounded-circle d-flex justify-content-center align-items-center tw-text-3xl tw-mb-6">
                                <i class="ph-bold ph-code-block"></i>
                            </div>
                            <h4 class="tw-mb-4"><a href="{{ route('services.custom-software') }}" class="text-slate-900 text-decoration-none">Custom Software Development</a></h4>
                            <p class="text-neutral-600 tw-text-base">Bespoke web applications, automated workflows, and enterprise SaaS solutions engineered for reliability, security, and scalability.</p>
                        </div>
                        <div class="tw-mt-8">
                            <a href="{{ route('services.custom-software') }}" class="text-main-600 fw-bold d-inline-flex align-items-center tw-gap-2 hover-text-main-800 stretched-link">
                                Learn More <i class="ph-bold ph-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Service 2 -->
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-duration="800">
                    <div class="bg-white tw-p-8 tw-rounded-2xl common-shadow-thirteen h-100 d-flex flex-column justify-content-between border border-neutral-100 hover-border-main-600 tw-duration-300 position-relative">
                        <div>
                            <div class="tw-w-16 tw-h-16 bg-main-50 text-main-600 rounded-circle d-flex justify-content-center align-items-center tw-text-3xl tw-mb-6">
                                <i class="ph-bold ph-device-mobile"></i>
                            </div>
                            <h4 class="tw-mb-4"><a href="{{ route('services.mobile-app') }}" class="text-slate-900 text-decoration-none">Mobile App Development</a></h4>
                            <p class="text-neutral-600 tw-text-base">High-performance iOS & Android applications with seamless UI/UX, real-time data sync, and secure cloud infrastructure integration.</p>
                        </div>
                        <div class="tw-mt-8">
                            <a href="{{ route('services.mobile-app') }}" class="text-main-600 fw-bold d-inline-flex align-items-center tw-gap-2 hover-text-main-800 stretched-link">
                                Learn More <i class="ph-bold ph-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Service 3 -->
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-duration="1000">
                    <div class="bg-white tw-p-8 tw-rounded-2xl common-shadow-thirteen h-100 d-flex flex-column justify-content-between border border-neutral-100 hover-border-main-600 tw-duration-300 position-relative">
                        <div>
                            <div class="tw-w-16 tw-h-16 bg-main-50 text-main-600 rounded-circle d-flex justify-content-center align-items-center tw-text-3xl tw-mb-6">
                                <i class="ph-bold ph-lightbulb"></i>
                            </div>
                            <h4 class="tw-mb-4"><a href="{{ route('services.it-consulting') }}" class="text-slate-900 text-decoration-none">IT Consulting</a></h4>
                            <p class="text-neutral-600 tw-text-base">Strategic technology roadmapping, cloud migration advisory, security audits, and system architecture optimization for modern enterprises.</p>
                        </div>
                        <div class="tw-mt-8">
                            <a href="{{ route('services.it-consulting') }}" class="text-main-600 fw-bold d-inline-flex align-items-center tw-gap-2 hover-text-main-800 stretched-link">
                                Learn More <i class="ph-bold ph-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection