import Link from "next/link";
import {
  ArrowRight,
  BookOpenText,
  ChartNoAxesCombined,
  CircleCheck,
  FileText,
  Microscope,
  Presentation,
} from "lucide-react";

const outputs = [
  {
    icon: FileText,
    title: "Research Writing",
    text: "Proposal summaries, literature-review extracts, methods descriptions, results commentary, abstracts, and journal correspondence.",
  },
  {
    icon: ChartNoAxesCombined,
    title: "Data Explanation",
    text: "Clear English for figures, graphs, tables, trends, comparisons, limitations, evidence, and cautious scientific claims.",
  },
  {
    icon: Presentation,
    title: "Scientific Presentations",
    text: "Conference talks, poster explanations, research summaries, signposting, and answers to audience questions.",
  },
  {
    icon: BookOpenText,
    title: "Research Career Communication",
    text: "Research profiles, CVs, interviews, funding communication, supervisor meetings, and international collaboration.",
  },
];

export default function ScientificEnglishIntroSection() {
  return (
    <section
      id="what-is-scientific-english"
      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]">
              <Microscope className="h-6 w-6 text-[#D4AF37]" />
            </span>
            <div>
              <p className="text-xs font-black uppercase tracking-widest text-[#8B1C1C]">
                Research, Publishing and International Collaboration
              </p>
              <h2 className="text-3xl font-black text-[#4A141E] md:text-4xl">
                What Is the CVPS® Scientific English Course?
              </h2>
            </div>
          </div>

          <div className="space-y-4 text-base leading-relaxed text-[#4A141E]/80 md:text-lg">
            <p>
              CVPS® is a 10-week live online Scientific English course for
              scientists, researchers, PhD students, and research professionals
              who need to communicate their work clearly in English. The programme
              develops practical language for research papers, abstracts,
              proposals, data explanation, supervisor meetings, journal
              communication, conference presentations, and international research
              collaboration.
            </p>
            <p>
              Live faculty-led classes combine scientific vocabulary, reading,
              writing, speaking, presentation practice, realistic research
              scenarios, and trainer feedback. The course is cross-disciplinary
              and supports communication across areas such as life sciences,
              medical sciences, engineering, chemistry, physics, environmental
              science, computing, and data science.
            </p>
            <p className="font-bold text-[#4A141E]">
              CVPS® teaches the English used to communicate scientific work. It is
              not a beginner general-English course and does not teach scientific
              methodology or replace subject-specific research supervision.
            </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 Requirements</h2>
            <p className="mt-2 leading-relaxed text-[#4A141E]/75">
              A minimum B1 CEFR English level is recommended. Learners should
              already understand their scientific subject and be ready for research
              reading, writing, discussion, presentation practice, and feedback.
              Reliable internet, a microphone, and a headset are required. Current
              live-session times and weekly workload are confirmed before enrolment.
            </p>
          </div>

          <div className="mt-9">
            <h2 className="text-center text-2xl font-black text-[#4A141E] md:text-3xl">
              What You Will Practise Creating
            </h2>
            <div className="mt-6 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
              {outputs.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="/english-for-scientists-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 Scientific English level test
            </Link>
            <Link
              href="/cefr-levels"
              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]"
            >
              Understand CEFR levels <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>
  );
}