'use client';

import { motion } from "framer-motion";
import {
  BookOpenCheck,
  ClipboardCheck,
  GraduationCap,
  Layers,
  ListChecks,
  MessageSquareText,
  PenLine,
  School,
  Search,
  Target,
  Users,
} from "lucide-react";

const agenda = [
  "Understanding IELTS from a teacher's perspective: Academic, General Training and the four skills.",
  "What makes IELTS teaching different from general English teaching.",
  "How teachers use public IELTS Band Descriptors responsibly.",
  "Live demonstration of turning an IELTS skill into a learner-centred lesson.",
  "Feedback demonstration: diagnose an answer and identify improvement priorities.",
  "TESOL, TEFL, CELTA or DELTA to IELTS specialisation.",
  "CVIM\u00ae pathway, full programme expectations and questions.",
];

const trainerWork = [
  {
    title: "Teaching Listening and Reading",
    text: "IELTS trainers help learners build task awareness, timing, prediction, skimming, scanning, distractor awareness and review routines.",
  },
  {
    title: "Teaching IELTS Writing",
    text: "Teachers explain task requirements, help learners plan responses, build language range and use public criteria for clearer feedback.",
  },
  {
    title: "Teaching IELTS Speaking",
    text: "Trainers develop fluency, coherence, vocabulary, grammar range, pronunciation awareness and confidence through guided speaking practice.",
  },
  {
    title: "Assessment and Feedback",
    text: "Effective IELTS trainers diagnose learner problems, prioritise corrections and give practical next steps without claiming official examiner authority.",
  },
];

const trainerSkills = [
  "Advanced English proficiency",
  "Understanding of IELTS Academic and General Training",
  "Knowledge of Listening, Reading, Writing and Speaking tasks",
  "Lesson planning and classroom sequencing",
  "Assessment literacy and public Band Descriptor awareness",
  "Feedback language for Writing and Speaking",
  "Learner diagnosis and error prioritisation",
  "TESOL or ELT methodology foundations",
];

const comparisonRows = [
  ["IELTS Trainer", "Teaches students, plans lessons, uses criteria for classroom feedback and may work independently or with schools."],
  ["IELTS Examiner", "Assesses candidates officially and is recruited through authorised IELTS organisations and test-centre channels."],
  ["CVIM\u00ae role", "CVIM\u00ae develops IELTS teaching expertise; it does not automatically make someone an official IELTS examiner."],
];

export default function IeltsTrainerInfoSection() {
  return (
    <section className="bg-white py-20">
      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mb-12 text-center"
        >
          <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-[#8B1C1C]/80">
            IELTS teacher development
          </p>
          <h2 className="text-3xl font-black text-[#4A141E] md:text-4xl">
            What Is IELTS Train-the-Trainer Training?
          </h2>
          <p className="mx-auto mt-4 max-w-3xl text-sm leading-relaxed text-[#4A141E]/65 md:text-base">
            IELTS Train-the-Trainer training helps teachers understand the test
            from a classroom perspective: test format, Academic and General
            Training routes, the four skills, public assessment criteria, lesson
            planning, learner diagnosis, timed practice and useful feedback.
            The focus is teacher development, not shortcuts for test-takers.
          </p>
        </motion.div>

        <div className="grid gap-5 md:grid-cols-2">
          {trainerWork.map((item, index) => {
            const icons = [BookOpenCheck, PenLine, MessageSquareText, ClipboardCheck];
            const Icon = icons[index] || BookOpenCheck;

            return (
              <motion.article
                key={item.title}
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.06 }}
                className="rounded-2xl border-2 border-[#C9A96E] bg-[#FDFAF7] p-6 shadow-sm transition-shadow hover:shadow-md"
              >
                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[#4A141E]">
                  <Icon className="h-5 w-5 text-[#C9A96E]" />
                </div>
                <h3 className="mb-2 text-base font-black text-[#4A141E]">
                  {item.title}
                </h3>
                <p className="text-sm leading-relaxed text-[#4A141E]/65">
                  {item.text}
                </p>
              </motion.article>
            );
          })}
        </div>

        <div className="mt-8 grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
          <motion.article
            initial={{ opacity: 0, x: -16 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="rounded-2xl border-2 border-[#C9A96E] bg-white p-6 shadow-sm"
          >
            <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[#4A141E]">
              <ListChecks className="h-5 w-5 text-[#C9A96E]" />
            </div>
            <h2 className="mb-4 text-2xl font-black text-[#4A141E]">
              What You Will Learn in This Free IELTS Trainer Class
            </h2>
            <ol className="space-y-3">
              {agenda.map((item, index) => (
                <li key={item} className="flex gap-3 text-sm leading-relaxed text-[#4A141E]/70">
                  <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[#8B1C1C] text-xs font-black text-white">
                    {index + 1}
                  </span>
                  <span>{item}</span>
                </li>
              ))}
            </ol>
          </motion.article>

          <motion.article
            initial={{ opacity: 0, x: 16 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="rounded-2xl border-2 border-[#C9A96E] bg-[#FDFAF7] p-6 shadow-sm"
          >
            <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[#4A141E]">
              <Target className="h-5 w-5 text-[#C9A96E]" />
            </div>
            <h2 className="mb-4 text-2xl font-black text-[#4A141E]">
              What Skills Do IELTS Trainers Need?
            </h2>
            <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
              {trainerSkills.map((skill) => (
                <li key={skill} className="flex items-start gap-3 text-sm text-[#4A141E]/70">
                  <span className="mt-1 h-2 w-2 flex-shrink-0 rounded-full bg-[#8B1C1C]" />
                  <span>{skill}</span>
                </li>
              ))}
            </ul>
          </motion.article>
        </div>

        <div className="mt-8 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
          <motion.article
            initial={{ opacity: 0, x: -16 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="overflow-hidden rounded-2xl border-2 border-[#C9A96E] bg-white shadow-sm"
          >
            <div className="bg-[#4A141E] px-6 py-5">
              <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-white/10">
                <Layers className="h-5 w-5 text-[#C9A96E]" />
              </div>
              <h2 className="text-2xl font-black text-white">
                IELTS Trainer vs IELTS Examiner
              </h2>
            </div>
            <div className="divide-y divide-[#E6D3B1]/50">
              {comparisonRows.map(([label, text]) => (
                <div key={label} className="grid gap-1 px-6 py-4 sm:grid-cols-[9rem_1fr]">
                  <h3 className="text-sm font-black text-[#4A141E]">{label}</h3>
                  <p className="text-sm leading-relaxed text-[#4A141E]/65">{text}</p>
                </div>
              ))}
            </div>
          </motion.article>

          <motion.article
            initial={{ opacity: 0, x: 16 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="rounded-2xl border-2 border-[#C9A96E] bg-gradient-to-br from-[#4A141E] to-[#3B0F18] p-7 text-white shadow-sm"
          >
            <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-[#C9A96E]/15">
              <School className="h-5 w-5 text-[#C9A96E]" />
            </div>
            <h2 className="mb-3 text-2xl font-black text-[#E6D3B1]">
              Can TESOL and TEFL Teachers Become IELTS Trainers?
            </h2>
            <p className="text-sm leading-relaxed text-[#E6D3B1]/75">
              Yes. TESOL, TEFL, CELTA and DELTA backgrounds provide useful ELT
              methodology. IELTS teacher development adds test-format knowledge,
              assessment criteria, exam-class planning, diagnostic feedback,
              IELTS-specific materials and four-skills preparation.
            </p>
          </motion.article>
        </div>

        <motion.article
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mt-8 rounded-2xl border-2 border-[#C9A96E] bg-[#FDFAF7] p-7 shadow-sm"
        >
          <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-[#4A141E]">
            <Search className="h-5 w-5 text-[#C9A96E]" />
          </div>
          <h2 className="mb-3 text-2xl font-black text-[#4A141E]">
            Are You Looking to Teach IELTS or Take IELTS?
          </h2>
          <p className="max-w-3xl text-sm leading-relaxed text-[#4A141E]/65">
            This page is for teachers and trainers exploring IELTS teaching. If
            you are preparing to sit the IELTS test yourself, choose the IELTS
            preparation pathway instead.
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <a
              href="#register"
              className="inline-flex items-center gap-2 rounded-xl bg-[#8B1C1C] px-5 py-3 text-sm font-black text-white shadow-md transition-all hover:bg-[#6B1010]"
            >
              I want to teach IELTS
              <Users className="h-4 w-4" />
            </a>
            <a
              href="/masterclass/cambridge-veritas-certificate-in-ielts-masterclass"
              className="inline-flex items-center gap-2 rounded-xl border border-[#C9A96E] bg-white px-5 py-3 text-sm font-black text-[#4A141E] transition-all hover:bg-[#F6EFE9]"
            >
              View the full CVIM® programme
              <BookOpenCheck className="h-4 w-4" />
            </a>
            <a
              href="/certifications/cambridge-veritas-certificate-for-ielts-preparation"
              className="inline-flex items-center gap-2 rounded-xl border border-[#C9A96E] bg-white px-5 py-3 text-sm font-black text-[#4A141E] transition-all hover:bg-[#F6EFE9]"
            >
              I am preparing for IELTS
              <GraduationCap className="h-4 w-4" />
            </a>
          </div>
        </motion.article>
      </div>
    </section>
  );
}