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

const comparisons = [
  {
    icon: MessagesSquare,
    title: "General English",
    text: "Builds broad everyday language. Financial English applies that foundation to figures, statements, products, markets, reports, client communication, and finance decisions.",
  },
  {
    icon: BriefcaseBusiness,
    title: "General Business English",
    text: "Covers common workplace communication across industries. CVFE® focuses on the vocabulary, writing, speaking, and professional situations used specifically in banking, accounting, investment, and finance.",
  },
];

export default function FinancialEnglishComparisonSection() {
  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]">
            <ChartNoAxesCombined className="h-4 w-4" /> Specialist Communication
          </div>
          <h2 className="text-3xl font-black text-[#4A141E] md:text-4xl">
            Financial 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>
  );
}