import { motion } from "framer-motion";
import { yearOverview } from "@/data/curriculum";

type Content = Record<string, unknown>;

const defaultHeading = "The Year-Long Story";
const defaultStory = yearOverview.yearStory;

export function YearLongStoryBlock({ content }: { content?: Content }) {
  const heading = (content?.heading as string) ?? defaultHeading;
  const story = (content?.story as string) ?? defaultStory;

  return (
    <motion.section
      className="py-16 bg-card"
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <div className="container mx-auto px-6 max-w-4xl">
        <div className="text-center mb-8">
          <p className="font-display text-xs tracking-[0.2em] uppercase text-deep-sea mb-2">
            {heading}
          </p>
        </div>
        <p className="text-foreground text-lg leading-relaxed text-center">
          {story}
        </p>
      </div>
    </motion.section>
  );
}