import { BrandscapeShell } from "@/components/BrandscapeShell";
type Content = Record<string, unknown>;

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

const defaultTitle = "Why Water? Why Now?";
const defaultIcon = "🌊";
const defaultBody =
  "Many families around the world cannot access safe water at home. Here at home, our water arrives by pipe — but every drop still matters. We can reduce waste, stop leaks, and protect our creeks and rivers. PBEL helps students connect global challenges to local action.";

export function WhyWaterWhyNowBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const icon = str(content?.icon).trim() || defaultIcon;
  const body = str(content?.body).trim() || defaultBody;

  return (
    <BrandscapeShell variant="narrow">
    <div className="mt-6">
      <h2 className="font-display text-[17px] font-normal text-primary flex items-center gap-2 mb-2">
        <span className="text-base opacity-70">{icon}</span>
        {title}
      </h2>
      <p className="text-[13px] leading-relaxed text-muted-foreground">{body}</p>
    </div>
    </BrandscapeShell>
  );
}