---
import BaseLayout from '../layouts/BaseLayout.astro';
import { SITE, SOCIAL } from '../site.config';
---

<BaseLayout title="联系" description="联系方式">
  <section class="page-head">
    <h1>联系</h1>
    <p class="lead muted">
      欢迎就项目合作、技术交流或问题反馈与我联系。
    </p>
  </section>

  <section class="contact">
    <a class="card row" href={`mailto:${SITE.email}`}>
      <span class="label mono">Email</span>
      <span class="value">{SITE.email}</span>
    </a>
    {
      SOCIAL.map((s) => (
        <a class="card row" href={s.href} target="_blank" rel="noopener">
          <span class="label mono">{s.label}</span>
          <span class="value">{s.href}</span>
        </a>
      ))
    }
  </section>
</BaseLayout>

<style>
  .page-head {
    padding: 3rem 0 1rem;
  }
  .page-head h1 {
    margin: 0 0 0.75rem;
  }
  .lead {
    max-width: 56ch;
  }
  .contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 560px;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text);
  }
  .label {
    color: var(--accent);
    font-size: 0.85rem;
    min-width: 70px;
  }
  .value {
    color: var(--text-dim);
  }
  .row:hover .value {
    color: var(--text);
  }
</style>