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 = "What Your Child Will Gain";
const defaultHeadingIcon = "🌟";
const defaultItems = [
  "Scientific thinking and evidence-based reasoning",
  "Observation skills that transfer to all subjects",
  "Understanding of living systems and environments",
  "Confidence in asking questions and seeking answers",
];

function ensureGains(raw: unknown): string[] {
  if (!Array.isArray(raw)) return defaultItems;
  return raw
    .filter((x): x is string => typeof x === "string")
    .map((s) => s.trim())
    .filter(Boolean)
    .slice(0, 12);
}

export function WhatYourChildWillGainBlock({ content }: { content?: Content }) {
  const heading = str(content?.heading).trim() || defaultHeading;
  const headingIcon = str(content?.headingIcon).trim() || defaultHeadingIcon;
  const items = ensureGains(content?.items);

  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="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
        {items.map((gain, i) => (
          <div key={i} className="orion-gradient rounded-xl p-4 text-center">
            <p className="text-milk text-sm font-display">{gain}</p>
          </div>
        ))}
      </div>
    </motion.section>
    </BrandscapeShell>
  );
}