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

export const metadata: Metadata = {
  title: `Servicos de Engenharia de Software e Consultoria Tecnica | ${siteName}`,
  description:
    "Servicos de engenharia de software, consultoria Next.js, Tauri, Rust, arquitetura de software e integracao hardware + software para produtos e sistemas criticos.",
  alternates: {
    canonical: `${siteUrl}/servicos`,
  },
  openGraph: {
    title: `Servicos de Engenharia de Software e Consultoria Tecnica | ${siteName}`,
    description:
      "Servicos de engenharia de software, consultoria Next.js, Tauri, Rust, arquitetura de software e integracao hardware + software para produtos e sistemas criticos.",
    url: `${siteUrl}/servicos`,
    siteName,
    type: "website",
  },
};

export default function ServicesIndexPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "CollectionPage",
        "@id": `${siteUrl}/servicos#page`,
        name: "Servicos de Engenharia de Software e Consultoria Tecnica",
        url: `${siteUrl}/servicos`,
        description:
          "Hub de servicos para engenharia de software, consultoria tecnica, Next.js, Tauri, Rust, IoT e arquitetura de software.",
      },
      {
        "@type": "ItemList",
        itemListElement: servicePages.map((service, index) => ({
          "@type": "ListItem",
          position: index + 1,
          url: `${siteUrl}/servicos/${service.slug}`,
          name: service.navLabel,
        })),
      },
    ],
  };

  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <section className="ds-section ds-section-dark">
        <div className="ds-section-shell">
          <div className="max-w-[860px]">
            <p className="ds-eyebrow">Hub de servicos</p>
            <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
              Servicos de engenharia de software para contextos tecnicos de alta exigencia.
            </h1>
            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
              Organizei as paginas de servico por intencao real de compra: engenharia de software,
              consultoria Next.js, Tauri e Rust, arquitetura de software e integracoes hardware + software.
            </p>
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-grid-2">
            {serviceHubLinks.map((service) => (
              <article key={service.href} className="ds-card">
                <div className="ds-kicker">Servico especializado</div>
                <h2 className="ds-card-title">{service.label}</h2>
                <p className="ds-copy">{service.description}</p>
                <div className="mt-sp-6">
                  <Link href={service.href} className="ds-link ds-link-accent">
                    Abrir pagina
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}