import type { ProposalContent } from "@/lib/proposal/schema";
import { X } from "lucide-react";

type Props = { deliverables: ProposalContent["deliverables"] };

export function DeliverablesSection({ deliverables }: Props) {
  return (
    <div className="h-full flex items-center px-16 py-24">
      <div className="grid grid-cols-2 gap-8 w-full">
        {/* Deliverable */}
        <div className="border border-primary/20 bg-primary/5 rounded-xl p-8 space-y-4">
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
            <div className="w-5 h-5 rounded-full bg-primary" />
          </div>
          <p className="text-xs font-mono tracking-widest text-primary uppercase">Deliverable · Output finali</p>
          <h3 className="text-lg font-medium text-foreground">Quattro asset progressivi, uno per opzione.</h3>
          <ul className="space-y-2">
            {deliverables.deliverables.map((d, 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: d }} />
              </li>
            ))}
          </ul>
        </div>

        {/* Out of scope */}
        <div className="border border-border rounded-xl p-8 space-y-4">
          <div className="w-10 h-10 rounded-full border-2 border-border flex items-center justify-center text-muted-foreground">
            ∅
          </div>
          <p className="text-xs font-mono tracking-widest text-muted-foreground uppercase">Confini · Ciò che non è incluso</p>
          <div className="border border-border rounded-lg p-4 bg-muted/30 space-y-1">
            <p className="text-sm font-medium text-foreground">
              Ciò che non è esplicitamente indicato è da considerarsi escluso.{" "}
              <span className="italic">A titolo di esempio:</span>
            </p>
          </div>
          <ul className="space-y-2">
            {deliverables.outOfScope.map((d, i) => (
              <li key={i} className="flex items-start gap-2 text-sm text-muted-foreground">
                <X size={14} className="mt-0.5 shrink-0" />
                <span>{d}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
