import { Link } from "react-router-dom";
import { ArrowLeft } from "lucide-react";

type Content = Record<string, unknown>;

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

const defaultBackLabel = "KG Family Guide";
const defaultBackHref = "/grade/kg";
const defaultQuarterLabel = "Quarter 1 · September – November · Weeks 1–9";
const defaultRole = "The Nature Investigator";
const defaultSubtitle = "Foundations";
const defaultTitle = "Explain the System";
const defaultEmoji = "🌱";

const colorBg: Record<string, string> = {
  moss: "bg-moss",
  "deep-sea": "bg-deep-sea",
  valencia: "bg-valencia",
  sunflower: "bg-sunflower",
};

export function QuarterHeroBlock({ content }: { content?: Content }) {
  const backLabel = str(content?.backLabel).trim() || defaultBackLabel;
  const backHref = str(content?.backHref).trim() || defaultBackHref;
  const quarterLabel = str(content?.quarterLabel).trim() || defaultQuarterLabel;
  const role = str(content?.role).trim() || defaultRole;
  const subtitle = str(content?.subtitle).trim() || defaultSubtitle;
  const title = str(content?.title).trim() || defaultTitle;
  const emoji = str(content?.emoji).trim() || defaultEmoji;
  const colorKey = str(content?.color).trim() || "moss";
  const bgClass = colorBg[colorKey] ?? colorBg.moss;

  return (
    <header className={`${bgClass} py-12 md:py-20 w-full min-w-0`}>
      <div className="container mx-auto px-6">
        <Link
          to={backHref}
          className="inline-flex items-center gap-2 text-milk/70 hover:text-milk font-display text-sm mb-6 transition-colors"
        >
          <ArrowLeft className="w-4 h-4" /> {backLabel}
        </Link>
        <div className="flex items-start gap-4">
          <span className="text-5xl md:text-6xl">{emoji}</span>
          <div>
            <p className="font-display text-xs tracking-[0.2em] uppercase text-milk/70">{quarterLabel}</p>
            <h1 className="font-display text-3xl md:text-5xl font-bold text-milk mt-1">{role}</h1>
            <p className="font-display text-lg text-milk/80 mt-2">
              {subtitle}: {title}
            </p>
          </div>
        </div>
      </div>
    </header>
  );
}