'use client';

import { motion } from "framer-motion";
import {
  AudioLines,
  BookOpenCheck,
  ClipboardCheck,
  GraduationCap,
  Layers,
  Mic,
  School,
  Target,
} from "lucide-react";

const trainerWork = [
  {
    title: "Pronunciation and Phonetics",
    text: "Voice and accent trainers help learners understand English sounds, articulation, IPA basics, and the difference between spelling and speech.",
  },
  {
    title: "Accent Clarity and Intelligibility",
    text: "The goal is clearer communication, not erasing identity. Trainers focus on patterns that affect listener understanding.",
  },
  {
    title: "Stress, Rhythm and Intonation",
    text: "Professional coaching includes word stress, sentence stress, rhythm, connected speech, tone, and meaning.",
  },
  {
    title: "Coaching and Feedback",
    text: "Trainers diagnose learner speech, choose correction priorities, model sounds, design practice, and give feedback learners can use.",
  },
];

const trainerSkills = [
  "Strong spoken English and listening discrimination",
  "Phonetic awareness and basic IPA confidence",
  "Error identification and learner diagnosis",
  "Clear explanation, modelling, and correction skills",
  "Lesson planning for pronunciation and voice practice",
  "Coaching presence, empathy, and feedback language",
];

const comparisonRows = [
  ["Pronunciation training", "Focuses on sounds, stress, rhythm, intonation, connected speech, and intelligibility."],
  ["Accent modification", "Adjusts selected pronunciation patterns where they affect clarity or professional communication."],
  ["Voice training", "Works on projection, articulation, pace, tone, breath support, and listener impact."],
  ["Trainer certification", "Develops both the subject knowledge and the methodology needed to teach other speakers."],
];

export default function VoiceAccentInfoSection() {
  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">
            How to become a trainer
          </p>
          <h2 className="text-3xl font-black text-[#4A141E] md:text-4xl">
            What Does a Voice & Accent Trainer Do?
          </h2>
          <p className="mx-auto mt-4 max-w-3xl text-sm leading-relaxed text-[#4A141E]/65 md:text-base">
            A voice and accent trainer helps learners improve pronunciation,
            speech clarity, word and sentence stress, rhythm, intonation,
            articulation, voice control, and communication confidence. Trainers
            may work with English learners, teachers, customer-service teams,
            corporate professionals, and international speakers.
          </p>
        </motion.div>

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

            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-[0.9fr_1.1fr]">
          <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]">
              <BookOpenCheck className="h-5 w-5 text-[#C9A96E]" />
            </div>
            <h2 className="mb-4 text-2xl font-black text-[#4A141E]">
              Skills You Need to Become a Voice & Accent Trainer
            </h2>
            <ul className="space-y-3">
              {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>

          <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">
                Voice Training vs Accent Modification vs Pronunciation Training
              </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-[11rem_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>
        </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-[#C9A96E]/15">
            <School className="h-5 w-5 text-[#C9A96E]" />
          </div>
          <h2 className="mb-3 text-2xl font-black text-[#E6D3B1]">
            Can TESOL and IELTS Teachers Become Voice & Accent Trainers?
          </h2>
          <p className="max-w-3xl text-sm leading-relaxed text-[#E6D3B1]/75">
            Yes. English, TESOL, IELTS, and OET teachers often make strong
            voice and accent trainers because they already understand language
            learning and classroom interaction. The specialisation adds a deeper
            focus on pronunciation pedagogy, phonetics, accent awareness,
            learner diagnosis, correction techniques, and spoken-performance
            coaching.
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <a
              href="/masterclass/cambridge-veritas-voice-and-accent-trainer-certification"
              className="inline-flex items-center gap-2 rounded-xl bg-[#C9A96E] px-5 py-3 text-sm font-black text-[#4A141E] shadow-md transition-all hover:bg-[#E6D3B1]"
            >
              View Full CVAT® Certification
              <GraduationCap className="h-4 w-4" />
            </a>
            <a
              href="/voice-and-accent-level-test"
              className="inline-flex items-center gap-2 rounded-xl border border-[#C9A96E]/45 bg-white/10 px-5 py-3 text-sm font-black text-[#E6D3B1] transition-all hover:bg-white/15"
            >
              Take the Voice & Accent Level Test
              <Target className="h-4 w-4" />
            </a>
          </div>
        </motion.article>
      </div>
    </section>
  );
}