{% extends "base.html" %}

{% block title %}Project Portfolio — T & S Contractors Ltd{% endblock %}
{% block description %}Explore our residential and commercial construction projects across Kenya — from foundations to finishes.{% endblock %}

{% block content %}
<section class="hero" style="padding-top: 8rem; padding-bottom: 4rem;">
    <div class="container">
        <h1>Selected Work</h1>
        <p>A look at recent projects and the quality of craftsmanship we bring to every build.</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="portfolio-grid">
            {% for p in projects %}
            <div class="portfolio-item">
                {% if p.image %}
                <a href="/portfolio/{{ p.id }}" class="portfolio-thumb" style="padding: 0; overflow: hidden; display: block; text-decoration: none;">
                    <img src="{{ url_for('static', path=p.image) }}" alt="{{ p.name }}" style="width: 100%; height: 100%; object-fit: cover;">
                </a>
                {% else %}
                <a href="/portfolio/{{ p.id }}" class="portfolio-thumb" style="display: block; text-decoration: none; color: inherit;">
                    {{ p.name }}
                </a>
                {% endif %}
                <div class="portfolio-info">
                    <h3><a href="/portfolio/{{ p.id }}" style="color: inherit; text-decoration: none;">{{ p.name }}</a></h3>
                    <p>{{ p.description }}</p>
                    <div class="portfolio-meta">
                        <span class="portfolio-location">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                            {{ p.location }}
                        </span>
                        <a href="{{ p.map_url }}" target="_blank" rel="noopener" class="portfolio-map-link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                            View on Map
                        </a>
                    </div>
                    <span class="portfolio-status status-{{ p.status }}">{{ p.status|capitalize }}</span>
                    <div style="display: flex; gap: 1rem; margin-top: 0.75rem;">
                        <a href="/portfolio/{{ p.id }}" style="display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent); font-size: 0.85rem; font-weight: 500;">
                            View Details
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                        </a>
                        <button type="button" onclick="shareProject('{{ request.url_for('project_detail', project_id=p.id) }}', '{{ p.name }}')" style="display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; padding: 0;">
                            Share
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<script>
function shareProject(url, title) {
    if (navigator.share) {
        navigator.share({ title: title, url: url });
    } else {
        navigator.clipboard.writeText(url).then(function() {
            alert('Link copied to clipboard: ' + url);
        });
    }
}
</script>
{% endblock %}