portifolio-evandrodevbr/app/cases/[slug]/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { safeJsonLd } from "@/lib/jsonld";
import { buildBreadcrumbList } from "@/lib/seo";
import {
  caseStudies,
  getRelatedServices,
  intentCtas,
  siteName,
  siteUrl,
} from "@/lib/site-content";

interface CasePageProps {
  params: Promise<{ slug: string }>;
}

const sourceShaPattern = /\/blob\/([0-9a-f]{40})\//;

function getSourceSha(url: string) {
  return sourceShaPattern.exec(url)?.[1];
}

export function generateStaticParams() {
  return caseStudies.map((caseStudy) => ({ slug: caseStudy.id }));
}

export async function generateMetadata({
  params,
}: CasePageProps): Promise<Metadata> {
  const { slug } = await params;
  const caseStudy = caseStudies.find((item) => item.id === slug);

  if (!caseStudy) return { title: "Case não encontrado" };

  const url = `${siteUrl}/cases/${caseStudy.id}`;
  return {
    title: `${caseStudy.title} | Case de Engenharia de Software`,
    description: caseStudy.summary,
    alternates: { canonical: url },
    openGraph: {
      title: caseStudy.title,
      description: caseStudy.summary,
      url,
      siteName,
      type: "article",
    },
    twitter: {
      card: "summary_large_image",
      title: caseStudy.title,
      description: caseStudy.summary,
    },
  };
}

export default async function CasePage({ params }: CasePageProps) {
  const { slug } = await params;
  const caseStudy = caseStudies.find((item) => item.id === slug);
  if (!caseStudy) notFound();

  const pageUrl = `${siteUrl}/cases/${caseStudy.id}`;
  const relatedServices = getRelatedServices(caseStudy.id);
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Cases", `${siteUrl}/cases`],
        [caseStudy.title, pageUrl],
      ] as const),
    ],
  };

  return (
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
      <article>
        <section className="ds-section ds-section-dark">
          <div className="ds-section-shell max-w-[960px]">
            <nav aria-label="Breadcrumb" className="mb-sp-6">
              <ol className="flex flex-wrap items-center gap-sp-2 text-sm">
                <li>
                  <Link className="ds-link ds-link-muted" href="/">
                    Início
                  </Link>
                </li>
                <li className="flex items-center gap-sp-2">
                  <span aria-hidden="true">/</span>
                  <Link className="ds-link ds-link-muted" href="/cases">
                    Cases
                  </Link>
                </li>
                <li className="flex items-center gap-sp-2">
                  <span aria-hidden="true">/</span>
                  <Link
                    aria-current="page"
                    className="ds-link ds-link-muted"
                    href={`/cases/${caseStudy.id}`}
                  >
                    {caseStudy.title}
                  </Link>
                </li>
              </ol>
            </nav>
            <p className="ds-eyebrow">Case de engenharia de software</p>
            <h1 className="ds-section-title text-white">
              {caseStudy.title}: {caseStudy.subtitle}
            </h1>
            <p className="ds-copy max-w-[68ch] !text-[rgba(255,255,255,.78)]">
              {caseStudy.detail?.answer.text ?? caseStudy.summary}
            </p>
            {!caseStudy.detail ? (
              <p className="mt-sp-6 text-[15px] leading-8 text-white">
                {caseStudy.impact}
              </p>
            ) : null}
            <ul className="ds-tags mt-sp-6">
              {caseStudy.stack.map((item) => (
                <li key={item} className="ds-tag">
                  {item}
                </li>
              ))}
            </ul>
            <div className="mt-sp-8 flex flex-wrap gap-sp-3">
              {caseStudy.demoUrl ? (
                <a
                  className="ds-link ds-link-accent"
                  href={caseStudy.demoUrl}
                  target="_blank"
                  rel="noreferrer"
                >
                  Abrir demonstração
                </a>
              ) : null}
              {caseStudy.githubUrl ? (
                <a
                  className="ds-link ds-link-muted"
                  href={caseStudy.githubUrl}
                  target="_blank"
                  rel="noreferrer"
                >
                  Ver código
                </a>
              ) : null}
            </div>
          </div>
        </section>

        {caseStudy.detail ? (
          <section className="ds-section">
            <div className="ds-section-shell max-w-[960px] space-y-sp-10">
              <section aria-labelledby="case-challenge">
                <h2 id="case-challenge" className="ds-section-title">
                  Desafio verificável
                </h2>
                <p className="ds-section-description">
                  {caseStudy.detail.challenge.text}
                </p>
              </section>

              <section aria-labelledby="case-implementation">
                <h2 id="case-implementation" className="ds-section-title">
                  Decisões de implementação
                </h2>
                <ul className="ds-list mt-sp-5 pl-[1.15rem]">
                  {caseStudy.detail.implementation.map((statement) => (
                    <li key={statement.text}>{statement.text}</li>
                  ))}
                </ul>
              </section>

              <section aria-labelledby="case-boundaries">
                <h2 id="case-boundaries" className="ds-section-title">
                  Limites desta evidência
                </h2>
                <ul className="ds-list mt-sp-5 pl-[1.15rem]">
                  {caseStudy.detail.boundaries.map((boundary) => (
                    <li key={boundary.text}>{boundary.text}</li>
                  ))}
                </ul>
              </section>

              <section aria-labelledby="case-sources">
                <h2 id="case-sources" className="ds-section-title">
                  Fontes
                </h2>
                <ul className="mt-sp-5 space-y-sp-4">
                  {caseStudy.detail.sources.map((source) => {
                    const sha = getSourceSha(source.url);
                    return (
                      <li key={source.id}>
                        <a
                          className="ds-link ds-link-muted"
                          href={source.url}
                          target="_blank"
                          rel="noreferrer"
                        >
                          Fonte: {source.label}
                        </a>
                        {sha ? (
                          <span className="mt-sp-2 block text-[12px] text-[var(--meta)]">
                            Commit: <code className="break-all">{sha}</code>
                          </span>
                        ) : null}
                      </li>
                    );
                  })}
                </ul>
              </section>
            </div>
          </section>
        ) : null}

        {relatedServices.length > 0 ? (
          <section className="ds-section">
            <div className="ds-section-shell max-w-[960px]">
              <h2 className="ds-section-title">Serviços relacionados</h2>
              <div className="mt-sp-6 flex flex-wrap gap-sp-3">
                {relatedServices.map((service) => (
                  <Link
                    key={service.slug}
                    className="ds-link ds-link-muted"
                    href={`/servicos/${service.slug}`}
                  >
                    Ver serviço relacionado: {service.navLabel}
                  </Link>
                ))}
              </div>
            </div>
          </section>
        ) : null}

        <section className="ds-section ds-section-dark pb-sp-6">
          <div className="ds-section-shell max-w-[960px]">
            <h2 className="ds-card-title text-white">Próximos caminhos</h2>
            <div className="mt-sp-6 flex flex-wrap gap-sp-3">
              <Link
                className="ds-link ds-link-accent"
                href={intentCtas.hiring.href}
              >
                {intentCtas.hiring.label}
              </Link>
              <Link
                className="ds-link ds-link-muted"
                href={intentCtas.consulting.href}
              >
                {intentCtas.consulting.label}
              </Link>
            </div>
          </div>
        </section>
      </article>
    </main>
  );
}