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

type Content = Record<string, unknown>;

type DimensionItem = { emoji: string; title: string; desc: string };

const defaultHeading = "Developing the Whole Child";
const defaultTitle = "Portrait of the Learner";
const defaultSubtitle = "Every Orion experience intentionally develops six dimensions of your child's identity.";
const defaultDimensions: DimensionItem[] = yearOverview.portraitDimensions;

function ensureDimension(raw: unknown): DimensionItem {
  if (raw && typeof raw === "object" && "title" in raw) {
    const o = raw as Record<string, unknown>;
    return {
      emoji: typeof o.emoji === "string" ? o.emoji : "✨",
      title: typeof o.title === "string" ? o.title : "",
      desc: typeof o.desc === "string" ? o.desc : "",
    };
  }
  return { emoji: "✨", title: "", desc: "" };
}

export function DevelopingWholeChildBlock({ content }: { content?: Content }) {
  const heading = (content?.heading as string) ?? defaultHeading;
  const title = (content?.title as string) ?? defaultTitle;
  const subtitle = (content?.subtitle as string) ?? defaultSubtitle;
  const rawDimensions = content?.dimensions;
  const dimensions: DimensionItem[] = Array.isArray(rawDimensions)
    ? rawDimensions.map(ensureDimension)
    : defaultDimensions;

  return (
    <section className="py-16 md:py-24 bg-background">
      <div className="container mx-auto px-6">
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          <p className="font-display text-xs tracking-[0.2em] uppercase text-deep-sea mb-2">{heading}</p>
          <h2 className="font-display text-3xl md:text-4xl font-bold text-foreground">{title}</h2>
          <p className="text-muted-foreground mt-3 max-w-2xl mx-auto">{subtitle}</p>
        </motion.div>
        <motion.div
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true, margin: "-80px" }}
        >
          {dimensions.map((dim) => (
            <motion.div
              key={dim.title || dim.desc}
              variants={fadeUpItem}
              className="bg-card rounded-xl p-6 border border-border orion-card-hover"
            >
              <span className="text-3xl mb-3 block">{dim.emoji}</span>
              <h3 className="font-display text-lg font-semibold text-foreground mb-2">{dim.title}</h3>
              <p className="text-muted-foreground text-sm">{dim.desc}</p>
            </motion.div>
          ))}
        </motion.div>
        <motion.div
          className="mt-12"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          <GrowthDashboard />
        </motion.div>
      </div>
    </section>
  );
}