---
import Icon from "./Icon.astro";
import { profile, social, terminalText } from "../data/content";
---
<section class="section container hero">
  <div class="hero-grid">
    <div>
      <span class="badge"><span class="badge-dot"></span>Ouvert aux opportunités</span>
      <h1>{profile.name}</h1>
      <p class="hero-role">{profile.role}</p>
      <p class="hero-lede">{profile.lede}</p>

      <div class="cta-row">
        {/* Bouton CV désactivé temporairement — réactiver en décommentant :
        <a class="btn btn-primary" href="/cv.pdf" download>
          <Icon name="download" size={16} /> Télécharger mon CV
        </a>
        */}
        <a class="btn btn-primary" href="#projets">
          Voir mes projets <Icon name="arrow" size={16} />
        </a>
      </div>

      <div class="social-row">
        <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 auto-hébergé"><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={`mailto:${social.email}`} aria-label="Envoyer un email"><Icon name="mail" /></a>
      </div>
    </div>

    <div class="terminal">
      <div class="terminal-bar">
        <span class="dot dot-r"></span>
        <span class="dot dot-y"></span>
        <span class="dot dot-g"></span>
        <span class="terminal-label">johanleroy.fr ~ %</span>
        <img class="terminal-avatar" src="/images/profil/pp2.png" alt="Photo de Johan Leroy" width="28" height="28" loading="lazy" />
      </div>
      <pre class="terminal-body"><span id="typed">{terminalText}</span><span class="caret" aria-hidden="true"></span></pre>
    </div>
  </div>
</section>