// Talk to an Advisor — multi-step onboarding wizard
const { useState: useStateTta, useMemo: useMemoTta, useEffect: useEffectTta, useRef: useRefTta } = React;

/* --- Field dictionaries ------------------------------------------------ */

/* --- States ----------------------------------------------------------- */
const US_STATES = [
  { code: 'AL', name: 'Alabama' },        { code: 'AK', name: 'Alaska' },
  { code: 'AZ', name: 'Arizona' },        { code: 'AR', name: 'Arkansas' },
  { code: 'CA', name: 'California' },     { code: 'CO', name: 'Colorado' },
  { code: 'CT', name: 'Connecticut' },    { code: 'DE', name: 'Delaware' },
  { code: 'DC', name: 'District of Columbia' },
  { code: 'FL', name: 'Florida' },        { code: 'GA', name: 'Georgia' },
  { code: 'HI', name: 'Hawaii' },         { code: 'ID', name: 'Idaho' },
  { code: 'IL', name: 'Illinois' },       { code: 'IN', name: 'Indiana' },
  { code: 'IA', name: 'Iowa' },           { code: 'KS', name: 'Kansas' },
  { code: 'KY', name: 'Kentucky' },       { code: 'LA', name: 'Louisiana' },
  { code: 'ME', name: 'Maine' },          { code: 'MD', name: 'Maryland' },
  { code: 'MA', name: 'Massachusetts' },  { code: 'MI', name: 'Michigan' },
  { code: 'MN', name: 'Minnesota' },      { code: 'MS', name: 'Mississippi' },
  { code: 'MO', name: 'Missouri' },       { code: 'MT', name: 'Montana' },
  { code: 'NE', name: 'Nebraska' },       { code: 'NV', name: 'Nevada' },
  { code: 'NH', name: 'New Hampshire' },  { code: 'NJ', name: 'New Jersey' },
  { code: 'NM', name: 'New Mexico' },     { code: 'NY', name: 'New York' },
  { code: 'NC', name: 'North Carolina' }, { code: 'ND', name: 'North Dakota' },
  { code: 'OH', name: 'Ohio' },           { code: 'OK', name: 'Oklahoma' },
  { code: 'OR', name: 'Oregon' },         { code: 'PA', name: 'Pennsylvania' },
  { code: 'RI', name: 'Rhode Island' },   { code: 'SC', name: 'South Carolina' },
  { code: 'SD', name: 'South Dakota' },   { code: 'TN', name: 'Tennessee' },
  { code: 'TX', name: 'Texas' },          { code: 'UT', name: 'Utah' },
  { code: 'VT', name: 'Vermont' },        { code: 'VA', name: 'Virginia' },
  { code: 'WA', name: 'Washington' },     { code: 'WV', name: 'West Virginia' },
  { code: 'WI', name: 'Wisconsin' },      { code: 'WY', name: 'Wyoming' },
];

/* --- StateSelect ------------------------------------------------------- */
/* A custom dropdown that matches the form's input chrome — no native <select>. */
function StateSelect({ value, onChange, onBlur, hasError }) {
  const [open, setOpen] = useStateTta(false);
  const [query, setQuery] = useStateTta('');
  const [highlight, setHighlight] = useStateTta(0);
  const wrapRef = useRefTta(null);
  const listRef = useRefTta(null);
  const inputRef = useRefTta(null);

  const selected = US_STATES.find(s => s.code === value);

  const filtered = useMemoTta(() => {
    const q = query.trim().toLowerCase();
    if (!q) return US_STATES;
    return US_STATES.filter(s =>
      s.name.toLowerCase().includes(q) || s.code.toLowerCase().includes(q)
    );
  }, [query]);

  /* close on outside click */
  useEffectTta(() => {
    if (!open) return;
    const onDown = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
        setOpen(false);
        setQuery('');
        onBlur && onBlur();
      }
    };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, [open]);

  /* keep highlighted item in view */
  useEffectTta(() => {
    if (!open || !listRef.current) return;
    const el = listRef.current.children[highlight];
    if (el) el.scrollIntoView({ block: 'nearest' });
  }, [highlight, open]);

  /* clamp highlight when filter changes */
  useEffectTta(() => { setHighlight(0); }, [query]);

  /* focus search when opening */
  useEffectTta(() => {
    if (open && inputRef.current) inputRef.current.focus();
  }, [open]);

  const pick = (state) => {
    onChange(state.code);
    setOpen(false);
    setQuery('');
  };

  const onTriggerKey = (e) => {
    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
      e.preventDefault();
      setOpen(true);
    }
  };
  const onInputKey = (e) => {
    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, filtered.length - 1)); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)); }
    else if (e.key === 'Enter') {
      e.preventDefault();
      if (filtered[highlight]) pick(filtered[highlight]);
    }
    else if (e.key === 'Escape') { e.preventDefault(); setOpen(false); setQuery(''); }
  };

  return (
    <div
      className={`tta-select ${open ? 'is-open' : ''} ${hasError ? 'has-error' : ''}`}
      ref={wrapRef}
    >
      <button
        type="button"
        className="tta-select-trigger"
        onClick={() => setOpen(o => !o)}
        onKeyDown={onTriggerKey}
        aria-haspopup="listbox"
        aria-expanded={open}
      >
        {selected ? (
          <span className="tta-select-value">
            <span className="tta-select-code tabular">{selected.code}</span>
            <span className="tta-select-name">{selected.name}</span>
          </span>
        ) : (
          <span className="tta-select-placeholder">Select a state</span>
        )}
        <svg className="tta-select-caret" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 6.5l4 4 4-4"/>
        </svg>
      </button>

      {open && (
        <div className="tta-select-pop" role="listbox">
          <div className="tta-select-search">
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L13 13"/>
            </svg>
            <input
              ref={inputRef}
              type="text"
              placeholder="Search states…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={onInputKey}
            />
          </div>
          <ul className="tta-select-list" ref={listRef}>
            {filtered.length === 0 && (
              <li className="tta-select-empty">No states match “{query}”</li>
            )}
            {filtered.map((s, i) => (
              <li
                key={s.code}
                className={`tta-select-opt ${i === highlight ? 'is-highlight' : ''} ${s.code === value ? 'is-selected' : ''}`}
                onMouseEnter={() => setHighlight(i)}
                onMouseDown={(e) => { e.preventDefault(); pick(s); }}
                role="option"
                aria-selected={s.code === value}
              >
                <span className="tta-select-code tabular">{s.code}</span>
                <span className="tta-select-name">{s.name}</span>
                {s.code === value && (
                  <svg className="tta-select-check" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M3.5 8.5l3 3 6-7"/>
                  </svg>
                )}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

/* --- Icons ------------------------------------------------------------- */
function TIcon({ name, size = 14 }) {
  const p = { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow':  return (<svg {...p}><path d="M3 8h10M9 4l4 4-4 4"/></svg>);
    case 'back':   return (<svg {...p}><path d="M13 8H3M7 4L3 8l4 4"/></svg>);
    case 'check':  return (<svg {...p} strokeWidth="2"><path d="M3 8.5l3 3 7-7"/></svg>);
    case 'quote':  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M6 16c0-4 2-7 6-8l.5 1.5c-2.5.8-4 2.5-4 4.5h2c1.1 0 2 .9 2 2v2c0 1.1-.9 2-2 2H6v-4Zm10 0c0-4 2-7 6-8l.5 1.5c-2.5.8-4 2.5-4 4.5h2c1.1 0 2 .9 2 2v2c0 1.1-.9 2-2 2h-4v-4Z"/></svg>);
    case 'star':   return (<svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" aria-hidden><path d="M8 1l2.2 4.5 5 .7-3.6 3.5.8 5-4.4-2.3L3.6 14.7l.8-5L.8 6.2l5-.7L8 1Z"/></svg>);
    case 'shield': return (<svg {...p}><path d="M8 2l5 2v4c0 3-2.2 5.5-5 6-2.8-.5-5-3-5-6V4l5-2Z"/><path d="M6 8l1.5 1.5L11 6"/></svg>);
    case 'clock':  return (<svg {...p}><circle cx="8" cy="8" r="6"/><path d="M8 5v3.5l2.5 1.5"/></svg>);
    case 'lock':   return (<svg {...p}><rect x="3.5" y="7.5" width="9" height="6.5" rx="1"/><path d="M5.5 7.5V6a2.5 2.5 0 0 1 5 0v1.5"/></svg>);
    case 'user':   return (<svg {...p}><circle cx="8" cy="6" r="2.8"/><path d="M3 14c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5"/></svg>);
    case 'biz':    return (<svg {...p}><path d="M2.5 13V5.5L8 3l5.5 2.5V13"/><path d="M2.5 13h11M6 13V9h4v4"/></svg>);
    case 'spark':  return (<svg {...p}><path d="M8 2v3M8 11v3M2 8h3M11 8h3M4 4l2 2M12 12l-2-2M4 12l2-2M12 4l-2 2"/></svg>);
    default: return null;
  }
}

/* --- Validation helpers ------------------------------------------------ */
const emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v || '').trim());
const phoneOk = (v) => {
  const digits = (v || '').replace(/\D/g, '');
  return digits.length >= 10 && digits.length <= 15;
};
const trimmed = (v) => (v || '').trim();

/* --- Testimonials ------------------------------------------------------ */
const TESTIMONIALS = [
  {
    q: "We've worked with the Revenu team for over five years. Every year somehow exceeds the last — they invest the time to understand our business and have become a core part of our success.",
    who: 'Evan Brandt', role: 'CEO, VidTech', init: 'EB',
  },
  {
    q: "After working with several firms, we've come to truly value Revenu's professionalism, responsiveness, and attention to detail. Regular check-ins keep us confident in our numbers — they've become trusted partners, not just service providers.",
    who: 'Sonya Sepahban', role: 'CEO, Trivvy', init: 'SS',
  },
  {
    q: "Working with Revenu has been a bright spot of my journey as an entrepreneur. This team does incredible work — and they do it as friends and collaborators, not just as professional associates.",
    who: 'Chance Horky', role: 'Co-Founder, InterWoven Studios', init: 'CH',
  },
  {
    q: "Responsive, precise, and genuinely easy to work with. Our books close on the same day every month, and when I have a question, someone who actually knows our business answers it — fast.",
    who: 'Marcus Lee', role: 'Founder, Northbound Goods', init: 'ML',
  },
];

function TestimonialCarousel() {
  const [idx, setIdx] = useStateTta(0);
  const [paused, setPaused] = useStateTta(false);

  useEffectTta(() => {
    if (paused) return;
    const id = setInterval(() => {
      setIdx(i => (i + 1) % TESTIMONIALS.length);
    }, 6000);
    return () => clearInterval(id);
  }, [paused]);

  const t = TESTIMONIALS[idx];

  return (
    <div
      className={`tta-quote ${paused ? 'is-paused' : ''}`}
      onClick={() => setPaused(p => !p)}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); setPaused(p => !p); } }}
      aria-label={paused ? 'Resume testimonials' : 'Pause testimonials'}
    >
      <div className="tta-quote-mark"><TIcon name="quote" size={28}/></div>
      <div className="tta-quote-stage">
        {TESTIMONIALS.map((item, i) => (
          <div key={i} className={`tta-quote-slide ${i === idx ? 'is-active' : ''}`} aria-hidden={i !== idx}>
            <blockquote>{item.q}</blockquote>
            <div className="tta-quote-who">
              <div className="tta-quote-avatar">{item.init}</div>
              <div>
                <div className="tta-quote-name">{item.who}</div>
                <div className="tta-quote-role">{item.role}</div>
              </div>
              <div className="tta-quote-stars">
                <TIcon name="star" size={12}/>
                <TIcon name="star" size={12}/>
                <TIcon name="star" size={12}/>
                <TIcon name="star" size={12}/>
                <TIcon name="star" size={12}/>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="tta-quote-controls">
        <div className="tta-quote-dots">
          {TESTIMONIALS.map((_, i) => (
            <button
              key={i} type="button"
              className={`tta-quote-dot ${i === idx ? 'is-active' : ''}`}
              onClick={(e) => { e.stopPropagation(); setIdx(i); setPaused(true); }}
              aria-label={`Show testimonial ${i + 1}`}
            />
          ))}
        </div>
        <div className="tta-quote-status" aria-live="polite">
          {paused ? 'Paused' : `${idx + 1} / ${TESTIMONIALS.length}`}
        </div>
      </div>
    </div>
  );
}

/* --- The wizard -------------------------------------------------------- */
function TalkToAdvisor() {
  const [step, setStep] = useStateTta(0);                   // 0..1 = steps; 2 = submitted
  const [form, setForm] = useStateTta({
    firstName: '', lastName: '', phone: '', email: '',
    companyLegalName: '', city: '', state: '', message: '',
  });
  const [touched, setTouched] = useStateTta({});

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const touch = (k) => setTouched(t => ({ ...t, [k]: true }));

  /* Per-step validation */
  const stepValidity = [
    /* step 0 — contact */
    () => trimmed(form.firstName) && trimmed(form.lastName) && phoneOk(form.phone) && emailOk(form.email),
    /* step 1 — business */
    () => trimmed(form.companyLegalName) && trimmed(form.city) && form.state && trimmed(form.message),
  ];
  const canAdvance = stepValidity[step] ? stepValidity[step]() : true;

  const next = () => {
    if (!canAdvance) {
      const map = [
        ['firstName','lastName','phone','email'],
        ['companyLegalName','city','state','message'],
      ];
      const toMark = map[step] || [];
      setTouched(t => toMark.reduce((acc, k) => ({ ...acc, [k]: true }), { ...t }));
      return;
    }
    setStep(s => s + 1);
    requestAnimationFrame(() => {
      const el = document.querySelector('.tta-form');
      if (el) el.scrollTo?.({ top: 0, behavior: 'smooth' });
    });
  };
  const back = () => setStep(s => Math.max(0, s - 1));

  const submit = () => {
    if (!stepValidity[1]()) return;
    setStep(2);
  };

  const progressPct = Math.min(100, ((step) / 2) * 100);

  return (
    <section className="tta-page">
      <div className="tta-shell">

        {/* LEFT — brand / social-proof panel */}
        <aside className="tta-left">
          <div className="tta-left-inner">
            <a href="index.html" className="tta-back-link">
              <TIcon name="back" size={12}/> Back to Revenu
            </a>

            <div className="tta-left-head">
              <div className="eyebrow" style={{color:'#9CD9BA'}}>Talk to an advisor</div>
              <h1 className="tta-left-h">
                Fewer spreadsheets. <em>More sleep.</em>
              </h1>
              <p className="tta-left-sub">
                A 30-minute call with a senior advisor — no sales pressure, no pitch deck. We'll look at your books, your stage, and tell you whether we're the right fit. If we're not, we'll point you to who is.
              </p>
            </div>

            <TestimonialCarousel/>

            <div className="tta-trust">
              <div className="tta-trust-item">
                <div className="tta-trust-v tabular">1,000+</div>
                <div className="tta-trust-l">Businesses served</div>
              </div>
              <div className="tta-trust-item">
                <div className="tta-trust-v tabular">4.9<span>/5</span></div>
                <div className="tta-trust-l">Client rating</div>
              </div>
              <div className="tta-trust-item">
                <div className="tta-trust-v">~4 hrs</div>
                <div className="tta-trust-l">Avg. response</div>
              </div>
            </div>

            <ul className="tta-bullets">
              <li><TIcon name="shield" size={14}/> Free 30-minute consultation</li>
              <li><TIcon name="clock"  size={14}/> Onboarding in under a week</li>
              <li><TIcon name="lock"   size={14}/> Your information stays confidential</li>
            </ul>
          </div>
        </aside>

        {/* RIGHT — wizard form */}
        <div className="tta-right">

          {step < 2 && (
            <div className="tta-form-wrap">
              {/* Progress */}
              <div className="tta-progress">
                <div className="tta-steps">
                  {['Contact', 'Business'].map((label, i) => (
                    <div key={i} className={`tta-step ${i === step ? 'is-active' : ''} ${i < step ? 'is-done' : ''}`}>
                      <span className="tta-step-num">
                        {i < step ? <TIcon name="check" size={11}/> : i + 1}
                      </span>
                      <span className="tta-step-label">{label}</span>
                    </div>
                  ))}
                </div>
                <div className="tta-progress-track">
                  <div className="tta-progress-fill" style={{ width: `${progressPct}%` }}/>
                </div>
              </div>

              <div className="tta-form">
                {step === 0 && <StepContact form={form} set={set} touched={touched} touch={touch}/>}
                {step === 1 && <StepBusiness form={form} set={set} touched={touched} touch={touch}/>}
              </div>

              <div className="tta-nav">
                <button className="tta-back" onClick={back} disabled={step === 0}>
                  <TIcon name="back" size={12}/> Back
                </button>
                <div className="tta-nav-right">
                  {step < 1 && (
                    <button className="tta-next" onClick={next} disabled={!canAdvance}>
                      Continue <TIcon name="arrow" size={12}/>
                    </button>
                  )}
                  {step === 1 && (
                    <button className="tta-next is-final" onClick={submit} disabled={!canAdvance}>
                      Book my call <TIcon name="arrow" size={12}/>
                    </button>
                  )}
                </div>
              </div>

              <div className="tta-foot">
                <TIcon name="lock" size={12}/>
                <span>We'll only use this to prepare for your call — never sold, never spammed. <a href="privacy.html">Privacy</a></span>
              </div>
            </div>
          )}

          {step === 2 && <StepDone form={form}/>}
        </div>
      </div>
    </section>
  );
}

/* --- Step 1: Contact --------------------------------------------------- */
function StepContact({ form, set, touched, touch }) {
  return (
    <div className="tta-step-panel" key="c">
      <div className="tta-section-eyebrow"><TIcon name="user" size={12}/> Step 01 · Who we're talking to</div>
      <h2 className="tta-section-h">Let's start with the basics.</h2>
      <p className="tta-section-sub">First, where to reach you. We'll confirm a time by email within a business day.</p>

      <div className="tta-fields">
        <div className="tta-row-2">
          <Field label="First name" required touched={touched.firstName} error={!trimmed(form.firstName) && 'Required'}>
            <input
              type="text" autoComplete="given-name" placeholder="Jane"
              value={form.firstName}
              onChange={(e) => set('firstName', e.target.value)}
              onBlur={() => touch('firstName')}
            />
          </Field>
          <Field label="Last name" required touched={touched.lastName} error={!trimmed(form.lastName) && 'Required'}>
            <input
              type="text" autoComplete="family-name" placeholder="Rivera"
              value={form.lastName}
              onChange={(e) => set('lastName', e.target.value)}
              onBlur={() => touch('lastName')}
            />
          </Field>
        </div>

        <Field
          label="Phone number" required touched={touched.phone}
          error={!phoneOk(form.phone) && (form.phone ? 'Needs to include area code.' : 'Required')}
        >
          <input
            type="tel" autoComplete="tel" placeholder="(555) 123-4567"
            value={form.phone}
            onChange={(e) => set('phone', e.target.value)}
            onBlur={() => touch('phone')}
          />
        </Field>

        <Field
          label="Work email" required touched={touched.email}
          error={!emailOk(form.email) && (form.email ? 'Check the format — we need a valid email.' : 'Required')}
        >
          <input
            type="email" autoComplete="email" placeholder="jane@company.com"
            value={form.email}
            onChange={(e) => set('email', e.target.value)}
            onBlur={() => touch('email')}
          />
        </Field>
      </div>
    </div>
  );
}

/* --- Step 2: Business -------------------------------------------------- */
function StepBusiness({ form, set, touched, touch }) {
  return (
    <div className="tta-step-panel" key="b">
      <div className="tta-section-eyebrow"><TIcon name="biz" size={12}/> Step 02 · About the business</div>
      <h2 className="tta-section-h">Tell us about your company.</h2>
      <p className="tta-section-sub">A few quick details so we can prepare for the call.</p>

      <div className="tta-fields">
        <Field label="Company legal name" required touched={touched.companyLegalName} error={!trimmed(form.companyLegalName) && 'Required'}>
          <input
            type="text" autoComplete="organization" placeholder="Acme Holdings, LLC"
            value={form.companyLegalName}
            onChange={(e) => set('companyLegalName', e.target.value)}
            onBlur={() => touch('companyLegalName')}
          />
        </Field>

        <div className="tta-row-2">
          <Field label="City" required touched={touched.city} error={!trimmed(form.city) && 'Required'}>
            <input
              type="text" autoComplete="address-level2" placeholder="Austin"
              value={form.city}
              onChange={(e) => set('city', e.target.value)}
              onBlur={() => touch('city')}
            />
          </Field>
          <Field label="State" required touched={touched.state} error={!form.state && 'Required'}>
            <StateSelect
              value={form.state}
              onChange={(code) => { set('state', code); touch('state'); }}
              onBlur={() => touch('state')}
              hasError={touched.state && !form.state}
            />
          </Field>
        </div>

        <Field label="What do you need help with?" required touched={touched.message} error={!trimmed(form.message) && 'Tell us a little about what you need'}>
          <textarea
            rows="5" placeholder="We're behind on 2024 books and need help catching up before tax season…"
            value={form.message}
            onChange={(e) => set('message', e.target.value)}
            onBlur={() => touch('message')}
          />
        </Field>
      </div>
    </div>
  );
}

/* --- Step 4: Done ------------------------------------------------------ */
function StepDone({ form }) {
  const first = trimmed(form.firstName) || 'there';
  return (
    <div className="tta-done">
      <div className="tta-done-badge"><TIcon name="check" size={28}/></div>
      <div className="eyebrow" style={{color:'var(--accent-ink)'}}>Request received</div>
      <h2 className="tta-done-h">Thanks, {first}. We're on it.</h2>
      <p className="tta-done-sub">
        A senior advisor will reach out within one business day at <strong>{form.email}</strong> with two or three times that work. If it's urgent, reply to that email and we'll find something faster.
      </p>

      <div className="tta-done-card">
        <div className="tta-done-card-head">What happens next</div>
        <ol className="tta-done-steps">
          <li><span className="tta-done-step-n">01</span><span><strong>We match you.</strong> Based on what you shared, we'll pair you with the advisor on our team who's closest to your world.</span></li>
          <li><span className="tta-done-step-n">02</span><span><strong>30-minute call.</strong> We'll look at your books, your pain points, and where you're headed. No pitch deck.</span></li>
          <li><span className="tta-done-step-n">03</span><span><strong>Honest recommendation.</strong> If we're a fit, you'll have a proposal by the end of the week. If we're not, we'll tell you who is.</span></li>
        </ol>
      </div>

      <div className="tta-done-actions">
        <a href="index.html" className="btn btn-secondary"><TIcon name="back" size={12}/> Back to home</a>
        <a href="how-we-work.html" className="btn btn-primary is-accent">See how we work <TIcon name="arrow" size={12}/></a>
      </div>
    </div>
  );
}

/* --- Field primitive --------------------------------------------------- */
function Field({ label, required, hint, error, touched, children }) {
  const showError = touched && error;
  return (
    <label className={`tta-field ${showError ? 'has-error' : ''}`}>
      <div className="tta-field-head">
        <span className="tta-field-label">
          {label}{required && <span className="tta-req" aria-hidden> *</span>}
        </span>
        {hint && !showError && <span className="tta-field-hint">{hint}</span>}
        {showError && <span className="tta-field-error">{error}</span>}
      </div>
      {children}
    </label>
  );
}

Object.assign(window, { TalkToAdvisor });