import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Award, BarChart3, GraduationCap, Target } from "lucide-react";
import { motion } from "motion/react";

import assessImg from "@/assets/assess-shopkeeper.jpg";
import growImg from "@/assets/grow-success.jpg";
import heroImg from "@/assets/hero-entrepreneurs.jpg";
import learnImg from "@/assets/learn-training.jpg";
import { CourseCard } from "@/components/course-card";
import { usePlan } from "@/hooks/usePlan";
import { PageShell, Reveal } from "@/components/page-shell";
import { Button } from "@/components/ui/button";
import { CREDENTIAL_LEVELS } from "@/lib/assessment";
import { listCategories, listCourses } from "@/lib/catalog.functions";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "UZIA Academy — Assess Your Business, Close the Gaps, Grow" },
      {
        name: "description",
        content:
          "A free 12-pillar MSME growth assessment plus 50 applied courses in finance, marketing, digital, operations and market access for African entrepreneurs.",
      },
      { property: "og:title", content: "UZIA Academy for African MSMEs" },
      {
        property: "og:description",
        content:
          "Take the free growth assessment, get your pillar scores and a course pathway built for your business.",
      },
    ],
  }),
  loader: async () => ({
    courses: await listCourses(),
    categories: await listCategories(),
  }),
  component: Home,
});

const steps = [
  {
    icon: Target,
    title: "Assess",
    body: "36 questions across 12 UZIA Academy Pillars. In ten minutes you get a 0–100 score per pillar and know exactly where the business leaks value.",
    image: assessImg,
  },
  {
    icon: GraduationCap,
    title: "Learn",
    body: "Your scores drive the pathway: critical gaps get a Foundation course, weak pillars a Professional course, growth pillars an Advanced one.",
    image: learnImg,
  },
  {
    icon: BarChart3,
    title: "Grow",
    body: "Work weekly modules against your own business, track progress, retake the assessment and watch each pillar score climb.",
    image: growImg,
  },
];

function Home() {
  const { courses, categories } = Route.useLoaderData();
  const { isPro } = usePlan();

  return (
    <PageShell>
      {/* Hero */}
      <section className="relative overflow-hidden bg-plum text-plum-foreground">
        <motion.img
          src={heroImg}
          alt="African entrepreneurs running their businesses"
          className="absolute inset-0 size-full object-cover"
          initial={{ scale: 1.08 }}
          animate={{ scale: 1 }}
          transition={{ duration: 8, ease: "easeOut" }}
        />
        {/* Green tint keeps the photo on-brand without hiding it */}
        <div className="absolute inset-0 bg-secondary/35 mix-blend-multiply" aria-hidden />
        {/* Scrim: strong behind the headline, clearing towards the right */}
        <div
          className="absolute inset-0 bg-gradient-to-r from-plum via-plum/80 to-plum/20 lg:to-transparent"
          aria-hidden
        />
        <div className="motif-chevron absolute inset-0 opacity-10" aria-hidden />


        <div className="relative mx-auto grid w-full max-w-6xl gap-12 px-4 py-20 sm:py-28 lg:grid-cols-[1.15fr_1fr] lg:items-center">
          <div>
            <motion.p
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-xs font-semibold uppercase tracking-[0.3em] text-gold"
            >
              UZIA Academy · Africa
            </motion.p>
            <motion.h1
              initial={{ opacity: 0, y: 24 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.65, delay: 0.08, ease: [0.22, 1, 0.36, 1] }}
              className="mt-5 max-w-2xl text-5xl leading-[1.02] sm:text-6xl lg:text-7xl"
            >
              Know your Score.
              <br />
              Then build the business.
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.18 }}
              className="mt-6 max-w-xl text-lg opacity-90"
            >
              UZIA Academy scores your business across 12 UZIA Academy Pillars, then hands you the exact
              courses that close the gaps — built for African micro, small and medium enterprises.
            </motion.p>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.26 }}
              className="mt-9 flex flex-wrap gap-3"
            >
              <Button asChild size="lg" className="rounded-full shadow-lift">
                <Link to="/assessment">
                  Take the free assessment <ArrowRight className="ml-2 size-4" />
                </Link>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="rounded-full border-white/40 bg-white/10 text-plum-foreground hover:bg-white/20 hover:text-plum-foreground"
              >
                <Link to="/courses">Browse 50 courses</Link>
              </Button>
            </motion.div>

            <dl className="mt-14 grid max-w-lg grid-cols-3 gap-6">
              {[
                { k: "12", v: "pillars scored" },
                { k: "50", v: "applied MSME courses" },
                { k: "4", v: "credential levels" },
              ].map((s, i) => (
                <motion.div
                  key={s.v}
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.35 + i * 0.08 }}
                >
                  <dt className="font-display text-4xl font-extrabold text-gold">{s.k}</dt>
                  <dd className="mt-1 text-xs uppercase tracking-wider opacity-80">{s.v}</dd>
                </motion.div>
              ))}
            </dl>
          </div>

          <motion.div
            initial={{ opacity: 0, scale: 0.94, y: 24 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
            className="rounded-3xl border border-white/20 bg-white/10 p-6 backdrop-blur-md"
          >
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-gold">
              The 12 UZIA Academy Pillars
            </p>
            <ul className="mt-5 grid gap-2 sm:grid-cols-2">
              {categories.map((c, i) => (
                <motion.li
                  key={c.slug}
                  initial={{ opacity: 0, x: -8 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.35, delay: 0.3 + i * 0.04 }}
                  className="flex items-center gap-2 rounded-xl bg-white/10 px-3 py-2.5 text-sm"
                >
                  <span className="font-display text-xs font-bold text-gold">{c.code}</span>
                  {c.name}
                </motion.li>
              ))}
            </ul>
          </motion.div>
        </div>
        <div className="motif-divider relative" />
      </section>

      {/* How it works */}
      <section className="mx-auto w-full max-w-6xl px-4 py-20">
        <Reveal>
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-primary">
            How UZIA works
          </p>
          <h2 className="mt-3 max-w-2xl text-3xl sm:text-4xl">
            Assess. Learn. Grow. In that order, every time.
          </h2>
        </Reveal>
        <div className="mt-12 grid gap-6 md:grid-cols-3">
          {steps.map((s, i) => (
            <Reveal key={s.title} delay={i * 0.1}>
              <div className="card-hover flex h-full flex-col overflow-hidden rounded-3xl border border-border bg-card">
                {s.image ? (
                  <img src={s.image} alt="" className="h-44 w-full object-cover" />
                ) : (
                  <div className="motif-grid h-44 w-full bg-surface" aria-hidden />
                )}
                <div className="flex flex-1 flex-col p-6">
                  <span className="grid size-11 place-items-center rounded-2xl bg-ember text-primary-foreground">
                    <s.icon className="size-5" />
                  </span>
                  <h3 className="mt-5 font-display text-xl">{s.title}</h3>
                  <p className="mt-3 text-sm text-muted-foreground">{s.body}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Scoring bands */}
      <section className="relative overflow-hidden bg-surface">
        <div className="mx-auto w-full max-w-6xl px-4 py-20">
          <Reveal>
            <h2 className="text-3xl sm:text-4xl">Your score decides your pathway</h2>
            <p className="mt-4 max-w-2xl text-muted-foreground">
              Every pillar is scored 0–100. The recommendation engine turns that number into a
              specific next course — no guesswork, no generic curriculum.
            </p>
          </Reveal>
          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
            {[
              { band: "0–39", label: "Critical gap", action: "Foundation course + action plan" },
              { band: "40–59", label: "Priority gap", action: "Professional course" },
              { band: "60–74", label: "Growth opportunity", action: "Advanced course" },
              { band: "75–89", label: "Strength", action: "Mastery recommendation" },
              { band: "90–100", label: "Excellence", action: "Executive pathway" },
            ].map((b, i) => (
              <Reveal key={b.band} delay={i * 0.07}>
                <div className="h-full rounded-2xl border border-border bg-card p-5">
                  <p className="font-display text-2xl font-extrabold text-sunset">{b.band}</p>
                  <p className="mt-2 text-sm font-semibold">{b.label}</p>
                  <p className="mt-1 text-xs text-muted-foreground">{b.action}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Featured courses */}
      <section className="mx-auto w-full max-w-6xl px-4 py-20">
        <Reveal>
          <div className="flex flex-wrap items-end justify-between gap-4">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.28em] text-primary">
                The catalogue
              </p>
              <h2 className="mt-3 text-3xl sm:text-4xl">50 courses, 10 disciplines</h2>
            </div>
            <Link to="/courses" className="text-sm font-semibold text-primary hover:underline">
              View all courses →
            </Link>
          </div>
        </Reveal>
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {courses.slice(0, 6).map((course, i) => (
            <Reveal key={course.slug} delay={(i % 3) * 0.08}>
              <CourseCard
                course={course}
                isPro={isPro}
                categoryName={categories.find((c) => c.slug === course.category_slug)?.name}
              />
            </Reveal>
          ))}
        </div>
      </section>

      {/* Credentials */}
      <section className="bg-plum text-plum-foreground">
        <div className="motif-divider" />
        <div className="mx-auto w-full max-w-6xl px-4 py-20">
          <Reveal>
            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-gold">
              Credential architecture
            </p>
            <h2 className="mt-3 text-3xl sm:text-4xl">Four levels. One verifiable record.</h2>
          </Reveal>
          <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {CREDENTIAL_LEVELS.map((c, i) => (
              <Reveal key={c.level} delay={i * 0.08}>
                <div className="h-full rounded-2xl border border-white/15 bg-white/5 p-6">
                  <Award className="size-6 text-gold" />
                  <p className="mt-4 font-display text-lg">Level {c.level}</p>
                  <p className="mt-1 text-sm font-semibold opacity-90">{c.name}</p>
                  <p className="mt-2 text-xs opacity-70">{c.note}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.2}>
            <p className="mt-8 text-sm opacity-80">
              Every certificate carries a unique number anyone can check on the{" "}
              <Link to="/certificates" className="font-semibold text-gold hover:underline">
                verification page
              </Link>
              .
            </p>
          </Reveal>
        </div>
      </section>

      {/* CTA */}
      <section className="mx-auto w-full max-w-6xl px-4 py-20">
        <Reveal>
          <div className="relative overflow-hidden rounded-3xl bg-sunset px-6 py-16 text-center text-primary-foreground shadow-lift sm:px-12">
            <div className="motif-chevron absolute inset-0 opacity-25" aria-hidden />
            <div className="relative">
              <h2 className="text-3xl sm:text-4xl">Ten minutes to your growth plan</h2>
              <p className="mx-auto mt-4 max-w-xl opacity-90">
                The assessment is free. You leave with a score for all 12 pillars and a sequenced
                course pathway priced in shillings.
              </p>
              <Button
                asChild
                size="lg"
                className="mt-8 rounded-full bg-background text-primary shadow-warm hover:bg-background/90"
              >

                <Link to="/assessment">Start the assessment</Link>
              </Button>
            </div>
          </div>
        </Reveal>
      </section>
    </PageShell>
  );
}
