import Link from "next/link";
import {
  ArrowRight,
  Building2,
  CircleCheck,
  ConciergeBell,
  Map,
  Utensils,
  Users,
} from "lucide-react";

const audiences = [
  {
    icon: Building2,
    title: "Front Office Teams",
    text: "Reception, reservations, check-in, checkout, billing questions, telephone interactions, and service explanations.",
  },
  {
    icon: ConciergeBell,
    title: "Guest Relations & Concierge",
    text: "Welcoming guests, understanding requests, recommending services, responding with empathy, and solving problems.",
  },
  {
    icon: Utensils,
    title: "Restaurant & F&B Staff",
    text: "Taking orders, describing dishes, checking understanding, handling special requests, and responding to complaints.",
  },
  {
    icon: Map,
    title: "Tourism Professionals",
    text: "Giving directions, explaining attractions, managing tours, sharing itineraries, and communicating across cultures.",
  },
  {
    icon: Users,
    title: "Graduates & Job Seekers",
    text: "Hospitality graduates and aspiring professionals who want practical guest-facing English before entering the industry.",
  },
];

export default function HospitalityEnglishIntroSection() {
  return (
    <section
      id="programme-details"
      className="bg-gradient-to-br from-white via-[#F6EFE9]/40 to-white py-16"
    >
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="rounded-3xl border-2 border-[#E6D3B1]/50 bg-white p-7 shadow-xl md:p-10">
          <div className="mb-5 flex items-center gap-3">
            <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18]">
              <ConciergeBell className="h-6 w-6 text-[#D4AF37]" />
            </span>
            <div>
              <p className="text-xs font-black uppercase tracking-widest text-[#8B1C1C]">
                CVHT® Programme Overview
              </p>
              <h2 className="text-3xl font-black text-[#4A141E] md:text-4xl">
                Online Hospitality English &amp; Communication Training
              </h2>
            </div>
          </div>

          <div className="space-y-4 text-base leading-relaxed text-[#4A141E]/80 md:text-lg">
            <p>
              The Cambridge Veritas Certificate in Hospitality &amp; Tourism
              (CVHT®) is a live online hospitality English and professional
              communication programme for people working in hotels, restaurants,
              tourism, and guest-service roles. Learners practise welcoming guests,
              check-in and checkout, complaints, service explanations, restaurant
              interactions, tourism information, and cross-cultural communication.
            </p>
            <p>
              The 80-hour programme combines 40 hours of live trainer-led learning
              with 40 hours of structured practical work. Instead of teaching
              general English in isolation, CVHT® uses realistic hospitality and
              tourism situations to develop clearer, more professional communication
              with international guests and colleagues.
            </p>
            <p className="font-bold text-[#4A141E]">
              CVHT® is a hospitality communication course, not a hospitality
              management qualification. It does not teach hotel finance, revenue
              management, property operations, or guarantee employment.
            </p>
          </div>

          <div className="mt-7 rounded-2xl border border-[#E6D3B1]/50 bg-[#F6EFE9] p-5">
            <h2 className="text-xl font-black text-[#4A141E]">
              Entry Level and Course Format
            </h2>
            <p className="mt-2 leading-relaxed text-[#4A141E]/75">
              A B1 CEFR English level or above is recommended. Previous hospitality
              experience is helpful but not required; the programme supports working
              professionals, graduates, and people preparing for guest-facing roles.
              Learners need reliable internet, a microphone, and a device for live
              classes and practical work. Current class times are confirmed before
              enrolment.
            </p>
          </div>

          <div className="mt-9">
            <h2 className="text-center text-2xl font-black text-[#4A141E] md:text-3xl">
              Who Is This Hospitality Course For?
            </h2>
            <div className="mt-6 grid gap-5 md:grid-cols-2 lg:grid-cols-5">
              {audiences.map(({ icon: Icon, title, text }) => (
                <article
                  key={title}
                  className="rounded-2xl border-2 border-[#E6D3B1]/40 bg-white p-5"
                >
                  <Icon className="mb-3 h-8 w-8 text-[#8B1C1C]" />
                  <h3 className="font-black text-[#4A141E]">{title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-[#4A141E]/75">
                    {text}
                  </p>
                </article>
              ))}
            </div>
          </div>

          <div className="mt-7 flex flex-wrap gap-3 border-t border-[#E6D3B1]/40 pt-6">
            <Link
              href="/hospitality-and-tourism-level-test"
              className="inline-flex items-center gap-2 rounded-xl bg-[#D4AF37] px-5 py-3 font-black text-[#4A141E] transition-colors hover:bg-[#C9A227]"
            >
              <CircleCheck className="h-5 w-5" />
              Take the Hospitality English level test
            </Link>
            <Link
              href="/specializations/cambridge-veritas-certificate-in-customer-service"
              className="inline-flex items-center gap-2 rounded-xl border-2 border-[#E6D3B1]/60 bg-white px-5 py-3 font-bold text-[#4A141E] hover:border-[#D4AF37]"
            >
              Customer service communication <ArrowRight className="h-4 w-4" />
            </Link>
            <Link
              href="/masterclass/cambridge-veritas-certificate-in-business-english"
              className="inline-flex items-center gap-2 rounded-xl border-2 border-[#E6D3B1]/60 bg-white px-5 py-3 font-bold text-[#4A141E] hover:border-[#D4AF37]"
            >
              Broader Business English <ArrowRight className="h-4 w-4" />
            </Link>
            <Link
              href="/about-us"
              className="inline-flex items-center gap-2 rounded-xl border-2 border-[#E6D3B1]/60 bg-white px-5 py-3 font-bold text-[#4A141E] hover:border-[#D4AF37]"
            >
              About Cambridge Veritas <ArrowRight className="h-4 w-4" />
            </Link>
            <Link
              href="/enrol-risk-free"
              className="inline-flex items-center gap-2 rounded-xl border-2 border-[#E6D3B1]/60 bg-white px-5 py-3 font-bold text-[#4A141E] hover:border-[#D4AF37]"
            >
              Read the refund policy <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}