import orionLogo from "@/assets/orion-logo.svg";
import { BrandscapeShell } from "@/components/BrandscapeShell";

type Content = Record<string, unknown>;

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

const defaultLabel = "Orion STEM Schools";
const defaultTitle = "What Families Can Expect — and How You Can Help";
const defaultSubtitle = "PBEL · Water — Every Drop Counts 💧";

export function FamiliesExpectHelpBlock({ content }: { content?: Content }) {
  const label = str(content?.label).trim() || defaultLabel;
  const title = str(content?.title).trim() || defaultTitle;
  const subtitle = str(content?.subtitle).trim() || defaultSubtitle;

  return (
    <BrandscapeShell variant="narrow">
    <div className="flex items-center gap-4 pb-4 border-b-2 border-primary mb-5 relative after:absolute after:bottom-[-2px] after:left-0 after:w-20 after:h-0.5 after:bg-accent">
      <div className="w-[52px] h-[52px] rounded-xl bg-gradient-to-br from-primary to-primary/80 flex items-center justify-center shrink-0">
        <img src={orionLogo} alt="Orion" className="w-8 h-8" />
      </div>
      <div>
        <p className="font-body font-bold text-[11px] tracking-[1.8px] uppercase text-primary">{label}</p>
        <h1 className="font-display text-[25px] font-normal text-primary leading-tight mt-0.5 mb-0.5">{title}</h1>
        <p className="text-[13.5px] text-muted-foreground">{subtitle}</p>
      </div>
    </div>
    </BrandscapeShell>
  );
}