{% extends "public/base.html" %}
{% load static %}

{% block title %}{{ service.title }} — {{ site.site_name }}{% endblock %}
{% block meta_description %}{{ service.description|truncatechars:160 }}{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>{{ service.title }}</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section" style="padding-bottom:3rem;">
        <div class="hero-container">
            <div class="row grid-spacer-2" style="align-items:flex-start;">

                <div class="col-lg-8">

                    <div style="border-left:3px solid #ff404b;padding:.85rem 1.1rem;margin-bottom:1.75rem;background:rgba(255,64,75,.06);border-radius:0 8px 8px 0;">
                        <p class="secondary-accent" style="margin:0;font-size:.95rem;line-height:1.7;">{{ service.description }}</p>
                    </div>

                    {% if service.body %}
                    <div class="blog-body">
                        {{ service.body|safe }}
                    </div>
                    {% endif %}

                </div>

                <div class="col-lg-4">
                    <div style="position:sticky;top:100px;display:flex;flex-direction:column;gap:1.5rem;">

                        {% if related %}
                        <div style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.25rem;">
                            <h6 class="accent-color mb-3" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;">Other Services</h6>
                            {% for s in related %}
                            <a href="{% url 'service_detail' s.slug %}" style="text-decoration:none;display:block;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.07);">
                                <div class="secondary-accent fw-semibold" style="font-size:.88rem;line-height:1.4;margin-bottom:.2rem;">{{ s.title }}</div>
                                <small class="secondary-accent" style="opacity:.55;">{{ s.description|truncatechars:60 }}</small>
                            </a>
                            {% endfor %}
                        </div>
                        {% endif %}

                        <div style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.25rem;text-align:center;">
                            <h6 class="accent-color mb-1" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;">Turn Your Idea Into Reality</h6>
                            <p class="secondary-accent mb-3" style="font-size:.82rem;opacity:.7;">Whether you're launching a startup or building your next digital product, we're here to help you plan, build and grow with confidence.</p>
                            <a href="{% url 'assessment' %}" class="btn btn-accent w-100">Start a Project</a>
                        </div>

                        {% if service.icon %}
                        <div style="text-align:center;">
                            <img src="{{ service.icon.url }}" alt="{{ service.title }}" style="width:100%;max-width:180px;border-radius:12px;">
                        </div>
                        {% elif service.category.icon_class %}
                            <i class="{{ service.category.icon_class }}" style="font-size:3rem;color:#ff404b;"></i>
                        {% elif service.icon_class %}
                        <div style="text-align:center;padding:2rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;">
                            <i class="{{ service.icon_class }}" style="font-size:3rem;color:#ff404b;"></i>
                        </div>
                        {% endif %}

                    </div>
                </div>

            </div>
            <div class="mt-4">
                <a href="{% url 'services' %}" class="btn btn-accent-outline">← Back to Services</a>
            </div>
        </div>
    </div>

</div>
{% endblock %}