// asiz-forms.jsx — sticky hero form + floating mini bar + multi-step variant

function ConsentCheck({ checked, onChange, children, required }) {
  return (
    <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 11.5, lineHeight: 1.55, opacity: 0.82, cursor: 'pointer', marginTop: 10 }}>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        style={{ marginTop: 2, accentColor: 'var(--accent)', flexShrink: 0 }}
      />
      <span>{children}</span>
    </label>
  );
}

function ConsentBlock({ consents, setConsents, onLightBg }) {
  const linkStyle = { textDecoration: 'underline', color: 'inherit' };
  const goTerms = (e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('asiz-goto', { detail: 'terms' })); };
  const goPriv = (e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('asiz-goto', { detail: 'privacy' })); };
  return (
    <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid color-mix(in oklab, currentColor 15%, transparent)' }}>
      <ConsentCheck
        checked={consents.sms}
        onChange={(v) => setConsents({ ...consents, sms: v })}
      >
        I agree to receive transactional or conversational communications from Clawsers LLC via <strong>text messages</strong> related to my real estate inquiry, such as property details, responses, and appointment confirmations. Message frequency varies. Reply <strong>STOP</strong> to opt out. Reply <strong>HELP</strong> for help. Msg &amp; data rates may apply. Your information is secure and will not be sold or shared with third parties or affiliates for promotional purposes. <em>(optional)</em>
      </ConsentCheck>

      <ConsentCheck
        checked={consents.calls}
        onChange={(v) => setConsents({ ...consents, calls: v })}
      >
        I agree to receive transactional or conversational communications from Clawsers LLC via <strong>phone calls and emails</strong> related to my real estate inquiry, such as property details, responses, and appointment confirmations. Message frequency varies. Msg &amp; data rates may apply. Your information is secure and will not be sold or shared with third parties or affiliates for promotional purposes. <em>(optional)</em>
      </ConsentCheck>

      <ConsentCheck
        checked={consents.terms}
        onChange={(v) => setConsents({ ...consents, terms: v })}
      >
        I agree to the <a href="/terms" style={linkStyle} onClick={goTerms}>Terms &amp; Conditions</a> and <a href="/privacy" style={linkStyle} onClick={goPriv}>Privacy Policy</a>. <span style={{ color: 'var(--accent)' }}>*</span>
      </ConsentCheck>
    </div>
  );
}

function OfferForm({ variant = 'hero', style = 'single', onLightBg = false, compact = false }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    addr: '', city: '', state: '', zip: '', name: '', phone: '', email: '', role: 'seller',
  });
  const [consents, setConsents] = React.useState({ sms: false, calls: false, terms: false });
  const [done, setDone] = React.useState(false);
  const [error, setError] = React.useState('');

  const update = (k) => (e) => setData({ ...data, [k]: e.target.value });

  const formClass = `asiz-form ${onLightBg ? 'asiz-form--light' : ''}`;

  const trySubmit = () => {
    if (!consents.terms) {
      setError('Please agree to the Terms & Conditions and Privacy Policy to continue.');
      return;
    }
    setError('');
    if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
      window.gtag('event', 'form_submit', {
        form_role: data.role,
        form_variant: variant,
      });
    }
    setDone(true);
  };

  if (done) {
    return (
      <div className={formClass}>
        <div style={{ padding: '24px 0', textAlign: 'left' }}>
          <div className="asiz-eyebrow" style={{ color: 'var(--accent)', marginBottom: 16 }}>
            ⟶ received
          </div>
          <h3 style={{ fontWeight: 400 }}>
            Thanks{data.name ? `, ${data.name.split(' ')[0]}` : ''}. We'll be in touch within a business day.
          </h3>
          <p style={{ opacity: 0.7, fontSize: 14, margin: '14px 0 0' }}>
            Reference #AZ-{Math.floor(Math.random() * 90000 + 10000)}
          </p>
        </div>
      </div>
    );
  }

  if (style === 'multi') {
    return (
      <div className={formClass}>
        <h3>Get a fair cash offer</h3>
        <p className="asiz-form-sub">Free · no-obligation · under 60 seconds</p>

        <div className="asiz-form-steps">
          {[0, 1, 2].map((i) => (
            <div key={i} className="asiz-form-step">
              <div
                className="asiz-form-step-fill"
                style={{ transform: `scaleX(${i <= step ? 1 : 0})` }}
              />
            </div>
          ))}
        </div>

        <div style={{ minHeight: 180 }}>
          {step === 0 && (
            <>
              <input className="asiz-field" placeholder="Street address" value={data.addr} onChange={update('addr')} />
              <div className="asiz-field-row" style={{ marginTop: 6 }}>
                <input className="asiz-field" placeholder="City" value={data.city} onChange={update('city')} />
                <input className="asiz-field" placeholder="ZIP" value={data.zip} onChange={update('zip')} />
              </div>
            </>
          )}
          {step === 1 && (
            <>
              <div role="radiogroup" aria-label="Your role" style={{ display: 'flex', gap: 8, margin: '0 0 10px' }}>
                {[
                  { v: 'seller', l: 'I own the home' },
                  { v: 'agent', l: "I'm an agent" },
                ].map((opt) => {
                  const active = data.role === opt.v;
                  return (
                    <button
                      key={opt.v}
                      type="button"
                      role="radio"
                      aria-checked={active}
                      onClick={() => setData({ ...data, role: opt.v })}
                      style={{
                        flex: 1, cursor: 'pointer',
                        padding: '11px 14px', fontSize: 12,
                        fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase',
                        background: active ? 'var(--ink)' : 'transparent',
                        color: active ? 'var(--bg)' : 'inherit',
                        border: `1px solid ${active ? 'var(--ink)' : 'color-mix(in oklab, currentColor 25%, transparent)'}`,
                        borderRadius: 2,
                      }}
                    >
                      {opt.l}
                    </button>
                  );
                })}
              </div>
              <input className="asiz-field" placeholder="Full name" value={data.name} onChange={update('name')} />
              <input className="asiz-field" placeholder="Phone number" value={data.phone} onChange={update('phone')} />
              <input className="asiz-field" placeholder="Email" value={data.email} onChange={update('email')} />
            </>
          )}
          {step === 2 && (
            <div style={{ fontSize: 14, opacity: 0.9, lineHeight: 1.6, padding: '6px 0 0' }}>
              <div style={{ marginBottom: 10 }}>
                <span style={{ opacity: 0.6 }}>Property</span>
                <div>{data.addr || '—'}, {data.city || '—'} {data.zip}</div>
              </div>
              <div>
                <span style={{ opacity: 0.6 }}>Contact</span>
                <div>{data.name || '—'} · {data.phone || '—'}</div>
              </div>
              <ConsentBlock consents={consents} setConsents={setConsents} onLightBg={onLightBg} />
              {error && <div style={{ color: 'var(--accent)', fontSize: 12, marginTop: 10 }}>{error}</div>}
            </div>
          )}
        </div>

        <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
          {step > 0 && (
            <button
              type="button"
              onClick={() => setStep(step - 1)}
              style={{
                background: 'transparent',
                border: '1px solid color-mix(in oklab, currentColor 25%, transparent)',
                color: 'inherit', borderRadius: 999, padding: '14px 20px',
                fontSize: 14, cursor: 'pointer',
              }}
            >
              Back
            </button>
          )}
          <button
            type="button"
            className="asiz-form-submit"
            onClick={() => (step < 2 ? setStep(step + 1) : trySubmit())}
          >
            {step < 2 ? 'Continue' : 'Submit'}
            <span style={{ opacity: 0.7 }}>→</span>
          </button>
        </div>
      </div>
    );
  }

  // single style
  return (
    <div className={formClass}>
      <h3>{compact ? 'Cash offer' : 'Get your cash offer'}</h3>
      <p className="asiz-form-sub">$0 fees · $0 commission · close on your date</p>

      <div role="radiogroup" aria-label="Your role" style={{ display: 'flex', gap: 8, margin: '0 0 10px' }}>
        {[
          { v: 'seller', l: 'I own the home' },
          { v: 'agent', l: "I'm an agent" },
        ].map((opt) => {
          const active = data.role === opt.v;
          return (
            <button
              key={opt.v}
              type="button"
              role="radio"
              aria-checked={active}
              onClick={() => setData({ ...data, role: opt.v })}
              style={{
                flex: 1, cursor: 'pointer',
                padding: '11px 14px', fontSize: 12,
                fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase',
                background: active ? 'var(--ink)' : 'transparent',
                color: active ? 'var(--bg)' : 'inherit',
                border: `1px solid ${active ? 'var(--ink)' : 'color-mix(in oklab, currentColor 25%, transparent)'}`,
                borderRadius: 2,
                transition: 'background 0.15s, color 0.15s',
              }}
            >
              {opt.l}
            </button>
          );
        })}
      </div>

      <input className="asiz-field" placeholder="Street address" value={data.addr} onChange={update('addr')} />
      <div className="asiz-field-row">
        <input className="asiz-field" placeholder="City" value={data.city} onChange={update('city')} />
        <input className="asiz-field" placeholder="ZIP code" value={data.zip} onChange={update('zip')} />
      </div>
      <div className="asiz-field-row">
        <input className="asiz-field" placeholder={data.role === 'agent' ? 'Your full name' : 'Full name'} value={data.name} onChange={update('name')} />
        <input className="asiz-field" placeholder="Phone" value={data.phone} onChange={update('phone')} />
      </div>
      <input className="asiz-field" placeholder="Email" value={data.email} onChange={update('email')} />

      <ConsentBlock consents={consents} setConsents={setConsents} onLightBg={onLightBg} />
      {error && <div style={{ color: 'var(--accent)', fontSize: 12, marginTop: 10 }}>{error}</div>}

      <button type="button" className="asiz-form-submit" onClick={trySubmit} style={{ marginTop: 14 }}>
        Get my offer
        <span>→</span>
      </button>
    </div>
  );
}

// Floating mini address bar — appears on scroll, expands to a small panel
function MiniBar({ visible, onExpand }) {
  return (
    <div className={`asiz-minibar ${visible ? 'is-in' : ''}`}>
      <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', opacity: 0.6, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
        Cash offer ·
      </span>
      <input placeholder="Enter your address" onFocus={onExpand} />
      <button
        className="asiz-form-submit"
        style={{ margin: 0, padding: '10px 18px', fontSize: 13 }}
        onClick={onExpand}
      >
        Start
        <span>→</span>
      </button>
    </div>
  );
}

Object.assign(window, { OfferForm, MiniBar, ConsentBlock });