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

{% block title %}{{ profile.full_name }} — {{ profile.headline }}{% endblock %}

{% block content %}

<!-- ============================================================ HERO -->
<section class="relative flex min-h-[100svh] items-center overflow-hidden bg-noise pt-[var(--nav-h)]">
  <div class="absolute inset-0 bg-grid"></div>
  <div class="orb orb-a -left-32 top-10 h-[26rem] w-[26rem]"></div>
  <div class="orb orb-b right-0 top-40 h-80 w-80"></div>
  <div class="orb orb-c left-1/3 bottom-0 h-72 w-72"></div>

  <div class="relative mx-auto grid w-full max-w-7xl items-center gap-12 px-5 py-16 sm:px-8 lg:grid-cols-[1.15fr_0.85fr] lg:gap-16">

    <div>
      {% if profile.is_open_to_work %}
        <div class="reveal mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-xs font-semibold text-neutral-300">
          <span class="relative flex h-2 w-2">
            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75"></span>
            <span class="relative inline-flex h-2 w-2 rounded-full bg-brand-500"></span>
          </span>
          Tersedia untuk proyek baru
        </div>
      {% endif %}

      <h1 class="reveal font-display text-4xl font-extrabold leading-[1.08] text-neutral-50 sm:text-6xl lg:text-7xl" data-delay="80">
        Halo, saya<br>
        <span class="text-ember-anim">{{ profile.full_name }}</span>
      </h1>

      <p class="reveal mt-5 font-display text-xl font-semibold text-neutral-300 sm:text-2xl" data-delay="160">
        {% if profile.words %}
          <span data-typed="{{ profile.words_json }}" class="text-gold-400"></span><span class="typed-cursor"></span>
        {% else %}
          <span class="text-gold-400">{{ profile.headline }}</span>
        {% endif %}
      </p>

      <p class="reveal mt-5 max-w-xl text-base leading-relaxed text-neutral-400 sm:text-lg" data-delay="240">
        {{ profile.bio|default:profile.headline }}
      </p>

      <div class="reveal mt-9 flex flex-wrap items-center gap-3" data-delay="320">
        <a href="{% url 'careers:project_list' %}" class="btn btn-primary btn-shine">
          Lihat Portofolio
          <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="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
        </a>
        <a href="{% url 'core:contact' %}" class="btn btn-ghost">Hubungi Saya</a>
        {% if profile.cv_file %}
          <a href="{{ profile.cv_file.url }}" download class="btn btn-ghost">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
            Unduh CV
          </a>
        {% endif %}
      </div>

      <!-- Statistik -->
      <div class="reveal mt-12 grid max-w-lg grid-cols-2 gap-4 sm:grid-cols-4" data-delay="400">
        <div class="text-center sm:text-left">
          <p class="font-display text-3xl font-extrabold text-ember" data-count="{{ stat_experience }}">0</p>
          <p class="mt-1 text-xs font-medium uppercase tracking-wider text-neutral-500">Pengalaman</p>
        </div>
        <div class="text-center sm:text-left">
          <p class="font-display text-3xl font-extrabold text-ember" data-count="{{ stat_project }}">0</p>
          <p class="mt-1 text-xs font-medium uppercase tracking-wider text-neutral-500">Proyek</p>
        </div>
        <div class="text-center sm:text-left">
          <p class="font-display text-3xl font-extrabold text-ember" data-count="{{ stat_certificate }}">0</p>
          <p class="mt-1 text-xs font-medium uppercase tracking-wider text-neutral-500">Sertifikat</p>
        </div>
        <div class="text-center sm:text-left">
          <p class="font-display text-3xl font-extrabold text-ember" data-count="{{ stat_post }}">0</p>
          <p class="mt-1 text-xs font-medium uppercase tracking-wider text-neutral-500">Tulisan</p>
        </div>
      </div>
    </div>

    <!-- Foto -->
    <div class="reveal-zoom reveal relative mx-auto w-full max-w-sm lg:max-w-none" data-delay="200">
      <div class="relative float">
        <div class="absolute -inset-4 rounded-[2.5rem] bg-gradient-to-br from-gold-400/25 via-brand-500/20 to-transparent blur-2xl"></div>
        <div class="relative overflow-hidden rounded-[2rem] border border-white/10 bg-ink-800 img-zoom">
          {% if profile.photo %}
            <img src="{{ profile.photo.url }}" alt="{{ profile.full_name }}" class="aspect-[4/5] w-full object-cover">
          {% else %}
            <div class="grid aspect-[4/5] w-full place-items-center bg-gradient-to-br from-ink-800 to-ink-700">
              <span class="font-display text-8xl font-extrabold text-ember">{{ profile.full_name|slice:":2"|upper }}</span>
            </div>
          {% endif %}
          <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent p-5">
            <p class="font-display text-lg font-bold text-neutral-50">{{ profile.full_name }}</p>
            <p class="text-xs text-brand-400">{{ profile.headline }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="absolute bottom-6 left-1/2 hidden -translate-x-1/2 animate-bounce text-neutral-600 sm:block">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
  </div>
</section>

<!-- ============================================================ SKILL MARQUEE -->
{% if skills %}
<section class="border-y border-white/10 bg-ink-900 py-6">
  <div class="marquee">
    <div class="marquee__track">
      {% for skill in skills %}
        <span class="chip !text-sm !px-4 !py-2 whitespace-nowrap">{{ skill.name }}</span>
      {% endfor %}
    </div>
    <div class="marquee__track" aria-hidden="true">
      {% for skill in skills %}
        <span class="chip !text-sm !px-4 !py-2 whitespace-nowrap">{{ skill.name }}</span>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<!-- ============================================================ PENGALAMAN -->
{% if experiences %}
<section class="relative mx-auto max-w-7xl px-5 py-24 sm:px-8">
  <div class="reveal mb-12 flex flex-wrap items-end justify-between gap-4">
    <div>
      <p class="text-xs font-bold uppercase tracking-[0.24em] text-brand-500">Karier</p>
      <h2 class="mt-2 font-display text-3xl font-extrabold text-neutral-50 sm:text-4xl">Pengalaman Kerja</h2>
    </div>
    <a href="{% url 'careers:experience' %}" class="btn btn-ghost !py-2.5 !px-5 !text-xs">Lihat semua</a>
  </div>

  <div class="timeline space-y-5">
    {% for exp in experiences %}
      <article class="reveal reveal-left card card-glow spotlight p-6" data-delay="{{ forloop.counter0|add:forloop.counter0 }}00">
        <span class="timeline-dot {% if exp.is_current %}timeline-dot-live{% endif %}"></span>

        <div class="flex flex-wrap items-start gap-4">
          {% if exp.logo %}
            <img src="{{ exp.logo.url }}" alt="{{ exp.company }}" class="h-12 w-12 shrink-0 rounded-xl border border-white/10 object-cover">
          {% else %}
            <span class="grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-white/10 bg-white/5 font-display text-lg font-bold text-brand-400">{{ exp.company|slice:":1"|upper }}</span>
          {% endif %}

          <div class="min-w-0 flex-1">
            <h3 class="font-display text-lg font-bold text-neutral-50">{{ exp.position }}</h3>
            <p class="text-sm font-medium text-brand-400">
              {% if exp.company_url %}<a href="{{ exp.company_url }}" target="_blank" rel="noopener" class="hover:underline">{{ exp.company }}</a>{% else %}{{ exp.company }}{% endif %}
              <span class="text-neutral-600">·</span>
              <span class="text-neutral-500">{{ exp.get_employment_type_display }}</span>
            </p>
            <p class="mt-1 text-xs text-neutral-500">
              {{ exp.period }} <span class="text-neutral-700">·</span> {{ exp.duration }}
              {% if exp.location %}<span class="text-neutral-700">·</span> {{ exp.location }} ({{ exp.get_location_type_display }}){% endif %}
            </p>

            {% if exp.bullets %}
              <ul class="mt-3 space-y-1.5">
                {% for b in exp.bullets|slice:":3" %}
                  <li class="flex gap-2 text-sm leading-relaxed text-neutral-400">
                    <span class="mt-2 h-1 w-1 shrink-0 rounded-full bg-brand-500"></span>{{ b }}
                  </li>
                {% endfor %}
              </ul>
            {% endif %}

            {% if exp.skills.all %}
              <div class="mt-4 flex flex-wrap gap-1.5">
                {% for s in exp.skills.all %}<span class="chip">{{ s.name }}</span>{% endfor %}
              </div>
            {% endif %}
          </div>
        </div>
      </article>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- ============================================================ PROYEK -->
{% if projects %}
<section class="relative overflow-hidden border-y border-white/10 bg-ink-900 bg-noise py-24">
  <div class="orb orb-c right-0 top-1/4 h-80 w-80"></div>
  <div class="relative mx-auto max-w-7xl px-5 sm:px-8">
    <div class="reveal mb-12 flex flex-wrap items-end justify-between gap-4">
      <div>
        <p class="text-xs font-bold uppercase tracking-[0.24em] text-brand-500">Portofolio</p>
        <h2 class="mt-2 font-display text-3xl font-extrabold text-neutral-50 sm:text-4xl">Proyek Unggulan</h2>
      </div>
      <a href="{% url 'careers:project_list' %}" class="btn btn-ghost !py-2.5 !px-5 !text-xs">Semua proyek</a>
    </div>

    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {% for p in projects %}
        <a href="{{ p.get_absolute_url }}" class="reveal card card-glow spotlight group overflow-hidden" data-delay="{{ forloop.counter0 }}00">
          <div class="img-zoom relative 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-4xl font-extrabold text-ember">{{ p.title|slice:":2"|upper }}</span>
              </div>
            {% endif %}
            {% if p.is_featured %}
              <span class="absolute left-3 top-3 rounded-full bg-gradient-to-r from-gold-400 to-brand-500 px-2.5 py-1 text-[0.65rem] font-bold uppercase tracking-wide text-black">Unggulan</span>
            {% endif %}
          </div>

          <div class="p-5">
            <h3 class="font-display text-base font-bold text-neutral-50 transition group-hover:text-gold-400">{{ p.title }}</h3>
            <p class="mt-1.5 line-clamp-2 text-sm leading-relaxed text-neutral-500">{{ p.short_description }}</p>
            {% if p.tech_stack.all %}
              <div class="mt-4 flex flex-wrap gap-1.5">
                {% for t in p.tech_stack.all|slice:":4" %}<span class="chip">{{ t.name }}</span>{% endfor %}
              </div>
            {% endif %}
          </div>
        </a>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<!-- ============================================================ TULISAN -->
{% if posts %}
<section class="mx-auto max-w-7xl px-5 py-24 sm:px-8">
  <div class="reveal mb-12 flex flex-wrap items-end justify-between gap-4">
    <div>
      <p class="text-xs font-bold uppercase tracking-[0.24em] text-brand-500">Blog</p>
      <h2 class="mt-2 font-display text-3xl font-extrabold text-neutral-50 sm:text-4xl">Tulisan Terbaru</h2>
    </div>
    <a href="{% url 'blog:list' %}" class="btn btn-ghost !py-2.5 !px-5 !text-xs">Semua tulisan</a>
  </div>

  <div class="grid gap-6 md:grid-cols-3">
    {% for post in posts %}
      {% include "blog/partials/post_card.html" with post=post delay=forloop.counter0 %}
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- ============================================================ CTA -->
<section class="mx-auto max-w-7xl px-5 pb-24 sm:px-8">
  <div class="reveal relative overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-br from-brand-600/20 via-ink-900 to-gold-500/10 p-10 text-center sm:p-16 bg-noise">
    <div class="orb orb-a left-1/4 top-0 h-64 w-64"></div>
    <div class="relative">
      <h2 class="font-display text-3xl font-extrabold text-neutral-50 sm:text-5xl">
        Punya proyek? <span class="text-ember">Mari bicara.</span>
      </h2>
      <p class="mx-auto mt-4 max-w-xl text-base text-neutral-400">
        Saya terbuka untuk kolaborasi, freelance, atau sekadar ngobrol soal teknologi.
      </p>
      <div class="mt-8 flex flex-wrap justify-center gap-3">
        <a href="{% url 'core:contact' %}" class="btn btn-primary btn-shine">Kirim Pesan</a>
        {% if profile.whatsapp_url %}
          <a href="{{ profile.whatsapp_url }}" target="_blank" rel="noopener" class="btn btn-ghost">WhatsApp</a>
        {% endif %}
      </div>
    </div>
  </div>
</section>

{% endblock %}