{% extends "base.html" %}

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

{% block content %}
{% include "partials/page_header.html" with eyebrow="Kontak" heading="Mari Berkenalan" subheading="Punya ide, tawaran kerja, atau sekadar ingin menyapa? Kirim pesan lewat form di bawah." %}

<section class="mx-auto max-w-7xl px-5 py-16 sm:px-8">
  <div class="grid gap-10 lg:grid-cols-[1fr_1.15fr]">

    <div class="reveal reveal-left space-y-4">
      {% if profile.email %}
        <div class="card spotlight flex items-start gap-4 p-5">
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand-500/12 text-brand-400">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
          </span>
          <div class="min-w-0">
            <p class="text-xs font-bold uppercase tracking-wider text-neutral-500">Email</p>
            <p class="mt-0.5 break-all text-sm font-medium text-neutral-200">{{ profile.email }}</p>
            <button data-copy="{{ profile.email }}" data-copy-label="Salin email" class="mt-1.5 text-xs font-semibold text-brand-400 hover:text-gold-400">Salin email</button>
          </div>
        </div>
      {% endif %}

      {% if profile.phone %}
        <div class="card spotlight flex items-start gap-4 p-5">
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand-500/12 text-brand-400">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
          </span>
          <div>
            <p class="text-xs font-bold uppercase tracking-wider text-neutral-500">Telepon / WhatsApp</p>
            <p class="mt-0.5 text-sm font-medium text-neutral-200">{{ profile.phone }}</p>
            {% if profile.whatsapp_url %}
              <a href="{{ profile.whatsapp_url }}" target="_blank" rel="noopener" class="mt-1.5 inline-block text-xs font-semibold text-brand-400 hover:text-gold-400">Chat via WhatsApp →</a>
            {% endif %}
          </div>
        </div>
      {% endif %}

      {% if profile.location %}
        <div class="card spotlight flex items-start gap-4 p-5">
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand-500/12 text-brand-400">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          </span>
          <div>
            <p class="text-xs font-bold uppercase tracking-wider text-neutral-500">Lokasi</p>
            <p class="mt-0.5 text-sm font-medium text-neutral-200">{{ profile.location }}</p>
          </div>
        </div>
      {% endif %}

      {% if social_links %}
        <div class="card p-5">
          <p class="text-xs font-bold uppercase tracking-wider text-neutral-500">Social Media</p>
          <div class="mt-3 flex flex-wrap gap-2">
            {% for link in social_links %}
              <a href="{{ link.url }}" target="_blank" rel="noopener" class="chip">{{ link.display_label }}</a>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </div>

    <div class="reveal reveal-right card card-glow p-6 sm:p-8">
      <h2 class="font-display text-xl font-extrabold text-neutral-50">Kirim Pesan</h2>
      <p class="mt-1.5 text-sm text-neutral-500">Biasanya saya balas dalam 1×24 jam.</p>

      <form method="post" class="mt-6 space-y-4" novalidate>
        {% csrf_token %}
        {{ form.nickname }}

        <div class="grid gap-4 sm:grid-cols-2">
          <div>
            <label for="{{ form.name.id_for_label }}" class="mb-1.5 block text-xs font-semibold text-neutral-400">Nama <span class="text-brand-500">*</span></label>
            {{ form.name }}
            {{ form.name.errors }}
          </div>
          <div>
            <label for="{{ form.email.id_for_label }}" class="mb-1.5 block text-xs font-semibold text-neutral-400">Email <span class="text-brand-500">*</span></label>
            {{ form.email }}
            {{ form.email.errors }}
          </div>
        </div>

        <div>
          <label for="{{ form.subject.id_for_label }}" class="mb-1.5 block text-xs font-semibold text-neutral-400">Subjek</label>
          {{ form.subject }}
          {{ form.subject.errors }}
        </div>

        <div>
          <label for="{{ form.message.id_for_label }}" class="mb-1.5 block text-xs font-semibold text-neutral-400">Pesan <span class="text-brand-500">*</span></label>
          {{ form.message }}
          {{ form.message.errors }}
        </div>

        {% if form.non_field_errors %}
          <p class="text-xs text-red-400">{{ form.non_field_errors.0 }}</p>
        {% endif %}

        <button type="submit" class="btn btn-primary btn-shine w-full">
          Kirim Pesan
          <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>
        </button>
      </form>
    </div>
  </div>
</section>
{% endblock %}