import Link from "next/link";
import { ArrowRight, BriefcaseBusiness, MessagesSquare, UsersRound } from "lucide-react";

const comparisons = [
  {
    icon: MessagesSquare,
    title: "General English",
    text: "Develops broad everyday language. HR English applies that foundation to recruitment, employee relations, policies, performance conversations, grievances, reward, and HR documentation.",
  },
  {
    icon: BriefcaseBusiness,
    title: "General Business English",
    text: "Covers common workplace communication such as meetings, calls, emails, and presentations. CVHR® concentrates on the specialist language, tone, and judgement needed in Human Resources.",
  },
];

export default function HrEnglishComparisonSection() {
  return (
    <section className="bg-[#F6EFE9] py-16">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mb-10 text-center">
          <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-[#D4AF37]/30 bg-white px-4 py-2 text-xs font-black uppercase tracking-widest text-[#8B1C1C]">
            <UsersRound className="h-4 w-4" /> Specialist Communication
          </div>
          <h2 className="text-3xl font-black text-[#4A141E] md:text-4xl">
            HR English vs General Business English
          </h2>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          {comparisons.map(({ icon: Icon, title, text }) => (
            <article key={title} className="rounded-3xl border-2 border-[#E6D3B1]/50 bg-white p-7 shadow-lg">
              <Icon className="mb-4 h-9 w-9 text-[#8B1C1C]" />
              <h3 className="text-2xl font-black text-[#4A141E]">Compared with {title}</h3>
              <p className="mt-3 leading-relaxed text-[#4A141E]/75">{text}</p>
            </article>
          ))}
        </div>
        <div className="mt-7 text-center">
          <Link
            href="/masterclass/cambridge-veritas-certificate-in-business-english"
            className="inline-flex items-center gap-2 rounded-xl border-2 border-[#D4AF37] bg-white px-5 py-3 font-bold text-[#4A141E]"
          >
            Looking for broader workplace English? Explore CVBE®
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </section>
  );
}