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

type Content = Record<string, unknown>;

export type GradeBandItem = {
  band: string;
  color: string;
  label: string;
  items: string[];
};

const defaultTitle = "🎓 Disciplined Entrepreneurship by Grade Band";

const defaultBands: GradeBandItem[] = [
  {
    band: "K–2",
    color: "--salmon",
    label: "Discovery",
    items: ["User needs & simple cost/benefit", "Empathy interviews with picture prompts", "Hands-on prototypes with recycled materials"],
  },
  {
    band: "3–5",
    color: "--moss",
    label: "Problem Framing",
    items: ["Value proposition & 'How many people?'", "Data collection with tally charts", "Adopt-a-Drain, rain barrels, garden projects"],
  },
  {
    band: "6–8",
    color: "--sunflower",
    label: "Solution Concept",
    items: ["MVP & hypothesis testing", "Sensor-based data & simple coding", "Iteration logs with before/after metrics"],
  },
  {
    band: "9–12",
    color: "--deep-sea",
    label: "Venture",
    items: ["Market segmentation & legal/ethical lens", "Smart meter prototypes & ROI analysis", "Partner pilots and scale-up plans"],
  },
];

function str(c: unknown): string {
  return typeof c === "string" ? c : "";
}

function parseBands(content: Content | undefined): GradeBandItem[] {
  const raw = content?.gradeBands;
  if (!Array.isArray(raw) || raw.length === 0) return defaultBands;
  return raw
    .filter((x): x is Record<string, unknown> => x != null && typeof x === "object")
    .map((o) => ({
      band: str(o.band).trim() || "Band",
      color: str(o.color).trim() || "--deep-sea",
      label: str(o.label).trim() || "",
      items: Array.isArray(o.items)
        ? o.items.map((i) => str(i).trim()).filter(Boolean)
        : [],
    }));
}

export function GradeBandEntrepreneurshipBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const gradeBands = parseBands(content);

  return (
    <section className="py-12 bg-muted/30">
      <div className="container mx-auto px-6 max-w-5xl">
        <motion.h2
          className="font-display text-xl md:text-2xl font-bold text-foreground text-center mb-8"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
        >
          {title}
        </motion.h2>
        <motion.div
          className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
        >
          {gradeBands.map((g) => (
            <motion.div key={g.band} variants={fadeUpItem} className="bg-card rounded-xl overflow-hidden border border-border">
              <div
                className="p-2 text-center font-display text-xs font-bold text-white tracking-wider uppercase"
                style={{ backgroundColor: `hsl(var(${g.color}))` }}
              >
                {g.band}
                {g.label ? ` — ${g.label}` : ""}
              </div>
              <div className="p-4">
                <ul className="space-y-1.5">
                  {g.items.map((item, i) => (
                    <li key={i} className="text-muted-foreground text-xs flex items-start gap-2">
                      <span className="text-primary font-bold text-[10px] mt-0.5">✓</span> {item}
                    </li>
                  ))}
                </ul>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}