// ============================================================
// WAITLIST — founding members, signup form, referral mechanic
// ============================================================

const WAITLIST_BASE = 4218; // shown in hero; storage keys keep us consistent

const useWaitlistState = () => {
  const { lang } = useI18n();
  // Persist a fake "you're on the list" state so refreshes feel real.
  const [state, setState] = React.useState(() => {
    try {
      const raw = localStorage.getItem('beymann_waitlist');
      if (raw) return JSON.parse(raw);
    } catch {}
    return null;
  });

  const save = (next) => {
    setState(next);
    try { localStorage.setItem('beymann_waitlist', JSON.stringify(next)); } catch {}
  };

  const join = (email) => {
    // Generate a stable referral code from the email
    const codeBase = email.toLowerCase().split('@')[0].replace(/[^a-z0-9]/g, '').slice(0, 8) || 'trader';
    const referralCode = codeBase + '-' + Math.random().toString(36).slice(2, 6);
    // Who referred this signup? Pulled from ?ref= on the current URL.
    const referredBy = new URLSearchParams(window.location.search).get('ref') || null;
    // Page the user was on when they signed up — lets us tell explicit /fr
    // visitors apart from / visitors who got French via browser auto-detect.
    const path = window.location.pathname || '/';

    save({
      email,
      position: Math.floor(900 + Math.random() * 600), // somewhere in the line
      joinedAt: Date.now(),
      code: referralCode,
      referrals: 0,
    });

    // Persist signup to Firestore `beta_testers` collection
    try {
      window.db?.collection('beta_testers').add({
        email,
        source: 'website_may_26',
        status: 'pending',
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        referralCode,
        referredBy,
        lang,
        path,
      }).catch(err => console.error('beta_testers write failed:', err));
    } catch (err) {
      console.error('Firebase not initialized:', err);
    }

    // Google Analytics event
    if (typeof window.gtag === 'function') {
      window.gtag('event', 'waitlist_signup', {
        source: 'website_may_26',
        referred: referredBy ? 'true' : 'false',
        lang,
      });
    }
  };

  const reset = () => {
    save(null);
    try { localStorage.removeItem('beymann_waitlist'); } catch {}
  };

  const addReferral = () => {
    if (!state) return;
    save({
      ...state,
      referrals: state.referrals + 1,
      position: Math.max(1, state.position - 240),
    });
  };

  return { state, join, reset, addReferral };
};

const WaitlistForm = ({ onJoin, compact = false, formRef }) => {
  const { t } = useI18n();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState('');
  const submit = (e) => {
    e?.preventDefault?.();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    if (!ok) { setError(t('waitlist.formInvalid')); return; }
    setError('');
    onJoin(email);
  };
  return (
    <form ref={formRef} onSubmit={submit} className="waitlist-form" style={{
      display: 'flex', gap: 0, alignItems: 'stretch',
      background: 'var(--ink-3)', border: `1px solid ${error ? 'var(--red-400)' : 'var(--border-strong)'}`,
      borderRadius: 6, overflow: 'hidden',
      transition: 'border-color 120ms var(--ease-out)',
      maxWidth: compact ? 480 : '100%',
      minHeight: 60,
    }}>
      <input
        type="email"
        value={email}
        onChange={e => { setEmail(e.target.value); if (error) setError(''); }}
        placeholder={t('waitlist.formPlaceholder')}
        autoComplete="email"
        style={{
          flex: 1, background: 'transparent', border: 'none', outline: 'none',
          color: 'var(--fg)', fontFamily: 'var(--font-sans)', fontSize: 15,
          padding: '0 20px', minWidth: 0,
        }}
      />
      <button type="submit" style={{
        background: 'var(--gold-400)', color: '#000', border: 'none',
        padding: '0 26px', fontFamily: 'RH Phonic', fontSize: 12,
        letterSpacing: '.12em', textTransform: 'uppercase', fontWeight: 500,
        cursor: 'pointer', whiteSpace: 'nowrap',
        boxShadow: '0 0 0 1px rgba(196,172,120,.45)',
      }}>
        {t('waitlist.formSubmit')}
      </button>
    </form>
  );
};

const Waitlist = ({ waitlistState, onJoin, onReset, onReferral, showReferral, waitlistTotal, formRef }) => {
  const { t } = useI18n();
  const joined = !!waitlistState;

  return (
    <section id="waitlist" style={{
      padding: '140px 48px', background: 'var(--ink-0)', position: 'relative', overflow: 'hidden',
    }}>
      <img src="assets3/shield-mark.png" style={{
        position: 'absolute', left: '-15%', bottom: -200, height: 720,
        opacity: .045, transform: 'rotate(8deg)', pointerEvents: 'none',
      }} alt="" />

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <SectionHeader
          eye={t('waitlist.eyebrow')}
          title={t('waitlist.title')}
          sub={t('waitlist.sub')}
        />

        <div className="waitlist-grid" style={{
          display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 48,
          alignItems: 'stretch',
        }}>
          {/* Left: form / receipt card */}
          <div style={{
            background: 'var(--ink-2)',
            border: '1px solid rgba(196,172,120,.45)', borderRadius: 16,
            padding: '40px 40px',
            boxShadow: '0 0 0 1px rgba(196,172,120,.12), 0 32px 80px rgba(196,172,120,.05)',
            position: 'relative', overflow: 'hidden',
          }}>
            {/* Header strip */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
              <img className="waitlist-card-logo" src="assets3/logo-gold.png" style={{ height: 22 }} alt="Beymann" />
              <div className="waitlist-card-spacer" style={{ flex: 1 }} />
              <div style={{
                fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
                color: 'var(--gold-400)', fontWeight: 500,
              }}>
                {t('waitlist.cardTag')}
              </div>
            </div>

            {!joined ? (
              <>
                <div style={{
                  fontFamily: 'RH Phonic', fontWeight: 700,
                  fontSize: 36, lineHeight: 1.05, letterSpacing: '-.02em',
                  textTransform: 'uppercase',
                }}>
                  {t('waitlist.formTitle')}
                </div>
                <div style={{
                  fontSize: 15, color: 'var(--fg-muted)', marginTop: 14,
                  lineHeight: 1.55, maxWidth: 460,
                }}>
                  {t('waitlist.formSub')}
                </div>
                <div style={{ marginTop: 28 }}>
                  <WaitlistForm onJoin={onJoin} formRef={formRef} />
                </div>
                <div style={{
                  marginTop: 14, fontSize: 12, color: 'var(--fg-dim)',
                  letterSpacing: '.04em', display: 'flex', alignItems: 'center', gap: 8,
                }}>
                  <span className="material-symbols-rounded" style={{ fontSize: 14, color: 'var(--gold-400)' }}>lock</span>
                  {t('waitlist.formAssurance')}
                </div>
              </>
            ) : (
              <JoinedReceipt
                waitlistState={waitlistState}
                onReset={onReset}
                onReferral={onReferral}
                showReferral={showReferral}
              />
            )}
          </div>

          {/* Right: what you get */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            <div style={{
              fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase',
              color: 'var(--fg-dim)', fontWeight: 500, marginBottom: 22,
              fontFamily: 'RH Phonic',
            }}>
              {t('waitlist.whatYouGet')}
            </div>
            {[
              { k: t('waitlist.perk1.k'), v: t('waitlist.perk1.v'), icon: 'flag' },
              { k: t('waitlist.perk2.k'), v: t('waitlist.perk2.v'), icon: 'redeem' },
              { k: t('waitlist.perk3.k'), v: t('waitlist.perk3.v'), icon: 'lock' },
              { k: t('waitlist.perk4.k'), v: t('waitlist.perk4.v'), icon: 'workspace_premium' },
              { k: t('waitlist.perk5.k'), v: t('waitlist.perk5.v'), icon: 'forum' },
            ].map((b, i, arr) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '40px 1fr',
                gap: 18, padding: '20px 0',
                borderTop: '1px solid var(--border)',
                borderBottom: i === arr.length - 1 ? '1px solid var(--border)' : 'none',
                alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 999,
                  border: '1px solid var(--gold-400)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <span className="material-symbols-rounded" style={{
                    fontSize: 20, color: 'var(--gold-400)',
                  }}>{b.icon}</span>
                </div>
                <div>
                  <div style={{
                    fontFamily: 'RH Phonic', fontWeight: 500, fontSize: 17,
                    color: 'var(--fg)', letterSpacing: '.005em',
                  }}>{b.k}</div>
                  <div style={{
                    fontSize: 14, color: 'var(--fg-muted)', marginTop: 4,
                    lineHeight: 1.5,
                  }}>{b.v}</div>
                </div>
              </div>
            ))}

          </div>
        </div>
      </div>
    </section>
  );
};

const JoinedReceipt = ({ waitlistState, onReset, onReferral, showReferral }) => {
  const { t, dateLocale } = useI18n();
  const [copied, setCopied] = React.useState(false);
  const link = `beymann.capital/?ref=${waitlistState.code}`;

  const copy = () => {
    try {
      navigator.clipboard?.writeText('https://' + link);
    } catch {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  const referralsToSkip = 3;
  const remaining = Math.max(0, referralsToSkip - waitlistState.referrals);
  const skipped = waitlistState.referrals >= referralsToSkip;
  const pct = Math.min(100, (waitlistState.referrals / referralsToSkip) * 100);

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <span className="material-symbols-rounded" style={{
          fontSize: 22, color: 'var(--gold-400)',
        }}>task_alt</span>
        <span style={{
          fontFamily: 'RH Phonic', fontWeight: 500, fontSize: 12,
          letterSpacing: '.16em', textTransform: 'uppercase',
          color: 'var(--gold-400)',
        }}>
          {t('joined.onList')}
        </span>
      </div>
      <div style={{
        fontFamily: 'RH Phonic', fontWeight: 700,
        fontSize: 32, lineHeight: 1.05, letterSpacing: '-.02em',
        textTransform: 'uppercase',
      }}>
        {t('joined.welcome')}
      </div>
      <div style={{ marginTop: 28 }}>
        <div style={{
          background: 'var(--ink-3)', border: '1px solid var(--border)',
          borderRadius: 8, padding: '16px 18px', textAlign: 'center',
        }}>
          <div style={{ fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-dim)' }}>{t('joined.lockedRate')}</div>
          <div style={{
            fontFamily: 'RH Phonic', fontWeight: 500, fontSize: 36,
            color: 'var(--fg)', marginTop: 6, letterSpacing: '-.02em',
            fontVariantNumeric: 'tabular-nums',
          }}>
            $89<span style={{ fontSize: 14, color: 'var(--fg-muted)' }}>{t('joined.perMonth')}</span>
          </div>
        </div>
      </div>

      {showReferral && (
        <div style={{
          marginTop: 22, padding: 22,
          background: 'linear-gradient(180deg, rgba(196,172,120,.06), rgba(196,172,120,.02))',
          border: '1px solid rgba(196,172,120,.3)', borderRadius: 8,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
            marginBottom: 14,
          }}>
            <div style={{
              fontFamily: 'RH Phonic', fontWeight: 500, fontSize: 13,
              letterSpacing: '.16em', textTransform: 'uppercase',
              color: 'var(--gold-400)',
            }}>
              {t('joined.skipTheLine')}
            </div>
            <div style={{
              fontSize: 12, color: 'var(--fg-muted)', fontFamily: 'RH Phonic',
              fontVariantNumeric: 'tabular-nums',
            }}>
              {t('joined.referralsCounter', { count: waitlistState.referrals, total: referralsToSkip })}
            </div>
          </div>
          <div style={{
            fontSize: 14, color: 'var(--fg)', lineHeight: 1.5,
          }}>
            {skipped
              ? t('joined.earned')
              : t(remaining === 1 ? 'joined.referOne' : 'joined.referMany', { n: remaining })
            }
          </div>

          {/* Progress bar */}
          <div style={{
            height: 4, background: 'var(--ink-3)', borderRadius: 999,
            marginTop: 16, overflow: 'hidden',
          }}>
            <div style={{
              height: '100%', width: pct + '%',
              background: 'var(--gold-400)',
              boxShadow: '0 0 12px rgba(196,172,120,.5)',
              transition: 'width 360ms var(--ease-out)',
            }} />
          </div>

          {/* Referral link */}
          <div style={{
            marginTop: 18, display: 'flex', alignItems: 'stretch',
            background: 'var(--ink-1)', border: '1px solid var(--border)',
            borderRadius: 4, overflow: 'hidden',
          }}>
            <div style={{
              flex: 1, padding: '12px 16px', fontFamily: 'var(--font-mono)',
              fontSize: 13, color: 'var(--fg)', overflow: 'hidden',
              textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>
              {link}
            </div>
            <button onClick={copy} style={{
              background: copied ? 'var(--green-400)' : 'var(--ink-3)',
              color: copied ? '#000' : 'var(--fg)',
              border: 'none', borderLeft: '1px solid var(--border)',
              padding: '0 18px', fontFamily: 'RH Phonic', fontSize: 11,
              letterSpacing: '.12em', textTransform: 'uppercase', fontWeight: 500,
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
              transition: 'background 120ms var(--ease-out)',
            }}>
              <span className="material-symbols-rounded" style={{ fontSize: 16 }}>
                {copied ? 'check' : 'content_copy'}
              </span>
              {copied ? t('joined.copied') : t('joined.copyLink')}
            </button>
          </div>

        </div>
      )}

      <div style={{
        marginTop: 24, display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', fontSize: 12, color: 'var(--fg-dim)',
        paddingTop: 18, borderTop: '1px solid var(--border)',
      }}>
        <span style={{ letterSpacing: '.04em' }}>
          {t('joined.joinedOn', { date: new Date(waitlistState.joinedAt).toLocaleDateString(dateLocale, { month: 'short', day: 'numeric', year: 'numeric' }) })}
        </span>
        <button onClick={onReset} style={{
          background: 'transparent', border: 'none', color: 'var(--fg-dim)',
          fontSize: 11, letterSpacing: '.06em', cursor: 'pointer',
          textDecoration: 'underline', textUnderlineOffset: 3,
        }}>
          {t('joined.useDifferent')}
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { Waitlist, WaitlistForm, JoinedReceipt, useWaitlistState });