/* ============================================================
   Tectus — form pages (quote / book / demo / contact / vendor)
   composed from Tectus DS form primitives.
   ============================================================ */
const { Button: FButton, Field: FField, Input: FInput, Select: FSelect, Textarea: FTextarea, SegmentedControl: FSeg, Eyebrow: FEyebrow, Badge: FBadge } = window.TectusDesignSystem_c42b34;

const SERVICE_OPTIONS = [
  'Executive & VIP protection', 'Event security', 'Mobile patrol', 'Retail security',
  'Alarm response', 'Corporate security', 'Fire watch',
];

/* ---------- success panel ---------- */
function FormSuccess({ title, body, onReset }) {
  return (
    <div style={{ textAlign: 'center', padding: '20px 10px' }}>
      <span style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--color-success-soft)', color: 'var(--color-success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}><Icon name="check" size={30} /></span>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, margin: '0 0 10px' }}>{title}</h3>
      <p style={{ fontSize: 15.5, color: 'var(--color-text-muted)', lineHeight: 1.6, maxWidth: 380, margin: '0 auto 22px' }}>{body}</p>
      <button onClick={onReset} style={{ background: 'transparent', border: 'none', color: 'var(--color-primary-light)', font: 'inherit', fontSize: 14, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="rotate-ccw" size={14} />Submit another</button>
    </div>
  );
}

/* ---------- lead form (quote / book / demo) ---------- */
function LeadForm({ variant }) {
  // variant: 'quote' | 'book' | 'demo'
  const cfg = {
    quote: { title: 'Request a quote', submit: 'Get my quote', ok: 'Quote request received', okBody: 'A Tectus coordinator will follow up shortly with coverage details and pricing.', armed: true, urgency: true },
    book: { title: 'Book coverage', submit: 'Submit request', ok: 'Request submitted', okBody: 'Your request is in the queue. We will match you with vetted vendors and confirm details shortly.', armed: true, urgency: true },
    demo: { title: 'Book a demo', submit: 'Book my demo', ok: 'Demo requested', okBody: 'Thanks — we will reach out to schedule your walkthrough of the Tectus platform.', armed: false, urgency: false },
  }[variant] || {};
  const [sent, setSent] = useState(false);
  const [service, setService] = useState(SERVICE_OPTIONS[1]);
  const [armed, setArmed] = useState('Unarmed');
  const [urgency, setUrgency] = useState('Scheduled');

  if (sent) return (
    <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 40 }}>
      <FormSuccess title={cfg.ok} body={cfg.okBody} onReset={() => setSent(false)} />
    </div>
  );

  return (
    <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FField label="Full name" required><FInput required placeholder="Jordan Avery" /></FField>
        <FField label="Work email" required><FInput type="email" required placeholder="you@company.com" /></FField>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FField label="Company"><FInput placeholder="Company or organization" /></FField>
        <FField label="Phone"><FInput type="tel" placeholder="(555) 000-0000" /></FField>
      </div>
      {variant !== 'demo' && (
        <React.Fragment>
          <FField label="Service type" required>
            <FSelect value={service} onChange={(e) => setService(e.target.value)}>
              {SERVICE_OPTIONS.map((o) => <option key={o}>{o}</option>)}
            </FSelect>
          </FField>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <FField label="Site location" required><FInput required placeholder="Address or venue name" /></FField>
            <FField label="Date"><FInput type="date" /></FField>
          </div>
          {cfg.armed && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <FField label="Requirement"><FSeg options={['Unarmed', 'Armed']} value={armed} onChange={setArmed} /></FField>
              <FField label="Timing"><FSeg options={['Scheduled', 'Urgent']} value={urgency} onChange={setUrgency} /></FField>
            </div>
          )}
        </React.Fragment>
      )}
      <FField label={variant === 'demo' ? 'What would you like to see?' : 'Special notes'} helper={variant === 'demo' ? 'Tell us about your use case and team.' : 'Access details, point of contact, dress code…'}>
        <FTextarea rows={variant === 'demo' ? 4 : 3} placeholder={variant === 'demo' ? 'We coordinate security for…' : 'Anything the vendor should know on arrival'} />
      </FField>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginTop: 4 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--color-text-faint)' }}><Icon name="lock" size={14} color="var(--color-primary)" />Your details stay private.</span>
        <FButton variant="primary" size="lg" type="submit" iconRight={<Icon name="arrow-right" size={16} />}>{cfg.submit}</FButton>
      </div>
    </form>
  );
}

/* ---------- contact form ---------- */
function ContactForm() {
  const [sent, setSent] = useState(false);
  const [topic, setTopic] = useState('Sales');
  if (sent) return (
    <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 40 }}>
      <FormSuccess title="Message sent" body="Thanks for reaching out. The right team at Tectus will get back to you shortly." onReset={() => setSent(false)} />
    </div>
  );
  return (
    <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
      <FField label="I'm contacting about" required>
        <FSeg options={['Sales', 'Support', 'Partnership']} value={topic} onChange={setTopic} />
      </FField>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FField label="Full name" required><FInput required placeholder="Jordan Avery" /></FField>
        <FField label="Work email" required><FInput type="email" required placeholder="you@company.com" /></FField>
      </div>
      <FField label="Company"><FInput placeholder="Company or organization" /></FField>
      <FField label="How can we help?" required><FTextarea rows={4} required placeholder="Tell us a little about what you need." /></FField>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <FButton variant="primary" size="lg" type="submit" iconRight={<Icon name="arrow-right" size={16} />}>Send message</FButton>
      </div>
    </form>
  );
}

/* ---------- vendor application ---------- */
function VendorForm() {
  const [sent, setSent] = useState(false);
  const [armed, setArmed] = useState('Both');
  if (sent) return (
    <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 40 }}>
      <FormSuccess title="Application received" body="Thanks for applying to the Tectus network. Our partnerships team will review your details and follow up on next steps." onReset={() => setSent(false)} />
    </div>
  );
  return (
    <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FField label="Company name" required><FInput required placeholder="Security company LLC" /></FField>
        <FField label="Primary contact" required><FInput required placeholder="Full name" /></FField>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FField label="Work email" required><FInput type="email" required placeholder="you@company.com" /></FField>
        <FField label="Phone"><FInput type="tel" placeholder="(555) 000-0000" /></FField>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <FField label="State license #" required helper="Active and in good standing"><FInput required placeholder="e.g. PPO 00000" /></FField>
        <FField label="Coverage offered"><FSeg options={['Unarmed', 'Armed', 'Both']} value={armed} onChange={setArmed} /></FField>
      </div>
      <FField label="Service areas & capabilities" helper="Regions you cover and the services you provide.">
        <FTextarea rows={3} placeholder="Cities/regions, team size, services…" />
      </FField>
      <label style={{ display: 'flex', gap: 11, alignItems: 'flex-start', fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.5 }}>
        <input type="checkbox" required style={{ marginTop: 3, width: 16, height: 16, accentColor: 'var(--color-primary)' }} />
        I confirm our company is licensed and carries active insurance, and agree to Tectus vendor standards.
      </label>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <FButton variant="primary" size="lg" type="submit" iconRight={<Icon name="arrow-right" size={16} />}>Start vendor application</FButton>
      </div>
    </form>
  );
}

/* ---------- vendor login ---------- */
function VendorLogin() {
  const [sent, setSent] = useState(false);
  return (
    <div style={{ maxWidth: 420, margin: '0 auto', width: '100%' }}>
      <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 32, boxShadow: 'var(--shadow-lg)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center', marginBottom: 8 }}>
          <img src={asset('markWhite', 'assets/tectus-mark-white.webp')} alt="" style={{ height: 22 }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '0.16em', fontSize: 17 }}>TECTUS GO</span>
        </div>
        <p style={{ textAlign: 'center', fontSize: 13.5, color: 'var(--color-text-faint)', margin: '0 0 24px' }}>Vendor operations sign-in</p>
        {sent ? (
          <FormSuccess title="Check your email" body="If an account exists for that address, a secure sign-in link is on its way." onReset={() => setSent(false)} />
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <FField label="Work email"><FInput type="email" required placeholder="you@company.com" /></FField>
            <FField label="Password"><FInput type="password" required placeholder="••••••••" /></FField>
            <FButton variant="primary" size="lg" type="submit" block>Sign in</FButton>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
              <a href="#/become-a-vendor" style={{ color: 'var(--color-text-muted)' }} className="tt-arrow-link">Become a vendor</a>
              <a href="#/contact" style={{ color: 'var(--color-primary-light)' }}>Need help?</a>
            </div>
          </form>
        )}
      </div>
      <p style={{ textAlign: 'center', fontSize: 12.5, color: 'var(--color-text-faint)', marginTop: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}><Icon name="shield-check" size={14} color="var(--color-primary)" />Secured vendor environment</p>
    </div>
  );
}

Object.assign(window, { LeadForm, ContactForm, VendorForm, VendorLogin });