---
import Icon from "./Icon.astro";
import { social, coffeeUrl } from "../data/content";
---
<section class="section container" id="contact">
  <div class="reveal contact-card">
    <div class="eyebrow">06 / contact</div>
    <h2 class="contact-h2">Une idée à construire ensemble ? Parlons-en.</h2>
    <p class="contact-p">
      Toujours partant pour échanger autour d'un projet. Le plus simple, c'est un email. Je réponds vite.
    </p>

    <div class="contact-cta">
      <a class="btn-email" href={`mailto:${social.email}`}>
        <Icon name="mail" size={17} />{social.email}
      </a>
    </div>

    <div class="contact-social">
      <a class="social-link" href={social.github} target="_blank" rel="noopener" aria-label="GitHub"><Icon name="github" /></a>
      <a class="social-link" href={social.gitea} target="_blank" rel="noopener" aria-label="Gitea"><Icon name="gitea" /></a>
      <a class="social-link" href={social.linkedin} target="_blank" rel="noopener" aria-label="LinkedIn"><Icon name="linkedin" /></a>
      <a class="social-link" href={social.soundcloud} target="_blank" rel="noopener" aria-label="SoundCloud"><Icon name="soundcloud" /></a>
    </div>

    <div class="echo"><b>$</b> echo "écris-moi"</div>

    <div class="coffee-box">
      <p>
        Mes projets open-source ou ce portfolio vous sont utiles ? Vous pouvez m'offrir un café pour
        soutenir le travail.
      </p>
      <a
        class="btn-coffee-lg"
        href={coffeeUrl}
        target="_blank"
        rel="noopener"
        aria-label="Offrez-moi un café (ouvre un nouvel onglet)"
      >
        <Icon name="coffee" size={17} /> Offrez-moi un café
      </a>
      <div class="mono" style="font-size:12px;color:var(--text-dim);">// merci 🙏</div>
    </div>
  </div>
</section>
