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

type Content = Record<string, unknown>;

export type MirrorCardItem = {
  label: string;
  emoji: string;
  desc: string;
};

const defaultTitle = "🪞 The Mirrors: Cross-Cutting Overlays";
const defaultSubtitle = "Constraints and values present at every stage.";

const defaultMirrors: MirrorCardItem[] = [
  {
    label: "Student Voice & Choice",
    emoji: "🗣️",
    desc: "Learners co-design the inquiry, choose roles, and shape deliverables at every stage.",
  },
  {
    label: "Service Learning Cycle",
    emoji: "🔁",
    desc: "IPARDE — Investigate, Prepare, Action, Reflect, Demonstrate, Evaluate — runs beneath every lens.",
  },
  {
    label: "Safety, Ethics & Equity",
    emoji: "🛡️",
    desc: "Age-appropriate tools, consent protocols, equitable access, and ethical design thinking throughout.",
  },
];

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

function parseMirrors(content: Content | undefined): MirrorCardItem[] {
  const raw = content?.mirrors;
  if (!Array.isArray(raw) || raw.length === 0) return defaultMirrors;
  return raw
    .filter((x): x is Record<string, unknown> => x != null && typeof x === "object")
    .map((o) => ({
      label: str(o.label).trim() || "Mirror",
      emoji: str(o.emoji).trim() || "•",
      desc: str(o.desc).trim() || "",
    }));
}

export function CrossCuttingMirrorsBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const subtitle = str(content?.subtitle).trim() || defaultSubtitle;
  const mirrors = parseMirrors(content);

  return (
    <section className="py-12 bg-background">
      <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-2"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
        >
          {title}
        </motion.h2>
        <p className="text-center text-muted-foreground text-sm mb-8">{subtitle}</p>
        <motion.div
          className="grid md:grid-cols-3 gap-4"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
        >
          {mirrors.map((m) => (
            <motion.div
              key={m.label}
              variants={fadeUpItem}
              className="bg-card rounded-xl p-5 border border-border hover:border-primary/30 transition-colors"
            >
              <span className="text-2xl block mb-2">{m.emoji}</span>
              <h3 className="font-display text-sm font-bold text-foreground mb-1">{m.label}</h3>
              <p className="text-muted-foreground text-xs leading-relaxed">{m.desc}</p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}