import React, { useState, useEffect, useRef } from 'react'; import { BrowserRouter, Routes, Route, Link, useNavigate, useParams, Navigate, useLocation } from 'react-router-dom'; import { motion, AnimatePresence } from 'framer-motion'; import { Sparkles, FileText, DollarSign, Send, CheckCircle2, Shield, ArrowRight, TrendingUp, Users, Layers, Plus, ExternalLink, Download, Lock, CreditCard, Check, AlertCircle, Eye, Trash2, Signature, Mail, Briefcase, Clock } from 'lucide-react'; import { Toaster, toast } from 'sonner'; // --- MEDIA CONSTANTS --- const MEDIA = { heroBg: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1200&q=80", avatar1: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80", avatar2: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80", avatar3: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=100&q=80" }; // --- TYPES & INTERFACES --- interface Proposal { id: string; clientName: string; projectTitle: string; budget: number; timeline: string; status: 'Draft' | 'Sent' | 'Viewed' | 'Signed' | 'Paid'; scope: string; deliverables: string[]; signatureName?: string; signatureDate?: string; createdAt: string; emailSent?: boolean; } // --- INITIAL SEED DATA --- const INITIAL_PROPOSALS: Proposal[] = [ { id: "prop-1", clientName: "Acme Corp", projectTitle: "Enterprise Brand Redesign & Webflow Development", budget: 18500, timeline: "8 Weeks", status: "Signed", scope: "Complete visual identity overhaul, design system creation, and responsive Webflow implementation with custom interactions.", deliverables: ["Brand Identity Guidelines", "Figma Design System", "5-page Webflow Website", "SEO Optimization"], signatureName: "Sarah Jenkins", signatureDate: "2024-03-15", createdAt: "2024-03-10" }, { id: "prop-2", clientName: "Vortex Labs", projectTitle: "SaaS Product Design & Mobile App Strategy", budget: 24000, timeline: "12 Weeks", status: "Viewed", scope: "End-to-end UX/UI design for the upcoming mobile application, including user research, high-fidelity wireframes, and interactive prototypes.", deliverables: ["User Research Report", "Interactive Prototypes", "iOS & Android UI Kit", "Developer Handover Docs"], createdAt: "2024-03-18" }, { id: "prop-3", clientName: "Solas Energy", projectTitle: "B2B Marketing Campaign & Collateral", budget: 9500, timeline: "4 Weeks", status: "Sent", scope: "Strategic marketing campaign design including ad creatives, social media templates, and a high-converting landing page.", deliverables: ["Ad Creative Set (12 variations)", "Social Media Playbook", "Landing Page Copy & Design"], createdAt: "2024-03-20" } ]; // --- APP COMPONENT --- export default function App() { const [proposals, setProposals] = useState(() => { const saved = localStorage.getItem('quotepilot_proposals'); return saved ? JSON.parse(saved) : INITIAL_PROPOSALS; }); const [user, setUser] = useState<{ email: string; businessName: string; plan: 'Free' | 'Premium' } | null>(() => { const saved = localStorage.getItem('quotepilot_user'); return saved ? JSON.parse(saved) : null; }); useEffect(() => { localStorage.setItem('quotepilot_proposals', JSON.stringify(proposals)); }, [proposals]); useEffect(() => { if (user) { localStorage.setItem('quotepilot_user', JSON.stringify(user)); } else { localStorage.removeItem('quotepilot_user'); } }, [user]); return (

} /> } /> } /> {/* Protected Dashboard Routes */} } /> } /> } /> {/* Public Portal Route */} } /> } />

); } // --- PROTECTED ROUTE COMPONENT --- function ProtectedRoute({ user, children }: { user: any; children: React.ReactNode }) { if (!user) { return ; } return <>{children}; } // --- LANDING PAGE --- function LandingPage({ user, proposals, setProposals }: { user: any; proposals: Proposal[]; setProposals: any }) { const navigate = useNavigate(); const [showDemoModal, setShowDemoModal] = useState(false); const [clientName, setClientName] = useState(''); const [projectTitle, setProjectTitle] = useState(''); const [budget, setBudget] = useState('15000'); const [isGenerating, setIsGenerating] = useState(false); const [generationStep, setGenerationStep] = useState(0); const steps = [ "Analyzing client scope & rates...", "Structuring interactive packages...", "Drafting digital contract terms...", "Publishing secure client portal..." ]; const handlePreFill = () => { setClientName("Acme Corporation"); setProjectTitle("Next-Gen E-Commerce Platform & Design System"); setBudget("24500"); }; const handleGenerateDemo = (e: React.FormEvent) => { e.preventDefault(); setIsGenerating(true); setGenerationStep(0); const interval = setInterval(() => { setGenerationStep(prev => { if (prev < steps.length - 1) { return prev + 1; } else { clearInterval(interval); return prev; } }); }, 800); setTimeout(() => { clearInterval(interval); const newProposal: Proposal = { id: `demo-${Date.now()}`, clientName: clientName || "Acme Corporation", projectTitle: projectTitle || "Next-Gen E-Commerce Platform & Design System", budget: Number(budget) || 24500, timeline: "8 Weeks", status: 'Draft', scope: "A comprehensive design and development phase to launch a high-performance e-commerce storefront. Includes user research, Figma prototypes, custom React/Tailwind frontend, and Stripe payment integration.", deliverables: [ "Figma UI/UX Design System", "High-Performance React Web Storefront", "Stripe Checkout & Subscription Integration", "Comprehensive SEO & Speed Optimization" ], createdAt: new Date().toISOString().split('T')[0] }; setProposals([newProposal, ...proposals]); setIsGenerating(false); setShowDemoModal(false); toast.success("AI Proposal generated! Welcome to the Client Portal."); navigate(`/portal/${newProposal.id}`); }, 3500); }; return (

{/* Glow effects */}

{/* Header */}

QuotePilot

{user ? ( Go to Dashboard ) : ( <> Sign In Start Free )}

{/* Hero Section */}

Trusted by 4,200+ modern freelancers & agencies

Close high-ticket clients with AI-powered proposals

Create stunning proposals, interactive pricing packages, contracts, and invoices in seconds. Get paid faster with built-in e-signatures and Stripe.

{/* Mockup Showcase */}

{ e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100%25' height='100%25' fill='%2318181b'/%3E%3C/svg%3E"; }} /> {/* Overlay UI Mockup Elements */}

proposal_v2_final.pdf

AI Draft Ready

Project Value

$18,500

Deposit: $9,250 Net 15

Acme Corp Client Portal

Decline

Sign & Accept

{/* Social Proof */}

Backed by top creators at

WEBFLOW STRIPE FIGMA LINEAR

{/* Features Grid */}

Engineered to close deals. Fast.

Stop wasting hours drafting documents. QuotePilot handles your entire client onboarding pipeline in one elegant workspace.

AI Generation Engine

Input basic scope details and let our specialized AI model draft beautifully written proposals, tailored contracts, and itemized packages.

Client Portal & E-Sign

Send clients a secure, interactive link where they can review proposals, select pricing tiers, sign legally-binding contracts, and pay deposits.

Stripe Invoicing

Automatically generate professional invoices tied to your proposals. Accept credit cards, Apple Pay, or bank transfers instantly.

{/* Bottom CTA */}

Ready to upgrade your client experience?

Join thousands of agencies and elite freelancers who close 40% more deals using QuotePilot.

Get Started Free

{/* Footer */} {/* Interactive AI Demo Modal */} {showDemoModal && (

Instant AI Proposal Sandbox

{isGenerating ? (

Crafting Proposal Live

Our specialized AI is writing scope details, pricing tiers, and contract terms...

{steps.map((step, idx) => (

{idx < generationStep ? '✓' : idx + 1}

{step}

))}

) : (

Experience QuotePilot instantly: Fill in the fields below or keep our prepared sample project to see how the client portal and digital signing works.

Client Name setClientName(e.target.value)} className="w-full px-3.5 py-2.5 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 text-sm" required />

Project Title setProjectTitle(e.target.value)} className="w-full px-3.5 py-2.5 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 text-sm" required />

Target Budget ($) setBudget(e.target.value)} className="w-full px-3.5 py-2.5 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 text-sm" required />

)}

); } // --- AUTH PAGE --- function AuthPage({ setUser, isSignUp }: { setUser: any; isSignUp: boolean }) { const navigate = useNavigate(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [businessName, setBusinessName] = useState(''); const [loading, setLoading] = useState(false); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!email || !password || (isSignUp && !businessName)) { toast.error("Please fill in all fields."); return; } setLoading(true); setTimeout(() => { setUser({ email, businessName: businessName || "Freelance Studio", plan: 'Free' }); toast.success(isSignUp ? "Account created successfully!" : "Welcome back!"); navigate('/dashboard'); }, 1000); }; return (

QuotePilot

{isSignUp ? "Create your account" : "Welcome back"}

{isSignUp ? "Start closing high-ticket deals today" : "Sign in to manage your pipeline"}

{isSignUp && (

Business Name setBusinessName(e.target.value)} className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors" />

)}

Email Address setEmail(e.target.value)} className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors" />

Password setPassword(e.target.value)} className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors" />

{isSignUp ? "Already have an account? Sign In" : "Don't have an account? Sign Up"}

); } // --- DASHBOARD LAYOUT --- function DashboardLayout({ user, setUser, children }: { user: any; setUser: any; children: React.ReactNode }) { const navigate = useNavigate(); const location = useLocation(); const handleSignOut = () => { setUser(null); toast.success("Signed out successfully."); navigate('/'); }; const menuItems = [ { label: 'Pipeline', path: '/dashboard', icon: Layers }, { label: 'AI Generator', path: '/builder', icon: Sparkles }, { label: 'Pricing Plan', path: '/pricing', icon: CreditCard }, ]; return (

{/* Sidebar */}

{/* Brand */}

QuotePilot {user.plan === 'Premium' && ( PRO )}

{/* Navigation */}

{/* User Footer */}

{user.email[0].toUpperCase()}

{user.businessName}

{user.email}

{/* Main Content Area */}

{children}

); } // --- DASHBOARD HOME (PIPELINE & CRM) --- function DashboardHome({ proposals, setProposals }: { proposals: Proposal[]; setProposals: any }) { const navigate = useNavigate(); const [filterStatus, setFilterStatus] = useState('All'); const handleDelete = (id: string) => { if (confirm("Are you sure you want to delete this proposal?")) { setProposals(proposals.filter(p => p.id !== id)); toast.success("Proposal deleted."); } }; const getStatusColor = (status: string) => { switch (status) { case 'Draft': return 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20'; case 'Sent': return 'bg-blue-500/10 text-blue-400 border-blue-500/20'; case 'Viewed': return 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20'; case 'Signed': return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'; case 'Paid': return 'bg-violet-500/10 text-violet-400 border-violet-500/20'; default: return 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20'; } }; const filteredProposals = filterStatus === 'All' ? proposals : proposals.filter(p => p.status === filterStatus); // Simple Analytics calculations const totalPipelineValue = proposals.reduce((sum, p) => sum + p.budget, 0); const signedValue = proposals.filter(p => p.status === 'Signed' || p.status === 'Paid').reduce((sum, p) => sum + p.budget, 0); const conversionRate = proposals.length ? Math.round((proposals.filter(p => p.status === 'Signed' || p.status === 'Paid').length / proposals.length) * 100) : 0; return (

{/* Welcome Header */}

Onboarding Pipeline

Track proposal statuses, client interactions, and revenue flow.

{/* Analytics Cards */}

Total Pipeline

${totalPipelineValue.toLocaleString()}

{proposals.length} active opportunities

Closed Revenue

${signedValue.toLocaleString()}

Signed & paid deals

Win Rate

{conversionRate}%

Proposal to signature conversion

{/* Pipeline Filter Tabs */}

{['All', 'Draft', 'Sent', 'Viewed', 'Signed', 'Paid'].map(status => ( ))}

{/* Pipeline Cards Grid */}

{filteredProposals.length === 0 ? (

No proposals found

Create a new high-converting proposal with our AI assistance engine.

) : ( filteredProposals.map(proposal => (

{proposal.status}

{proposal.timeline}

{proposal.projectTitle}

{proposal.clientName}

{proposal.scope}

Project Budget ${proposal.budget.toLocaleString()}

Client Portal

)) )}

); } // --- AI PROPOSAL BUILDER --- function ProposalBuilder({ proposals, setProposals }: { proposals: Proposal[]; setProposals: any }) { const navigate = useNavigate(); const [clientName, setClientName] = useState(''); const [projectTitle, setProjectTitle] = useState(''); const [budget, setBudget] = useState(''); const [timeline, setTimeline] = useState('4 Weeks'); const [scopeDetails, setScopeDetails] = useState(''); const [isGenerating, setIsGenerating] = useState(false); const [generationStep, setGenerationStep] = useState(0); const steps = [ "Analyzing client scope & market rates...", "Structuring optimized pricing tiers...", "Drafting legal-compliant contract terms...", "Polishing marketing copy & final review..." ]; const handleGenerate = (e: React.FormEvent) => { e.preventDefault(); if (!clientName || !projectTitle || !budget || !scopeDetails) { toast.error("Please fill in all fields to guide the AI engine."); return; } setIsGenerating(true); setGenerationStep(0); // Simulate AI generation steps const interval = setInterval(() => { setGenerationStep(prev => { if (prev < steps.length - 1) { return prev + 1; } else { clearInterval(interval); return prev; } }); }, 1200); setTimeout(() => { clearInterval(interval); // Generate highly realistic proposal data based on inputs const newProposal: Proposal = { id: `prop-${Date.now()}`, clientName, projectTitle, budget: Number(budget), timeline, status: 'Draft', scope: scopeDetails, deliverables: [ "Comprehensive Strategy & Discovery Session", "High-Fidelity Figma Wireframes & Prototypes", "Production-Ready Responsive Implementation", "Post-Launch Support & Optimization Playbook" ], createdAt: new Date().toISOString().split('T')[0] }; setProposals([newProposal, ...proposals]); setIsGenerating(false); toast.success("AI Proposal crafted successfully!"); navigate(`/portal/${newProposal.id}`); }, 5500); }; return (

AI Proposal Engine

Input raw details and let QuotePilot craft a premium, client-ready proposal.

{isGenerating ? (

Generating Premium Proposal

Our AI is analyzing your inputs to draft industry-leading copy, structured packages, and contract terms.

{/* Step Progress */}

{steps.map((step, idx) => (

{idx < generationStep ? '✓' : idx + 1}

{step}

))}

) : (

Client Name setClientName(e.target.value)} className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors" required />

Project Title setProjectTitle(e.target.value)} className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors" required />

Target Budget ($) setBudget(e.target.value)} className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors" required />

Timeline

Project Scope & Client Goals

setScopeDetails(e.target.value)}
              className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors resize-none"
              required
            />
          </div>

<button 
            type="submit"
            className="w-full py-4 rounded-xl bg-violet-600 hover:bg-violet-500 text-white font-semibold transition-all flex items-center justify-center gap-2 shadow-lg shadow-violet-600/20"
          >
            <Sparkles className="w-5 h-5" /> Generate Proposal with AI
          </button>
        </form>
      )}
    </div>
  );
}

// --- CLIENT PORTAL (PUBLIC FACING) ---
function ClientPortal({ proposals, setProposals }: { proposals: Proposal[]; setProposals: any }) {
  const { id } = useParams();
  const navigate = useNavigate();
  const [signature, setSignature] = useState('');
  const [selectedTier, setSelectedTier] = useState<'Standard' | 'Premium'>('Standard');
  const [isSigned, setIsSigned] = useState(false);
  const [isPaid, setIsPaid] = useState(false);
  const [showInvoice, setShowInvoice] = useState(false);

const proposal = proposals.find(p => p.id === id);

useEffect(() => {
    if (proposal) {
      // Automatically advance status to 'Viewed' when client opens portal
      if (proposal.status === 'Draft' || proposal.status === 'Sent') {
        const updated = proposals.map(p => p.id === id ? { ...p, status: 'Viewed' as const } : p);
        setProposals(updated);
      }
      if (proposal.status === 'Signed') {
        setIsSigned(true);
      }
      if (proposal.status === 'Paid') {
        setIsSigned(true);
        setIsPaid(true);
      }
    }
  }, [id]);

if (!proposal) {
    return (
      <div className="min-h-screen flex items-center justify-center text-center p-6">
        <div className="space-y-4">
          <AlertCircle className="w-12 h-12 text-red-500 mx-auto" />
          <h2 className="text-2xl font-bold text-white">Proposal Not Found</h2>
          <p className="text-zinc-500 text-sm">This link may have expired or is invalid.</p>
          <Link to="/" className="inline-block px-4 py-2 rounded bg-zinc-900 border border-zinc-800 text-sm text-zinc-300">
            Go Home
          </Link>
        </div>
      </div>
    );
  }

const handleSign = (e: React.FormEvent) => {
    e.preventDefault();
    if (!signature) {
      toast.error("Please type your name to sign.");
      return;
    }

const updated = proposals.map(p => p.id === id ? { 
      ...p, 
      status: 'Signed' as const,
      signatureName: signature,
      signatureDate: new Date().toISOString().split('T')[0]
    } : p);

setProposals(updated);
    setIsSigned(true);
    toast.success("Contract signed successfully!");
  };

const printProposal = () => {
    window.print();
  };

return (
    <div className="min-h-screen bg-[#09090b] text-zinc-100 pb-20">
      {/* Top Banner for Client */}
      <div className="bg-zinc-900/80 border-b border-zinc-800/80 sticky top-0 z-50 backdrop-blur-md">
        <div className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
            <span className="text-xs font-medium text-zinc-400">Secure Client Portal</span>
          </div>
          <div className="flex items-center gap-3">
            <button 
              onClick={printProposal}
              className="px-3.5 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-xs font-medium text-zinc-300 transition-all flex items-center gap-1.5"
            >
              <Download className="w-3.5 h-3.5" /> PDF / Print
            </button>
            {isSigned && !isPaid && (
              <button 
                onClick={() => setShowInvoice(true)}
                className="px-3.5 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-xs font-semibold text-white transition-all flex items-center gap-1.5 shadow-lg shadow-emerald-600/10"
              >
                <CreditCard className="w-3.5 h-3.5" /> Pay Deposit
              </button>
            )}
          </div>
        </div>
      </div>

{/* Main Document Frame */}
      <div className="max-w-4xl mx-auto px-6 mt-12 space-y-12 print:mt-0 print:space-y-8">
        
        {/* Document Header */}
        <div className="p-8 md:p-12 rounded-2xl bg-zinc-900/40 border border-zinc-800/80 space-y-6 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-violet-600/10 rounded-full blur-3xl pointer-events-none" />
          
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-zinc-800 pb-6">
            <div>
              <span className="text-xs font-mono text-violet-400 uppercase tracking-widest">Project Proposal</span>
              <h1 className="text-2xl md:text-3xl font-bold text-white mt-1">{proposal.projectTitle}</h1>
            </div>
            <div className="text-left md:text-right">
              <div className="text-xs text-zinc-500">Prepared For</div>
              <div className="text-sm font-semibold text-white">{proposal.clientName}</div>
            </div>
          </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div>
              <div className="text-xs text-zinc-500">Date Issued</div>
              <div className="text-sm font-medium text-zinc-300">{proposal.createdAt}</div>
            </div>
            <div>
              <div className="text-xs text-zinc-500">Project Timeline</div>
              <div className="text-sm font-medium text-zinc-300">{proposal.timeline}</div>
            </div>
            <div>
              <div className="text-xs text-zinc-500">Status</div>
              <div className="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-400 mt-1">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
                {proposal.status}
              </div>
            </div>
            <div>
              <div className="text-xs text-zinc-500">Total Value</div>
              <div className="text-sm font-bold text-white">${proposal.budget.toLocaleString()}</div>
            </div>
          </div>
        </div>

{/* Project Scope */}
        <div className="space-y-4">
          <h2 className="text-xl font-bold text-white flex items-center gap-2">
            <Briefcase className="w-5 h-5 text-violet-400" /> Project Objective & Scope
          </h2>
          <div className="p-6 rounded-xl bg-zinc-900/20 border border-zinc-800/80 text-zinc-300 text-sm leading-relaxed space-y-4">
            <p>{proposal.scope}</p>
          </div>
        </div>

{/* Deliverables */}
        <div className="space-y-4">
          <h2 className="text-xl font-bold text-white flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-violet-400" /> Key Deliverables
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {proposal.deliverables.map((item, idx) => (
              <div key={idx} className="p-4 rounded-xl bg-zinc-900/30 border border-zinc-800/60 flex items-start gap-3">
                <div className="w-5 h-5 rounded-full bg-violet-500/10 border border-violet-500/20 flex items-center justify-center text-violet-400 text-xs shrink-0 mt-0.5">
                  ✓
                </div>
                <span className="text-sm text-zinc-300">{item}</span>
              </div>
            ))}
          </div>
        </div>

{/* Interactive Pricing Packages */}
        <div className="space-y-4">
          <h2 className="text-xl font-bold text-white flex items-center gap-2">
            <Layers className="w-5 h-5 text-violet-400" /> Investment Packages
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div 
              onClick={() => setSelectedTier('Standard')}
              className={`p-6 rounded-xl border transition-all cursor-pointer relative ${
                selectedTier === 'Standard' 
                  ? 'bg-zinc-900/60 border-violet-500 shadow-lg shadow-violet-500/5' 
                  : 'bg-zinc-900/20 border-zinc-800 hover:border-zinc-700'
              }`}
            >
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="font-bold text-white">Standard Delivery</h3>
                  <p className="text-xs text-zinc-500">Core deliverables & execution</p>
                </div>
                <div className="text-right">
                  <div className="text-lg font-bold text-white">${proposal.budget.toLocaleString()}</div>
                  <span className="text-[10px] text-zinc-500">One-time payment</span>
                </div>
              </div>
              <p className="text-xs text-zinc-400 mb-4">Perfect for getting the project launched efficiently with industry standard best-practices.</p>
              <div className="flex items-center gap-2 text-xs text-violet-400 font-semibold">
                <Check className="w-4 h-4" /> Selected Package
              </div>
            </div>

<div 
              onClick={() => setSelectedTier('Premium')}
              className={`p-6 rounded-xl border transition-all cursor-pointer relative overflow-hidden ${
                selectedTier === 'Premium' 
                  ? 'bg-zinc-900/60 border-violet-500 shadow-lg shadow-violet-500/5' 
                  : 'bg-zinc-900/20 border-zinc-800 hover:border-zinc-700'
              }`}
            >
              <div className="absolute top-0 right-0 px-3 py-1 bg-violet-600 text-[9px] font-bold text-white uppercase tracking-wider rounded-bl">
                Recommended
              </div>
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="font-bold text-white">Premium Support</h3>
                  <p className="text-xs text-zinc-500">Includes 3 months maintenance</p>
                </div>
                <div className="text-right">
                  <div className="text-lg font-bold text-white">${(proposal.budget * 1.3).toLocaleString()}</div>
                  <span className="text-[10px] text-zinc-500">Includes support</span>
                </div>
              </div>
              <p className="text-xs text-zinc-400 mb-4">Includes everything in Standard plus post-launch optimization, speed audits, and premium support.</p>
              <div className="flex items-center gap-2 text-xs text-zinc-500">
                {selectedTier === 'Premium' ? (
                  <span className="text-violet-400 font-semibold flex items-center gap-1">
                    <Check className="w-4 h-4" /> Selected Package
                  </span>
                ) : (
                  <span>Click to upgrade</span>
                )}
              </div>
            </div>
          </div>
        </div>

{/* Contract Terms */}
        <div className="space-y-4">
          <h2 className="text-xl font-bold text-white flex items-center gap-2">
            <Shield className="w-5 h-5 text-violet-400" /> Terms of Agreement
          </h2>
          <div className="p-6 rounded-xl bg-zinc-900/20 border border-zinc-800/80 text-xs text-zinc-400 space-y-4 max-h-48 overflow-y-auto leading-relaxed">
            <p><strong>1. Services Rendered:</strong> Provider agrees to deliver the services outlined in the Key Deliverables section of this proposal.</p>
            <p><strong>2. Payment Terms:</strong> A 50% upfront deposit is required to initiate work. The remaining 50% balance is due within 15 days of project completion.</p>
            <p><strong>3. Intellectual Property:</strong> Upon final payment, all intellectual property rights for the completed assets will transfer to the Client.</p>
            <p><strong>4. Termination:</strong> Either party may terminate this agreement with 14 days written notice if the other party breaches any term of this agreement.</p>
          </div>
        </div>

{/* E-Signature Box */}
        <div className="p-8 rounded-2xl bg-zinc-900/40 border border-zinc-800/80 space-y-6">
          <h3 className="text-lg font-bold text-white flex items-center gap-2">
            <Signature className="w-5 h-5 text-violet-400" /> Sign & Accept Agreement
          </h3>

{isSigned ? (
            <div className="p-6 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div>
                <div className="text-sm font-semibold text-emerald-400">Contract Signed Digitally</div>
                <p className="text-xs text-zinc-400 mt-1">Signed by {proposal.signatureName || signature} on {proposal.signatureDate || new Date().toISOString().split('T')[0]}</p>
              </div>
              {!isPaid && (
                <button 
                  onClick={() => setShowInvoice(true)}
                  className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold transition-all"
                >
                  Proceed to Payment
                </button>
              )}
            </div>
          ) : (
            <form onSubmit={handleSign} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">Type Full Name to Sign</label>
                  <input 
                    type="text" 
                    placeholder="e.g. Sarah Jenkins" 
                    value={signature}
                    onChange={e => setSignature(e.target.value)}
                    className="w-full px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-white placeholder-zinc-600 focus:outline-none focus:border-violet-500 transition-colors font-serif italic"
                    required
                  />
                </div>
                <div className="flex items-end">
                  <button 
                    type="submit"
                    className="w-full py-3 rounded-lg bg-violet-600 hover:bg-violet-500 text-white font-semibold transition-colors flex items-center justify-center gap-2"
                  >
                    Sign & Accept Proposal
                  </button>
                </div>
              </div>
              <p className="text-[10px] text-zinc-500">By signing, you agree to the terms of service and contract conditions outlined above.</p>
            </form>
          )}
        </div>
      </div>

{/* Stripe Payment Modal */}
      <AnimatePresence>
        {showInvoice && (
          <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-6 z-50">
            <motion.div 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              className="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden shadow-2xl"
            >
              {/* Stripe Header */}
              <div className="p-6 bg-zinc-950 border-b border-zinc-800 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="w-6 h-6 rounded bg-indigo-600 flex items-center justify-center text-white font-bold text-xs">S</div>
                  <span className="text-sm font-semibold text-white">Stripe Secure Checkout</span>
                </div>
                <button 
                  onClick={() => setShowInvoice(false)}
                  className="text-zinc-500 hover:text-white text-xs"
                >
                  Cancel
                </button>
              </div>

{/* Invoice details */}
              <div className="p-6 space-y-6">
                <div className="text-center space-y-1">
                  <span className="text-xs text-zinc-500 uppercase tracking-wider">Amount Due (50% Deposit)</span>
                  <div className="text-3xl font-bold text-white">
                    ${(selectedTier === 'Standard' ? proposal.budget / 2 : (proposal.budget * 1.3) / 2).toLocaleString()}
                  </div>
                </div>

<div className="space-y-4">
                  <div>
                    <label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">Card Information</label>
                    <div className="px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-zinc-400 text-sm flex items-center justify-between">
                      <span>•••• •••• •••• 4242</span>
                      <span className="text-xs text-zinc-500">12 / 26</span>
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">CVC</label>
                      <div className="px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-zinc-400 text-sm">
                        ***
                      </div>
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">Country</label>
                      <div className="px-4 py-3 rounded-lg bg-zinc-950 border border-zinc-800 text-zinc-400 text-sm">
                        United States
                      </div>
                    </div>
                  </div>
                </div>

{isPaid ? (
                  <div className="p-4 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-center text-sm font-semibold text-emerald-400">
                    ✓ Payment Completed Successfully
                  </div>
                ) : (
                  <button 
                    onClick={handlePay}
                    className="w-full py-3 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-semibold transition-all shadow-lg shadow-emerald-600/15"
                  >
                    Pay Deposit
                  </button>
                )}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}

// --- STRIPE SUBSCRIPTION / PRICING PAGE ---
function PricingPage({ user, setUser }: { user: any; setUser: any }) {
  const handleUpgrade = () => {
    toast.loading("Initiating Stripe checkout...");
    setTimeout(() => {
      setUser({ ...user, plan: 'Premium' });
      toast.dismiss();
      toast.success("Successfully upgraded to QuotePilot Premium!");
    }, 1500);
  };

return (
    <div className="p-6 md:p-10 max-w-4xl mx-auto space-y-8">
      <div className="text-center max-w-xl mx-auto space-y-2">
        <h1 className="text-3xl font-bold text-white tracking-tight">Upgrade to Premium</h1>
        <p className="text-zinc-400 text-sm">Unlock unlimited proposals, custom branding, CRM integrations, and advanced analytics.</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto">
        {/* Free Plan */}
        <div className="p-6 rounded-xl bg-zinc-900/20 border border-zinc-800 flex flex-col justify-between">
          <div>
            <span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Free Plan</span>
            <div className="text-3xl font-bold text-white mt-2">$0</div>
            <p className="text-xs text-zinc-500 mt-1">Perfect for getting started</p>
            
            <ul className="mt-6 space-y-3 text-sm text-zinc-400">
              <li className="flex items-center gap-2">✓ Up to 3 active proposals</li>
              <li className="flex items-center gap-2">✓ AI generation engine</li>
              <li className="flex items-center gap-2">✓ Basic e-signatures</li>
            </ul>
          </div>
          <button 
            disabled 
            className="w-full py-2.5 rounded-lg bg-zinc-800 text-zinc-500 text-xs font-semibold mt-8"
          >
            Current Plan
          </button>
        </div>

{/* Premium Plan */}
        <div className="p-6 rounded-xl bg-zinc-900/60 border border-violet-500 flex flex-col justify-between relative overflow-hidden">
          <div className="absolute top-0 right-0 px-3 py-1 bg-violet-600 text-[9px] font-bold text-white uppercase tracking-wider rounded-bl">
            Most Popular
          </div>
          <div>
            <span className="text-xs font-semibold text-violet-400 uppercase tracking-wider">Premium Plan</span>
            <div className="text-3xl font-bold text-white mt-2">$29 <span className="text-xs text-zinc-500">/mo</span></div>
            <p className="text-xs text-zinc-500 mt-1">For professional creators & agencies</p>
            
            <ul className="mt-6 space-y-3 text-sm text-zinc-400">
              <li className="flex items-center gap-2 text-zinc-300">✓ <strong className="text-white">Unlimited</strong> proposals</li>
              <li className="flex items-center gap-2 text-zinc-300">✓ Custom branding (remove logo)</li>
              <li className="flex items-center gap-2 text-zinc-300">✓ Advanced CRM pipeline</li>
              <li className="flex items-center gap-2 text-zinc-300">✓ Stripe payment integrations</li>
            </ul>
          </div>
          {user.plan === 'Premium' ? (
            <button 
              disabled 
              className="w-full py-2.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold mt-8"
            >
              Active Premium Plan
            </button>
          ) : (
            <button 
              onClick={handleUpgrade}
              className="w-full py-2.5 rounded-lg bg-violet-600 hover:bg-violet-500 text-white text-xs font-semibold mt-8 transition-all shadow-lg shadow-violet-600/15"
            >
              Upgrade Now
            </button>
          )}
        </div>
      </div>
    </div>
  );
}</article></body></html>