import React from "react";
import type { Metadata } from "next";
import { SiteFrame } from "@/app/components/SiteFrame/SiteFrame";
import { JsonLd } from "@/app/lib/structured-data";
import { LearnContent } from "./LearnContent";
import { GLOSSARY, GLOSSARY_META } from "./glossary";
import styles from "./learn.module.css";

export const metadata: Metadata = {
  title: "Learn — The AI Systems Glossary",
  description:
    "Plain-language explanations of the concepts inside modern AI systems — agents, context engineering, RAG, guardrails, and governance — for leaders and teams.",
  alternates: { canonical: "/learn" },
  openGraph: {
    title: "The AI Systems Glossary — Meliorate",
    description:
      "AI systems, decoded: agents, context engineering, RAG, guardrails, and governance explained in plain language.",
    url: "/learn",
    type: "website",
  },
};

export default function LearnPage() {
  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://meliorate.pro" },
            { "@type": "ListItem", position: 2, name: "Learn", item: "https://meliorate.pro/learn" },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "DefinedTermSet",
          name: GLOSSARY_META.title,
          description: GLOSSARY_META.intro,
          url: "https://meliorate.pro/learn",
          hasDefinedTerm: GLOSSARY.flatMap((category) =>
            category.terms.map((t) => ({
              "@type": "DefinedTerm",
              name: t.term,
              description: t.definition,
              inDefinedTermSet: "https://meliorate.pro/learn",
            })),
          ),
        }}
      />
      <section className={styles.pageSection}>
        <div className={styles.container}>
          <LearnContent />
        </div>
      </section>
    </SiteFrame>
  );
}