{% extends "base.html" %}

{% block title %}Services{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Services</h1>
            <p class="text-xl text-primary-100 max-w-2xl mx-auto">
                Comprehensive software solutions tailored to your business needs.
                From development to deployment, we've got you covered.
            </p>
        </div>
    </div>
</section>

<!-- Services Grid -->
<section class="py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Web Development -->
            <div class="card hover:shadow-lg transition-shadow">
                <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                </div>
                <h3 class="text-2xl font-semibold text-gray-900 mb-3">Web Development</h3>
                <p class="text-gray-600 mb-4">
                    Modern, responsive websites and web applications built with the latest technologies.
                    From simple landing pages to complex enterprise platforms.
                </p>
                <ul class="text-gray-600 space-y-2">
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Custom web applications
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        E-commerce solutions
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Progressive Web Apps (PWAs)
                    </li>
                </ul>
            </div>

            <!-- API Development -->
            <div class="card hover:shadow-lg transition-shadow">
                <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
                <h3 class="text-2xl font-semibold text-gray-900 mb-3">API Development</h3>
                <p class="text-gray-600 mb-4">
                    Robust, scalable APIs that power your applications and enable seamless integrations
                    with third-party services.
                </p>
                <ul class="text-gray-600 space-y-2">
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        RESTful API design
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        GraphQL implementations
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Third-party integrations
                    </li>
                </ul>
            </div>

            <!-- Cloud Solutions -->
            <div class="card hover:shadow-lg transition-shadow">
                <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                    </svg>
                </div>
                <h3 class="text-2xl font-semibold text-gray-900 mb-3">Cloud Solutions</h3>
                <p class="text-gray-600 mb-4">
                    Leverage the power of cloud computing with our expertise in AWS, Azure, and
                    Google Cloud Platform.
                </p>
                <ul class="text-gray-600 space-y-2">
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Cloud architecture design
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Migration services
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        DevOps & CI/CD pipelines
                    </li>
                </ul>
            </div>

            <!-- Consulting -->
            <div class="card hover:shadow-lg transition-shadow">
                <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                    </svg>
                </div>
                <h3 class="text-2xl font-semibold text-gray-900 mb-3">Technical Consulting</h3>
                <p class="text-gray-600 mb-4">
                    Expert guidance on technology strategy, architecture decisions, and best practices
                    for your development team.
                </p>
                <ul class="text-gray-600 space-y-2">
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Technology assessment
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Code reviews & audits
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-primary-600 mr-2" 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>
                        Team training
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Process Section -->
<section class="bg-gray-100 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Process</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                A structured approach that ensures quality delivery and client satisfaction.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                    1
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Discovery</h3>
                <p class="text-gray-600">Understanding your requirements, goals, and challenges.</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                    2
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Planning</h3>
                <p class="text-gray-600">Designing the architecture and creating a detailed roadmap.</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                    3
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Development</h3>
                <p class="text-gray-600">Building your solution with regular updates and feedback cycles.</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                    4
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Delivery</h3>
                <p class="text-gray-600">Testing, deployment, and ongoing support.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold text-gray-900 mb-4">Ready to Get Started?</h2>
        <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
            Whether you have a specific project in mind or need help defining your requirements,
            we're here to help. Let's discuss how we can work together.
        </p>
        <a href="{{ url_for('contact') }}" class="btn btn-accent px-8 py-3 text-lg">
            Request a Consultation
        </a>
    </div>
</section>
{% endblock %}