{% extends "base.html" %}
{% block title %}Contact — {{ brand }}{% endblock %}
{% block content %}
<section class="max-w-7xl mx-auto px-6 py-16">
  {% with msgs = get_flashed_messages(with_categories=true) %}
    {% if msgs %}
      {% for cat,msg in msgs %}
        <div class="mb-4 rounded border p-3 {{ 'border-red-700 bg-red-900/40 text-red-200' if cat=='error' else 'border-emerald-700 bg-emerald-900/30 text-emerald-100' }}">{{ msg }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <div class="grid lg:grid-cols-2 gap-8">
    <!-- Direct Contact Card -->
    <div class="rounded-2xl bg-bh.card/70 border border-bh.ring p-6">
      <h1 class="text-3xl font-bold">Get in touch</h1>
      <p class="mt-2 text-white/75">Prefer email or a quick call? Reach me directly.</p>

      <div class="mt-5 rounded-xl bg-white/5 border border-white/10 p-4">
        <div class="text-xl font-semibold">{{ CONTACT.name }}</div>
        <div class="text-white/70">{{ CONTACT.title }}</div>
        <div class="mt-3 grid gap-2 text-sm">
          <div class="flex items-center gap-2">
            <span class="opacity-70">Email:</span>
            <a id="emailLink" href="mailto:{{ CONTACT.email }}" class="underline">{{ CONTACT.email }}</a>
            <button class="ml-2 px-2 py-0.5 rounded bg-bh-accent/20 hover:bg-bh-accent/30 text-bh-accent text-xs" onclick="copyTxt('{{ CONTACT.email }}')">Copy</button>
          </div>
          <div class="flex items-center gap-2">
            <span class="opacity-70">Phone:</span>
            <a id="phoneLink" href="tel:{{ CONTACT.phone|replace(' ', '') }}" class="underline">{{ CONTACT.phone }}</a>
            <button class="ml-2 px-2 py-0.5 rounded bg-bh-accent/20 hover:bg-bh-accent/30 text-bh-accent text-xs" onclick="copyTxt('{{ CONTACT.phone }}')">Copy</button>
          </div>
          <div class="flex items-center gap-2">
            <span class="opacity-70">Hours:</span>
            <span>{{ CONTACT.hours }}</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="opacity-70">Location:</span>
            <span>{{ CONTACT.city }}</span>
          </div>
        </div>

        <div class="mt-4 flex flex-wrap gap-2">
          {% if CONTACT.cal %}
          <a href="{{ CONTACT.cal }}" target="_blank" class="inline-flex items-center rounded-lg bg-bh-accent/90 hover:bg-bh-accent text-black px-4 py-2 font-semibold shadow-glow">Book a call</a>
          {% endif %}
          {% if CONTACT.link %}
          <a href="{{ CONTACT.link }}" target="_blank" class="inline-flex items-center rounded-lg border border-bh.ring hover:border-bh-accent/60 px-4 py-2">LinkedIn</a>
          {% endif %}
          <a href="{{ url_for('contact_vcf') }}" class="inline-flex items-center rounded-lg border border-bh.ring hover:border-bh-accent/60 px-4 py-2">Download vCard</a>
        </div>

        <!-- New “Get a Quote” button -->
        <div class="mt-5">
          <a href="https://netdeploy.net"
             target="_blank"
             class="inline-flex items-center justify-center rounded-lg w-full bg-bh-accent/90 hover:bg-bh-accent text-black font-semibold py-3 shadow-glow transition-all duration-200">
            Get a Quote
          </a>
        </div>
      </div>

      <p class="mt-6 text-white/70 text-sm">Or use the form — we’ll reply with a short plan and timeline.</p>
    </div>

    <!-- Inquiry Form (Link to netdeploy.net) -->
  </div>
</section>

{% block scripts %}
<script>
  function copyTxt(txt){
    navigator.clipboard.writeText(txt).then(()=> {
      const el = document.createElement('div');
      el.textContent = 'Copied!';
      el.className = 'fixed bottom-4 right-4 px-3 py-2 rounded bg-bh-accent text-black text-sm shadow-glow';
      document.body.appendChild(el);
      setTimeout(()=> el.remove(), 900);
    });
  }
</script>
{% endblock %}
{% endblock %}