{labelEl}

set(e.target.value)}
          style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.55 }} />
      </div>
    );
  }
  if (f.kind === 'select') {
    return (
      <div>
        {labelEl}
        <select value={value || ''} onChange={e => set(e.target.value)} style={inputStyle}>
          <option value="">{f.placeholder || 'Select…'}</option>
          {f.options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </div>
    );
  }
  if (f.kind === 'pill') {
    const sel = value || [];
    const toggle = (v) => sel.includes(v) ? set(sel.filter(x => x !== v)) : set([...sel, v]);
    return (
      <div>
        {labelEl}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {f.options.map(o => {
            const on = sel.includes(o);
            return (
              <button key={o} type="button" onClick={() => toggle(o)} style={{
                padding: '8px 14px', borderRadius: 999,
                border: `1.5px solid ${on ? 'var(--sun-coral)' : 'var(--line)'}`,
                background: on ? 'rgba(252,172,100,0.10)' : '#fff',
                color: 'var(--navy-900)', fontSize: 13, cursor: 'pointer',
              }}>{o}</button>
            );
          })}
        </div>
      </div>
    );
  }
  // text, email, tel, url, number
  return (
    <div>
      {labelEl}
      <input type={f.kind || 'text'} placeholder={f.placeholder} required={f.required}
        value={value || ''} onChange={e => set(e.target.value)}
        onFocus={e => e.target.style.borderColor = 'var(--sun-coral)'}
        onBlur={e => e.target.style.borderColor = 'var(--line)'}
        style={inputStyle} />
    </div>
  );
}

/* =========== CLOSING BAND =========== */
function ClosingBand({ overline, title, italic, lede, ctaLabel, ctaHref }) {
  return (
    <section style={{ padding: '120px 0', background: 'var(--navy-900)', color: '#fff' }}>
      <div className="container" style={{
        maxWidth: 800, textAlign: 'center',
      }}>
        {overline && (
          <div style={{
            fontSize: 12, color: 'var(--sun-amber)', letterSpacing: '0.18em',
            textTransform: 'uppercase', fontWeight: 600, marginBottom: 20,
          }}>{overline}</div>
        )}
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(40px, 5vw, 72px)',
          margin: '0 0 24px', letterSpacing: '-0.02em', lineHeight: 1.05,
          textWrap: 'balance',
        }}>
          {title} <em style={{ fontStyle: 'italic', color: 'var(--sun-amber)' }}>{italic}</em>
        </h2>
        {lede && (
          <p style={{
            color: 'rgba(255,255,255,0.78)', fontSize: 18, lineHeight: 1.6,
            margin: '0 auto 36px', maxWidth: 600,
          }}>{lede}</p>
        )}
        {ctaLabel && (
          <a href={ctaHref || '#apply'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '15px 32px', borderRadius: 999,
            background: 'linear-gradient(135deg, var(--sun-coral), var(--sun-amber))',
            color: '#fff', fontSize: 15, fontWeight: 500, textDecoration: 'none',
            boxShadow: '0 6px 18px rgba(252,172,100,0.36)',
          }}>{ctaLabel} →</a>
        )}
      </div>
    </section>
  );
}

window.PartnerHero = PartnerHero;
window.VisionBlock = VisionBlock;
window.StatsBand = StatsBand;
window.BenefitsGrid = BenefitsGrid;
window.ProcessSteps = ProcessSteps;
window.PartnerTestimonial = PartnerTestimonial;
window.ApplicationForm = ApplicationForm;
window.ClosingBand = ClosingBand;

{title} {italic && {italic}}