import type { AssembledProposal } from "@/lib/proposal/assemble";
import type { ProposalContent } from "@/lib/proposal/schema";

type Props = {
  vision: ProposalContent["vision"];
  header: AssembledProposal["header"];
};

export function VisionSection({ vision, header }: Props) {
  const words = vision.headline.split(" ");
  const mid = Math.floor(words.length / 2);

  return (
    <div className="min-h-screen flex flex-col justify-center px-16 py-24 space-y-8">
      <p className="text-xs font-mono tracking-widest text-muted-foreground uppercase">
        Dove andiamo
      </p>

      <h2 className="text-5xl font-light leading-tight tracking-tight text-foreground">
        {words.slice(0, mid).join(" ")}{" "}
        <span className="text-primary">{words.slice(mid).join(" ")}</span>
      </h2>

      <p className="text-lg text-muted-foreground max-w-2xl leading-relaxed">
        {vision.body}
      </p>

      <p className="text-sm text-muted-foreground">
        {header.clientName} × {header.consultantName}
      </p>
    </div>
  );
}