type Content = Record<string, unknown>;

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

const colorMap: Record<string, { bg: string; text: string; border: string }> = {
  moss: { bg: "bg-moss", text: "text-moss", border: "border-moss" },
  "deep-sea": { bg: "bg-deep-sea", text: "text-deep-sea", border: "border-deep-sea" },
  valencia: { bg: "bg-valencia", text: "text-valencia", border: "border-valencia" },
  sunflower: { bg: "bg-sunflower", text: "text-sunflower", border: "border-sunflower" },
};

const defaultProblemContext = "Our schoolyard is full of living things — but we don't know what they need. How can we observe and understand the organisms around us so we can figure out what makes a habitat healthy?";
const defaultStory = "Your child begins the year as a Nature Investigator. They'll spend the first quarter exploring the schoolyard with curious eyes, discovering what organisms live there.";
const defaultBuildingToward = "Habitat System Explainer — habitat map, organism-needs charts, system model, and oral presentation";

export function BigIdeaBlock({ content }: { content?: Content }) {
  const bigIdea = str(content?.bigIdea).trim();
  const quarterNarrative = str(content?.quarterNarrative).trim();
  const problemContext = str(content?.problemContext).trim() || defaultProblemContext;
  const story = str(content?.story).trim() || defaultStory;
  const buildingToward = str(content?.buildingToward).trim() || defaultBuildingToward;
  const colorKey = str(content?.color).trim() || "moss";
  const colors = colorMap[colorKey] ?? colorMap.moss;

  return (
    <section className="py-10 bg-card border-b border-border">
      <div className="container mx-auto px-6 max-w-4xl">
        {bigIdea && (
          <div className="mb-8">
            <p className={`font-display text-xs tracking-[0.2em] uppercase ${colors.text} mb-3`}>Big Idea</p>
            <p className="text-foreground text-lg leading-relaxed font-medium">{bigIdea}</p>
          </div>
        )}
        {quarterNarrative && (
          <div className="mb-8">
            <p className={`font-display text-xs tracking-[0.2em] uppercase ${colors.text} mb-3`}>Quarter Narrative</p>
            <p className="text-muted-foreground leading-relaxed">{quarterNarrative}</p>
          </div>
        )}
        <p className={`font-display text-xs tracking-[0.2em] uppercase ${colors.text} mb-3`}>Problem Context</p>
        <p className="text-foreground text-lg leading-relaxed italic">"{problemContext}"</p>
        <p className="text-muted-foreground mt-4 leading-relaxed">{story}</p>
        <div className={`mt-6 ${colors.bg}/10 rounded-lg p-4 border ${colors.border}/30`}>
          <p className="font-display text-sm font-semibold text-foreground mb-1">Building Toward</p>
          <p className="text-muted-foreground text-sm">{buildingToward}</p>
        </div>
      </div>
    </section>
  );
}