import Link from 'next/link';
import {
  ArrowRight,
  Award,
  BadgeCheck,
  BookOpenCheck,
  CheckCircle2,
  FileCheck2,
  Globe2,
  GraduationCap,
  Search,
  ShieldCheck,
  UsersRound,
} from 'lucide-react';
import CVFooter from '@/components/layout/CVFooter';
import CVHeader from '@/components/layout/CVHeader';
import { getHallOfFame } from '@/lib/hallOfFame';
import { MAIN_SITE_URL } from '@/lib/mainSiteUrl';

export const dynamic = 'force-dynamic';

const PAGE_PATH = '/hall-of-fame';
const PAGE_URL = `${MAIN_SITE_URL}${PAGE_PATH}`;
const SEO_TITLE = 'Certified Graduate Directory & Credential Verification | Cambridge Veritas';
const SEO_DESCRIPTION =
  'Explore verified Cambridge Veritas graduates across TESOL, IELTS, Voice & Accent and professional training. View portfolios, credential IDs, qualifications and graduate outcomes.';

export const metadata = {
  metadataBase: new URL(MAIN_SITE_URL),
  title: SEO_TITLE,
  description: SEO_DESCRIPTION,
  keywords: [
    'Cambridge Veritas certified graduates',
    'credential verification',
    'certified graduate directory',
    'TESOL graduate portfolio',
    'IELTS trainer graduate',
    'voice and accent trainer graduate',
    'CVTE certification verification',
  ],
  alternates: { canonical: PAGE_URL },
  openGraph: {
    title: SEO_TITLE,
    description: SEO_DESCRIPTION,
    url: PAGE_URL,
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: SEO_TITLE,
    description: SEO_DESCRIPTION,
  },
};

const FAQS = [
  {
    question: 'What is the Cambridge Veritas Hall of Fame?',
    answer:
      'It is the official Cambridge Veritas certified graduate directory. Published profiles connect a graduate to their completed programme, professional portfolio and available credential record.',
  },
  {
    question: 'Can employers verify a Cambridge Veritas graduate?',
    answer:
      'Yes. Employers and clients can open a graduate profile and, when a public credential is available, follow the certificate link to review the corresponding Cambridge Veritas verification record.',
  },
  {
    question: 'How are profiles in this directory verified?',
    answer:
      'Directory profiles are created from Cambridge Veritas learner and certification records. Programme details and public credential IDs are drawn from those records rather than submitted as unverified directory listings.',
  },
  {
    question: 'Does the directory include TESOL graduates?',
    answer:
      'The directory supports Cambridge Veritas certification pathways, including CVTE® TESOL. TESOL profiles appear when a graduate has an eligible published profile and credential record; the current directory can be filtered by the programmes represented today.',
  },
  {
    question: 'What information appears on a graduate profile?',
    answer:
      'A profile may show the graduate’s name, location, qualification, programme, professional summary, portfolio evidence, skills and a public credential-verification link where available.',
  },
  {
    question: 'How do I verify a CVTE® certificate?',
    answer:
      'Search this directory by the graduate’s name or credential ID. If the profile is not yet published, use the certificate verification link provided by the graduate or contact Cambridge Veritas for assistance.',
  },
];

const PROGRAM_LINKS = {
  CVIM: '/masterclass/cambridge-veritas-certificate-in-ielts-masterclass',
  CVAT: '/masterclass/cambridge-veritas-voice-and-accent-trainer-certification',
  CVHR: '/specializations/cambridge-veritas-hr-proficiency-certificate',
};

function JsonLd({ data }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data).replace(/</g, '\\u003c') }}
    />
  );
}

function directoryHref({ search = '', program = '' } = {}) {
  const params = new URLSearchParams();
  if (search) params.set('q', search);
  if (program) params.set('program', program);
  const query = params.toString();
  return `${PAGE_PATH}${query ? `?${query}` : ''}#graduate-directory`;
}

function formatDirectoryDate(value) {
  if (!value) return 'October 2026';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return 'October 2026';
  return date.toLocaleDateString('en-GB', { month: 'long', year: 'numeric', timeZone: 'UTC' });
}

export default async function HallOfFamePage({ searchParams }) {
  const params = await searchParams;
  const data = await getHallOfFame({ searchParams: params });
  const jsonLd = buildJsonLd(data);

  return (
    <div className="min-h-screen bg-[#FDFAF7] text-[#4A141E]">
      <JsonLd data={jsonLd} />
      <CVHeader showPromotion={false} />

      <main>
        <section className="border-b-4 border-[#D4AF37] bg-gradient-to-br from-[#4A141E] via-[#3B0F18] to-[#22080E]">
          <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
            <nav aria-label="Breadcrumb" className="mb-8 text-sm font-semibold text-[#E6D3B1]/75">
              <ol className="flex flex-wrap items-center justify-center gap-2">
                <li><Link className="hover:text-white" href="/">Home</Link></li>
                <li aria-hidden="true">/</li>
                <li aria-current="page" className="text-[#D4AF37]">Certified Graduate Directory</li>
              </ol>
            </nav>

            <div className="mx-auto max-w-4xl text-center">
              <div className="inline-flex items-center gap-2 rounded-full border border-[#D4AF37]/35 bg-[#D4AF37]/10 px-4 py-2 text-sm font-bold text-[#E6D3B1]">
                <ShieldCheck className="h-4 w-4 text-[#D4AF37]" aria-hidden="true" />
                Official graduate and credential directory
              </div>
              <h1 className="mt-5 text-3xl font-black leading-tight text-white sm:text-4xl md:text-5xl">
                Cambridge Veritas Certified Graduate Directory
              </h1>
              <p className="mx-auto mt-5 max-w-3xl text-base leading-relaxed text-[#E6D3B1] sm:text-lg">
                Verified professional profiles, portfolios and credentials from Cambridge Veritas graduates worldwide.
              </p>
              <div className="mt-8 flex flex-wrap justify-center gap-3 text-sm font-bold text-white/85">
                <span className="rounded-full border border-white/15 bg-white/5 px-4 py-2">{data.categories.reduce((sum, category) => sum + category.total, 0)} published profiles</span>
                <span className="rounded-full border border-white/15 bg-white/5 px-4 py-2">Public credential records</span>
                <span className="rounded-full border border-white/15 bg-white/5 px-4 py-2">Portfolio-backed evidence</span>
              </div>
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8" aria-labelledby="find-professional-title">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Search the directory</p>
            <h2 id="find-professional-title" className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">
              Find a Certified Cambridge Veritas Professional
            </h2>
            <p className="mt-3 leading-relaxed text-[#4A141E]/70">
              Search by graduate name, location, programme or public credential ID. Results link to individual professional portfolios and available certificate records.
            </p>
          </div>

          <form action={PAGE_PATH} method="get" className="mx-auto mt-8 grid max-w-5xl gap-3 rounded-3xl border border-[#E6D3B1]/70 bg-white p-4 shadow-[0_14px_45px_rgba(74,20,30,0.08)] md:grid-cols-[minmax(0,1fr)_240px_auto]">
            <label className="relative min-w-0">
              <span className="sr-only">Search by name, location, programme or credential ID</span>
              <Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#4A141E]/45" aria-hidden="true" />
              <input
                name="q"
                placeholder="Name, location or credential ID"
                className="h-14 w-full rounded-2xl border border-[#E6D3B1] bg-[#FDFAF7] pl-12 pr-4 text-[#4A141E] placeholder:text-[#4A141E]/45 focus:border-[#D4AF37] focus:outline-none focus:ring-2 focus:ring-[#D4AF37]/30"
                type="search"
                defaultValue={data.search}
              />
            </label>
            <label>
              <span className="sr-only">Filter by certification</span>
              <select
                name="program"
                defaultValue={data.program}
                className="h-14 w-full rounded-2xl border border-[#E6D3B1] bg-[#FDFAF7] px-4 font-bold text-[#4A141E] focus:border-[#D4AF37] focus:outline-none focus:ring-2 focus:ring-[#D4AF37]/30"
              >
                <option value="">All certifications</option>
                {data.categories.map((category) => (
                  <option key={category.code} value={category.code}>{category.code} ({category.total})</option>
                ))}
              </select>
            </label>
            <button type="submit" className="inline-flex h-14 items-center justify-center gap-2 rounded-2xl bg-[#4A141E] px-6 text-sm font-black text-white transition hover:bg-[#8B1C1C]">
              Search directory
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </button>
          </form>
        </section>

        <section className="border-y border-[#E6D3B1]/60 bg-white" aria-labelledby="certification-categories-title">
          <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
              <div>
                <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Programme categories</p>
                <h2 id="certification-categories-title" className="mt-2 text-2xl font-black text-[#4A141E] sm:text-3xl">Browse Graduates by Certification</h2>
              </div>
              <Link className="inline-flex items-center gap-2 text-sm font-black text-[#8B1C1C] hover:underline" href={directoryHref()}>
                View all profiles <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
            </div>

            <div className="mt-7 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {data.categories.map((category) => (
                <article key={category.code} className="rounded-3xl border border-[#E8DDD5] bg-[#FDFAF7] p-5">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#4A141E]">
                      <Award className="h-5 w-5 text-[#D4AF37]" aria-hidden="true" />
                    </div>
                    <span className="rounded-full bg-white px-3 py-1 text-xs font-black text-[#8B1C1C]">{category.total} {category.total === 1 ? 'graduate' : 'graduates'}</span>
                  </div>
                  <h3 className="mt-5 text-lg font-black text-[#4A141E]">{category.code === 'OTHER' ? 'Other verified credential' : `${category.code}® graduates`}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-[#4A141E]/65">{category.name}</p>
                  <div className="mt-5 flex flex-wrap gap-4 text-sm font-black text-[#8B1C1C]">
                    <Link href={directoryHref({ program: category.code })}>View profiles</Link>
                    {PROGRAM_LINKS[category.code] ? <Link href={PROGRAM_LINKS[category.code]}>View programme</Link> : null}
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section id="graduate-directory" className="scroll-mt-6 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8" aria-labelledby="graduate-grid-title">
          <div className="mb-7 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Verified profiles</p>
              <h2 id="graduate-grid-title" className="mt-2 text-2xl font-black text-[#4A141E] sm:text-3xl">
                {data.program ? `Verified ${data.program}® Graduates` : 'Professional Portfolios and Graduate Outcomes'}
              </h2>
              <p className="mt-2 text-sm text-[#4A141E]/65">{data.summary}{data.search ? ` matching “${data.search}”` : ''}</p>
            </div>
            {(data.search || data.program) ? (
              <Link href={directoryHref()} className="inline-flex w-fit items-center gap-2 rounded-full border border-[#E6D3B1] bg-white px-4 py-2 text-sm font-black text-[#8B1C1C]">Clear filters</Link>
            ) : (
              <div className="inline-flex w-fit items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-bold text-[#4A141E]/70 shadow-sm">
                <UsersRound className="h-4 w-4 text-[#8B1C1C]" aria-hidden="true" /> All profiles on one page
              </div>
            )}
          </div>

          {data.graduates.length ? (
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {data.graduates.map((graduate) => <GraduateCard key={graduate.id} graduate={graduate} />)}
            </div>
          ) : (
            <div className="rounded-3xl border border-[#E6D3B1]/60 bg-white px-6 py-14 text-center shadow-sm">
              <Search className="mx-auto h-8 w-8 text-[#8B1C1C]" aria-hidden="true" />
              <h3 className="mt-4 text-xl font-black text-[#4A141E]">No verified profiles matched</h3>
              <p className="mt-2 text-sm text-[#4A141E]/65">Try a different name, location, programme or credential ID.</p>
              <Link href={directoryHref()} className="mt-5 inline-flex h-12 items-center justify-center rounded-2xl bg-[#4A141E] px-5 text-sm font-black text-white">View all graduates</Link>
            </div>
          )}
        </section>

        <section className="bg-[#4A141E] text-white" aria-labelledby="verification-title">
          <div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-[1.05fr_.95fr] lg:px-8 lg:py-16">
            <div>
              <p className="text-sm font-black uppercase tracking-[0.18em] text-[#D4AF37]">Trust and transparency</p>
              <h2 id="verification-title" className="mt-3 text-3xl font-black">How Cambridge Veritas Credentials Are Verified</h2>
              <div className="mt-5 space-y-4 leading-7 text-[#E6D3B1]">
                <p>
                  This directory is a public discovery layer for Cambridge Veritas graduate records. Profiles are connected to internal learner and course data, so programme names, credential identifiers and portfolio links are displayed from the institution’s records rather than accepted as open, self-reported claims.
                </p>
                <p>
                  A directory profile helps an employer, school or client identify the graduate and understand the professional training represented. Where a public certificate link is available, visitors can open the corresponding record and compare the credential ID with the information supplied by the graduate.
                </p>
                <p>
                  The directory is not a promise of employment or an endorsement of claims outside the published Cambridge Veritas record. Portfolio summaries describe the learning evidence attached to each graduate. For a formal check, use the credential link or contact Cambridge Veritas with the graduate’s name and certificate ID.
                </p>
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
              <VerificationStep icon={BadgeCheck} title="1. Match the graduate" text="Search by name, location, programme or credential ID." />
              <VerificationStep icon={BookOpenCheck} title="2. Review the portfolio" text="Open the graduate profile to see the qualification and published evidence." />
              <VerificationStep icon={FileCheck2} title="3. Check the credential" text="Use the public certificate link when present to review the associated record." />
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8" aria-labelledby="tesol-pathway-title">
          <div className="overflow-hidden rounded-[2rem] border border-[#D4AF37]/50 bg-gradient-to-br from-white to-[#F6EFE9] shadow-[0_18px_55px_rgba(74,20,30,0.08)]">
            <div className="grid gap-8 p-7 sm:p-9 lg:grid-cols-[1fr_auto] lg:items-center">
              <div>
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#4A141E]"><GraduationCap className="h-6 w-6 text-[#D4AF37]" aria-hidden="true" /></div>
                <h2 id="tesol-pathway-title" className="mt-5 text-2xl font-black text-[#4A141E] sm:text-3xl">Explore the CVTE® TESOL Certification Pathway</h2>
                <p className="mt-4 max-w-3xl leading-7 text-[#4A141E]/70">
                  Looking for an online TESOL certification with live training, observed teaching practice and portfolio development? Review the Cambridge Veritas Certificate in TESOL. Eligible published CVTE® graduate profiles will be discoverable in this directory as those records become available.
                </p>
              </div>
              <div className="flex flex-col gap-3">
                <Link className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-[#4A1429] to-[#6B1E3D] px-6 py-3.5 text-sm font-extrabold text-white shadow-lg transition hover:scale-105" href="/certifications/cambridge-veritas-certificate-in-TESOL">
                  View TESOL certification <ArrowRight className="h-4 w-4" aria-hidden="true" />
                </Link>
                <Link className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl border-2 border-[#D4AF37] bg-white px-6 py-3.5 text-sm font-extrabold text-[#4A141E] transition hover:bg-[#F6EFE9]" href="/presentations">
                  Watch graduate teaching demonstrations <ArrowRight className="h-4 w-4" aria-hidden="true" />
                </Link>
                <Link className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl border-2 border-[#D4AF37] bg-white px-6 py-3.5 text-sm font-extrabold text-[#4A141E] transition hover:bg-[#F6EFE9]" href="/reviews">
                  Read verified Cambridge Veritas reviews <ArrowRight className="h-4 w-4" aria-hidden="true" />
                </Link>
              </div>
            </div>
          </div>
        </section>

        <section className="border-y border-[#E6D3B1]/60 bg-white" aria-labelledby="faq-title">
          <div className="mx-auto max-w-4xl px-4 py-14 sm:px-6 lg:px-8">
            <div className="text-center">
              <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Directory help</p>
              <h2 id="faq-title" className="mt-3 text-3xl font-black text-[#4A141E]">Frequently Asked Questions</h2>
            </div>
            <div className="mt-8 divide-y divide-[#E6D3B1]/70 rounded-3xl border border-[#E6D3B1]/70 bg-[#FDFAF7] px-5 sm:px-7">
              {FAQS.map((faq) => (
                <details key={faq.question} className="group py-5">
                  <summary className="cursor-pointer list-none pr-8 font-black text-[#4A141E] marker:content-none">{faq.question}</summary>
                  <p className="mt-3 leading-7 text-[#4A141E]/70">{faq.answer}</p>
                </details>
              ))}
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8" aria-labelledby="pathways-title">
          <div className="text-center">
            <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Next steps</p>
            <h2 id="pathways-title" className="mt-3 text-3xl font-black text-[#4A141E]">Explore Certification Pathways</h2>
          </div>
          <div className="mt-8 grid gap-4 md:grid-cols-3">
            <PathwayCard href="/certifications/cambridge-veritas-certificate-in-TESOL" title="CVTE® TESOL" text="Live online teacher training with observed practice and portfolio development." />
            <PathwayCard href="/masterclass/cambridge-veritas-certificate-in-ielts-masterclass" title="CVIM® IELTS Masterclass" text="Professional IELTS training and evidence-led trainer development." />
            <PathwayCard href="/masterclass/cambridge-veritas-voice-and-accent-trainer-certification" title="CVAT® Voice & Accent" text="A trainer pathway focused on pronunciation, voice and accent development." />
          </div>
          <div className="mt-7 text-center">
            <Link href="/certifications" className="inline-flex items-center gap-2 rounded-2xl border-2 border-[#D4AF37] bg-white px-6 py-3 text-sm font-black text-[#4A141E] transition hover:bg-[#F6EFE9]">
              Compare all certification pathways <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </Link>
          </div>
          <p className="mt-8 text-center text-sm font-semibold text-[#4A141E]/55">Directory records current through {formatDirectoryDate(data.lastUpdated)}.</p>
        </section>
      </main>

      <CVFooter />
    </div>
  );
}

function GraduateCard({ graduate }) {
  return (
    <article className="h-full">
      <Link
        className="group flex h-full flex-col rounded-3xl border border-[#E8DDD5] bg-white p-5 shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-[#D4AF37] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#D4AF37] focus:ring-offset-2"
        aria-label={`View ${graduate.fullName}'s verified ${graduate.courseCode} graduate profile`}
        href={graduate.profileUrl}
      >
        <div className="flex items-start justify-between gap-4">
          {graduate.photo ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img className="h-20 w-20 rounded-2xl object-cover ring-4 ring-[#F6EFE9]" src={graduate.photo} alt={`${graduate.fullName}, Cambridge Veritas ${graduate.courseCode} graduate`} loading="lazy" />
          ) : (
            <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-[#4A141E] to-[#8B1C1C] text-2xl font-black text-white ring-4 ring-[#F6EFE9]" aria-label={`${graduate.fullName} profile placeholder`}>
              {graduate.initial}
            </div>
          )}
          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#4A141E] shadow-sm" title="Verified Cambridge Veritas record">
            <ShieldCheck className="h-6 w-6 text-[#D4AF37]" aria-hidden="true" />
          </div>
        </div>

        <div className="mt-5 flex-1">
          <p className="text-xs font-black uppercase tracking-wide text-[#8B1C1C]">{graduate.courseCode}® verified graduate</p>
          <h3 className="mt-2 text-lg font-black leading-tight text-[#4A141E]">{graduate.fullName}</h3>
          <p className="mt-1 flex items-center gap-1.5 text-sm text-[#4A141E]/60"><Globe2 className="h-3.5 w-3.5" aria-hidden="true" />{graduate.location}</p>
          <p className="mt-4 line-clamp-2 text-sm font-semibold leading-relaxed text-[#4A141E]/75">{graduate.courseTitle}</p>
          {graduate.certificateId ? (
            <p className="mt-4 break-all rounded-xl bg-[#F6EFE9] px-3 py-2 text-[11px] font-bold text-[#4A141E]/65">Credential ID: {graduate.certificateId}</p>
          ) : null}
        </div>

        <div className="mt-5 flex items-center justify-between border-t border-[#E6D3B1]/50 pt-4">
          <span className="text-sm font-black text-[#8B1C1C]">View portfolio</span>
          <ArrowRight className="h-4 w-4 text-[#8B1C1C] transition group-hover:translate-x-1" aria-hidden="true" />
        </div>
      </Link>
    </article>
  );
}

function VerificationStep({ icon: Icon, title, text }) {
  return (
    <div className="flex gap-4 rounded-3xl border border-white/10 bg-white/5 p-5">
      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#D4AF37]"><Icon className="h-5 w-5 text-[#4A141E]" aria-hidden="true" /></div>
      <div><h3 className="font-black text-white">{title}</h3><p className="mt-1 text-sm leading-6 text-[#E6D3B1]/80">{text}</p></div>
    </div>
  );
}

function PathwayCard({ href, title, text }) {
  return (
    <Link href={href} className="group rounded-3xl border border-[#E6D3B1]/70 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:border-[#D4AF37] hover:shadow-lg">
      <CheckCircle2 className="h-6 w-6 text-[#8B1C1C]" aria-hidden="true" />
      <h3 className="mt-4 text-xl font-black text-[#4A141E]">{title}</h3>
      <p className="mt-3 text-sm leading-6 text-[#4A141E]/65">{text}</p>
      <span className="mt-5 inline-flex items-center gap-2 text-sm font-black text-[#8B1C1C]">View programme <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" aria-hidden="true" /></span>
    </Link>
  );
}

function buildJsonLd(data) {
  const itemList = {
    '@type': 'ItemList',
    '@id': `${PAGE_URL}#graduate-list`,
    name: 'Cambridge Veritas certified graduates',
    numberOfItems: data.graduates.length,
    itemListElement: data.graduates.map((graduate, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      url: `${MAIN_SITE_URL}${graduate.profileUrl}`,
      name: graduate.fullName,
    })),
  };

  return {
    '@context': 'https://schema.org',
    '@graph': [
      {
        '@type': 'CollectionPage',
        '@id': `${PAGE_URL}#webpage`,
        url: PAGE_URL,
        name: SEO_TITLE,
        description: SEO_DESCRIPTION,
        isPartOf: { '@id': `${MAIN_SITE_URL}/#website` },
        about: { '@id': `${MAIN_SITE_URL}/#organization` },
        mainEntity: { '@id': `${PAGE_URL}#graduate-list` },
      },
      {
        '@type': 'EducationalOrganization',
        '@id': `${MAIN_SITE_URL}/#organization`,
        name: 'Cambridge Veritas',
        url: MAIN_SITE_URL,
      },
      itemList,
      {
        '@type': 'BreadcrumbList',
        '@id': `${PAGE_URL}#breadcrumb`,
        itemListElement: [
          { '@type': 'ListItem', position: 1, name: 'Home', item: `${MAIN_SITE_URL}/` },
          { '@type': 'ListItem', position: 2, name: 'Certified Graduate Directory', item: PAGE_URL },
        ],
      },
      {
        '@type': 'FAQPage',
        '@id': `${PAGE_URL}#faq`,
        mainEntity: FAQS.map((faq) => ({
          '@type': 'Question',
          name: faq.question,
          acceptedAnswer: { '@type': 'Answer', text: faq.answer },
        })),
      },
    ],
  };
}