import { motion } from "framer-motion";
import { BrandscapeShell } from "@/components/BrandscapeShell";

type Content = Record<string, unknown>;

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

const defaultHeading = "Quarter-End Celebration";
const defaultHeadingIcon = "🎊";
const defaultBody =
  "At the end of each quarter, your child presents scientific findings as part of the integrated project. In Q1, they present a System Explainer. In Q2, a Data-Driven Argument. In Q3, an Engineering Solution. In Q4, a Living Habitat with Care Guide — each showcasing their growth as a scientist.";

export function CourseQuarterCelebrationBlock({ content }: { content?: Content }) {
  const heading = str(content?.heading).trim() || defaultHeading;
  const headingIcon = str(content?.headingIcon).trim() || defaultHeadingIcon;
  const body = str(content?.body).trim() || defaultBody;

  return (
    <BrandscapeShell variant="content" paddingY>
    <motion.section
      className="w-full min-w-0"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <h2 className="font-display text-xl font-bold text-deep-sea mb-4 flex items-center gap-2 border-b-2 border-deep-sea pb-2">
        <span className="text-2xl">{headingIcon}</span> {heading}
      </h2>
      <div className="bg-muted/50 border-l-4 border-deep-sea rounded-xl p-6">
        <p className="text-foreground leading-relaxed">{body}</p>
      </div>
    </motion.section>
    </BrandscapeShell>
  );
}