import Link from "next/link";
import {
  BookOpen,
  CheckCircle2,
  ClipboardCheck,
  FilePenLine,
  GraduationCap,
  MessageSquareText,
  Mic,
  SearchCheck,
} from "lucide-react";

import { ieltsPreparationSeo } from "@/data/courses/certificates/ielts-preparation/seoData";

const facts = [
  ["Delivery", ieltsPreparationSeo.delivery],
  ["Curriculum", ieltsPreparationSeo.curriculum],
  ["IELTS routes", "Academic and General Training overview"],
  ["Entry guidance", ieltsPreparationSeo.entryLevel],
  ["Class size", ieltsPreparationSeo.classSize],
  ["Programme fee", "USD $299"],
  ["Independent study", ieltsPreparationSeo.independentStudy],
  ["Current timetable", "Confirmed before enrolment"],
];

export function CvipBreadcrumbs() {
  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]">IELTS Preparation</li>
      </ol>
    </nav>
  );
}

export function CvipCourseFactsSection() {
  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]">CVIP Course Facts</p>
          <h2 className="mb-5 text-3xl font-black text-[#4A141E] md:text-4xl">IELTS Preparation Course at a Glance</h2>
          <p className="text-left leading-relaxed text-[#4A141E]/75">
            CVIP is a live online IELTS preparation course for test takers working on Listening, Reading, Writing and Speaking. It combines exam strategy, guided practice and trainer feedback. Cohort-specific class hours, marked-task quantities, mock-test quantities and recording access are confirmed before enrolment rather than represented by a stale timetable.
          </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 CvipTestRoutesSection() {
  const skills = [
    ["IELTS Listening: Question Types and Timed Practice", SearchCheck, "Practise listening for keywords, detail and distractors under timed conditions."],
    ["IELTS Reading: Accuracy and Time Management", BookOpen, "Develop scanning, inference and question-type strategies for more controlled reading."],
    ["IELTS Writing: Task 1, Task 2 and Personal Feedback", FilePenLine, "Plan reports, letters and essays, then use trainer feedback to prioritise revision."],
    ["IELTS Speaking: Practice Interviews and Feedback", Mic, "Practise organised responses, fluency, vocabulary, grammar and pronunciation."],
  ];

  return (
    <section id="test-routes" className="border-t border-[#E6D3B1]/30 bg-[#F6EFE9] 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]">Choose the Right Test Route</p>
          <h2 className="mb-4 text-3xl font-black text-[#4A141E] md:text-4xl">IELTS Academic and General Training Preparation</h2>
          <p className="leading-relaxed text-[#4A141E]/75">
            Both routes share Listening and Speaking, while Reading texts and Writing Task 1 differ. CVIP introduces these differences and helps you practise the route relevant to your goal. Confirm your intended test type and the current cohort emphasis before enrolling.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          {skills.map(([title, Icon, text]) => (
            <article key={title} className="rounded-2xl border-2 border-[#E6D3B1]/40 bg-white p-7">
              <Icon 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>
    </section>
  );
}

export function CvipFeedbackSection() {
  const items = [
    ["Writing corrections", "Feedback focuses on task response or achievement, coherence, vocabulary, grammar and practical revision priorities."],
    ["Speaking practice", "Guided speaking tasks focus on fluency and coherence, lexical resource, grammatical range and accuracy, and pronunciation."],
    ["Mock-test review", "Timed practice is used to diagnose recurring errors and build a realistic next-step study plan."],
  ];

  return (
    <section id="feedback" 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="mb-10 text-center">
          <p className="mb-2 text-xs font-black uppercase tracking-widest text-[#8B1C1C]">Practice with a Purpose</p>
          <h2 className="mb-4 text-3xl font-black text-[#4A141E] md:text-4xl">Mock Tests, Writing Corrections and Speaking Feedback</h2>
          <p className="mx-auto max-w-3xl leading-relaxed text-[#4A141E]/70">
            The course includes guided practice and trainer feedback. The current cohort sheet should be used as the source of truth for the number of marked essays, speaking reviews, full mocks, turnaround time and access period.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {items.map(([title, text]) => (
            <article key={title} className="rounded-2xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-7">
              <MessageSquareText className="mb-4 h-8 w-8 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>
    </section>
  );
}

export function CvipEvidenceSection() {
  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 Results and Course Reviews</h2>
        <p className="leading-relaxed text-[#4A141E]/75">
          Course-specific reviews and score-improvement claims should be published only when participation, consent and outcome evidence are verified. Unsupported aggregate ratings and teacher-training testimonials have been removed from this test-preparation page. Dated CVIP case studies can be added here once their evidence is approved.
        </p>
      </div>
    </section>
  );
}

export function CvipCourseChoiceSection() {
  const routes = [
    {
      title: "CVIP: IELTS Preparation",
      text: "For learners preparing to take IELTS and improve performance across the four test skills.",
      href: "/certifications/cambridge-veritas-certificate-for-ielts-preparation",
      label: "Explore IELTS preparation",
    },
    {
      title: "CVTE: TESOL Certification",
      text: "For aspiring or practising English teachers seeking methodology and supervised teacher development.",
      href: "/certifications/cambridge-veritas-certificate-in-TESOL",
      label: "Explore online TESOL certification",
    },
    {
      title: "CVIM: IELTS Teacher Training",
      text: "For educators who want specialist development in teaching IELTS and using assessment criteria.",
      href: "/masterclass/cambridge-veritas-certificate-in-ielts-masterclass",
      label: "Explore IELTS teacher training",
    },
  ];

  return (
    <section id="course-choice" 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-3xl text-center">
          <GraduationCap className="mx-auto mb-4 h-10 w-10 text-[#D4AF37]" />
          <h2 className="mb-4 text-3xl font-black text-[#4A141E] md:text-4xl">IELTS Preparation, TESOL or IELTS Teacher Training?</h2>
          <p className="text-[#4A141E]/70">Choose the programme that matches what you need to do next.</p>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {routes.map((route) => (
            <article key={route.title} className="flex flex-col rounded-2xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-7">
              <h3 className="mb-3 text-xl font-black text-[#4A141E]">{route.title}</h3>
              <p className="mb-5 flex-1 leading-relaxed text-[#4A141E]/75">{route.text}</p>
              <Link href={route.href} className="font-black text-[#8B1C1C] hover:underline">{route.label} →</Link>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

export function CvipRelatedResourcesSection() {
  const resources = [
    ["Explore your IELTS preparation options", "/ielts-level-test"],
    ["Practise IELTS speaking with Emma", "/tools/practice-ielts-with-emma"],
    ["Use the Writing Analyser for guided practice", "/tools/writing-analyser"],
    ["Practise speaking with the Speech Analyser", "/tools/speech-analyser"],
  ];

  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">
            <CheckCircle2 className="h-7 w-7 text-[#D4AF37]" />
            <h2 className="text-2xl font-black text-[#4A141E]">IELTS Preparation Tools and Next Steps</h2>
          </div>
          <div className="flex flex-wrap gap-3">
            {resources.map(([label, href]) => (
              <Link key={href} href={href} className="inline-flex items-center rounded-xl border-2 border-[#D4AF37] bg-[#F6EFE9] px-5 py-3 text-sm font-bold text-[#4A141E]">
                {label}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}