feat(21-22): agente AI generazione preventivo + pagina pubblica deck

- Migration 0010: tabella proposals (id, slug, lead_id, client_id,
  offer_macro_id, content jsonb, state, selected_tier, accepted_at)
  applicata a prod via SSH tunnel
- @anthropic-ai/sdk@0.105.0 installato; ANTHROPIC_API_KEY in .env.local
- src/lib/proposal/: schema Zod ProposalContent, agente Claude Opus 4.8,
  assemble (AI + offerta DB + config consulente), queries, profile.ts
- Admin: /admin/preventivi lista + /genera (pre-fill ?lead_id=X) + /[id] review
- Sidebar: voce Preventivi + CTA globale lime "Genera preventivo"
- LeadDetail: pulsante "Genera preventivo" → /admin/preventivi/genera?lead_id=X
- Pagina pubblica /preventivo/[slug]: deck 20+ slide light-mode iamcavalli,
  navigazione frecce + dot + keyboard, accept/reject con guard immutabilità
- STATE.md aggiornato (80%), 21-PLAN.md scritto nel formato GSD

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,34 @@
+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>
+  );
+}