---
import t from "../i18n/es.json";
import Layout from "./Layout.astro";

const schema = {
  "@context": "https://schema.org",
  "@type": "WebPage",
  url: "https://www.costas.dev/trajectory",
  headline: t.trajectoryPage.headline,
};
---

<Layout
  title={t.trajectoryPage.title}
  description={t.trajectoryPage.description}
>
  <script
    is:inline
    type="application/ld+json"
    slot="head-jsonld"
    set:html={JSON.stringify(schema)}
  />

  <h1>{t.trajectoryPage.headline}</h1>

  <p>{t.trajectoryPage.intro}</p>

  <h2>{t.trajectoryPage.techTitle}</h2>

  <p>{t.trajectoryPage.techDescription1}</p>

  <p>{t.trajectoryPage.techDescription2}</p>

  <h2>{t.trajectoryPage.educationTitle}</h2>

  <ul>
    <li>
      <strong>{t.trajectoryPage.efsetCert1}</strong>
      {t.trajectoryPage.efsetCert2}
      <a href="https://cert.efset.org/es/Yxzc9L"
        >{t.trajectoryPage.viewCertificate}</a
      >
    </li>

    <li>
      <strong>{t.trajectoryPage.azureDeveloperCert1}</strong>
      {t.trajectoryPage.azureDeveloperCert2}
      <a
        href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/E15072607CCF2DA9?sharingId=149A1CD9C13790F4"
        >{t.trajectoryPage.viewCredential}</a
      >.
    </li>

    <li>
      <strong>{t.trajectoryPage.azureDevOpsCert1}</strong>
      {t.trajectoryPage.azureDevOpsCert2}
      <a
        href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/5FB94876A1701595?sharingId=149A1CD9C13790F4"
        >{t.trajectoryPage.viewCredential}</a
      >
    </li>

    <li>
      <strong>{t.trajectoryPage.higherTechCert1}</strong>
      {t.trajectoryPage.higherTechCert2}
      <a href="https://iesteis.es/">{t.trajectoryPage.higherTechCert3}</a>
      {t.trajectoryPage.higherTechCert4}
    </li>
  </ul>

  <h2>{t.trajectoryPage.experienceTitle}</h2>

  <h3>{t.trajectoryPage.estelaria1}</h3>

  <p>{t.trajectoryPage.estelaria2}</p>

  <p>{t.trajectoryPage.estelaria3}</p>

  <h3>{t.trajectoryPage.polygon1}</h3>

  <p>{t.trajectoryPage.polygon2}</p>

  <h2>{t.trajectoryPage.projectsTitle}</h2>

  <p set:html={t.trajectoryPage.projectsDescription} />

  <div class="summary-box">
    <p>{t.trajectoryPage.portfolioSummary}</p>
    <a href="/portfolio" class="cta-link">{t.trajectoryPage.viewPortfolio} →</a>
  </div>
</Layout>

<style>
  .summary-box {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
    border-left: 4px solid hsl(209, 94%, 42%);
  }

  .cta-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    color: hsl(215, 90%, 30%);
  }

  .cta-link:hover {
    text-decoration: underline;
  }
</style>