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

type Props = { solution: SolutionNode };

export function SolutionNodeSection({ solution }: Props) {
  return (
    <div className="h-full 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-primary uppercase">
          {solution.subtitle}
        </p>
        <h2 className="text-5xl font-light text-foreground mt-4 leading-tight">
          {solution.title}
        </h2>
      </div>

      <div className="border border-primary/20 bg-primary/5 rounded-xl p-6 space-y-2">
        <p className="text-xs font-mono tracking-widest text-primary uppercase">La trasformazione</p>
        <p className="text-sm text-foreground leading-relaxed">{solution.transformation}</p>
      </div>

      <div className="border border-border rounded-xl p-6 space-y-3">
        <p className="text-xs font-mono tracking-widest text-muted-foreground uppercase">Attraverso cosa</p>
        <ul className="space-y-2">
          {solution.throughWhat.map((item, i) => (
            <li key={i} className="flex items-start gap-2 text-sm text-foreground">
              <span className="text-primary mt-0.5">›</span>
              <span dangerouslySetInnerHTML={{ __html: item }} />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}