{% extends "base.html" %}
{% block content %}
<section class="py-16 md:py-24">
  <div class="max-w-5xl mx-auto px-6">
    <div class="grid md:grid-cols-2 gap-10 items-start">

      <!-- Left column: Contact card -->
      <div
        class="relative rounded-2xl border border-white/10 bg-black/50 backdrop-blur p-6 sm:p-8 shadow-xl">
        <!-- Accent top border -->
        <div class="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>

        <header class="flex items-start gap-4">
          <div class="h-12 w-12 rounded-xl bg-white/10 grid place-items-center shrink-0">
            <!-- Simple user icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 7.5a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a8.25 8.25 0 0115 0"/>
            </svg>
          </div>
          <div>
            <h1 class="font-bebas text-5xl leading-none tracking-wide">{{ contact.name }}</h1>
            <p class="mt-1 text-white/80">{{ contact.title }}</p>
            <p class="mt-0.5 text-white/60">{{ contact.city }}</p>
            <p class="mt-0.5 text-white/60"><span class="font-medium text-white/70">Hours:</span> {{ contact.hours }}</p>
          </div>
        </header>

        <!-- Divider -->
        <div class="mt-6 h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>

        <!-- Contact methods -->
        <ul class="mt-6 space-y-2 text-sm">
          {% if contact.email %}
          <li class="group">
            <a href="mailto:{{ contact.email }}" class="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-white/5 transition">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-white/10 bg-white/5">
                <!-- Mail icon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 7.5v9a2.25 2.25 0 01-2.25 2.25h-15A2.25 2.25 0 012.25 16.5v-9m19.5 0A2.25 2.25 0 0019.5 5.25h-15A2.25 2.25 0 002.25 7.5m19.5 0l-9.75 6.75L2.25 7.5"/>
                </svg>
              </span>
              <span class="truncate text-white/80 group-hover:text-white">{{ contact.email }}</span>
            </a>
          </li>
          {% endif %}

          {% if contact.phone %}
          <li class="group">
            <a href="tel:{{ contact.phone }}" class="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-white/5 transition">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-white/10 bg-white/5">
                <!-- Phone icon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h1.5a1.5 1.5 0 001.5-1.5v-2.318a1.5 1.5 0 00-1.265-1.482l-3.03-.505a1.5 1.5 0 00-1.38.43l-.97.97a12.036 12.036 0 01-5.36-5.36l.97-.97a1.5 1.5 0 00.43-1.38l-.505-3.03A1.5 1.5 0 006.568 3H4.25A2 2 0 002.25 5v1.75z"/>
                </svg>
              </span>
              <span class="truncate text-white/80 group-hover:text-white">{{ contact.phone }}</span>
            </a>
          </li>
          {% endif %}

          {% if contact.cal %}
          <li class="group">
            <a href="{{ contact.cal }}" class="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-white/5 transition" target="_blank" rel="noopener">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-white/10 bg-white/5">
                <!-- Calendar icon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v3M17.25 3v3M3.75 8.25h16.5M5.25 21h13.5A2.25 2.25 0 0021 18.75V8.25H3v10.5A2.25 2.25 0 005.25 21z"/>
                </svg>
              </span>
              <span class="truncate text-white/80 group-hover:text-white">Book a call</span>
            </a>
          </li>
          {% endif %}

          <li class="group">
            <a href="/benjamin.vcf" class="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-white/5 transition">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-white/10 bg-white/5">
                <!-- vCard icon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.75h2.25A2.25 2.25 0 0120.25 9v6A2.25 2.25 0 0118 17.25H6A2.25 2.25 0 013.75 15V9A2.25 2.25 0 016 6.75h2.25"/>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 12a2.25 2.25 0 104.5 0 2.25 2.25 0 00-4.5 0zM12.75 15.75c-1.5-1.125-3.75-1.125-5.25 0"/>
                </svg>
              </span>
              <span class="truncate text-white/80 group-hover:text-white">Download vCard</span>
            </a>
          </li>

          {% if contact.link %}
          <li class="group">
            <a href="{{ contact.link }}" class="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-white/5 transition" target="_blank" rel="noopener">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-white/10 bg-white/5">
                <!-- LinkedIn icon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-80" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V24h-4V8zm7.5 0h3.8v2.2h.1c.5-1 1.9-2.2 3.9-2.2 4.1 0 4.9 2.7 4.9 6.2V24h-4v-7.1c0-1.7 0-3.9-2.4-3.9s-2.8 1.9-2.8 3.8V24h-4V8z"/>
                </svg>
              </span>
              <span class="truncate text-white/80 group-hover:text-white">LinkedIn</span>
            </a>
          </li>
          {% endif %}
        </ul>

        <!-- CTA -->
        <div class="mt-8">
          <a href="https://netdeploy.net"
             class="inline-flex w-full items-center justify-center gap-2 rounded-xl px-5 py-3 font-semibold text-black shadow-lg transition
                    bg-gradient-to-b from-emerald-400 to-emerald-300 hover:from-emerald-300 hover:to-emerald-200 active:from-emerald-400 active:to-emerald-300">
            <span>Get a Quote</span>
            <!-- Arrow icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M13.5 4.5l6 6-6 6v-3.75H4.5v-4.5h9V4.5z"/>
            </svg>
          </a>
          <p class="mt-3 text-xs text-white/50 text-center">No commitment—just a quick estimate.</p>
        </div>
      </div>

<!-- Right column -->
<div class="rounded-2xl border border-white/10 bg-black/30 p-6 sm:p-8">
  <h2 class="text-xl font-semibold">How I can help</h2>
  <p class="mt-2 text-white/70">
    Need local IT, web hosting, or a custom app? Send a quick note or book a time that works for you.
    I typically respond the same day.
  </p>

  <!-- Non-responsive map (fixed size) -->
  <div class="mt-6 overflow-x-auto">
    <iframe
      class="block mx-auto rounded-xl border border-white/10 shadow-md"
      width="600"
      height="450"
      style="border:0; max-width:100%;"
      loading="lazy"
      allowfullscreen
      referrerpolicy="no-referrer-when-downgrade"
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10563.745987097742!2d-101.84526106399407!3d35.2219850311224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x870ac125c3ca1575%3A0x87f3e3d0ff616d5d!2sDowntown%20Amarillo%2C%20Amarillo%2C%20TX!5e0!3m2!1sen!2sus!4v1707800000000!5m2!1sen!2sus">
    </iframe>
    <p class="mt-2 text-xs text-white/50 text-center">Downtown Amarillo</p>
  </div>
</div>

    </div>
  </div>
</section>
{% endblock %}