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

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

type Faq = { q?: string; a?: string };

function parseQuestions(raw: unknown): Faq[] {
  if (!Array.isArray(raw)) return defaultQuestions;
  return raw.slice(0, 20).map((x) => {
    const item = x as Faq;
    return { q: str(item?.q).trim(), a: str(item?.a).trim() };
  });
}

const defaultTitle = "Deep Inquiry Questions";
const defaultIcon = "🔍";
const defaultQuestions: Faq[] = [
  { q: "How does solving a real water problem change the way my child thinks about science and math?", a: "When students measure leaks, calculate water savings, or analyze data from sensors, they experience science and math as tools for impact — not just subjects to study. This builds deeper understanding and lasting motivation." },
  { q: "What happens when a student's solution doesn't work — and why is that valuable?", a: "Failure is designed into the PBEL cycle. When a prototype falls short, students revisit their data, rethink assumptions, and iterate. This builds resilience, critical thinking, and the confidence to tackle complex problems." },
  { q: "How will my child's work actually affect our community — not just the classroom?", a: "Students partner with real organizations, adopt real drains, fix real leaks, and present real data. Their solutions are handed off with maintenance plans so impact continues beyond the school year." },
  { q: "How does studying one theme across K–12 create a different kind of learning culture?", a: "When older students mentor younger ones and every grade contributes to the same mission, students see themselves as part of a larger community of problem-solvers — building empathy, purpose, and school-wide collaboration." },
];

export function DeepInquiryQuestionsBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const icon = str(content?.icon).trim() || defaultIcon;
  const questions = parseQuestions(content?.questions);

  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>
      <div className="border border-border rounded-[10px] px-4 py-1">
        {questions.map((faq, idx) => (
          <div key={idx} className={`py-2 ${idx < questions.length - 1 ? "border-b border-border" : ""}`}>
            {faq.q && <strong className="text-[13px] text-primary block mb-0.5">{faq.q}</strong>}
            {faq.a && <p className="text-[12.5px] text-muted-foreground leading-relaxed">{faq.a}</p>}
          </div>
        ))}
      </div>
    </div>
    </BrandscapeShell>
  );
}