import { createFileRoute, Link } from "@tanstack/react-router";
import { CheckCircle2 } from "lucide-react";

import assessImg from "@/assets/assess-shopkeeper.jpg";
import { PageHeader, PageShell, Reveal } from "@/components/page-shell";
import { Button } from "@/components/ui/button";
import { LEVELS } from "@/lib/assessment";
import { listCategories } from "@/lib/catalog.functions";

export const Route = createFileRoute("/assessment")({
  head: () => ({
    meta: [
      { title: "Free MSME Growth Assessment | UZIA Academy" },
      {
        name: "description",
        content:
          "Score your business across the 12 UZIA Academy Pillars in about 10 minutes. Get a 0–100 score per pillar and a sequenced UZIA course pathway.",
      },
      { property: "og:title", content: "Free MSME Growth Assessment | UZIA Academy" },
      {
        property: "og:description",
        content: "12 pillars, 36 questions, 10 minutes — and a personalised course pathway.",
      },
    ],
  }),
  loader: async () => ({ categories: await listCategories() }),
  component: AssessmentIntro,
});

function AssessmentIntro() {
  const { categories } = Route.useLoaderData();

  return (
    <PageShell>
      <PageHeader
        eyebrow="Free · about 10 minutes"
        title="The UZIA Growth Assessment"
        description="An honest diagnostic across the 12 pillars that decide whether an MSME stalls or scales. No jargon, no scoring tricks — just questions you can answer from what you already know."
      />

      <section className="mx-auto grid w-full max-w-6xl gap-12 px-4 py-16 lg:grid-cols-[1.1fr_1fr]">
        <div>
          <Reveal>
            <h2 className="text-2xl">The 12 UZIA Academy Pillars</h2>
          </Reveal>
          <ul className="mt-6 grid gap-3 sm:grid-cols-2">
            {categories.map((c, i) => (
              <Reveal key={c.slug} delay={(i % 4) * 0.05}>
                <li className="card-hover h-full rounded-2xl border border-border bg-card p-5">
                  <p className="font-display text-xs font-bold text-primary">{c.code}</p>
                  <p className="mt-1 text-sm font-semibold">{c.name}</p>
                  <p className="mt-1.5 text-xs text-muted-foreground">{c.description}</p>
                </li>
              </Reveal>
            ))}
          </ul>

          <Reveal delay={0.1}>
            <img
              src={assessImg}
              alt="A Kenyan shopkeeper reviewing her business records"
              className="mt-8 h-64 w-full rounded-3xl object-cover shadow-warm"
            />
          </Reveal>
        </div>

        <div className="space-y-6">
          <Reveal>
            <div className="rounded-3xl bg-sunset p-8 text-primary-foreground shadow-lift">
              <h2 className="text-xl">What you get</h2>
              <ul className="mt-5 space-y-3 text-sm">
                {[
                  "An overall growth score out of 100",
                  "A 0–100 score for each of the 12 pillars",
                  "Your band per pillar, from Critical Gap to Excellence",
                  "A sequenced course pathway with KSh pricing",
                  "The ability to retake it and track improvement",
                ].map((t) => (
                  <li key={t} className="flex gap-2.5">
                    <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-gold" />
                    <span className="opacity-90">{t}</span>
                  </li>
                ))}
              </ul>
              <Button
                asChild
                size="lg"
                className="mt-7 w-full rounded-full bg-gold text-gold-foreground hover:bg-gold/90"
              >
                <Link to="/assess">Start the assessment</Link>
              </Button>
              <p className="mt-3 text-center text-xs opacity-80">
                You'll be asked to sign in so your answers save as you go.
              </p>
            </div>
          </Reveal>

          <Reveal delay={0.1}>
            <div className="rounded-3xl border border-border bg-card p-8">
              <h2 className="text-xl">Score bands</h2>
              <ul className="mt-5 space-y-4 text-sm">
                {LEVELS.map((l) => (
                  <li key={l.level}>
                    <p className="font-semibold">
                      {l.min}–{l.max} · {l.level}{" "}
                      <span className="font-normal text-primary">→ {l.action}</span>
                    </p>
                    <p className="mt-1 text-xs text-muted-foreground">{l.blurb}</p>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </section>
    </PageShell>
  );
}