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

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

function arr(c: unknown): string[] {
  if (!Array.isArray(c)) return [];
  return c.filter((x): x is string => typeof x === "string");
}

const defaultTitle = "How Families Can Help";
const defaultIcon = "🏡";
const defaultColumns: string[][] = [
  ["Try the student's water‑saving tips at home", "Send back quick \"what worked\" notes or photos", "Join a drain‑clean or garden day if you can"],
  ["Talk about where your water comes from", "Celebrate small wins (shorter showers, no‑drip taps)", "Ask your child to teach you one thing they learned"],
];

function parseColumns(raw: unknown): string[][] {
  if (!Array.isArray(raw) || raw.length === 0) return defaultColumns;
  return raw.slice(0, 4).map((col) => arr(col));
}

const CheckItem = ({ children }: { children: React.ReactNode }) => (
  <li className="relative pl-5 py-0.5 text-[12.5px] leading-relaxed text-muted-foreground before:content-['✓'] before:absolute before:left-0 before:top-0.5 before:text-accent before:font-extrabold before:text-xs">
    {children}
  </li>
);

export function HowFamiliesCanHelpBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const icon = str(content?.icon).trim() || defaultIcon;
  const columns = parseColumns(content?.columns);

  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="grid md:grid-cols-2 gap-3.5">
        {columns.map((items, idx) => (
          <div key={idx} className="bg-mist/10 border border-primary/10 rounded-[10px] p-3.5">
            <ul className="list-none">
              {items.map((item, i) => (
                <CheckItem key={i}>{item}</CheckItem>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
    </BrandscapeShell>
  );
}