import { motion } from "framer-motion";
import { staggerContainer, scaleFadeItem } from "@/components/PageTransition";

type Content = Record<string, unknown>;

type StatItem = { val: string; label: string; color: string };

const defaultTitle = "One Project, Not 13 Tests";
const defaultBody =
  "All 13 teachers assess the same quarter project — each from their expert lens. The science teacher evaluates scientific reasoning, the math teacher checks data accuracy, the ELA teacher assesses communication quality. ONE meaningful project replaces 5–6 separate tests. Less stress, deeper learning, more authentic proof.";
const defaultStats: StatItem[] = [
  { val: "13", label: "Courses", color: "text-valencia" },
  { val: "1", label: "Project", color: "text-sunflower" },
  { val: "0", label: "Fragmented Tests", color: "text-salmon" },
];

function ensureStatItem(raw: unknown): StatItem {
  if (raw && typeof raw === "object" && "label" in raw) {
    const o = raw as Record<string, unknown>;
    return {
      val: typeof o.val === "string" ? o.val : "",
      label: typeof o.label === "string" ? o.label : "",
      color: typeof o.color === "string" ? o.color : "text-foreground",
    };
  }
  return { val: "", label: "", color: "text-foreground" };
}

export function OneProjectNot13TestsBlock({ content }: { content?: Content }) {
  const title = (content?.title as string) ?? defaultTitle;
  const body = (content?.body as string) ?? defaultBody;
  const rawStats = content?.stats;
  const stats: StatItem[] = Array.isArray(rawStats) ? rawStats.map(ensureStatItem) : defaultStats;

  return (
    <motion.section
      className="py-16 orion-gradient"
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <div className="container mx-auto px-6 text-center max-w-3xl">
        <h2 className="font-display text-3xl md:text-4xl font-bold text-milk mb-6">{title}</h2>
        <p className="text-milk/80 text-lg leading-relaxed mb-8">{body}</p>
        <motion.div
          className="grid grid-cols-1 sm:grid-cols-3 gap-4"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
        >
          {stats.map((s) => (
            <motion.div key={s.label || s.val} variants={scaleFadeItem} className="bg-milk/10 backdrop-blur-sm rounded-lg p-4">
              <div className={`font-display text-3xl font-bold ${s.color}`}>{s.val}</div>
              <div className="text-milk/70 text-xs font-display mt-1">{s.label}</div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </motion.section>
  );
}