{% extends "base.html" %}

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

{% block content %}

<!-- Hero -->
<section class="relative py-28 overflow-hidden">
    <div class="absolute inset-0 dot-grid opacity-30 pointer-events-none"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[400px] pointer-events-none"
         style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>

    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="badge badge-primary mb-6">What We Do</div>
        <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
            Our <span class="gradient-text">Services</span>
        </h1>
        <p class="text-lg max-w-2xl mx-auto" style="color: #8b8ca8;">
            Comprehensive software solutions tailored to your business needs — from development to deployment.
        </p>
    </div>
</section>

<!-- Services Grid -->
<section class="py-20" style="background: #0a0a14;">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

            {% set services = [
                {
                    'icon': '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',
                    'title': 'Web Development',
                    'desc': 'Modern, responsive websites and web applications built with the latest technologies. From simple landing pages to complex enterprise platforms.',
                    'features': ['Custom web applications', 'E-commerce solutions', 'Progressive Web Apps (PWAs)'],
                    'accent': 'primary'
                },
                {
                    'icon': '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',
                    'title': 'API Development',
                    'desc': 'Robust, scalable APIs that power your applications and enable seamless integrations with third-party services.',
                    'features': ['RESTful API design', 'GraphQL implementations', 'Third-party integrations'],
                    'accent': 'accent'
                },
                {
                    'icon': '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',
                    'title': 'Cloud Solutions',
                    'desc': 'Leverage the power of cloud computing with our expertise in AWS, Azure, and Google Cloud Platform.',
                    'features': ['Cloud architecture design', 'Migration services', 'DevOps & CI/CD pipelines'],
                    'accent': 'accent'
                },
                {
                    'icon': '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',
                    'title': 'Technical Consulting',
                    'desc': 'Expert guidance on technology strategy, architecture decisions, and best practices for your development team.',
                    'features': ['Technology assessment', 'Code reviews & audits', 'Team training'],
                    'accent': 'primary'
                },
            ] %}

            {% for svc in services %}
            <div class="card-hover p-8">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-6 flex-shrink-0"
                     style="background: rgba({% if svc.accent == 'accent' %}34,211,238{% else %}124,58,237{% endif %},0.1); border: 1px solid rgba({% if svc.accent == 'accent' %}34,211,238{% else %}124,58,237{% endif %},0.25);">
                    <svg class="w-6 h-6 {% if svc.accent == 'accent' %}text-accent-400{% else %}text-primary-400{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ svc.icon }}" />
                    </svg>
                </div>
                <h3 class="text-xl font-bold mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">{{ svc.title }}</h3>
                <p class="text-sm leading-relaxed mb-6" style="color: #8b8ca8;">{{ svc.desc }}</p>
                <ul class="space-y-2.5">
                    {% for item in svc.features %}
                    <li class="flex items-center gap-3 text-sm" style="color: #c4c2d4;">
                        <div class="w-1.5 h-1.5 rounded-full flex-shrink-0 {% if svc.accent == 'accent' %}bg-accent-400{% else %}bg-primary-400{% endif %}"></div>
                        {{ item }}
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}

        </div>
    </div>
</section>

<!-- Process -->
<section class="py-24 relative">
    <div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <div class="badge badge-primary mb-5">How We Work</div>
            <h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
                A process built for<br><span class="gradient-text">results</span>
            </h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
            <!-- Connector line -->
            <div class="hidden md:block absolute top-9 left-[12.5%] right-[12.5%] h-px"
                 style="background: linear-gradient(90deg, rgba(92,184,44,0.5), rgba(247,147,30,0.5));"></div>

            {% set steps = [
                ('01', 'Discovery', 'Understanding your requirements, goals, and challenges.'),
                ('02', 'Planning', 'Designing the architecture and creating a detailed roadmap.'),
                ('03', 'Development', 'Building your solution with regular updates and feedback cycles.'),
                ('04', 'Delivery', 'Testing, deployment, and ongoing support.'),
            ] %}
            {% for num, title, desc in steps %}
            <div class="text-center relative">
                <div class="w-[72px] h-[72px] mx-auto mb-5 rounded-xl flex items-center justify-center relative z-10"
                     style="background: #0f0f1a; border: 1px solid rgba(92,184,44,0.4); box-shadow: 0 0 20px rgba(92,184,44,0.12);">
                    <span class="text-xl font-extrabold gradient-text" style="font-family: 'Syne', sans-serif;">{{ num }}</span>
                </div>
                <h3 class="text-base font-bold mb-2" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">{{ title }}</h3>
                <p class="text-sm" style="color: #8b8ca8;">{{ desc }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-20" style="background: #0a0a14;">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-4" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
            Ready to get <span class="gradient-text">started?</span>
        </h2>
        <p class="text-base mb-8" style="color: #8b8ca8;">
            Whether you have a specific project in mind or need help defining your requirements, we're here to help.
        </p>
        <a href="{{ url_for('contact') }}" class="btn btn-primary px-10 py-3.5 text-base">
            Request a Consultation
            <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"/>
            </svg>
        </a>
    </div>
</section>

{% endblock %}