---
import BaseLayout from "@/layouts/BaseLayout.astro";
---

<BaseLayout title="Contact" description="Get in touch with Adrian Altner.">
  <div class="page">
    <main class="main">
      <a href="/" class="back">← Home</a>
      <div class="content">
        <h1>Contact</h1>

        <h3>Notes &amp; Feedback</h3>
        <p>Feedback and corrections are always welcome. I read everything, but rarely reply — please don't be discouraged if you don't hear back.</p>

        <hr />
        <div class="note">
          <strong>Please note:</strong> Unsolicited press releases, advertising, and SEO pitches will be deleted without a response.
        </div>
        
        <h2>How to reach me</h2>

        <div class="cards">
          <div class="card">
            <div class="card__icon" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
              </svg>
            </div>
            <div class="card__body">
              <p class="card__label">Email</p>
              <span class="card__value r" data-obf="bW9je3RvZH1yZW50bGEtbmFpcmRhe3RhfXllaA=="></span>
            </div>
          </div>

          <div class="card card--placeholder">
            <div class="card__icon" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.15 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.05 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 17z"></path>
              </svg>
            </div>
            <div class="card__body">
              <p class="card__label">Signal</p>
              <p class="card__value card__value--muted">Coming soon.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</BaseLayout>

<script>
  document.querySelectorAll('[data-obf]').forEach(el => {
    el.textContent = atob((el as HTMLElement).dataset.obf!);
  });
  document.querySelectorAll('[data-obf-href]').forEach(el => {
    (el as HTMLAnchorElement).href = atob((el as HTMLElement).dataset.obfHref!);
  });
</script>

<style>
  .page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: #f5f5f3;
    color: #111;
  }

  .main {
    max-width: var(--width-prose);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    width: 100%;
  }

  .back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
  }

  .back:hover {
    color: var(--accent);
  }

  .content {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
  }

  h1 {
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    color: #111;
  }

  h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    margin: 2rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #111;
  }

  h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #111;
  }

  p {
    margin-bottom: 1.25rem;
  }

  hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
  }

  .cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e5e5e3;
    border-radius: 8px;
  }

  .card--placeholder {
    opacity: 0.5;
  }

  .card__icon {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: #555;
  }

  .card__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .card__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .card__value {
    font-size: clamp(0.8rem, 3.5vw, 1rem);
    color: #333;
    margin: 0;
    white-space: nowrap;
  }

  .card__value--muted {
    color: #888;
    font-style: italic;
  }

  .badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #eeeeed;
    color: #888;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
  }

  .r {
    direction: rtl;
    unicode-bidi: bidi-override;
  }

  .note {
    font-size: 0.9rem;
    color: #555;
    background: #eeeeed;
    padding: 0.9rem 1.25rem;
    border-radius: 6px;
    line-height: 1.6;
  }

  .note strong {
    color: #111;
  }
</style>