frontend/components/ProposalDraft.tsx

type Props = {
  proposal: string;
};

export default function ProposalDraft({ proposal }: Props) {
  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-300">
      <div className="glass-card rounded-[2rem] p-8 border border-white/10 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 blur-[60px]" />
        <h2 className="text-2xl font-bold text-white mb-2">Technical Proposal Draft</h2>
        <p className="text-slate-500 text-sm">Automatically generated framework based on expert agent consensus.</p>
      </div>

      <div className="glass-card rounded-[2.5rem] border border-white/5 bg-slate-950/40 p-10 text-slate-300 min-h-[500px] shadow-2xl">
        {proposal ? (
          <div className="prose prose-invert max-w-none">
            <div className="flex items-center justify-between mb-8 pb-4 border-b border-white/5">
              <span className="text-[10px] font-black uppercase tracking-widest text-purple-400">Generated Strategy Document</span>
              <button 
                onClick={() => {
                  navigator.clipboard.writeText(proposal);
                  alert("Copied!");
                }}
                className="text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-white transition"
              >
                Copy Text 📋
              </button>
            </div>
            <pre className="whitespace-pre-wrap break-words text-slate-100 font-serif leading-relaxed text-lg italic">
              {proposal}
            </pre>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center h-full text-slate-500 py-20">
            <div className="text-4xl mb-4 opacity-20">📝</div>
            <p className="text-sm font-medium">Run a specialized analysis to generate a custom proposal.</p>
          </div>
        )}
      </div>
    </div>
  );
}