<template>
  <section id="contact" class="conversion-section" aria-labelledby="contact-title">
    <div class="conversion-card final-contact">
      <div>
        <p class="section-kicker mono">Contact</p>
        <h2 id="contact-title">{{ content.contactSection.heading }}</h2>
        <p>{{ content.contactSection.description }}</p>
        <p>
          Recruiting for a remote engineering role? Send the role description, contract terms, location restrictions, and
          expected timeline.
        </p>
      </div>
      <div class="contact-actions action-card action-stack" aria-label="Contact actions">
        <a class="btn primary-action" :href="mailtoHref">Email Brad</a>
        <a class="btn secondary" :href="content.linkedInUrl" target="_blank" rel="noopener noreferrer">
          Connect on LinkedIn
        </a>
        <button class="btn tertiary button-like" type="button" @click="copyEmail">
          {{ emailCopied ? "Email Copied" : "Copy Email Address" }}
        </button>
      </div>
    </div>
  </section>

  <footer class="site-footer">
    <div>
      <div class="footer-name">{{ content.professionalName }}</div>
      <div>{{ content.role }}</div>
    </div>
    <nav aria-label="Footer navigation">
      <a :href="mailtoHref">Email</a>
      <a :href="content.linkedInUrl" target="_blank" rel="noopener noreferrer">LinkedIn</a>
      <RouterLink :to="content.resumeUrl">R&eacute;sum&eacute;</RouterLink>
      <a :href="content.sourceUrl" target="_blank" rel="noopener noreferrer">Public Source</a>
      <a href="#platform">Platform</a>
      <button type="button" @click="doLogin">Sign In</button>
      <RouterLink to="/request-access">Request Lab Access</RouterLink>
    </nav>
    <div class="copyright mono">&copy; {{ currentYear }} Brad Stein</div>
  </footer>
</template>

<script setup>
import { ref } from "vue";
import { RouterLink } from "vue-router";
import { login } from "../auth";

const props = defineProps({
  content: Object,
  mailtoHref: String,
  currentYear: Number,
});

const emailCopied = ref(false);

function doLogin() {
  login();
}

async function copyEmail() {
  try {
    await navigator.clipboard?.writeText(props.content.primaryContact.email);
    emailCopied.value = true;
    window.setTimeout(() => {
      emailCopied.value = false;
    }, 1500);
  } catch {
    emailCopied.value = false;
  }
}
</script>

<style scoped>
.conversion-section {
  box-sizing: border-box;
  display: grid;
  align-content: start;
  scroll-margin-top: 0;
  margin-top: 0;
  padding: clamp(54px, 7vh, 82px) 0;
}

.conversion-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 4vw, 42px);
}

.section-kicker {
  color: var(--accent-cyan);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.conversion-card h2 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0;
}

.conversion-card p {
  font-size: 17px;
  line-height: 1.65;
}

.final-contact {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(0, 229, 197, 0.08), rgba(120, 180, 255, 0.06));
  padding: clamp(26px, 3.5vw, 38px);
}

#contact {
  padding-top: clamp(42px, 6vh, 72px);
}

.contact-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.action-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(5, 12, 28, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.action-stack {
  width: 100%;
  max-width: 360px;
  justify-self: end;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
}

.action-stack .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.primary-action {
  background: linear-gradient(135deg, rgba(0, 229, 197, 0.9), rgba(120, 180, 255, 0.82));
  color: #02141d;
}

.tertiary {
  background: transparent;
  color: var(--text-strong);
}

.button-like {
  cursor: pointer;
  font: inherit;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.footer-name {
  color: var(--text-strong);
  font-weight: 800;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent-cyan);
  cursor: pointer;
  font: inherit;
}

.btn:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid rgba(0, 229, 197, 0.75);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .conversion-card {
    grid-template-columns: 1fr;
  }

  .conversion-section {
    min-height: auto;
  }

  .action-stack {
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .conversion-section {
    margin-top: 0;
    padding: 50px 0;
  }
}
</style>
