import Link from "next/link";
import {
  Award,
  BookOpen,
  CircleCheck,
  Clock,
  FilePenLine,
  GraduationCap,
  MessageSquareText,
  PenTool,
  Users,
} from "lucide-react";

import { creativeWritingSeo } from "@/data/courses/certificates/creative-writing/seoData";

const facts = [
  ["Delivery", creativeWritingSeo.delivery],
  ["Curriculum", creativeWritingSeo.curriculum],
  ["Genres", "Fiction, poetry and creative nonfiction"],
  ["English level", creativeWritingSeo.entryLevel],
  ["Class size", creativeWritingSeo.classSize],
  ["Programme fee", "USD $499"],
  ["Current dates", "Confirmed before enrolment"],
  ["Certificate issuer", "Cambridge Veritas"],
];

export function CvcwBreadcrumbs() {
  return (
    <nav aria-label="Breadcrumb" className="border-b border-[#E6D3B1]/30 bg-white">
      <ol className="mx-auto flex max-w-7xl min-w-0 flex-wrap items-center gap-2 overflow-hidden px-4 py-3 text-sm text-[#4A141E]/70 sm:px-6 lg:px-8">
        <li><Link href="/" className="hover:text-[#8B1C1C]">Home</Link></li>
        <li aria-hidden="true">/</li>
        <li><Link href="/certifications" className="hover:text-[#8B1C1C]">Certifications</Link></li>
        <li aria-hidden="true">/</li>
        <li aria-current="page" className="min-w-0 break-words font-bold text-[#4A141E] [overflow-wrap:anywhere]">Creative Writing Certificate</li>
      </ol>
    </nav>
  );
}

export function CvcwOverviewSection() {
  return (
    <section className="border-t border-[#E6D3B1]/30 bg-white py-20">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto mb-12 max-w-4xl text-center">
          <p className="mb-2 text-xs font-black uppercase tracking-widest text-[#8B1C1C]">CVCW Course Facts</p>
          <h2 className="mb-5 text-3xl font-black text-[#4A141E] md:text-4xl">Online Creative Writing Course: Overview</h2>
          <p className="text-left leading-relaxed text-[#4A141E]/75">
            The Cambridge Veritas Certificate in Creative Writing helps aspiring writers develop fiction, poetry and creative nonfiction through live online workshops. Practise narrative craft, revise your work with feedback and build a portfolio that demonstrates your progress. Explore the syllabus, schedule, assessment requirements and certificate details before choosing your cohort.
          </p>
        </div>
        <dl className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {facts.map(([label, value]) => (
            <div key={label} className="rounded-2xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-6">
              <dt className="mb-2 text-xs font-black uppercase tracking-wider text-[#8B1C1C]">{label}</dt>
              <dd className="font-bold leading-relaxed text-[#4A141E]">{value}</dd>
            </div>
          ))}
        </dl>
        <p className="mx-auto mt-6 max-w-4xl text-center text-sm leading-relaxed text-[#4A141E]/60">
          The previous 16-week, 40-hour and one-week-per-unit labels have been removed until Cambridge Veritas publishes one approved timetable that reconciles live classes, independent writing and assessment time.
        </p>
      </div>
    </section>
  );
}

export function CvcwPortfolioAssessmentSection() {
  const steps = [
    {
      icon: FilePenLine,
      title: "Draft",
      text: "Respond to a focused brief by creating a scene, poem, personal essay or other unit-specific piece.",
    },
    {
      icon: MessageSquareText,
      title: "Receive Feedback",
      text: "Use peer response and trainer checkpoints to identify strengths, unclear choices and practical revision priorities.",
    },
    {
      icon: CircleCheck,
      title: "Revise and Select",
      text: "Revise work with purpose and select completed pieces for a final portfolio and personal writing plan.",
    },
  ];

  return (
    <section id="portfolio-assessment" className="border-t border-[#E6D3B1]/30 bg-white py-20">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mb-12 text-center">
          <p className="mb-2 text-xs font-black uppercase tracking-widest text-[#8B1C1C]">Draft to Revision</p>
          <h2 className="mb-4 text-3xl font-black text-[#4A141E] md:text-4xl">Your Writing Portfolio and Assessment</h2>
          <p className="mx-auto max-w-3xl text-[#4A141E]/70">
            Portfolio development follows a visible writing process. Exact piece lengths, submission limits, feedback turnaround and pass requirements are confirmed with the current cohort before enrolment.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {steps.map(({ icon: Icon, title, text }) => (
            <article key={title} className="rounded-2xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-7">
              <Icon className="mb-4 h-9 w-9 text-[#D4AF37]" />
              <h3 className="mb-3 text-xl font-black text-[#4A141E]">{title}</h3>
              <p className="leading-relaxed text-[#4A141E]/75">{text}</p>
            </article>
          ))}
        </div>
        <div className="mt-8 rounded-2xl border-2 border-[#D4AF37]/50 bg-gradient-to-r from-[#4A141E] to-[#3B0F18] p-6">
          <h3 className="mb-2 text-xl font-black text-[#D4AF37]">Sample workshop brief</h3>
          <p className="leading-relaxed text-[#E6D3B1]">
            Write a 300-word scene in which two characters want different outcomes but avoid naming the conflict directly. Feedback examines character intention, subtext, dialogue, pacing and the effect of revision. This is an illustrative practice brief, not learner work or a guaranteed assessment specification.
          </p>
        </div>
      </div>
    </section>
  );
}

export function CvcwEvidenceSection() {
  return (
    <section id="student-evidence" className="border-t border-[#E6D3B1]/30 bg-[#F6EFE9] py-20">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-4xl text-center">
          <p className="mb-2 text-xs font-black uppercase tracking-widest text-[#8B1C1C]">Evidence with Permission</p>
          <h2 className="mb-4 text-3xl font-black text-[#4A141E] md:text-4xl">Student Work and Verified Course Reviews</h2>
          <p className="leading-relaxed text-[#4A141E]/75">
            Course-specific ratings and learner work should be published only after their source, course participation and permission are verified. Unsupported aggregate rating totals have been removed. Cambridge Veritas can add dated draft-to-revision examples and attributable reviews here once that evidence is approved.
          </p>
        </div>
      </div>
    </section>
  );
}

export function CvcwTeachersSection() {
  return (
    <section className="border-t border-[#E6D3B1]/30 bg-white py-20">
      <div className="mx-auto grid max-w-6xl gap-8 px-4 sm:px-6 md:grid-cols-2 lg:px-8">
        <article className="rounded-3xl border-2 border-[#E6D3B1]/40 bg-[#F6EFE9] p-8">
          <GraduationCap className="mb-4 h-10 w-10 text-[#D4AF37]" />
          <h2 className="mb-4 text-3xl font-black text-[#4A141E]">Creative Writing for English Teachers</h2>
          <p className="mb-5 leading-relaxed text-[#4A141E]/75">
            English teachers can use CVCW to strengthen their own storytelling, poetry, revision and feedback awareness. It does not include teaching methodology, observed teaching practice or a teaching licence.
          </p>
          <Link href="/certifications/cambridge-veritas-certificate-in-TESOL" className="font-black text-[#8B1C1C] hover:underline">
            Explore the separate online TESOL certification →
          </Link>
        </article>
        <article className="rounded-3xl border-2 border-[#D4AF37]/50 bg-gradient-to-br from-[#4A141E] to-[#3B0F18] p-8">
          <Award className="mb-4 h-10 w-10 text-[#D4AF37]" />
          <h2 className="mb-4 text-3xl font-black text-[#E6D3B1]">Certificate, Awarding Organization and Verification</h2>
          <p className="leading-relaxed text-[#E6D3B1]/80">
            Cambridge Veritas issues the CVCW digital certificate after successful completion. It includes a unique verification ID and is a provider-issued professional-development certificate—not an independently accredited award or a qualification from the University of Cambridge or Cambridge English.
          </p>
        </article>
      </div>
    </section>
  );
}

export function CvcwRelatedResourcesSection() {
  const resources = [
    ["Build your creative writing skills", "/creative-writing-level-test", PenTool],
    ["Practise writing with the Writing Analyser", "/tools/writing-analyser", BookOpen],
    ["Compare the TESOL teacher-training route", "/certifications/cambridge-veritas-certificate-in-TESOL", Users],
  ];

  return (
    <section className="border-t border-[#E6D3B1]/30 bg-[#F6EFE9] py-14">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="rounded-3xl border-2 border-[#D4AF37]/40 bg-white p-7">
          <div className="mb-6 flex items-center gap-3">
            <Clock className="h-7 w-7 text-[#D4AF37]" />
            <h2 className="text-2xl font-black text-[#4A141E]">Creative Writing Tools and Next Steps</h2>
          </div>
          <div className="flex flex-wrap gap-3">
            {resources.map(([label, href, Icon]) => (
              <Link key={href} href={href} className="inline-flex items-center gap-2 rounded-xl border-2 border-[#D4AF37] bg-[#F6EFE9] px-5 py-3 text-sm font-bold text-[#4A141E]">
                <Icon className="h-4 w-4 text-[#8B1C1C]" />{label}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}