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

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

const defaultLeftTitle = "Stay in the Loop";
const defaultLeftBody = "Scan the tour QR to see current projects on our Digital Venture Wall and subscribe to Nova, our news update.";
const defaultLeftNote = "QR / link placeholder for school use";

const defaultRightTitle = "Questions?";
const defaultRightBody = "We'd love to talk during your tour. You can also reach our team at:";
const defaultRightContactLine = "Email: [your school email] · Phone: [school phone] · Web: [school site]";
const defaultRightNote = "Replace placeholders with your contact info before printing.";

export function StayInTheLoopBlock({ content }: { content?: Content }) {
  const leftTitle = str(content?.leftTitle).trim() || defaultLeftTitle;
  const leftBody = str(content?.leftBody).trim() || defaultLeftBody;
  const leftNote = str(content?.leftNote).trim() || defaultLeftNote;

  const rightTitle = str(content?.rightTitle).trim() || defaultRightTitle;
  const rightBody = str(content?.rightBody).trim() || defaultRightBody;
  const rightContactLine = str(content?.rightContactLine).trim() || defaultRightContactLine;
  const rightNote = str(content?.rightNote).trim() || defaultRightNote;

  return (
    <BrandscapeShell variant="narrow">
    <div className="grid md:grid-cols-2 gap-3.5 mt-3.5">
      <div className="bg-mist/10 border border-primary/10 rounded-[10px] p-3.5">
        <h3 className="text-[13px] font-bold text-primary mb-1">{leftTitle}</h3>
        <p className="text-[12.5px] text-muted-foreground">{leftBody}</p>
        {leftNote && <p className="text-[11.5px] text-muted-foreground italic opacity-70 mt-1">{leftNote}</p>}
      </div>
      <div className="bg-mist/10 border border-primary/10 rounded-[10px] p-3.5">
        <h3 className="text-[13px] font-bold text-primary mb-1">{rightTitle}</h3>
        <p className="text-[12.5px] text-muted-foreground">{rightBody}</p>
        {rightContactLine && <p className="text-[12.5px] text-muted-foreground mt-1">{rightContactLine}</p>}
        {rightNote && <p className="text-[11.5px] text-muted-foreground italic opacity-70 mt-1">{rightNote}</p>}
      </div>
    </div>
    </BrandscapeShell>
  );
}