/* ============================================================ lotabin - Intake step components + field primitives Exports to window: IFSteps (map of step renderers), IFIcons ============================================================ */ (function () { const { useState, useRef } = React; /* ---------- icons ---------- */ const I = { check: (p) => , arrow: (p) => , back: (p) => , close: (p) => , upload: (p) => , file: (p) => , store: (p) => , handshake: (p) => , }; function px(obj, lang) { return obj ? (obj[lang] !== undefined ? obj[lang] : obj.en) : ''; } /* ---------- field primitives ---------- */ function Field({ label, optionalText, error, children }) { return ( {label}{optionalText ? · {optionalText} : null} {children} {error ? {error} : null} ); } function TextInput({ value, onChange, placeholder, bad, type, onEnter }) { return ( onChange(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && type !== 'textarea' && onEnter) onEnter(); }} /> ); } function TextArea({ value, onChange, placeholder, bad }) { return

onChange(e.target.value)} />;
  }

/* ===================== STEPS ===================== */

function Offer({ t, lang, state, set, errors }) {
    return (
      <div>
        <span className="if-kicker">{t('step.offer')}</span>
        <h2 className="if-h">{t('offer.h')}</h2>
        <p className="if-sub">{t('offer.p')}</p>
        <Field label={t('offer.product.l')} error={errors.product && t('err.required')}>
          <TextInput value={state.product} onChange={v => set('product', v)} placeholder={t('offer.product.ph')} bad={errors.product} />
        </Field>
        <Field label={t('offer.what.l')} error={errors.what && t('err.required')}>
          <TextArea value={state.what} onChange={v => set('what', v)} placeholder={t('offer.what.ph')} bad={errors.what} />
        </Field>
        <div className="if-grid2">
          <Field label={t('offer.who.l')} error={errors.who && t('err.required')}>
            <TextArea value={state.who} onChange={v => set('who', v)} placeholder={t('offer.who.ph')} bad={errors.who} />
          </Field>
          <Field label={t('offer.pain.l')}>
            <TextArea value={state.pain} onChange={v => set('pain', v)} placeholder={t('offer.pain.ph')} />
          </Field>
        </div>
        <Field label={t('offer.cta.l')}>
          <TextInput value={state.cta} onChange={v => set('cta', v)} placeholder={t('offer.cta.ph')} />
        </Field>
      </div>
    );
  }

<div className="if-field">
          <span className="if-label">{t('creative.tone.l')}{errors.tones ? <span className="if-err" style={{textTransform:'none',letterSpacing:0}}>· {t('err.pick')}</span> : null}</span>
          <div className="if-chips">
            {tones.map(tn => {
              const sel = tonesSel.includes(tn.id);
              const dis = !sel && tonesSel.length >= 3;
              return <button type="button" key={tn.id} className={'if-chip' + (sel ? ' sel' : '') + (dis ? ' dis' : '')}
                onClick={() => !dis && toggleTone(tn.id)}>{sel ? <I.check style={{width:12,height:12}}/> : null}{px(tn, lang)}</button>;
            })}
          </div>
        </div>

<div className="if-grid2 if-section-gap">
          <div className="if-field" style={{ marginTop: 0 }}>
            <span className="if-label">{t('creative.hooks.l')}</span>
            <div className="if-seg">
              {[3, 5, 8].map(n => <button type="button" key={n} className={state.hooks === n ? 'sel' : ''} onClick={() => set('hooks', n)}>{n}</button>)}
            </div>
          </div>
          <div className="if-field" style={{ marginTop: 0 }}>
            <span className="if-label">{t('creative.formats.l')}</span>
            <div className="if-formats">
              {formats.map(f => {
                const sel = (state.formats || []).includes(f.id);
                return <button type="button" key={f.id} className={'if-fmt' + (sel ? ' sel' : '')} onClick={() => toggleFmt(f.id)}>
                  <div className="fl">{f.label}</div><div className="fn">{px(f.note, lang)}</div>
                </button>;
              })}
            </div>
          </div>
        </div>

<Field label={t('creative.refs.l')} optionalText={t('optional')}>
          <TextArea value={state.refs} onChange={v => set('refs', v)} placeholder={t('creative.refs.ph')} />
        </Field>
      </div>
    );
  }

<div className="if-field">
          <span className="if-label">{t('assets.ready.l')}</span>
          <div className="if-checks">
            {checks.map(c => {
              const sel = ready.includes(c.id);
              return <div key={c.id} className={'if-checkrow' + (sel ? ' sel' : '')} onClick={() => toggle(c.id)}>
                <span className="if-box">{sel ? <I.check/> : null}</span>
                <span className="cl">{t(c.l)}</span>
              </div>;
            })}
          </div>
        </div>

<div className="if-field">
          <span className="if-label">{t('assets.drop.l')}<span className="opt">· {t('optional')}</span></span>
          {state.file
            ? <div className="if-file">
                <I.file className="fi" style={{ width: 20, height: 20 }} />
                <span className="fn">{state.file.name}</span>
                <button type="button" className="fx" onClick={() => set('file', null)}><I.close style={{ width: 14, height: 14 }} /></button>
              </div>
            : <div className={'if-drop' + (drag ? ' drag' : '')}
                onClick={() => fileRef.current && fileRef.current.click()}
                onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
                onDragLeave={() => setDrag(false)}
                onDrop={(e) => { e.preventDefault(); setDrag(false); onFile(e.dataTransfer.files[0]); }}>
                <I.upload className="di" />
                <div className="dl">{t('assets.drop.ph')}</div>
                <div className="dn">{t('assets.drop.note')}</div>
                <input ref={fileRef} type="file" hidden onChange={(e) => onFile(e.target.files[0])} />
              </div>}
        </div>

<div className="if-grid2">
          <Field label={t('assets.timing.l')}>
            <select className="if-select" value={state.timing || ''} onChange={(e) => set('timing', e.target.value)}>
              <option value="" disabled>-</option>
              {timings.map(ti => <option key={ti.id} value={ti.id}>{px(ti, lang)}</option>)}
            </select>
          </Field>
          <Field label={t('assets.notes.l')} optionalText={t('optional')}>
            <TextArea value={state.notes} onChange={v => set('notes', v)} placeholder={t('assets.notes.ph')} />
          </Field>
        </div>
      </div>
    );
  }

function Contact({ t, lang, state, set, errors }) {
    const regions = window.INTAKE.REGIONS;
    return (
      <div>
        <span className="if-kicker">{t('step.contact')}</span>
        <h2 className="if-h">{t('contact.h')}</h2>
        <p className="if-sub">{t('contact.p')}</p>
        <div className="if-grid2">
          <Field label={t('contact.name.l')} error={errors.name && t('err.required')}>
            <TextInput value={state.name} onChange={v => set('name', v)} placeholder={t('contact.name.ph')} bad={errors.name} />
          </Field>
          <Field label={t('contact.company.l')} error={errors.company && t('err.required')}>
            <TextInput value={state.company} onChange={v => set('company', v)} placeholder={t('contact.company.ph')} bad={errors.company} />
          </Field>
        </div>
        <Field label={t('contact.email.l')} error={errors.email && (errors.email === 'fmt' ? t('err.email') : t('err.required'))}>
          <TextInput value={state.email} onChange={v => set('email', v)} placeholder={t('contact.email.ph')} type="email" bad={errors.email} />
        </Field>
        <Field label={t('contact.region.l')}>
          <select className="if-select" value={state.region || ''} onChange={(e) => set('region', e.target.value)}>
            <option value="" disabled>-</option>
            {regions.map(r => <option key={r.id} value={r.id}>{px(r, lang)}</option>)}
          </select>
        </Field>
        <div className="if-consent" onClick={() => set('consent', !state.consent)}>
          <span className="if-box">{state.consent ? <I.check/> : null}</span>
          <span className="cl">{t('contact.consent.l')}</span>
        </div>
      </div>
    );
  }

window.IFIcons = I;
  window.IFhelpers = { px };
  window.IFSteps = { Lane, Plan, Offer, Creative, Assets, Contact };
})();