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

{% block title %}{{ item.title }} — Case Study — {{ site.site_name }}{% endblock %}
{% block meta_description %}{{ item.short_description|truncatechars:160 }}{% endblock %}

{% block extra_head %}
{% if item.thumbnail %}
<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ item.thumbnail.url }}">
{% endif %}
<meta property="og:title" content="{{ item.title }} — Case Study">
<meta property="og:description" content="{{ item.short_description|truncatechars:160 }}">
<meta property="og:type" content="article">
<style>
  .cs-block {
    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;
  }
  .cs-block.solution { border-color:#2e9e5b;background:rgba(46,158,91,.05); }
  .cs-block.outcome  { border-color:#3b82f6;background:rgba(59,130,246,.05); }
  .cs-block-label {
    font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;margin-bottom:.5rem;
  }
  .tech-tag {
    display:inline-block;border:1px solid rgba(255,255,255,.2);
    border-radius:6px;padding:.2rem .65rem;font-size:.78rem;margin:.2rem;
  }
</style>
{% 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>{{ item.title }}</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="row grid-spacer-2">

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

                    <div class="blog-meta d-flex align-items-center flex-wrap gap-2 mb-4" style="font-size:.9rem;">
                        {% if item.added_by %}
                        <span class="secondary-accent">By {% firstof item.added_by.get_full_name item.added_by.username %}</span>
                        {% endif %}
                        {% if item.date_completed %}
                        <span class="accent-color" style="font-weight:700;">|</span>
                        <span class="secondary-accent">{{ item.date_completed|date:"d F Y" }}</span>
                        {% endif %}
                        {% if item.client_url %}
                        <span class="accent-color" style="font-weight:700;">|</span>
                        <a href="{{ item.client_url }}" target="_blank" rel="noopener" class="secondary-accent" style="text-decoration:none;opacity:.8;">
                            <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.75rem;margin-right:3px;"></i>Live Site
                        </a>
                        {% endif %}
                        {% if item.category %}
                        <a href="{% url 'portfolio' %}?category={{ item.category.slug }}" target="_self"
                           style="background:rgba(255,64,75,.1);border:1px solid rgba(255,64,75,.3);color:#ff404b;border-radius:20px;padding:.15rem .75rem;font-size:.78rem;font-weight:600;text-decoration:none;margin-left:auto;">
                            {{ item.category.name }}
                        </a>
                        {% endif %}
                    </div>

                    {% if item.short_description %}
                    <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;">{{ item.short_description }}</p>
                    </div>
                    {% endif %}

                    {% if item.client_problem %}
                    <div class="cs-block">
                        <div class="cs-block-label accent-color">The Challenge</div>
                        <p class="secondary-accent" style="margin:0;line-height:1.8;">{{ item.client_problem|linebreaksbr }}</p>
                    </div>
                    {% endif %}

                    {% if item.our_solution %}
                    <div class="cs-block solution">
                        <div class="cs-block-label" style="color:#2e9e5b;">Our Solution</div>
                        <p class="secondary-accent" style="margin:0;line-height:1.8;">{{ item.our_solution|linebreaksbr }}</p>
                    </div>
                    {% endif %}

                    {% if item.project_outcome %}
                    <div class="cs-block outcome">
                        <div class="cs-block-label" style="color:#3b82f6;">The Outcome</div>
                        <p class="secondary-accent" style="margin:0;line-height:1.8;">{{ item.project_outcome|linebreaksbr }}</p>
                    </div>
                    {% endif %}

                    {% if item.full_description %}
                    <div class="mt-4" style="border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;">
                        <h2 class="secondary-accent mb-4" style="font-size:1.25rem;">How We Built It</h2>
                        <div class="blog-body secondary-accent">
                            {{ item.full_description|safe }}
                        </div>
                    </div>
                    {% endif %}

                    {% if technologies %}
                    <div class="mt-4" style="border-top:1px solid rgba(255,255,255,.08);padding-top:1.25rem;">
                        <h6 class="accent-color mb-2" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;">Technologies Used</h6>
                        <div>
                            {% for tech in technologies %}
                            <span class="tech-tag secondary-accent">{{ tech }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <div class="mt-5">
                        <a href="{% url 'portfolio' %}" class="btn btn-accent-outline">← Back to Portfolio</a>
                    </div>

                </div>

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

                        {% if item.thumbnail %}
                        <div>
                            <img src="{{ item.thumbnail.url }}" alt="{{ item.image_alt|default:item.title }}" class="img-fluid" style="width:100%;border-radius:10px;">
                        </div>
                        {% endif %}

                        <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;">Project Details</h6>
                            {% if item.category %}
                            <div class="d-flex justify-content-between py-2" style="border-bottom:1px solid rgba(255,255,255,.07);">
                                <span class="secondary-accent" style="font-size:.82rem;opacity:.7;">Category</span>
                                <span class="secondary-accent" style="font-size:.82rem;font-weight:600;">{{ item.category.name }}</span>
                            </div>
                            {% endif %}
                            {% if item.date_completed %}
                            <div class="d-flex justify-content-between py-2" style="border-bottom:1px solid rgba(255,255,255,.07);">
                                <span class="secondary-accent" style="font-size:.82rem;opacity:.7;">Launched</span>
                                <span class="secondary-accent" style="font-size:.82rem;font-weight:600;">{{ item.date_completed|date:"M Y" }}</span>
                            </div>
                            {% endif %}
                            {% if item.added_by %}
                            <div class="d-flex justify-content-between py-2" {% if item.client_url %}style="border-bottom:1px solid rgba(255,255,255,.07);"{% endif %}>
                                <span class="secondary-accent" style="font-size:.82rem;opacity:.7;">Lead</span>
                                <span class="secondary-accent" style="font-size:.82rem;font-weight:600;">{% firstof item.added_by.get_full_name item.added_by.username %}</span>
                            </div>
                            {% endif %}
                            {% if item.client_url %}
                            <div class="pt-2">
                                <a href="{{ item.client_url }}" target="_blank" rel="noopener" class="btn btn-accent-outline w-100" style="font-size:.82rem;padding:.5rem;">
                                    <i class="fa-solid fa-arrow-up-right-from-square me-1"></i>Visit Live Site
                                </a>
                            </div>
                            {% endif %}
                        </div>

                        {% 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;">More Case Studies</h6>
                            {% for r in related %}
                            <a href="{% url 'portfolio_detail' r.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:.25rem;">{{ r.title }}</div>
                                {% if r.category %}<small class="secondary-accent" style="opacity:.55;">{{ r.category.name }}</small>{% endif %}
                            </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;">Start a Project</h6>
                            <p class="secondary-accent mb-3" style="font-size:.82rem;opacity:.7;">Ready to build something great? Tell us about your project.</p>
                            <a href="{% url 'assessment' %}" class="btn btn-accent w-100">Get a Free Quote</a>
                        </div>

                    </div>
                </div>

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

</div>
{% endblock %}