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 defaultHeadingIcon = "🎭";
const defaultBody =
  "This Subject provides the CONTENT KNOWLEDGE at the heart of the Project Spine. Every quarter's driving question starts with a phenomenon that connects math, literacy, humanities, and all other subjects.";
const defaultOtherSubjectsTitle = "What Other Subjects Teach";
const defaultOtherSubjectsIcon = "📚";
const defaultOtherSubjectsText =
  "Math: Count and measure organisms. ELA: Read informational texts about habitats. Humanities: Explore who shares the environment.";
const defaultThisAddsTitle = "What This Subject Adds";
const defaultThisAddsIcon = "🔬";
const defaultThisAddsText =
  "This Subject provides the WHY — the driving questions, investigations, and evidence that give purpose to counting, reading, mapping, and designing.";
const defaultHeading = "How This Subject Connects to All Learning";

export function HowConnectsBlock({ content }: { content?: Content }) {
  const conn = content?.connectionExample as Record<string, unknown> | undefined;
  const heading = str(content?.heading).trim() || defaultHeading;
  const headingIcon = str(content?.headingIcon).trim() || defaultHeadingIcon;
  const body = str(content?.body).trim() || defaultBody;
  const otherSubjectsTitle = str(content?.otherSubjectsTitle).trim() || defaultOtherSubjectsTitle;
  const otherSubjectsIcon = str(content?.otherSubjectsIcon).trim() || defaultOtherSubjectsIcon;
  const otherSubjectsText =
    str(content?.otherSubjectsText).trim() || str(conn?.otherSubjects).trim() || defaultOtherSubjectsText;
  const thisAddsTitle = str(content?.thisAddsTitle).trim() || defaultThisAddsTitle;
  const thisAddsIcon = str(content?.thisAddsIcon).trim() || defaultThisAddsIcon;
  const thisAddsText = str(content?.thisAddsText).trim() || str(conn?.thisAdds).trim() || defaultThisAddsText;

  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="bg-muted/50 border-l-4 border-valencia rounded-xl p-6 mb-4">
        <p className="text-foreground leading-relaxed">{body}</p>
      </div>
      <div className="grid md:grid-cols-2 gap-4">
        <div className="bg-card rounded-xl p-5 border-2 border-sunflower">
          <h3 className="font-display text-sm font-bold text-sunflower mb-2 flex items-center gap-2">
            <span>{otherSubjectsIcon}</span> {otherSubjectsTitle}
          </h3>
          <p className="text-muted-foreground text-sm">{otherSubjectsText}</p>
        </div>
        <div className="bg-card rounded-xl p-5 border-2 border-deep-sea">
          <h3 className="font-display text-sm font-bold text-deep-sea mb-2 flex items-center gap-2">
            <span>{thisAddsIcon}</span> {thisAddsTitle}
          </h3>
          <p className="text-muted-foreground text-sm">{thisAddsText}</p>
        </div>
      </div>
    </motion.section>
    </BrandscapeShell>
  );
}