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

type Content = Record<string, unknown>;

const defaultHeading = "Why This Course Matters";
const defaultHeadingIcon = "💡";
const defaultBody =
  "This Subject is the foundation of curiosity. Your child will learn to observe carefully, ask meaningful questions, design investigations, and build evidence-based explanations. These skills transfer to every area of life — from solving daily problems to understanding how the world works.";

export function WhyThisCourseMattersBlock({ content }: { content?: Content }) {
  const heading = (content?.heading as string) ?? defaultHeading;
  const headingIcon = (content?.headingIcon as string) ?? defaultHeadingIcon;
  const body = (content?.body as string) ?? defaultBody;

  return (
    <BrandscapeShell variant="content" paddingY>
    <motion.section
      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>
  );
}