<div class="form-page" style="max-width:800px">
  <a href="/member/proposals" class="back-link"><i class="bi bi-arrow-left"></i> Back to Proposals</a>
  <div class="form-card">
    <h2>Create Proposal / Quote</h2>
    <p style="color:#6b7280;margin-bottom:20px;font-size:.875rem">Send a professional proposal to a client. When they accept, a service agreement is automatically generated and sent for signature.</p>
    <% if (typeof error !== 'undefined' && error && error.length) { %><div class="alert alert-error"><%= error[0] %></div><% } %>

    <form action="/member/proposals" method="POST">
      <div class="form-section-label">Proposal Details</div>
      <div class="form-group"><label>Proposal Title *</label><input type="text" name="title" required placeholder="e.g., Website Redesign Proposal — Acme Corp"></div>

      <div class="form-section-label">Client Information</div>
      <div class="form-row">
        <div class="form-group"><label>Client Name *</label><input type="text" name="client_name" required placeholder="Jane Smith"></div>
        <div class="form-group"><label>Client Email *</label><input type="email" name="client_email" required placeholder="jane@clientcompany.com"></div>
      </div>
      <div class="form-group"><label>Client Company</label><input type="text" name="client_company" placeholder="Acme Corporation (optional)"></div>

      <div class="form-section-label">Scope & Deliverables</div>
      <div class="form-group">
        <label>Scope of Work *</label>
        <textarea name="scope" rows="5" required placeholder="Describe what services or work you will provide..."></textarea>
      </div>
      <div class="form-group">
        <label>Deliverables</label>
        <textarea name="deliverables" rows="4" placeholder="List specific deliverables (optional)&#10;• Deliverable 1&#10;• Deliverable 2"></textarea>
      </div>

      <div class="form-section-label">Pricing & Timeline</div>
      <div class="form-row">
        <div class="form-group"><label>Total Amount ($)</label><input type="number" name="total_amount" min="0" step="0.01" placeholder="2500.00"></div>
        <div class="form-group"><label>Timeline / Duration</label><input type="text" name="timeline" placeholder="e.g., 4 weeks, Q3 2026"></div>
      </div>
      <div class="form-group"><label>Payment Terms</label><input type="text" name="payment_terms" placeholder="e.g., 50% upfront, 50% on completion"></div>

      <div class="form-section-label">Additional Details</div>
      <div class="form-row">
        <div class="form-group"><label>Proposal Valid For (days)</label><input type="number" name="validity_days" value="30" min="1" max="90"></div>
      </div>
      <div class="form-group"><label>Notes / Additional Terms</label><textarea name="notes" rows="3" placeholder="Any additional terms, conditions, or notes..."></textarea></div>

      <div class="form-actions">
        <button type="submit" name="action" value="send" class="btn btn-primary"><i class="bi bi-send-fill"></i> Save & Send to Client</button>
        <button type="submit" name="action" value="draft" class="btn btn-secondary"><i class="bi bi-floppy-fill"></i> Save as Draft</button>
        <a href="/member/proposals" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>
