{% extends "base.html" %}
{% block title %}Contact{% endblock %}

{% block content %}

<!-- Hero -->
<section class="text-center py-20 bg-gradient-to-br from-orange-500/20 via-rose-500/10 to-fuchsia-500/10 text-white shadow-inner">
  <h1 class="text-5xl font-extrabold mb-4">Contact Me</h1>
  <p class="text-lg opacity-90">Here’s my professional contact card — let’s connect!</p>
</section>

<!-- vCard Section -->
<section class="py-16 px-6 md:px-20 bg-black text-white">
  <div class="max-w-4xl mx-auto">
    <div class="card flex flex-col md:flex-row items-center md:items-start gap-8">

      <!-- Avatar / Photo -->
      <div class="flex-shrink-0">
        <img src="{{ url_for('static', filename='Headshot.jpg') }}" alt="{{ CONTACT.name }}" 
             class="w-40 h-40 rounded-full border-4 border-[rgb(var(--accent))] shadow-glass object-cover">
      </div>

      <!-- Contact Info -->
      <div class="flex-1 space-y-4">
        <h2 class="text-3xl font-bold">{{ CONTACT.name }}</h2>
        <p class="text-[rgb(var(--muted))]">{{ CONTACT.title }}</p>

        <div class="grid sm:grid-cols-2 gap-4 text-sm sm:text-base">
          <div>
            <p class="font-semibold text-[rgb(var(--accent))]">Email</p>
            <a href="mailto:{{ CONTACT.email }}" class="hover:underline">{{ CONTACT.email }}</a>
          </div>
          <div>
            <p class="font-semibold text-[rgb(var(--accent))]">Phone</p>
            <a href="tel:{{ CONTACT.phone|replace(' ', '') }}" class="hover:underline">{{ CONTACT.phone }}</a>
          </div>
          <div>
            <p class="font-semibold text-[rgb(var(--accent))]">City / Region</p>
            <p>{{ CONTACT.city }}</p>
          </div>
          <div>
            <p class="font-semibold text-[rgb(var(--accent))]">Hours</p>
            <p>{{ CONTACT.hours }}</p>
          </div>
        </div>

        <div class="pt-4 flex flex-wrap gap-3">
          <a href="{{ CONTACT.site }}" target="_blank" class="btn btn-primary items-center">
            <i class="fa fa-globe mr-2 text-[rgb(var(--accent))]"></i> Website
          </a>
          <a href="{{ CONTACT.link }}" target="_blank" class="btn btn-primary border-none bg-[rgb(var(--card))] hover:bg-[rgb(var(--border))]">
            <i class="fab fa-linkedin mr-2 text-[rgb(var(--accent))]"></i> LinkedIn
          </a>
          <a href="{{ CONTACT.cal }}" target="_blank" class="btn btn-primary border-none bg-[rgb(var(--card))] hover:bg-[rgb(var(--border))]">
            <i class="fa fa-calendar mr-2 text-[rgb(var(--accent))]"></i> Schedule Meeting
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

{% endblock %}