{% extends "base.html" %}
{% load seo_tags %}

{% block title %}{{ project.title }} — Proyek{% endblock %}
{% block meta_description %}{{ project.short_description }}{% endblock %}
{% block og_type %}article{% endblock %}
{% block og_title %}{{ project.title }}{% endblock %}
{% block og_description %}{{ project.short_description }}{% endblock %}
{% block twitter_title %}{{ project.title }}{% endblock %}
{% block twitter_description %}{{ project.short_description }}{% endblock %}
{% block og_image %}{% if project.thumbnail %}<meta property="og:image" content="{% absolute_url project.thumbnail.url %}">{% elif default_share_image %}<meta property="og:image" content="{{ default_share_image }}">{% endif %}{% endblock %}
{% block twitter_image %}{% if project.thumbnail %}<meta name="twitter:image" content="{% absolute_url project.thumbnail.url %}">{% elif default_share_image %}<meta name="twitter:image" content="{{ default_share_image }}">{% endif %}{% endblock %}

{% block structured_data %}{% json_ld schema_project schema_breadcrumb %}{% endblock %}

{% block content %}
<article>
  <!-- Hero -->
  <section class="relative overflow-hidden border-b border-white/10 bg-ink-900 bg-noise pt-[calc(var(--nav-h)+3rem)] pb-12">
    <div class="absolute inset-0 bg-grid"></div>
    <div class="orb orb-a -left-16 top-0 h-72 w-72"></div>

    <div class="relative mx-auto max-w-5xl px-5 sm:px-8">
      <a href="{% url 'careers:project_list' %}" class="reveal inline-flex items-center gap-1.5 text-xs font-semibold text-neutral-500 transition hover:text-gold-400">
        ← Semua proyek
      </a>

      <div class="mt-5 flex flex-wrap items-center gap-2">
        <span class="chip">{{ project.get_status_display }}</span>
        {% if project.is_featured %}<span class="chip chip-active">Unggulan</span>{% endif %}
      </div>

      <h1 class="reveal mt-4 font-display text-3xl font-extrabold leading-tight text-neutral-50 sm:text-5xl" data-delay="80">{{ project.title }}</h1>
      {% if project.short_description %}
        <p class="reveal mt-4 max-w-2xl text-base leading-relaxed text-neutral-400" data-delay="140">{{ project.short_description }}</p>
      {% endif %}

      <div class="reveal mt-7 flex flex-wrap gap-3" data-delay="200">
        {% if project.demo_url %}
          <a href="{{ project.demo_url }}" target="_blank" rel="noopener" class="btn btn-primary btn-shine">
            Lihat Demo
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
          </a>
        {% endif %}
        {% if project.repo_url %}
          <a href="{{ project.repo_url }}" target="_blank" rel="noopener" class="btn btn-ghost">Source Code</a>
        {% endif %}
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-5xl px-5 py-14 sm:px-8">
    {% if project.thumbnail %}
      <div class="reveal reveal-zoom overflow-hidden rounded-3xl border border-white/10">
        <img src="{{ project.thumbnail.url }}" alt="{{ project.title }}" class="w-full object-cover">
      </div>
    {% endif %}

    <div class="mt-12 grid gap-10 lg:grid-cols-[1fr_280px]">
      <div class="reveal">
        <h2 class="font-display text-xl font-extrabold text-neutral-50">Tentang Proyek</h2>
        <div class="prose-ember mt-4">{{ project.description|safe }}</div>
      </div>

      <aside class="reveal reveal-right space-y-4 lg:sticky lg:top-[calc(var(--nav-h)+1.5rem)] lg:self-start">
        <div class="card p-5">
          <p class="text-xs font-bold uppercase tracking-[0.16em] text-neutral-500">Detail</p>
          <dl class="mt-4 space-y-3.5 text-sm">
            {% if project.role %}
              <div><dt class="text-xs text-neutral-600">Peran</dt><dd class="mt-0.5 font-medium text-neutral-200">{{ project.role }}</dd></div>
            {% endif %}
            {% if project.client %}
              <div><dt class="text-xs text-neutral-600">Klien</dt><dd class="mt-0.5 font-medium text-neutral-200">{{ project.client }}</dd></div>
            {% endif %}
            {% if project.started_at %}
              <div>
                <dt class="text-xs text-neutral-600">Periode</dt>
                <dd class="mt-0.5 font-medium text-neutral-200">
                  {{ project.started_at|date:"M Y" }} — {% if project.finished_at %}{{ project.finished_at|date:"M Y" }}{% else %}Sekarang{% endif %}
                </dd>
              </div>
            {% endif %}
            <div><dt class="text-xs text-neutral-600">Status</dt><dd class="mt-0.5 font-medium text-neutral-200">{{ project.get_status_display }}</dd></div>
          </dl>
        </div>

        {% if project.tech_stack.all %}
          <div class="card p-5">
            <p class="text-xs font-bold uppercase tracking-[0.16em] text-neutral-500">Tech Stack</p>
            <div class="mt-3.5 flex flex-wrap gap-1.5">
              {% for t in project.tech_stack.all %}<span class="chip">{{ t.name }}</span>{% endfor %}
            </div>
          </div>
        {% endif %}
      </aside>
    </div>

    {% if related %}
      <div class="mt-20">
        <h2 class="reveal font-display text-xl font-extrabold text-neutral-50">Proyek Lainnya</h2>
        <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {% for p in related %}
            <a href="{{ p.get_absolute_url }}" class="reveal card card-glow spotlight group overflow-hidden" data-delay="{{ forloop.counter0 }}0">
              <div class="img-zoom aspect-[16/10] overflow-hidden bg-ink-800">
                {% if p.thumbnail %}
                  <img src="{{ p.thumbnail.url }}" alt="{{ p.title }}" class="h-full w-full object-cover" loading="lazy">
                {% else %}
                  <div class="grid h-full w-full place-items-center bg-gradient-to-br from-brand-500/15 to-gold-400/5">
                    <span class="font-display text-3xl font-extrabold text-ember">{{ p.title|slice:":2"|upper }}</span>
                  </div>
                {% endif %}
              </div>
              <div class="p-4">
                <h3 class="font-display text-sm font-bold text-neutral-50 transition group-hover:text-gold-400">{{ p.title }}</h3>
                <p class="mt-1 line-clamp-2 text-xs text-neutral-500">{{ p.short_description }}</p>
              </div>
            </a>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </section>
</article>
{% endblock %}