import type { Metadata } from "next";
import Link from "next/link";
import { portfolio } from "@/lib/portfolio-data";
import { siteName, siteUrl } from "@/lib/site-content";

const pageUrl = `${siteUrl}/curriculo`;

export const metadata: Metadata = {
  title: `Currículo | Engenheiro da Computação e Desenvolvedor de Software em Garuva, Joinville e Curitiba | ${siteName}`,
  description:
    "Currículo de Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software em Garuva, Joinville, Norte de Santa Catarina e Curitiba. Experiência em Next.js, TypeScript, Node.js, Rust, IoT e sistemas críticos.",
  alternates: { canonical: pageUrl },
  openGraph: {
    title: `Currículo de Evandro Fonseca Junior | ${siteName}`,
    description:
      "Engenheiro da computação e desenvolvedor de software disponível para oportunidades CLT, PJ e projetos estratégicos no Norte de SC, Curitiba e remoto.",
    url: pageUrl,
    siteName,
    type: "profile",
  },
};

export default function CurriculoPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "ProfilePage",
    dateModified: new Date().toISOString(),
    mainEntity: {
      "@type": "Person",
      "@id": `${siteUrl}/#person`,
      name: portfolio.personal.name,
      jobTitle:
        "Engenheiro da Computação e Desenvolvedor de Software Full-Stack",
      description: portfolio.personal.summary,
      url: siteUrl,
      sameAs: [portfolio.personal.github, portfolio.personal.linkedin],
      homeLocation: {
        "@type": "Place",
        name: "Garuva, Santa Catarina, Brasil",
      },
      knowsAbout: portfolio.skills.technical.flatMap(
        (category) => category.skills,
      ),
    },
  };

  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <section className="ds-section ds-section-dark">
        <div className="ds-section-shell max-w-[960px]">
          <p className="ds-eyebrow">Currículo profissional</p>
          <h1 className="ds-section-title text-white">
            Engenheiro da Computação e Desenvolvedor de Software para Garuva,
            Joinville, Curitiba e remoto.
          </h1>
          <p className="ds-copy max-w-[70ch] !text-[rgba(255,255,255,.78)]">
            {portfolio.personal.summary} Estou disponível para oportunidades CLT
            e PJ, com prioridade para times e empresas do Norte de Santa
            Catarina e Curitiba que precisam de execução técnica consistente.
          </p>
          <div className="mt-sp-6 flex flex-wrap gap-sp-3">
            <a className="ds-link ds-link-accent" href="/Profile.pdf" download>
              Baixar currículo em PDF
            </a>
            <Link className="ds-link ds-link-muted" href="/#contact">
              Falar sobre uma oportunidade
            </Link>
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <h2 className="ds-section-title">Experiência profissional</h2>
          <div className="mt-sp-8 space-y-sp-6">
            {portfolio.experiences.map((experience) => (
              <article key={experience.id} className="ds-card">
                <p className="ds-kicker">
                  {experience.period} · {experience.location}
                </p>
                <h3 className="ds-card-title">
                  {experience.title} — {experience.company}
                </h3>
                <p className="ds-copy">{experience.description}</p>
                <ul className="ds-list mt-sp-5 pl-[1.15rem]">
                  {experience.achievements.map((achievement) => (
                    <li key={achievement}>{achievement}</li>
                  ))}
                </ul>
                <ul className="ds-tags mt-sp-6">
                  {experience.technologies.map((technology) => (
                    <li key={technology} className="ds-tag">
                      {technology}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <h2 className="ds-section-title">Competências técnicas</h2>
          <div className="ds-grid-2 mt-sp-8">
            {portfolio.skills.technical.map((category) => (
              <article key={category.category} className="ds-card">
                <h3 className="ds-card-title">{category.category}</h3>
                <ul className="ds-tags mt-sp-5">
                  {category.skills.map((skill) => (
                    <li key={skill} className="ds-tag">
                      {skill}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
          <div className="mt-sp-8">
            <Link className="ds-link ds-link-accent" href="/cases">
              Ver projetos e cases
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}