import Link from "next/link";
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import { curriculum } from "@/lib/curriculum";

const unitStyles = {
  "unit-1": {
    tile: "from-[#4e95ff] to-[#1f63ea]",
    unitCard: "border-[#8cb2ff] bg-[#eaf2ff]",
    chip: "bg-[#2059cc]",
  },
  "unit-2": {
    tile: "from-[#29c6c5] to-[#0f8d8c]",
    unitCard: "border-[#89e5dd] bg-[#eafffb]",
    chip: "bg-[#0f8d8c]",
  },
  "unit-3": {
    tile: "from-[#ffab55] to-[#e97617]",
    unitCard: "border-[#ffd2a3] bg-[#fff4e8]",
    chip: "bg-[#d26a17]",
  },
  "unit-4": {
    tile: "from-[#ff5f85] to-[#d11b56]",
    unitCard: "border-[#ffb2c7] bg-[#fff0f4]",
    chip: "bg-[#c6174e]",
  },
  "unit-5": {
    tile: "from-[#a78bfa] to-[#6d28d9]",
    unitCard: "border-[#c4b5fd] bg-[#f5f0ff]",
    chip: "bg-[#6d28d9]",
  },
};

const topicTiles = [
  "from-[#4e95ff] via-[#357fe9] to-[#1f63ea]",
  "from-[#2ac3be] via-[#1da8a3] to-[#0f8d8c]",
  "from-[#ffb067] via-[#f2913a] to-[#d86e16]",
  "from-[#ff6f98] via-[#ef3d72] to-[#cb1c54]",
  "from-[#7d95ff] via-[#6078f2] to-[#3f56d9]",
  "from-[#4ccf7b] via-[#2fb45f] to-[#1f944b]",
  "from-[#ff8f8f] via-[#f26b6b] to-[#d94545]",
  "from-[#5eb7ff] via-[#3f99ef] to-[#2a7fda]",
];

export default function Home() {
  const allTopics = curriculum.flatMap((unit) =>
    unit.topics.map((topic) => ({
      unit,
      topic,
    })),
  );

  return (
    <div className="playground-bg flex min-h-screen flex-col">
      <Header />
      <main className="playground-frame mx-auto w-full max-w-6xl flex-1 px-3 pb-10 sm:px-5">
        <section className="mt-4 rounded-md border-2 border-[#1f50bf] bg-[#f1f6ff] p-4 sm:p-6">
          <p className="text-center text-sm font-bold text-[#26438b]">
            Interactive maths practice for secondary school students
          </p>
          <h1 className="mt-2 text-center text-3xl font-extrabold text-[#17367d] sm:text-5xl">
            Math Topics Students Love to Explore
          </h1>
          <p className="mx-auto mt-3 max-w-3xl text-center text-sm font-semibold text-[#33508e] sm:text-base">
            Explore each topic with visual examples, short explanations, and guided lessons.
            Pick a unit, jump into a topic, and start solving.
          </p>
          <div className="mt-5 flex flex-wrap items-center justify-center gap-3">
            <Link
              href="/lessons"
              className="rounded-sm bg-[#e6503e] px-5 py-2.5 text-sm font-extrabold text-white shadow-md transition-colors hover:bg-[#cc4231]"
            >
              Browse Lessons
            </Link>
            <Link
              href="/practice"
              className="rounded-sm bg-[#0e9d50] px-5 py-2.5 text-sm font-extrabold text-white shadow-md transition-colors hover:bg-[#0c7f41]"
            >
              Start Practice
            </Link>
          </div>
        </section>

        <section className="mt-5">
          <h2 className="section-ribbon rounded-sm px-3 py-2 text-lg font-extrabold sm:text-xl">
            Unit Worlds
          </h2>
          <div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {curriculum.map((unit) => (
              <Link
                key={unit.slug}
                href={`/lessons/${unit.slug}`}
                className={`rounded-md border-2 p-3 transition-transform hover:-translate-y-0.5 ${unitStyles[unit.color].unitCard}`}
              >
                <div className="flex items-center justify-between gap-2">
                  <h3 className="text-lg font-extrabold text-[#142f75]">{unit.title}</h3>
                  <span className={`rounded-full px-2 py-1 text-xs font-extrabold text-white ${unitStyles[unit.color].chip}`}>
                    Unit {unit.number}
                  </span>
                </div>
                <p className="mt-2 text-sm font-semibold text-[#35508b]">{unit.description}</p>
                <p className="mt-2 text-xs font-bold uppercase tracking-wide text-[#4262aa]">{unit.weeks}</p>
              </Link>
            ))}
          </div>
        </section>

        <section className="mt-6">
          <h2 className="section-ribbon rounded-sm px-3 py-2 text-lg font-extrabold sm:text-xl">
            Topic Explorer
          </h2>
          <div className="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
            {allTopics.map(({ unit, topic }, index) => (
              <Link
                key={`${unit.slug}-${topic.slug}`}
                href={`/lessons/${unit.slug}/${topic.slug}`}
                className="rounded-sm border border-[#8ea9df] bg-white p-2 transition-transform hover:-translate-y-0.5 hover:shadow-md"
              >
                <div className={`game-thumb-grid mb-2 flex aspect-[4/3] flex-col justify-between rounded-sm bg-gradient-to-br p-2 text-white ${topicTiles[index % topicTiles.length]}`}>
                  <span className="w-fit rounded-sm bg-black/25 px-1.5 py-0.5 text-[10px] font-extrabold uppercase tracking-wide">
                    Week {topic.week}
                  </span>
                  <span className="text-center text-xs font-extrabold leading-tight">
                    {topic.shortTitle}
                  </span>
                </div>
                <p className="min-h-[2.5rem] text-xs font-extrabold text-[#193981]">
                  {topic.title}
                </p>
              </Link>
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}