import { motion } from "framer-motion";
import { staggerContainer, fadeUpItem } from "@/components/PageTransition";

type Content = Record<string, unknown>;

export type JourneyPhaseItem = {
  name: string;
  lenses: string;
  emoji: string;
  color: string;
  insight: string;
};

const defaultTitle = "Three Phases of the Journey";

const defaultPhases: JourneyPhaseItem[] = [
  {
    name: "Context & Connection",
    lenses: "1–3",
    emoji: "🌍",
    color: "--deep-sea",
    insight: "Every journey begins with a connection to the world outside the classroom.",
  },
  {
    name: "Empathy & Insight",
    lenses: "4–6",
    emoji: "💡",
    color: "--sunflower",
    insight: "We don't guess — we learn from users and apply core disciplines.",
  },
  {
    name: "Action & Impact",
    lenses: "7–9",
    emoji: "⚡",
    color: "--valencia",
    insight: "Problem → Blueprint → Evidence → Influence.",
  },
];

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

function parsePhases(content: Content | undefined): JourneyPhaseItem[] {
  const raw = content?.phases;
  if (!Array.isArray(raw) || raw.length === 0) return defaultPhases;
  return raw
    .filter((x): x is Record<string, unknown> => x != null && typeof x === "object")
    .map((o) => ({
      name: str(o.name).trim() || "Phase",
      lenses: str(o.lenses).trim() || "",
      emoji: str(o.emoji).trim() || "•",
      color: str(o.color).trim() || "--deep-sea",
      insight: str(o.insight).trim() || "",
    }));
}

export function ThreeJourneyPhasesBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const phases = parsePhases(content);

  return (
    <section className="py-12 bg-muted/30">
      <div className="container mx-auto px-6 max-w-5xl">
        <motion.h2
          className="font-display text-xl md:text-2xl font-bold text-foreground text-center mb-8"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
        >
          {title}
        </motion.h2>
        <motion.div
          className="grid md:grid-cols-3 gap-5"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
        >
          {phases.map((phase) => (
            <motion.div
              key={phase.name}
              variants={fadeUpItem}
              className="bg-card rounded-xl p-5 border-t-4"
              style={{ borderTopColor: `hsl(var(${phase.color}))` }}
            >
              <div className="flex items-center gap-2 mb-2">
                <span className="text-2xl">{phase.emoji}</span>
                <h3 className="font-display text-sm font-bold text-foreground">{phase.name}</h3>
                {phase.lenses ? (
                  <span className="text-[10px] text-muted-foreground ml-auto font-display">Lenses {phase.lenses}</span>
                ) : null}
              </div>
              <p className="text-muted-foreground text-xs italic leading-relaxed">&ldquo;{phase.insight}&rdquo;</p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}