{steps.map((s, i) => ( {i > 0 &&

}

{i < step ? : i + 1} {s}

))}

{step === 0 && (

What do you need done?

{WIZARD_SERVICES.map((s) => set('service')(s)}>{s})}

} />

</div>
      )}

{step === 2 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Full name" placeholder="Jane Doe" value={form.name} onChange={setInput('name')} />
            <Input label="Phone" placeholder="(872) 555-0000" value={form.phone} onChange={setInput('phone')} leading={<Icon name="phone" size={16} />} />
          </div>
          <Input label="Email" type="email" placeholder="jane@email.com" value={form.email} onChange={setInput('email')} leading={<Icon name="mail" size={16} />} />
          <p style={{ font: 'var(--fw-regular) var(--fs-caption)/1.5 var(--font-body)', color: 'var(--text-subtle)', margin: 0 }}>
            We'll follow up within one business day. No pressure, no obligation — a real person picks up.
          </p>
        </div>
      )}

<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
        {step > 0
          ? <Button variant="ghost" onClick={() => setStep(step - 1)} iconLeft={<Icon name="arrow-left" size={16} />}>Back</Button>
          : <span></span>}
        {step < 2
          ? <Button variant="primary" onClick={() => setStep(step + 1)} iconRight={<Icon name="arrow-right" size={16} />}>Continue</Button>
          : <Button variant="accent" size="lg" onClick={() => onDone(form)}>Request my free estimate</Button>}
      </div>
    </div>
  );
}

/* Sends a lead to goodmandecorators@gmail.com via FormSubmit (no backend needed) and,
   when an email is provided, auto-replies to the customer. Falls back to mailto if the
   request fails (e.g. offline). Note: FormSubmit requires a one-time email confirmation
   click by the recipient the first time a new destination address is used. */
async function submitLead(fields, opts) {
  opts = opts || {};
  const payload = Object.assign({}, fields, {
    _subject: opts.subject || 'New message — Goodman Painters & Decorators',
    _template: 'table',
    _captcha: 'false',
  });
  if (opts.autorespond && fields.email) payload._autoresponse = opts.autorespond;
  try {
    const res = await fetch('https://formsubmit.co/ajax/' + encodeURIComponent(BIZ.email), {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(payload),
    });
    if (!res.ok) throw new Error('formsubmit error');
    return true;
  } catch (e) {
    const lines = Object.keys(fields).map((k) => k + ': ' + (fields[k] || '—'));
    const a = document.createElement('a');
    a.href = 'mailto:' + BIZ.email + '?subject=' + encodeURIComponent(opts.subject || 'New message') + '&body=' + encodeURIComponent(lines.join('\n'));
    a.click();
    return false;
  }
}

/* Builds a mailto: link (fallback / manual use). */
function estimateMailto(form) {
  const subject = 'New estimate request' + (form.service ? ' — ' + form.service : '');
  const lines = [
    'New free-estimate request from goodmandecorators.com',
    '',
    'Service: ' + (form.service || '—'),
    'Timing: ' + (form.timing || '—'),
    'Budget: ' + (form.budget || '—'),
    'Project address: ' + (form.address || '—'),
    'Details: ' + (form.details || '—'),
    '',
    'Name: ' + (form.name || '—'),
    'Phone: ' + (form.phone || '—'),
    'Email: ' + (form.email || '—'),
  ];
  return 'mailto:' + BIZ.email + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(lines.join('\n'));
}

/* Hook: shared estimate modal + success toast. Returns [element, open]. */
function useEstimateModal() {
  const { Modal, Toast, ToastStack } = GDL;
  const [open, setOpen] = React.useState(false);
  const [toast, setToast] = React.useState(false);
  const submit = (form) => {
    setOpen(false); setToast(true); setTimeout(() => setToast(false), 4500);
    submitLead(
      { Service: form.service, Timing: form.timing, Budget: form.budget, 'Project address': form.address, Details: form.details, Name: form.name, Phone: form.phone, email: form.email },
      { subject: 'New estimate request' + (form.service ? ' — ' + form.service : ''),
        autorespond: 'Thanks for reaching out to Goodman Painters & Decorators. We received your estimate request and will call you within one business day. If it’s urgent, call us at ' + BIZ.phone + '.' }
    );
  };
  const el = (
    <React.Fragment>
      <Modal open={open} onClose={() => setOpen(false)} size="md"
        title="Request your free estimate"
        description="Three quick steps — we'll follow up within one business day.">
        <EstimateWizard onDone={submit} />
      </Modal>
      {toast && (
        <ToastStack>
          <Toast tone="success" title="Request sent" message="Thanks! We'll call you within one business day." onClose={() => setToast(false)} />
        </ToastStack>
      )}
    </React.Fragment>
  );
  return [el, () => setOpen(true)];
}

/* Dark closing CTA band */
function CTABand({ onEstimate, title, lede }) {
  const { Button } = GDL;
  return (
    <section style={{ background: 'var(--stone-900)', color: '#fff' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto', padding: 'var(--space-10) var(--gutter)', textAlign: 'center' }}>
        <h2 style={{ font: 'var(--fw-extrabold) var(--fs-h1)/1.1 var(--font-display)', letterSpacing: 'var(--ls-tight)', margin: '0 0 16px', textWrap: 'balance' }}>{title || 'Let’s build something you’ll love coming home to.'}</h2>
        <p style={{ font: 'var(--fw-regular) var(--fs-body-lg)/1.6 var(--font-body)', color: 'var(--stone-300)', maxWidth: '48ch', margin: '0 auto 32px' }}>{lede || 'Free estimates, honest timelines, and a team that shows up. Tell us about your project.'}</p>
        <Button variant="accent" size="lg" onClick={onEstimate}>Get your free estimate</Button>
      </div>
    </section>
  );
}

Object.assign(window, { GDL, BIZ, Eyebrow, Section, SectionHeading, Breadcrumbs, SiteHeader, SiteFooter, EstimateWizard, useEstimateModal, estimateMailto, submitLead, CTABand });

{title}