import { motion } from "framer-motion";

type Content = Record<string, unknown>;

const defaultTitle = "Where Learning Meets Legacy";
const defaultBody = "Sparking the mindset: Acceptance, Belonging, Big Dreams.";
const defaultTarget = "Target: Resilient Problem Solvers & Caring Citizens.";

const defaultTraits = [
  "Resilient Problem Solver",
  "Caring Citizen",
  "Respectful Relationship Builder",
  "Inspiring Communicator",
  "Bold Visionary Leader",
  "Balanced Person",
];

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

function parseTraits(content: Content | undefined): string[] {
  const raw = content?.traits;
  if (!Array.isArray(raw) || raw.length === 0) return defaultTraits;
  return raw
    .map((p) => (typeof p === "string" ? p : typeof (p as { label?: unknown })?.label === "string" ? (p as { label: string }).label : ""))
    .map((s) => s.trim())
    .filter(Boolean);
}

export function ClosingVisionBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const body = str(content?.body).trim() || defaultBody;
  const target = str(content?.target).trim() || defaultTarget;
  const traits = parseTraits(content);

  // Landing content section — sits above the site footer; never replaces it.
  return (
    <section className="py-16 bg-bark text-center" data-component="closing-vision" aria-label="Closing vision">
      <div className="container mx-auto px-6 max-w-2xl">
        <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
          <h2 className="font-display text-2xl md:text-3xl font-bold text-milk mb-4">{title}</h2>
          <p className="text-milk/70 text-sm leading-relaxed mb-4">{body}</p>
          <p className="font-display text-base text-sunflower font-semibold">{target}</p>
          <div className="flex flex-wrap justify-center gap-2 mt-6">
            {traits.map((t) => (
              <span
                key={t}
                className="text-[10px] font-display font-bold px-2.5 py-1 rounded-full bg-milk/10 text-milk/80 border border-milk/20"
              >
                {t}
              </span>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}