// cache-bust: 1779485752348-desktoponly
// =========================================================
// mobile.jsx — Mobile landing variant (390px wide)
// Condensed hero, metrics, modules, pricing, capture.
// =========================================================

const DMo = window.BL_DATA;

function MobileLanding() {
  // Mobile takeover -- the Build Lab is a desktop-only experience
  // (terminal commands, code editor, side-by-side reference panels).
  // We replaced the long mobile marketing page with this focused
  // message + email-capture so visitors can hand the URL to desktop.
  // marker:desktop-only
  const [mEmail, setMEmail] = React.useState('');
  const [mStatus, setMStatus] = React.useState(null);
  const [mErr, setMErr] = React.useState('');

  async function mSubmit() {
    const e = mEmail.trim();
    if (!e || !e.includes('@')) { setMErr('Enter a valid email'); setMStatus('error'); return; }
    setMStatus('sending'); setMErr('');
    try {
      const res = await fetch('/api/build/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: e, source: 'mobile-desktop-only' }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) { setMStatus('sent'); }
      else { setMErr(data.error || 'Something went wrong'); setMStatus('error'); }
    } catch (err) { setMErr('Connection error'); setMStatus('error'); }
  }

  const disabled = mStatus === 'sending' || mStatus === 'sent' || !mEmail.trim();

  return (
    <div style={{
      minHeight: '100vh', width: '100%',
      background: 'var(--paper)',
      fontFamily: 'var(--sans)', color: 'var(--ink)',
      display: 'flex', flexDirection: 'column',
      padding: '40px 24px 28px',
      overflowX: 'hidden', boxSizing: 'border-box',
    }}>
      {/* logo strip */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 64 }}>
        <LandingLogo />
        <span className="bl-mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '.06em' }}>
          reloadin5.com/build
        </span>
      </div>

      {/* main */}
      <div style={{ flex: 1 }}>
        <div className="bl-mono" style={{
          fontSize: 10, color: 'var(--accent)', letterSpacing: '.14em',
          textTransform: 'uppercase', marginBottom: 18,
        }}>
          ◇ Open on desktop
        </div>

        <h1 className="bl-display" style={{
          fontSize: 48, lineHeight: 0.98, margin: '0 0 22px',
          color: 'var(--ink)',
        }}>
          Designed for <span className="bl-italic" style={{ color: 'var(--accent)' }}>desktop</span>.
        </h1>

        <p style={{
          fontSize: 16, lineHeight: 1.55, color: 'var(--ink-dim)',
          margin: '0 0 24px',
        }}>
          The Build Lab is hands-on — terminal commands, a code editor, and a side panel for Claude Q&A. It needs a real keyboard and a wider screen than a phone.
        </p>

        <p style={{
          fontSize: 14, lineHeight: 1.55, color: 'var(--ink-mute)',
          margin: '0 0 36px',
        }}>
          Open this same URL on a laptop or desktop browser to start, or email it to yourself below.
        </p>

        {/* email capture */}
        <div className="bl-mono" style={{
          fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.10em',
          textTransform: 'uppercase', marginBottom: 10,
        }}>
          Email yourself the link
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          background: 'var(--surface-1)',
          border: '1px solid var(--line-paper)',
          borderRadius: 999, padding: '4px 4px 4px 14px',
        }}>
          <input value={mEmail} onChange={(e) => setMEmail(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') mSubmit(); }}
            placeholder="you@company.com"
            disabled={mStatus === 'sending' || mStatus === 'sent'}
            style={{
              flex: 1, minWidth: 0,
              background: 'transparent', border: 'none', outline: 'none',
              color: 'var(--ink)', fontFamily: 'var(--mono)', fontSize: 13, padding: '9px 0',
            }}/>
          <button onClick={mSubmit}
            disabled={disabled}
            className="bl-btn bl-btn-accent"
            style={{ padding: '9px 16px', fontSize: 12, opacity: disabled ? 0.6 : 1 }}>
            {mStatus === 'sending' ? '…' : mStatus === 'sent' ? '✓' : 'Send →'}
          </button>
        </div>

        {mStatus === 'sent' && (
          <div className="bl-mono" style={{ fontSize: 11, color: 'var(--accent)', marginTop: 12, letterSpacing: '.02em' }}>
            ✓ Sent. Check your inbox and open the link on a desktop.
          </div>
        )}
        {mStatus === 'error' && mErr && (
          <div className="bl-mono" style={{ fontSize: 11, color: 'var(--accent)', marginTop: 12, letterSpacing: '.02em' }}>
            {mErr}
          </div>
        )}
      </div>

      {/* footer */}
      <footer style={{
        marginTop: 48, paddingTop: 20,
        borderTop: '1px solid var(--line-paper)',
      }}>
        <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>
          © 2026 ReloadIn5 · Part of reloadin5.com
        </div>
        <div className="bl-mono" style={{ fontSize: 9.5, color: 'var(--ink-mute)', opacity: 0.7, marginTop: 6, letterSpacing: '.02em' }}>
          Not affiliated with or endorsed by Cisco Systems, Inc.
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { MobileLanding });