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 = "Smarter Assessment = Less Stress";
const defaultHeadingIcon = "✅";
const defaultItems = [
  { icon: "1️⃣", title: "ONE Diagnostic", desc: "All teachers observe the same opening task", color: "deep-sea" },
  { icon: "📊", title: "Daily Check-ins", desc: "Each teacher tracks subject-specific growth", color: "valencia" },
  { icon: "1️⃣", title: "ONE Final Project", desc: "All teachers assess from their expert lens", color: "moss" },
];
const defaultBenefitLabel = "💡 The Benefit:";
const defaultBenefitText =
  "One meaningful project instead of 5-6 separate tests. Less stress, deeper learning, more authentic assessment.";

const colorClasses: Record<string, string> = {
  "deep-sea": "border-deep-sea bg-deep-sea/5",
  valencia: "border-valencia bg-valencia/5",
  moss: "border-moss bg-moss/5",
};

function ensureItems(raw: unknown): { icon: string; title: string; desc: string; color: string }[] {
  if (!Array.isArray(raw) || raw.length === 0) return defaultItems;
  return raw.slice(0, 6).map((item) => {
    const o = item && typeof item === "object" ? item as Record<string, unknown> : {};
    return {
      icon: str(o.icon).trim() || "•",
      title: str(o.title).trim() || "Item",
      desc: str(o.desc).trim() || "",
      color: ["deep-sea", "valencia", "moss"].includes(str(o.color).trim()) ? str(o.color).trim() : "deep-sea",
    };
  });
}

export function SmarterAssessmentBlock({ content }: { content?: Content }) {
  const heading = str(content?.heading).trim() || defaultHeading;
  const headingIcon = str(content?.headingIcon).trim() || defaultHeadingIcon;
  const items = ensureItems(content?.items);
  const benefitLabel = str(content?.benefitLabel).trim() || defaultBenefitLabel;
  const benefitText = str(content?.benefitText).trim() || defaultBenefitText;

  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-3 gap-4 mb-4">
        {items.map((item, i) => (
          <div
            key={i}
            className={`border-2 rounded-xl p-4 text-center ${colorClasses[item.color] ?? colorClasses["deep-sea"]}`}
          >
            <span className="text-3xl block mb-2">{item.icon}</span>
            <p className="font-display text-xs font-bold text-foreground mb-1">{item.title}</p>
            <p className="text-muted-foreground text-xs">{item.desc}</p>
          </div>
        ))}
      </div>
      <div className="bg-sunflower/10 border-l-4 border-sunflower rounded-lg p-4">
        <p className="text-sm text-foreground">
          <strong className="text-sunflower">{benefitLabel}</strong> {benefitText}
        </p>
      </div>
    </motion.section>
    </BrandscapeShell>
  );
}