'use client';

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

const agenda = [
  "What TESOL teachers actually do: learner needs, teaching contexts and teacher roles.",
  "Live teaching demonstration: how a language point can be taught through context.",
  "Lesson planning: how aims, stages and activities connect.",
  "Language analysis: meaning, form and pronunciation.",
  "Teaching skills: speaking, listening, reading and writing.",
  "Feedback and classroom management: eliciting, monitoring, correcting and supporting learners.",
  "Career and CVTE\u00ae pathway: what further professional TESOL training involves.",
];

const skills = [
  "Lesson planning",
  "Language awareness",
  "Teaching grammar and vocabulary",
  "Teaching pronunciation",
  "Teaching listening and reading",
  "Teaching speaking and writing",
  "Classroom management",
  "Error correction and feedback",
  "Assessment literacy",
  "Teaching online",
  "Reflective practice",
];

const teflRows = [
  ["TESOL", "Teaching English to Speakers of Other Languages", "A broad teacher-education term used across English-language teaching contexts."],
  ["TEFL", "Teaching English as a Foreign Language", "Often used for teaching English outside English-dominant environments."],
  ["What matters", "Course quality", "Employers often compare hours, teaching practice, trainer quality, assessment and recognition."],
];

const comparisonRows = [
  ["CVTE\u00ae", "Cambridge Veritas", "Professional TESOL training pathway with methodology, lesson planning, teaching practice and portfolio work."],
  ["CELTA", "Cambridge English", "Initial ELT qualification with its own provider, assessment and recognition structure."],
  ["Trinity CertTESOL", "Trinity College London", "Initial TESOL qualification with its own validated-provider and assessment structure."],
];

const becomeSteps = [
  { title: "Build Language Awareness", desc: "Understand meaning, form, pronunciation, grammar and vocabulary from a teacher's perspective." },
  { title: "Learn Teaching Methodology", desc: "Use context, tasks, interaction and feedback rather than only explaining rules." },
  { title: "Practise Teaching", desc: "Plan, teach, receive feedback, reflect and improve through guided teacher-development work." },
  { title: "Build Experience and Specialise", desc: "Develop into online teaching, IELTS, business English, young learners or other specialist areas." },
];

export default function TesolInfoSection() {
  return (
    <section className="bg-[#FDFAF7] pb-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="rounded-2xl border-2 border-[#C9A96E] bg-white p-7 shadow-sm md:p-9"
        >
          <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-[#8B1C1C]/80">
            TESOL basics
          </p>
          <h2 className="text-3xl font-black text-[#4A141E] md:text-4xl">
            What Is TESOL?
          </h2>
          <p className="mt-4 max-w-3xl text-sm leading-relaxed text-[#4A141E]/65 md:text-base">
            TESOL stands for Teaching English to Speakers of Other Languages.
            TESOL teacher training develops the practical skills needed to plan
            lessons, analyse language, teach listening, speaking, reading and
            writing, manage learners, assess progress and reflect on teaching.
            It is useful for new teachers, career changers and existing
            educators who want a structured introduction to professional English
            language teaching.
          </p>
        </motion.div>

        <div className="mt-8 grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
          <motion.article
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="rounded-2xl border-2 border-[#C9A96E] bg-white p-7 shadow-sm"
          >
            <div className="mb-4 flex h-11 w-11 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 TESOL Class
            </h2>
            <ol className="space-y-3">
              {agenda.map((item) => (
                <li key={item} className="flex gap-3 text-sm leading-relaxed text-[#4A141E]/70">
                  <ClipboardCheck className="mt-0.5 h-4 w-4 flex-shrink-0 text-[#8B1C1C]" />
                  <span>{item}</span>
                </li>
              ))}
            </ol>
          </motion.article>

          <motion.article
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="rounded-2xl border-2 border-[#C9A96E] bg-white p-7 shadow-sm"
          >
            <div className="mb-4 flex h-11 w-11 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 Does a TESOL Teacher Need?
            </h2>
            <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
              {skills.map((skill) => (
                <li key={skill} className="flex items-start gap-3 text-sm text-[#4A141E]/70">
                  <span className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-[#C9A96E]" />
                  <span>{skill}</span>
                </li>
              ))}
            </ul>
          </motion.article>
        </div>

        <div className="mt-8 grid gap-8 lg:grid-cols-2">
          <motion.article
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="rounded-2xl border-2 border-[#C9A96E] bg-white p-7 shadow-sm"
          >
            <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-[#4A141E]">
              <Layers className="h-5 w-5 text-[#C9A96E]" />
            </div>
            <h2 className="mb-4 text-2xl font-black text-[#4A141E]">
              TESOL vs TEFL: What&apos;s the Difference?
            </h2>
            <div className="divide-y divide-[#E6D3B1]/50">
              {teflRows.map(([label, definition, note]) => (
                <div key={label} className="grid gap-2 py-4 sm:grid-cols-[0.7fr_1fr_1.4fr]">
                  <h3 className="text-sm font-black text-[#4A141E]">{label}</h3>
                  <p className="text-sm font-semibold text-[#8B1C1C]">{definition}</p>
                  <p className="text-sm leading-relaxed text-[#4A141E]/65">{note}</p>
                </div>
              ))}
            </div>
          </motion.article>

          <motion.article
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="rounded-2xl border-2 border-[#C9A96E] bg-white p-7 shadow-sm"
          >
            <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-[#4A141E]">
              <School className="h-5 w-5 text-[#C9A96E]" />
            </div>
            <h2 className="mb-4 text-2xl font-black text-[#4A141E]">
              TESOL vs CELTA vs Trinity CertTESOL
            </h2>
            <div className="divide-y divide-[#E6D3B1]/50">
              {comparisonRows.map(([label, provider, note]) => (
                <div key={label} className="grid gap-2 py-4 sm:grid-cols-[0.6fr_0.9fr_1.5fr]">
                  <h3 className="text-sm font-black text-[#4A141E]">{label}</h3>
                  <p className="text-sm font-semibold text-[#8B1C1C]">{provider}</p>
                  <p className="text-sm leading-relaxed text-[#4A141E]/65">{note}</p>
                </div>
              ))}
            </div>
          </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-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-white/10">
            <PenLine className="h-5 w-5 text-[#C9A96E]" />
          </div>
          <h2 className="mb-3 text-2xl font-black text-[#E6D3B1]">
            Why Teaching Practice Matters in TESOL
          </h2>
          <p className="max-w-3xl text-sm leading-relaxed text-[#E6D3B1]/75">
            English teachers need to plan lessons, teach, receive feedback,
            reflect and improve. Demonstrations help you understand methodology,
            but supervised practice and feedback are what turn ideas into
            practical teaching competence. The free class introduces this
            pathway; deeper practice belongs to the full CVTE{"\u00ae"} programme.
          </p>
        </motion.article>

        <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-white p-7 shadow-sm"
        >
          <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-[#4A141E]">
            <GraduationCap className="h-5 w-5 text-[#C9A96E]" />
          </div>
          <h2 className="mb-5 text-2xl font-black text-[#4A141E]">
            How to Become an English Language Teacher
          </h2>
          <div className="grid gap-4 sm:grid-cols-2">
            {becomeSteps.map((step) => (
              <div key={step.title} className="rounded-xl border border-[#E6D3B1]/70 bg-[#FDFAF7] p-5">
                <h3 className="mb-2 text-sm font-black text-[#4A141E]">{step.title}</h3>
                <p className="text-xs leading-relaxed text-[#4A141E]/60">{step.desc}</p>
              </div>
            ))}
          </div>
          <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]"
            >
              Reserve my free TESOL class
              <Users className="h-4 w-4" />
            </a>
            <a
              href="/certifications/cambridge-veritas-certificate-in-TESOL"
              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]"
            >
              Explore the full 120-hour TESOL certification programme
              <BookOpenCheck className="h-4 w-4" />
            </a>
          </div>
        </motion.article>
      </div>
    </section>
  );
}