clienthub/src/components/public/proposal/sections/ProblemNodeSection.tsx

import type { ProblemNode } from "@/lib/proposal/schema";

type Props = { problem: ProblemNode };

export function ProblemNodeSection({ problem }: Props) {
  return (
    <div className="min-h-screen flex flex-col justify-center px-16 py-24 space-y-8 max-w-4xl">
      <div>
        <p className="text-xs font-mono tracking-widest text-destructive uppercase">
          Problema {problem.id} · {problem.subtitle}
        </p>
        <h2 className="text-5xl font-light text-foreground mt-4 leading-tight">
          {problem.title.split(problem.title.split(" ").slice(-2).join(" "))[0]}
          <span className="text-destructive">{problem.title.split(" ").slice(-2).join(" ")}</span>
        </h2>
        <p className="text-base text-muted-foreground mt-4 leading-relaxed max-w-2xl">
          {problem.body}
        </p>
      </div>

      <div className="border border-destructive/30 bg-destructive/5 rounded-xl p-6 space-y-2">
        <p className="text-xs font-mono tracking-widest text-destructive uppercase">Il rischio</p>
        <p className="text-sm text-foreground leading-relaxed">{problem.risk}</p>
      </div>

      <div className="border-l-2 border-border pl-6 space-y-1">
        <p className="text-sm text-muted-foreground italic leading-relaxed">
          &ldquo;{problem.quote}&rdquo;
        </p>
        <p className="text-xs font-mono text-muted-foreground">{problem.quoteAttribution}</p>
      </div>
    </div>
  );
}