import { motion } from "framer-motion";
import { staggerContainer, fadeUpItem } from "@/components/PageTransition";

type Content = Record<string, unknown>;

export type DeliverableItem = {
  emoji: string;
  title: string;
  desc: string;
};

const defaultTitle = "📦 Deliverables & Evidence of Impact";

const defaultDeliverables: DeliverableItem[] = [
  { emoji: "💛", title: "Empathy Packets", desc: "Journey maps, interview syntheses, and user personas" },
  { emoji: "🔧", title: "Prototype Artifacts", desc: "CAD models, code, physical builds, and iteration logs" },
  { emoji: "📊", title: "Impact Snapshot", desc: "Baseline vs. After — liters saved, leaks fixed, policies changed" },
  { emoji: "📖", title: "PDI Story", desc: "Problem → Blueprint → Evidence → Influence narrative" },
  { emoji: "🎤", title: "Exhibition Deck", desc: "Presentation for the Innovation & Impact Showcase" },
  { emoji: "📋", title: "Handoff Plan", desc: "Maintenance and sustainability plan for community partners" },
];

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

function parseDeliverables(content: Content | undefined): DeliverableItem[] {
  const raw = content?.deliverables;
  if (!Array.isArray(raw) || raw.length === 0) return defaultDeliverables;
  return raw
    .filter((x): x is Record<string, unknown> => x != null && typeof x === "object")
    .map((o) => ({
      emoji: str(o.emoji).trim() || "•",
      title: str(o.title).trim() || "Deliverable",
      desc: str(o.desc).trim() || "",
    }));
}

export function DeliverablesEvidenceBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const deliverables = parseDeliverables(content);

  return (
    <section className="py-12 bg-background">
      <div className="container mx-auto px-6 max-w-5xl">
        <motion.h2
          className="font-display text-xl md:text-2xl font-bold text-foreground text-center mb-8"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
        >
          {title}
        </motion.h2>
        <motion.div
          className="grid sm:grid-cols-2 md:grid-cols-3 gap-4"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
        >
          {deliverables.map((d) => (
            <motion.div
              key={d.title}
              variants={fadeUpItem}
              className="bg-card border-2 border-valencia/20 rounded-xl p-4 text-center hover:border-valencia/50 transition-colors"
            >
              <span className="text-3xl block mb-2">{d.emoji}</span>
              <h3 className="font-display text-xs font-bold text-foreground mb-1">{d.title}</h3>
              <p className="text-muted-foreground text-[11px] leading-relaxed">{d.desc}</p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}