import Link from "next/link";
import { notFound } from "next/navigation";
import {
  ArrowRight,
  BadgeCheck,
  BookOpen,
  CheckCircle2,
  ClipboardCheck,
  GraduationCap,
  PlayCircle,
  Search,
  ShieldCheck,
  Sparkles,
  Target,
  UsersRound,
} from "lucide-react";
import CVFooter from "@/components/layout/CVFooter";
import CVHeader from "@/components/layout/CVHeader";
import PresentationListActions from "@/components/presentations/PresentationListActions";
import PresentationPageContent from "@/components/presentations/PresentationPageContent";
import { getPresentationByPublicId, getPresentationsList, getRelatedCourses } from "@/lib/presentations";

const SITE_URL = "https://cambridgeveritas.com";
const PAGE_URL = `${SITE_URL}/presentations`;
const PAGE_TITLE = "TESOL Microteaching Examples & Alumni Presentations | Cambridge Veritas";
const PAGE_DESCRIPTION = "Watch real TESOL, IELTS and English teacher microteaching examples from Cambridge Veritas graduates. Explore teaching demonstrations, trainer presentations and professional portfolios.";

const CATEGORIES = [
  { key: "", label: "All presentations", title: "All graduate work", description: "Browse the complete published collection." },
  { key: "tesol", label: "Microteaching & TESOL", title: "TESOL and microteaching examples", description: "Published work identified with TESOL or microteaching practice." },
  { key: "ielts", label: "IELTS", title: "IELTS trainer microteaching", description: "IELTS methodology and trainer-development work." },
  { key: "voice-and-accent", label: "Voice & Accent", title: "Voice and accent demonstrations", description: "Pronunciation, speech and trainer communication work." },
  { key: "professional", label: "Professional English", title: "Professional English presentations", description: "Workplace and specialist communication projects." },
];

const LEARNING_POINTS = [
  ["Lesson structure", "Notice how a clear opening, focused development and purposeful close help an audience follow the learning journey."],
  ["Teacher instructions", "Listen for concise task directions, sequencing language and checks that help learners understand what to do."],
  ["Elicitation", "Observe how questions and prompts can activate prior knowledge instead of turning every stage into a lecture."],
  ["Concept checking", "Look for evidence that the presenter checks meaning or understanding rather than relying only on ‘Do you understand?’"],
  ["Pronunciation teaching", "Study the use of modelling, articulation, stress, rhythm and intelligibility in relevant voice and accent examples."],
  ["Learner engagement", "Consider where a task creates participation, reflection or interaction instead of passive listening."],
  ["Feedback", "Notice whether comments are specific, connected to the objective and useful for a learner’s next attempt."],
  ["Assessment", "Identify what evidence could show that the stated outcome has been achieved by the end of the task."],
  ["IELTS methodology", "In IELTS-related work, examine how a trainer connects task demands, assessment criteria and strategy instruction."],
  ["Teacher language", "Evaluate clarity, pace, tone, questioning and the balance between teacher talk and learner contribution."],
];

const EFFECTIVE_DEMONSTRATION_CHECKLIST = [
  "One clear and observable learning objective",
  "A logical sequence with realistic timing",
  "Accurate, level-appropriate teacher language",
  "Brief instructions with an understanding check",
  "Meaningful learner participation",
  "Evidence that concepts have been understood",
  "Feedback connected to the objective",
  "Teaching aids that support rather than distract",
  "Reflection on what to retain or improve next time",
];

const FAQS = [
  {
    question: "What is microteaching in TESOL?",
    answer: "Microteaching is a short, focused teaching-practice activity. A trainee plans and delivers part of a lesson, receives evidence-based feedback and reflects on how to improve a later attempt or full lesson.",
  },
  {
    question: "Why is microteaching used in English teacher training?",
    answer: "It gives trainee teachers a manageable setting in which to practise objectives, instructions, explanation, interaction, assessment and classroom communication before combining those skills in a longer lesson.",
  },
  {
    question: "Can I watch real TESOL microteaching examples here?",
    answer: "This collection includes Cambridge Veritas graduate presentations and teaching-related work. Items are described as microteaching only when the published presentation information identifies them as a microteaching task; other items retain accurate labels such as graduate presentation.",
  },
  {
    question: "What should an English teacher include in a microteaching lesson?",
    answer: "Start with one measurable objective, select a short input or model, plan clear instructions and learner practice, decide how understanding will be checked and reserve time for focused feedback and reflection.",
  },
  {
    question: "How long should a microteaching lesson be?",
    answer: "The required length depends on the programme and assessment brief. Microteaching is intentionally shorter than a normal class, so teachers should confirm the assigned time and choose an objective that can be demonstrated within it.",
  },
  {
    question: "How is a microteaching demonstration assessed?",
    answer: "Criteria vary, but a review may consider objective alignment, lesson structure, subject accuracy, instructions, interaction, checking understanding, feedback, time management and the teacher’s reflective evaluation.",
  },
  {
    question: "What is an IELTS trainer microteaching session?",
    answer: "It is a focused teaching demonstration based on an IELTS skill, task type, strategy or assessment feature. A strong example connects exam knowledge to a teachable learner outcome rather than simply presenting test information.",
  },
  {
    question: "How can I build a professional English-teacher portfolio?",
    answer: "Include selected lesson plans, teaching materials, recorded demonstrations where consent permits, feedback, reflections, relevant credentials and a short explanation of what each item shows about your teaching practice.",
  },
];

export const dynamic = "force-dynamic";

export const metadata = {
  title: PAGE_TITLE,
  description: PAGE_DESCRIPTION,
  keywords: [
    "TESOL microteaching examples",
    "microteaching examples for English teachers",
    "English teaching demonstration videos",
    "IELTS trainer microteaching",
    "TESOL graduate portfolio examples",
  ],
  alternates: { canonical: PAGE_URL },
  robots: { index: true, follow: true },
  openGraph: {
    type: "website",
    url: PAGE_URL,
    siteName: "Cambridge Veritas",
    title: PAGE_TITLE,
    description: PAGE_DESCRIPTION,
  },
  twitter: {
    card: "summary_large_image",
    title: PAGE_TITLE,
    description: PAGE_DESCRIPTION,
  },
};

function pageHref(page, search, category) {
  const params = new URLSearchParams();
  if (search) params.set("q", search);
  if (category) params.set("category", category);
  if (page > 1) params.set("page", String(page));
  const query = params.toString();
  return `${query ? `/presentations?${query}` : "/presentations"}#presentations-grid`;
}

function categoryHref(category) {
  return category ? `/presentations?category=${encodeURIComponent(category)}#presentations-grid` : "/presentations#presentations-grid";
}

function presentationContext(presentation) {
  const content = `${presentation.courseTitle} ${presentation.title} ${presentation.description}`.toLowerCase();
  const isMicroteaching = /micro[\s-]?teach/.test(content);

  if (content.includes("ielts")) {
    return {
      category: "IELTS trainer development",
      type: isMicroteaching ? "Microteaching demonstration" : "Graduate presentation",
      focus: ["IELTS methodology", "Assessment literacy", "Trainer communication"],
      fallbackCourseUrl: "/masterclass/cambridge-veritas-certificate-in-ielts-masterclass",
    };
  }

  if (content.includes("voice") || content.includes("accent") || content.includes("pronunciation")) {
    return {
      category: "Voice and accent training",
      type: isMicroteaching ? "Microteaching demonstration" : "Graduate presentation",
      focus: ["Pronunciation", "Trainer communication", "Presentation skills"],
      fallbackCourseUrl: "/masterclass/cambridge-veritas-voice-and-accent-trainer-certification",
    };
  }

  if (content.includes("tesol") || content.includes("english teach")) {
    return {
      category: "TESOL teacher training",
      type: isMicroteaching ? "Microteaching demonstration" : "Teaching presentation",
      focus: ["Lesson planning", "Teacher language", "Reflective practice"],
      fallbackCourseUrl: "/certifications/cambridge-veritas-certificate-in-TESOL",
    };
  }

  return {
    category: "Professional English",
    type: "Graduate presentation",
    focus: ["Professional communication", "Subject knowledge", "Presentation skills"],
    fallbackCourseUrl: presentation.courseUrl || "/courses",
  };
}

function youtubeThumbnail(videoUrl) {
  const match = String(videoUrl || "").match(/(?:embed\/|youtu\.be\/|v=)([A-Za-z0-9_-]{6,})/);
  return match ? `https://i.ytimg.com/vi/${match[1]}/hqdefault.jpg` : "";
}

function buildSchema(data) {
  const itemListId = `${PAGE_URL}#graduate-presentations`;
  const organizationId = `${SITE_URL}/#organization`;

  const itemListElement = data.presentations.map((presentation, index) => {
    const url = `${SITE_URL}/presentation/${encodeURIComponent(presentation.presentationId)}`;
    const thumbnailUrl = youtubeThumbnail(presentation.videoUrl);
    const item = presentation.videoUrl
      ? {
          "@type": "VideoObject",
          "@id": `${url}#video`,
          name: presentation.title,
          description: presentation.description,
          url,
          embedUrl: presentation.videoUrl,
          ...(thumbnailUrl ? { thumbnailUrl } : {}),
          publisher: { "@id": organizationId },
        }
      : {
          "@type": "CreativeWork",
          "@id": `${url}#presentation`,
          name: presentation.title,
          description: presentation.description,
          url,
          creator: { "@type": "Person", name: presentation.studentName },
        };

    return {
      "@type": "ListItem",
      position: (data.page - 1) * data.pageSize + index + 1,
      item,
    };
  });

  return {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "EducationalOrganization",
        "@id": organizationId,
        name: "Cambridge Veritas",
        url: `${SITE_URL}/`,
        logo: `${SITE_URL}/uploads/logo/logo_67d1d1477bf480-32184625.png`,
      },
      {
        "@type": "CollectionPage",
        "@id": `${PAGE_URL}#webpage`,
        name: "TESOL Microteaching Examples & Cambridge Veritas Alumni Presentations",
        url: PAGE_URL,
        description: PAGE_DESCRIPTION,
        isPartOf: { "@type": "WebSite", "@id": `${SITE_URL}/#website`, name: "Cambridge Veritas", url: `${SITE_URL}/` },
        publisher: { "@id": organizationId },
        mainEntity: { "@id": itemListId },
      },
      {
        "@type": "ItemList",
        "@id": itemListId,
        name: "Cambridge Veritas graduate teaching presentations",
        numberOfItems: data.total,
        itemListOrder: "https://schema.org/ItemListOrderDescending",
        itemListElement,
      },
      {
        "@type": "BreadcrumbList",
        "@id": `${PAGE_URL}#breadcrumb`,
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "Home", item: `${SITE_URL}/` },
          { "@type": "ListItem", position: 2, name: "Graduate Presentations", item: PAGE_URL },
        ],
      },
      {
        "@type": "FAQPage",
        "@id": `${PAGE_URL}#faq`,
        mainEntity: FAQS.map((faq) => ({
          "@type": "Question",
          name: faq.question,
          acceptedAnswer: { "@type": "Answer", text: faq.answer },
        })),
      },
    ],
  };
}

export default async function PresentationsPage({ searchParams }) {
  const params = await searchParams;
  const requestedId = params?.id || params?.presentation_id || params?.presentationId || "";

  if (requestedId) {
    const presentation = await getPresentationByPublicId(requestedId);
    if (!presentation) notFound();
    const relatedCourses = await getRelatedCourses(3);
    return <PresentationPageContent presentation={presentation} relatedCourses={relatedCourses} />;
  }

  const data = await getPresentationsList({ searchParams: params, pageSize: 9 });
  const activeCategory = CATEGORIES.find((category) => category.key === data.category) || CATEGORIES[0];
  const schema = buildSchema(data);

  return (
    <div className="min-h-screen bg-[#FDFAF7] text-[#4A141E]">
      <CVHeader showPromotion={false} />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema).replace(/</g, "\\u003c") }}
      />

      <main>
        <header className="border-b-4 border-[#D4AF37] bg-gradient-to-br from-[#4A141E] via-[#3B0F18] to-[#4A141E]">
          <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
            <nav aria-label="Breadcrumb" className="mb-7 flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-[0.16em] text-[#E6D3B1]/70">
              <Link href="/" className="hover:text-white">Home</Link>
              <span aria-hidden="true">/</span>
              <span aria-current="page" className="text-[#D4AF37]">Graduate presentations</span>
            </nav>
            <div className="mx-auto max-w-5xl text-center">
              <div className="inline-flex items-center gap-2 rounded-full border border-[#D4AF37]/35 bg-[#D4AF37]/8 px-4 py-2 text-xs font-black uppercase leading-none tracking-[0.18em] text-[#E6D3B1]">
                <Sparkles className="h-4 w-4 shrink-0 text-[#D4AF37]" aria-hidden="true" />
                <span className="translate-y-[1px]">Graduate teaching evidence</span>
              </div>
              <h1 className="mt-5 text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
                TESOL Microteaching Examples & Cambridge Veritas Alumni Presentations
              </h1>
              <p className="mx-auto mt-6 max-w-3xl text-base leading-8 text-[#E6D3B1]/88 sm:text-lg">
                Explore real graduate work across TESOL, IELTS trainer development, voice and accent training, and professional English. Use the library to study teaching decisions, presentation techniques and the kinds of evidence that can strengthen a professional portfolio.
              </p>
              <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
                <a href="#presentations-grid" className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl bg-[#D4AF37] px-6 py-3.5 text-sm font-black leading-none text-[#3B0F18] shadow-lg transition hover:bg-[#E6D3B1]">
                  Browse graduate work <ArrowRight className="h-4 w-4 shrink-0" aria-hidden="true" />
                </a>
                <Link href="/hall-of-fame" className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl border border-[#D4AF37]/50 bg-white/10 px-6 py-3.5 text-sm font-black leading-none text-[#E6D3B1] transition hover:bg-white/15">
                  Meet verified graduates <UsersRound className="h-4 w-4 shrink-0" aria-hidden="true" />
                </Link>
              </div>
            </div>
          </div>
        </header>

        <section className="border-b border-[#E6D3B1]/60 bg-white" aria-labelledby="evidence-title">
          <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
            <div className="grid gap-10 lg:grid-cols-[1.05fr_.95fr] lg:items-start">
              <div>
                <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">About this showcase</p>
                <h2 id="evidence-title" className="mt-3 text-3xl font-black sm:text-4xl">Real Teaching Demonstrations From Cambridge Veritas Graduates</h2>
                <div className="mt-5 space-y-4 leading-7 text-[#4A141E]/72">
                  <p>
                    This collection brings together presentations currently published as Cambridge Veritas learner and graduate output. It includes teaching-related demonstrations, trainer-development work, professional communication projects and graduate reflections from different programmes.
                  </p>
                  <p>
                    The library is evidence-first: cards retain the graduate name, programme and published presentation topic, and link to a public graduate profile when one is available. Because not every presentation is a teaching assessment, only work whose published information identifies microteaching is labelled as a microteaching demonstration. Other work is accurately described as a graduate presentation.
                  </p>
                  <p>
                    Use these examples to observe choices and generate questions—not to copy a lesson unchanged. Teaching quality depends on the learner group, objective, context and assessment brief. The most useful viewing habit is to identify what the presenter intended, what evidence the audience produced and what could be adjusted in a future version.
                  </p>
                </div>
              </div>
              <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-1">
                <InfoCard icon={PlayCircle} title="Primary evidence" text="Open individual presentations and review published graduate output directly." />
                <InfoCard icon={BadgeCheck} title="Connected profiles" text="Follow available graduate-profile and programme links for useful context." />
                <InfoCard icon={ShieldCheck} title="Accurate labels" text="Microteaching, teaching demonstrations and general presentations remain distinct." />
              </div>
            </div>
          </div>
        </section>

        <section className="border-b border-[#E6D3B1]/60 bg-[#F6EFE9]" aria-labelledby="microteaching-title">
          <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8 lg:py-20">
            <div className="grid gap-10 lg:grid-cols-[.85fr_1.15fr]">
              <div>
                <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Teacher-practice guide</p>
                <h2 id="microteaching-title" className="mt-3 text-3xl font-black sm:text-4xl">What Is Microteaching in TESOL and Teacher Training?</h2>
              </div>
              <div className="space-y-4 leading-7 text-[#4A141E]/72">
                <p>
                  Microteaching is a short, deliberately focused teaching-practice activity. Instead of attempting an entire class, a trainee works with one manageable learning objective and a limited lesson segment. That makes it easier to examine specific teaching skills such as setting up a task, modelling language, eliciting responses, checking understanding or giving feedback.
                </p>
                <p>
                  A typical cycle moves from planning to delivery, then to feedback and reflection. The teacher decides what learners should be able to do, selects suitable input and practice, teaches the segment, and reviews evidence from the performance. Feedback may come from a trainer, peers, learners or a recording. The teacher then identifies one or two changes for a later attempt.
                </p>
                <p>
                  A normal presentation mainly communicates information to an audience. Microteaching has a teaching outcome: the audience should process, practise or demonstrate learning. Slides and confident speaking may support the lesson, but they do not replace interaction, an appropriate task or a way to check whether the objective was achieved.
                </p>
                <p>
                  Watching examples helps new teachers turn abstract methodology into visible decisions. Compare the objective with the activity, listen to the instructions, notice who does most of the talking and ask what evidence would convince you that learning occurred.
                </p>
              </div>
            </div>

            <ol className="mt-10 grid gap-5 md:grid-cols-4">
              {[
                ["1", "Plan", "Choose one outcome, learner group and realistic evidence of success."],
                ["2", "Deliver", "Teach the focused segment with clear language and purposeful interaction."],
                ["3", "Receive feedback", "Review observable evidence against the task or assessment criteria."],
                ["4", "Reflect", "Select practical changes and apply them in the next teaching attempt."],
              ].map(([number, title, text]) => (
                <li key={title} className="rounded-3xl border border-[#E6D3B1]/70 bg-white p-6 shadow-sm">
                  <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#4A141E] text-sm font-black text-[#D4AF37]">{number}</span>
                  <h3 className="mt-4 text-lg font-black">{title}</h3>
                  <p className="mt-2 text-sm leading-6 text-[#4A141E]/65">{text}</p>
                </li>
              ))}
            </ol>
          </div>
        </section>

        <section className="bg-white" aria-labelledby="categories-title">
          <div className="mx-auto max-w-7xl px-4 pt-14 sm:px-6 lg:px-8">
            <div className="max-w-3xl">
              <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Browse by specialisation</p>
              <h2 id="categories-title" className="mt-3 text-3xl font-black sm:text-4xl">Explore Graduate Teaching Presentations</h2>
              <p className="mt-4 leading-7 text-[#4A141E]/68">Use these crawlable category links to focus the collection. Categories reflect the programme or subject information attached to each published record.</p>
            </div>
            <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
              {CATEGORIES.map((category) => {
                const isActive = category.key === data.category;
                return (
                  <Link
                    key={category.label}
                    href={categoryHref(category.key)}
                    aria-current={isActive ? "page" : undefined}
                    className={`rounded-2xl border p-5 transition hover:-translate-y-0.5 hover:border-[#D4AF37] hover:shadow-md ${isActive ? "border-[#D4AF37] bg-[#4A141E] text-white" : "border-[#E6D3B1] bg-[#FDFAF7] text-[#4A141E]"}`}
                  >
                    <h3 className="font-black">{category.title}</h3>
                    <p className={`mt-2 text-sm leading-6 ${isActive ? "text-[#E6D3B1]/85" : "text-[#4A141E]/62"}`}>{category.description}</p>
                  </Link>
                );
              })}
            </div>
          </div>
        </section>

        <section id="presentations-grid" className="scroll-mt-6 bg-white">
          <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
            <div className="mb-8 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
              <div>
                <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">{activeCategory.label}</p>
                <h2 className="mt-3 text-2xl font-black sm:text-3xl">Published Graduate Presentations</h2>
                <p className="mt-2 text-sm text-[#4A141E]/60">{data.summary}</p>
              </div>
              <form action="/presentations" method="get" className="flex w-full max-w-xl flex-col gap-2 sm:flex-row">
                {data.category ? <input type="hidden" name="category" value={data.category} /> : null}
                <div className="relative min-w-0 flex-1">
                  <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" />
                  <label htmlFor="presentation-search" className="sr-only">Search presentations by graduate, topic or programme</label>
                  <input
                    id="presentation-search"
                    name="q"
                    type="search"
                    defaultValue={data.search}
                    placeholder="Search graduate, topic or programme"
                    className="h-12 w-full rounded-2xl border border-[#E6D3B1] bg-white pl-12 pr-4 text-sm font-semibold text-[#4A141E] shadow-sm outline-none transition placeholder:text-[#4A141E]/40 focus:border-[#D4AF37] focus:ring-2 focus:ring-[#D4AF37]/25"
                  />
                </div>
                <button type="submit" className="inline-flex h-12 items-center justify-center rounded-2xl bg-[#4A141E] px-5 text-sm font-black leading-none text-white transition hover:bg-[#8B1C1C]">Search</button>
              </form>
            </div>

            {data.presentations.length ? (
              <div className="grid items-stretch gap-6 md:grid-cols-2 xl:grid-cols-3">
                {data.presentations.map((presentation) => (
                  <PresentationCard key={presentation.presentationId || presentation.id} presentation={presentation} />
                ))}
              </div>
            ) : (
              <div className="rounded-3xl border border-[#E6D3B1] bg-[#FDFAF7] p-8 text-center shadow-sm">
                <h3 className="text-xl font-black">No graduate presentations found</h3>
                <p className="mt-2 text-sm text-[#4A141E]/65">Try another name or topic, or return to the complete collection.</p>
                <Link href="/presentations#presentations-grid" className="mt-5 inline-flex h-12 items-center justify-center rounded-2xl bg-[#4A141E] px-5 text-sm font-black text-white transition hover:bg-[#8B1C1C]">View all presentations</Link>
              </div>
            )}

            {data.totalPages > 1 ? <Pagination data={data} /> : null}
          </div>
        </section>

        <section className="border-y border-[#E6D3B1]/60 bg-[#F6EFE9]" aria-labelledby="learn-title">
          <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8 lg:py-20">
            <div className="mx-auto max-w-3xl text-center">
              <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Watch with purpose</p>
              <h2 id="learn-title" className="mt-3 text-3xl font-black sm:text-4xl">What You Can Learn From These Microteaching Examples</h2>
              <p className="mt-4 leading-7 text-[#4A141E]/68">Use this observation framework for relevant teaching demonstrations and adapt the questions to the presentation format you are watching.</p>
            </div>
            <div className="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-5">
              {LEARNING_POINTS.map(([title, text], index) => (
                <article key={title} className="rounded-3xl border border-[#E6D3B1]/70 bg-white p-6 shadow-sm">
                  <span className="text-xs font-black text-[#8B1C1C]">{String(index + 1).padStart(2, "0")}</span>
                  <h3 className="mt-3 text-lg font-black">{title}</h3>
                  <p className="mt-2 text-sm leading-6 text-[#4A141E]/65">{text}</p>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-white" aria-labelledby="assessment-title">
          <div className="mx-auto grid max-w-7xl gap-8 px-4 py-14 sm:px-6 lg:grid-cols-2 lg:px-8 lg:py-20">
            <article className="rounded-[2rem] border border-[#E6D3B1]/70 bg-[#FDFAF7] p-7 sm:p-9">
              <ClipboardCheck className="h-8 w-8 text-[#8B1C1C]" aria-hidden="true" />
              <h2 id="assessment-title" className="mt-5 text-3xl font-black">How Microteaching Is Assessed</h2>
              <div className="mt-5 space-y-4 leading-7 text-[#4A141E]/70">
                <p>
                  Assessment should begin with the task brief and its stated criteria. A trainer may examine whether the objective is suitable, whether the sequence supports it, how clearly instructions are delivered, how learners participate and what evidence shows that learning occurred.
                </p>
                <p>
                  Feedback is most useful when it refers to observable moments rather than personality. For example, “the instruction contained three actions before learners started” is more actionable than “be clearer.” The trainee can then shorten the instruction, model the task and check it before the next attempt.
                </p>
                <p>
                  Programme requirements differ. A presentation in this public library should not be treated as proof that every Cambridge Veritas course uses the same assessment, duration or rubric. Open the relevant programme page for its current learning and assessment information.
                </p>
              </div>
              <div className="mt-6 flex flex-wrap gap-4">
                <Link href="/certifications/cambridge-veritas-certificate-in-TESOL" className="inline-flex items-center gap-2 font-black text-[#8B1C1C] hover:text-[#4A141E]">Explore the TESOL certification pathway <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
                <Link href="/free-resources" className="inline-flex items-center gap-2 font-black text-[#8B1C1C] hover:text-[#4A141E]">Browse TESOL teaching examples and resources <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
              </div>
            </article>

            <article className="rounded-[2rem] border border-[#D4AF37]/50 bg-gradient-to-br from-[#4A141E] to-[#3B0F18] p-7 text-white sm:p-9">
              <Target className="h-8 w-8 text-[#D4AF37]" aria-hidden="true" />
              <h2 className="mt-5 text-3xl font-black">What Makes an Effective English Teaching Demonstration?</h2>
              <p className="mt-4 leading-7 text-[#E6D3B1]/85">Use this checklist to plan your own demonstration or to reflect on a published example. The criteria should always be adapted to the learner group and task brief.</p>
              <ul className="mt-6 grid gap-3 sm:grid-cols-2">
                {EFFECTIVE_DEMONSTRATION_CHECKLIST.map((item) => (
                  <li key={item} className="flex gap-3 text-sm leading-6 text-white/88"><CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-[#D4AF37]" aria-hidden="true" />{item}</li>
                ))}
              </ul>
            </article>
          </div>
        </section>

        <section className="border-y border-[#E6D3B1]/60 bg-[#F6EFE9]" aria-labelledby="portfolio-title">
          <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
            <div className="overflow-hidden rounded-[2rem] border border-[#D4AF37]/50 bg-white shadow-[0_18px_55px_rgba(74,20,30,0.08)]">
              <div className="grid gap-8 p-7 sm:p-9 lg:grid-cols-[.85fr_1.15fr] lg:items-center">
                <div>
                  <GraduationCap className="h-9 w-9 text-[#8B1C1C]" aria-hidden="true" />
                  <p className="mt-5 text-xs font-black uppercase tracking-[0.18em] text-[#8B1C1C]">From practice to evidence</p>
                  <h2 id="portfolio-title" className="mt-3 text-3xl font-black">Build Your Own Professional Teaching Portfolio</h2>
                </div>
                <div>
                  <p className="leading-7 text-[#4A141E]/70">A useful teaching portfolio is curated, not crowded. Connect each artefact to a professional purpose: a lesson plan shows planning, a short recording shows delivery, trainer feedback shows external observation, and reflection shows how you use evidence to improve. Protect learner privacy and publish recordings only when the necessary consent exists.</p>
                  <div className="mt-6 flex flex-wrap gap-3">
                    <Link href="/hall-of-fame" className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl bg-[#4A141E] px-5 py-3 text-sm font-black text-white hover:bg-[#8B1C1C]">Explore graduate profiles <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
                    <Link href="/masterclass/cambridge-veritas-certificate-in-ielts-masterclass" className="inline-flex min-h-12 items-center justify-center rounded-2xl border-2 border-[#D4AF37] px-5 py-3 text-sm font-black text-[#4A141E] hover:bg-[#F6EFE9]">IELTS trainer development</Link>
                    <Link href="/masterclass/cambridge-veritas-voice-and-accent-trainer-certification" className="inline-flex min-h-12 items-center justify-center rounded-2xl border-2 border-[#D4AF37] px-5 py-3 text-sm font-black text-[#4A141E] hover:bg-[#F6EFE9]">Voice & Accent trainer pathway</Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-white" aria-labelledby="faq-title">
          <div className="mx-auto max-w-4xl px-4 py-14 sm:px-6 lg:px-8 lg:py-20">
            <div className="text-center">
              <p className="text-sm font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Microteaching help</p>
              <h2 id="faq-title" className="mt-3 text-3xl font-black sm:text-4xl">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 marker:content-none">{faq.question}</summary>
                  <p className="mt-3 leading-7 text-[#4A141E]/70">{faq.answer}</p>
                </details>
              ))}
            </div>
          </div>
        </section>
      </main>
      <CVFooter />
    </div>
  );
}

function InfoCard({ icon: Icon, title, text }) {
  return (
    <div className="flex gap-4 rounded-2xl border border-[#E6D3B1]/70 bg-[#FDFAF7] p-5">
      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white shadow-sm">
        <Icon className="h-5 w-5 text-[#8B1C1C]" aria-hidden="true" />
      </div>
      <div>
        <p className="text-sm font-black">{title}</p>
        <p className="mt-2 text-sm leading-relaxed text-[#4A141E]/65">{text}</p>
      </div>
    </div>
  );
}

function PresentationCard({ presentation }) {
  const context = presentationContext(presentation);
  const studentProfileUrl = presentation.studentSlug ? `/student/${presentation.studentSlug}` : "";
  const courseUrl = presentation.courseUrl || context.fallbackCourseUrl;

  return (
    <article className="flex h-full flex-col rounded-3xl border border-[#E6D3B1] bg-white p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-[#D4AF37] hover:shadow-lg">
      <div className="flex items-start gap-4">
        {presentation.studentPhoto ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            className="h-20 w-20 shrink-0 rounded-2xl object-cover ring-4 ring-[#F6EFE9]"
            src={presentation.studentPhoto}
            alt={`${presentation.studentName}, Cambridge Veritas ${presentation.courseTitle} graduate presentation`}
            width="80"
            height="80"
            loading="lazy"
          />
        ) : (
          <div className="flex h-20 w-20 shrink-0 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={`${presentation.studentName} profile placeholder`}>
            {presentation.studentInitial}
          </div>
        )}
        <div className="min-w-0 flex-1">
          <p className="text-xs font-black uppercase tracking-wide text-[#8B1C1C]">{context.category}</p>
          <h3 className="mt-2 text-lg font-black leading-tight">{studentProfileUrl ? <Link href={studentProfileUrl} className="hover:text-[#8B1C1C]">{presentation.studentName}</Link> : presentation.studentName}</h3>
          <Link href={courseUrl} className="mt-1 block text-sm font-bold text-[#8B1C1C] underline decoration-[#D4AF37] underline-offset-4 hover:text-[#4A141E]">{presentation.courseTitle}</Link>
        </div>
        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-[#E6D3B1] bg-[#F6EFE9]">
          <BookOpen className="h-5 w-5 text-[#8B1C1C]" aria-hidden="true" />
        </div>
      </div>

      <dl className="mt-5 space-y-3 rounded-2xl border border-[#E6D3B1]/70 bg-[#FDFAF7] p-4 text-sm">
        <div>
          <dt className="text-xs font-black uppercase tracking-wide text-[#8B1C1C]">Topic</dt>
          <dd className="mt-1 font-bold leading-6 text-[#4A141E]">{presentation.title}</dd>
        </div>
        <div>
          <dt className="text-xs font-black uppercase tracking-wide text-[#8B1C1C]">Format</dt>
          <dd className="mt-1 text-[#4A141E]/70">{context.type}</dd>
        </div>
        <div>
          <dt className="text-xs font-black uppercase tracking-wide text-[#8B1C1C]">Focus areas</dt>
          <dd className="mt-2 flex flex-wrap gap-2">{context.focus.map((item) => <span key={item} className="rounded-full bg-white px-2.5 py-1 text-xs font-bold text-[#4A141E]/70 shadow-sm">{item}</span>)}</dd>
        </div>
      </dl>

      <p className="mt-4 line-clamp-3 text-sm leading-6 text-[#4A141E]/65">{presentation.description}</p>
      <div className="mt-auto">
        <PresentationListActions presentationId={presentation.presentationId} initialReactions={presentation.reactions} />
        <div className="mt-4 grid gap-2 sm:grid-cols-2">
          <Link href={`/presentation/${presentation.presentationId}`} className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl bg-[#4A141E] px-4 py-3 text-sm font-black leading-none text-white transition hover:bg-[#8B1C1C]">
            Watch presentation <PlayCircle className="h-4 w-4" aria-hidden="true" />
          </Link>
          {studentProfileUrl ? (
            <Link href={studentProfileUrl} className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl border border-[#D4AF37] px-4 py-3 text-sm font-black leading-none text-[#4A141E] hover:bg-[#F6EFE9]">Verified profile <BadgeCheck className="h-4 w-4" aria-hidden="true" /></Link>
          ) : (
            <Link href={courseUrl} className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl border border-[#D4AF37] px-4 py-3 text-sm font-black leading-none text-[#4A141E] hover:bg-[#F6EFE9]">View programme <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
          )}
        </div>
      </div>
    </article>
  );
}

function Pagination({ data }) {
  const pages = Array.from({ length: data.totalPages }, (_, index) => index + 1)
    .filter((page) => page === 1 || page === data.totalPages || Math.abs(page - data.page) <= 2);

  return (
    <nav className="mt-10 flex flex-col items-center gap-4" aria-label="Presentation pages">
      <p className="text-sm font-medium text-[#4A141E]/65">{data.summary}</p>
      <div className="flex flex-wrap items-center justify-center gap-2">
        {data.page > 1 ? <Link className="inline-flex h-11 items-center justify-center rounded-2xl border border-[#E6D3B1] bg-white px-4 text-sm font-black hover:border-[#D4AF37]" href={pageHref(data.page - 1, data.search, data.category)}>Previous</Link> : null}
        {pages.map((page, index) => {
          const previous = pages[index - 1];
          return (
            <span key={page} className="contents">
              {previous && page - previous > 1 ? <span className="px-1 text-[#4A141E]/50">…</span> : null}
              <Link
                aria-current={page === data.page ? "page" : undefined}
                className={`inline-flex h-11 min-w-11 items-center justify-center rounded-2xl border px-4 text-sm font-black transition ${page === data.page ? "border-[#D4AF37] bg-[#4A141E] text-white" : "border-[#E6D3B1] bg-white hover:border-[#D4AF37]"}`}
                href={pageHref(page, data.search, data.category)}
              >
                {page}
              </Link>
            </span>
          );
        })}
        {data.page < data.totalPages ? <Link className="inline-flex h-11 items-center justify-center rounded-2xl border border-[#E6D3B1] bg-white px-4 text-sm font-black hover:border-[#D4AF37]" href={pageHref(data.page + 1, data.search, data.category)}>Next</Link> : null}
      </div>
    </nav>
  );
}
