import Link from "next/link";
import {
  Award,
  BookOpenCheck,
  ClipboardCheck,
  HeartHandshake,
  MessageSquareText,
  Stethoscope,
} from "lucide-react";

import { medicalPractitionersSeo } from "@/data/courses/certificates/medical-practitioners/seoData";

const facts = [
  ["Delivery", medicalPractitionersSeo.delivery],
  ["Curriculum", medicalPractitionersSeo.curriculum],
  ["Recommended level", medicalPractitionersSeo.entryLevel],
  ["Practice", "Consultations, role-play and clinical notes"],
  ["Feedback", "Trainer-guided clinical communication feedback"],
  ["Current fee", "Confirmed in writing before enrolment"],
  ["Current timetable", "Confirmed for the active cohort"],
  ["Certificate issuer", "Cambridge Veritas"],
];

export function CvmpBreadcrumbs() {
  return (
    <nav aria-label="Breadcrumb" className="border-b border-[#E6D3B1]/30 bg-white">
      <ol className="mx-auto flex max-w-7xl min-w-0 flex-wrap items-center gap-2 overflow-hidden px-4 py-3 text-sm text-[#4A141E]/70 sm:px-6 lg:px-8">
        <li><Link href="/" className="hover:text-[#8B1C1C]">Home</Link></li>
        <li aria-hidden="true">/</li>
        <li><Link href="/certifications" className="hover:text-[#8B1C1C]">Certifications</Link></li>
        <li aria-hidden="true">/</li>
        <li aria-current="page" className="min-w-0 break-words font-bold text-[#4A141E] [overflow-wrap:anywhere]">Medical English Course</li>
      </ol>
    </nav>
  );
}

export function CvmpCourseFactsSection() {
  return (
    <section id="course-facts" className="scroll-mt-36 border-t border-[#E6D3B1]/30 bg-white py-20">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto mb-12 max-w-4xl text-center">
          <p className="mb-2 text-xs font-black uppercase tracking-widest text-[#8B1C1C]">CVMP Course Facts</p>
          <h2 className="mb-5 text-3xl font-black text-[#4A141E] md:text-4xl">Medical English Course at a Glance</h2>
          <p className="text-left leading-relaxed text-[#4A141E]/75">
            CVMP is a live online medical English course for doctors and healthcare professionals. Its 12-unit curriculum focuses on the language, structure and empathy needed for patient consultations, clinical notes, telephone conversations, explanations and sensitive discussions. Cohort-specific fees and dates are confirmed in writing before enrolment.
          </p>
        </div>
        <dl className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {facts.map(([label, value]) => (
            <div key={label} className="rounded-2xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-6">
              <dt className="mb-2 text-xs font-black uppercase tracking-wider text-[#8B1C1C]">{label}</dt>
              <dd className="font-bold leading-relaxed text-[#4A141E]">{value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

export function CvmpPracticeSection() {
  const criteria = [
    ["Consultation structure", "Open, explore, summarise and close the conversation in a clear sequence."],
    ["Patient-friendly language", "Translate clinical information into plain English without losing essential meaning."],
    ["Listening and empathy", "Acknowledge concerns, check understanding and respond appropriately to patient cues."],
    ["Clinical notes", "Record concise, organised information that reflects the consultation accurately."],
  ];

  return (
    <section id="live-practice" className="border-t border-[#E6D3B1]/30 bg-white py-20">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto mb-10 max-w-4xl text-center">
          <p className="mb-2 text-xs font-black uppercase tracking-widest text-[#8B1C1C]">Practice and Feedback</p>
          <h2 className="mb-4 text-3xl font-black text-[#4A141E] md:text-4xl">How Live Classes and Feedback Work</h2>
          <p className="leading-relaxed text-[#4A141E]/75">
            Trainer-led sessions use consultation prompts, case discussion, role-play, clinical note-writing and focused feedback so that medical vocabulary is practised in realistic communication.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          {criteria.map(([title, text]) => (
            <article key={title} className="rounded-2xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-7">
              <MessageSquareText className="mb-4 h-9 w-9 text-[#D4AF37]" />
              <h3 className="mb-3 text-xl font-black text-[#4A141E]">{title}</h3>
              <p className="leading-relaxed text-[#4A141E]/75">{text}</p>
            </article>
          ))}
        </div>
        <div className="mt-8 rounded-2xl border-2 border-[#D4AF37]/50 bg-gradient-to-r from-[#4A141E] to-[#3B0F18] p-7">
          <h3 className="mb-3 text-xl font-black text-[#D4AF37]">Illustrative role-play and feedback rubric</h3>
          <p className="leading-relaxed text-[#E6D3B1]">
            A learner receives a patient with recurring abdominal pain, establishes the agenda, takes a structured history, checks red flags, explains next steps in plain English and writes a concise note. Feedback can examine structure, clarity, listening, empathy, patient-friendly language and documentation. This is an illustrative practice example, not learner work or a guaranteed assessment specification.
          </p>
        </div>
      </div>
    </section>
  );
}

export function CvmpEvidenceSection() {
  return (
    <section id="learner-evidence" className="border-t border-[#E6D3B1]/30 bg-[#F6EFE9] py-20">
      <div className="mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
        <ClipboardCheck className="mx-auto mb-4 h-10 w-10 text-[#D4AF37]" />
        <h2 className="mb-4 text-3xl font-black text-[#4A141E] md:text-4xl">Learner Experiences and Sample Work</h2>
        <p className="leading-relaxed text-[#4A141E]/75">
          Course-specific reviews, ratings and learner samples should be published only when participation, consent and source evidence are verified. Unsupported aggregate ratings and placement figures have been removed. Cambridge Veritas can add dated consultation or note-writing examples here after approval.
        </p>
      </div>
    </section>
  );
}

export function CvmpCertificateScopeSection() {
  return (
    <section className="border-t border-[#E6D3B1]/30 bg-white py-20">
      <div className="mx-auto grid max-w-6xl gap-8 px-4 sm:px-6 md:grid-cols-2 lg:px-8">
        <article className="rounded-3xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-8">
          <Stethoscope className="mb-4 h-10 w-10 text-[#D4AF37]" />
          <h2 className="mb-4 text-3xl font-black text-[#4A141E]">Medical English, Not TESOL or OET Preparation</h2>
          <p className="mb-5 leading-relaxed text-[#4A141E]/75">
            CVMP develops English for patient-facing healthcare communication. It is not an English-teacher qualification and no OET score outcome is claimed.
          </p>
          <Link href="/certifications/cambridge-veritas-certificate-in-TESOL" className="font-black text-[#8B1C1C] hover:underline">
            Compare the separate online TESOL certification →
          </Link>
        </article>
        <article className="rounded-3xl border-2 border-[#D4AF37]/50 bg-gradient-to-br from-[#4A141E] to-[#3B0F18] p-8">
          <Award className="mb-4 h-10 w-10 text-[#D4AF37]" />
          <h2 className="mb-4 text-3xl font-black text-[#E6D3B1]">Certificate, Verification and Recognition</h2>
          <p className="leading-relaxed text-[#E6D3B1]/80">
            Cambridge Veritas issues the CVMP digital certificate after successful completion and provides a unique verification ID. It is a provider-issued professional-development certificate—not a qualification from the University of Cambridge or Cambridge English, and no external medical, CME or CPD accreditation is claimed here.
          </p>
        </article>
      </div>
    </section>
  );
}

export function CvmpRelatedResourcesSection() {
  const resources = [
    ["Take the medical practitioners English level test", "/level-test-for-medical-practitioners", BookOpenCheck],
    ["Read the clinical communication guide for doctors", "/blog/medical-english/clinical-communication-in-english-a-practical-guide-for-doctors", HeartHandshake],
    ["Understand B1 and other CEFR English levels", "/cefr-levels", BookOpenCheck],
  ];

  return (
    <section className="border-t border-[#E6D3B1]/30 bg-[#F6EFE9] py-14">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="rounded-3xl border-2 border-[#D4AF37]/40 bg-white p-7">
          <div className="mb-6 flex items-center gap-3">
            <BookOpenCheck className="h-7 w-7 text-[#D4AF37]" />
            <h2 className="text-2xl font-black text-[#4A141E]">Medical English Resources and Next Steps</h2>
          </div>
          <div className="flex flex-wrap gap-3">
            {resources.map(([label, href, Icon]) => (
              <Link key={href} href={href} className="inline-flex items-center gap-2 rounded-xl border-2 border-[#D4AF37] bg-[#F6EFE9] px-5 py-3 text-sm font-bold text-[#4A141E]">
                <Icon className="h-4 w-4 text-[#8B1C1C]" />{label}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}