// TAU — Onboarding flow (5 steps) + Paywall
// Same design system as tau-screens.jsx. Depends on window.{TAU, TauDevice}.

const { TAU, TauDevice } = window;

// ── Shared onboarding chrome ────────────────────────────────────────────────
function StepDots({ step, total = 6 }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          width: i === step ? 18 : 5, height: 5, borderRadius: 99,
          background: i === step ? TAU.ink : (i < step ? TAU.dim : TAU.ghost),
          transition: '200ms',
        }} />
      ))}
    </div>
  );
}

function OnboardTop({ step, total = 6, onBack = true }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '24px 24px 0', marginTop: 40,
    }}>
      <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center' }}>
        {onBack && (
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <path d="M11.5 3.5L5.5 9l6 5.5" stroke={TAU.dim} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        )}
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
        fontFamily: TAU.mono, fontSize: 11, color: TAU.faint, letterSpacing: '0.1em' }}>
        {step + 1}/{total}
      </div>
    </div>
  );
}

function PrimaryBtn({ children, sub }) {
  return (
    <div style={{ position: 'absolute', bottom: 34, left: 0, right: 0, padding: '0 24px' }}>
      <button style={{
        width: '100%', padding: '16px', borderRadius: 14,
        background: TAU.ink, color: '#000', border: 'none',
        fontFamily: TAU.font, fontSize: 16, fontWeight: 500, letterSpacing: -0.2,
        cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}>{children}</button>
      {sub && (
        <div style={{
          fontFamily: TAU.mono, fontSize: 9.5, color: TAU.faint, letterSpacing: '0.12em',
          textTransform: 'uppercase', textAlign: 'center', marginTop: 12,
        }}>{sub}</div>
      )}
    </div>
  );
}

// ── O1 · Value proposition ──────────────────────────────────────────────────
function TauOnboardValue() {
  return (
    <TauDevice>
      <OnboardTop step={0} onBack={false} />
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '0 32px',
      }}>
        {/* logo */}
        <img src="tau-logo.png" alt="TAU" style={{
          width: 188, height: 'auto', display: 'block',
          marginBottom: 40, marginLeft: -4,
        }} />
        <div style={{
          fontFamily: TAU.font, fontSize: 32, fontWeight: 500, lineHeight: 1.18,
          letterSpacing: -0.8, color: TAU.ink, marginBottom: 16,
        }}>Your private AI that<br/>remembers you.</div>
        <div style={{
          fontFamily: TAU.font, fontSize: 17, lineHeight: 1.5,
          letterSpacing: -0.2, color: TAU.dim, maxWidth: 300,
        }}>Nothing ever leaves your phone. No cloud, no internet required.</div>
      </div>
      <div style={{ position: 'absolute', bottom: 116, left: 0, right: 0 }}>
        <StepDots step={0} />
      </div>
      <PrimaryBtn sub="">Begin</PrimaryBtn>
    </TauDevice>
  );
}

// ── O2 · Login / Register ───────────────────────────────────────────────────
function TauOnboardAuth({ mode = 'signin' }) {
  const register = mode === 'register';
  const verify = mode === 'verify';
  const Field = ({ label, value, dots, caret }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        fontFamily: TAU.mono, fontSize: 10, color: TAU.faint, letterSpacing: '0.14em',
        textTransform: 'uppercase', marginBottom: 8,
      }}>{label}</div>
      <div style={{
        display: 'flex', alignItems: 'center',
        padding: '13px 16px', borderRadius: 12,
        background: TAU.surface, border: `1px solid ${caret ? TAU.borderHi : TAU.border}`,
      }}>
        <span style={{
          flex: 1, fontFamily: dots ? TAU.mono : TAU.font, fontSize: dots ? 14 : 15,
          letterSpacing: dots ? '0.18em' : -0.1, color: value ? TAU.ink : TAU.faint,
        }}>{value}</span>
        {caret && <span style={{ width: 2, height: 18, background: TAU.ink, animation: 'tauPulse 1s steps(2) infinite' }} />}
      </div>
    </div>
  );

  // ── Verify-email-code screen (after Receive my code) ──
  if (verify) {
    return (
      <TauDevice>
        <OnboardTop step={1} />
        <div style={{ padding: '40px 32px 0' }}>
          <div style={{
            fontFamily: TAU.font, fontSize: 26, fontWeight: 500, lineHeight: 1.2,
            letterSpacing: -0.5, color: TAU.ink, marginBottom: 10,
          }}>Check your email</div>
          <div style={{
            fontFamily: TAU.font, fontSize: 14, lineHeight: 1.5,
            color: TAU.dim, marginBottom: 36, maxWidth: 300,
          }}>We sent a 6-digit code to <span style={{ color: TAU.ink }}>hadrien@vecorps.com</span>. Enter it below to confirm your address.</div>

          <div style={{
            fontFamily: TAU.mono, fontSize: 10, color: TAU.faint, letterSpacing: '0.14em',
            textTransform: 'uppercase', marginBottom: 10,
          }}>Verification code</div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
            {['4','7','2','','',''].map((d, i) => (
              <div key={i} style={{
                flex: 1, height: 56, borderRadius: 10,
                background: TAU.surface, border: `1px solid ${i === 3 ? TAU.borderHi : TAU.border}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: TAU.mono, fontSize: 24, color: d ? TAU.ink : TAU.faint,
                letterSpacing: '0.04em',
              }}>
                {d || (i === 3 ? <span style={{ width: 2, height: 22, background: TAU.ink, animation: 'tauPulse 1s steps(2) infinite' }} /> : '')}
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center' }}>
            <span style={{
              fontFamily: TAU.font, fontSize: 13, color: TAU.dim, letterSpacing: -0.1,
            }}>Didn't get it? </span>
            <span style={{
              fontFamily: TAU.font, fontSize: 13, color: TAU.ink, letterSpacing: -0.1,
              textDecoration: 'underline', textUnderlineOffset: 3,
            }}>Resend code</span>
          </div>
        </div>
        <PrimaryBtn>Verify &amp; continue</PrimaryBtn>
      </TauDevice>
    );
  }

  return (
    <TauDevice>
      <OnboardTop step={1} />
      <div style={{ padding: '40px 32px 0' }}>
        <div style={{
          fontFamily: TAU.font, fontSize: 26, fontWeight: 500, lineHeight: 1.2,
          letterSpacing: -0.5, color: TAU.ink, marginBottom: 10,
        }}>{register ? 'Create your account' : 'Welcome back'}</div>
        <div style={{
          fontFamily: TAU.font, fontSize: 14, lineHeight: 1.5,
          color: TAU.dim, marginBottom: 28, maxWidth: 290,
        }}>Your account only carries your license. Conversations and memories never leave the device.</div>

        <Field label="Email" value="hadrien@vecorps.com" />
        <Field label="Password" value="••••••••••••" dots caret={register} />

        {!register && (
          <div style={{ textAlign: 'right', marginTop: -6 }}>
            <span style={{
              fontFamily: TAU.font, fontSize: 13, color: TAU.dim, letterSpacing: -0.1,
              textDecoration: 'underline', textUnderlineOffset: 3,
            }}>Forgot password?</span>
          </div>
        )}

        {/* divider + Apple */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '26px 0' }}>
          <div style={{ flex: 1, height: 1, background: TAU.border }} />
          <span style={{ fontFamily: TAU.mono, fontSize: 9.5, color: TAU.faint, letterSpacing: '0.14em' }}>OR</span>
          <div style={{ flex: 1, height: 1, background: TAU.border }} />
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          padding: '14px', borderRadius: 12,
          background: 'transparent', border: `1px solid ${TAU.borderHi}`,
          marginBottom: 10,
        }}>
          <svg width="16" height="19" viewBox="0 0 16 19" fill={TAU.ink}><path d="M13.1 10c0-2 1.6-2.9 1.7-3-0.9-1.4-2.4-1.5-2.9-1.6-1.2-0.1-2.4 0.7-3 0.7-0.6 0-1.6-0.7-2.6-0.7-1.3 0-2.6 0.8-3.3 2-1.4 2.4-0.4 6 1 8 0.7 1 1.4 2 2.4 2 1 0 1.3-0.6 2.5-0.6 1.2 0 1.5 0.6 2.5 0.6 1 0 1.7-0.9 2.3-1.9 0.7-1.1 1-2.2 1-2.2s-1.9-0.7-1.9-2.9zM11.2 4.1c0.5-0.6 0.9-1.5 0.8-2.4-0.8 0-1.7 0.5-2.2 1.2-0.5 0.6-0.9 1.5-0.8 2.3 0.9 0.1 1.8-0.4 2.3-1.1z"/></svg>
          <span style={{ fontFamily: TAU.font, fontSize: 14.5, fontWeight: 500, color: TAU.ink, letterSpacing: -0.1 }}>Continue with Apple</span>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          padding: '14px', borderRadius: 12,
          background: 'transparent', border: `1px solid ${TAU.borderHi}`,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09A6.97 6.97 0 015.5 12c0-.72.13-1.43.34-2.09V7.07H2.18A11.96 11.96 0 001 12c0 1.94.46 3.77 1.18 5.07l3.66-2.98z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
          <span style={{ fontFamily: TAU.font, fontSize: 14.5, fontWeight: 500, color: TAU.ink, letterSpacing: -0.1 }}>Continue with Google</span>
        </div>
      </div>

      {/* toggle sign-in / register */}
      <div style={{ position: 'absolute', bottom: 112, left: 0, right: 0, textAlign: 'center' }}>
        <span style={{ fontFamily: TAU.font, fontSize: 13, color: TAU.faint, letterSpacing: -0.1 }}>
          {register ? 'Already have an account? ' : 'New to TAU? '}
        </span>
        <span style={{
          fontFamily: TAU.font, fontSize: 13, color: TAU.ink, letterSpacing: -0.1,
          textDecoration: 'underline', textUnderlineOffset: 3,
        }}>{register ? 'Sign in' : 'Create account'}</span>
      </div>
      <PrimaryBtn>{register ? 'Receive my code' : 'Sign in'}</PrimaryBtn>
    </TauDevice>
  );
}

// ── O3 · Name entry ─────────────────────────────────────────────────────────
function TauOnboardName() {
  return (
    <TauDevice>
      <OnboardTop step={2} />
      <div style={{ padding: '48px 32px 0' }}>
        <div style={{
          fontFamily: TAU.font, fontSize: 26, fontWeight: 500, lineHeight: 1.2,
          letterSpacing: -0.5, color: TAU.ink, marginBottom: 12,
        }}>What should TAU<br/>call you?</div>
        <div style={{
          fontFamily: TAU.font, fontSize: 15, lineHeight: 1.5,
          color: TAU.dim, marginBottom: 44, maxWidth: 290,
        }}>This stays on your device. You can change it anytime in Settings.</div>

        {/* text field */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 2,
          padding: '0 0 14px', borderBottom: `1.5px solid ${TAU.ink}`,
        }}>
          <span style={{ fontFamily: TAU.font, fontSize: 24, color: TAU.ink, letterSpacing: -0.4 }}>Hadrien</span>
          <span style={{
            width: 2, height: 26, background: TAU.ink, marginLeft: 2,
            animation: 'tauPulse 1s steps(2) infinite',
          }} />
        </div>

      </div>
      <div style={{ position: 'absolute', bottom: 116, left: 0, right: 0 }}>
        <StepDots step={2} />
      </div>
      <PrimaryBtn>Continue</PrimaryBtn>
    </TauDevice>
  );
}

// ── O4 · Language ───────────────────────────────────────────────────────────
function TauOnboardLang() {
  const langs = [
    { code: 'EN', label: 'English', sub: 'English', sel: true },
    { code: 'FR', label: 'Français', sub: 'French', sel: false },
    { code: 'AU', label: 'Automatic', sub: 'Match system language', sel: false },
  ];
  return (
    <TauDevice>
      <OnboardTop step={3} />
      <div style={{ padding: '48px 24px 0' }}>
        <div style={{
          fontFamily: TAU.font, fontSize: 26, fontWeight: 500, lineHeight: 1.2,
          letterSpacing: -0.5, color: TAU.ink, marginBottom: 12, padding: '0 8px',
        }}>Choose your<br/>app language</div>
        <div style={{
          fontFamily: TAU.font, fontSize: 15, lineHeight: 1.5,
          color: TAU.dim, marginBottom: 36, maxWidth: 290, padding: '0 8px',
        }}>The interface and menus will appear in this language.</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {langs.map((l) => (
            <div key={l.code} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '16px 18px', borderRadius: 14,
              background: l.sel ? TAU.surfaceHi : TAU.surface,
              border: `1px solid ${l.sel ? TAU.borderHi : TAU.border}`,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: TAU.bg, border: `1px solid ${TAU.border}`,
                fontFamily: TAU.mono, fontSize: 12, letterSpacing: '0.08em', color: TAU.dim,
              }}>{l.code}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: TAU.font, fontSize: 16, fontWeight: 500, color: TAU.ink, letterSpacing: -0.2 }}>{l.label}</div>
                <div style={{ fontFamily: TAU.font, fontSize: 12.5, color: TAU.dim, marginTop: 2 }}>{l.sub}</div>
              </div>
              <div style={{
                width: 20, height: 20, borderRadius: 999,
                border: `1.5px solid ${l.sel ? TAU.ink : TAU.borderHi}`,
                background: l.sel ? TAU.ink : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {l.sel && <svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2 5.5l2.5 2.5L9 3" stroke="#000" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 116, left: 0, right: 0 }}>
        <StepDots step={3} />
      </div>
      <PrimaryBtn>Continue</PrimaryBtn>
    </TauDevice>
  );
}

// ── O5 · Privacy explainer ──────────────────────────────────────────────────
function TauOnboardPrivacy() {
  const points = [
    {
      title: 'Runs on-device',
      body: 'The entire model lives on your iPhone. Your words are processed by the Neural Engine, never a server.',
      icon: (<><rect x="6" y="3" width="12" height="18" rx="2.5" stroke={TAU.ink} strokeWidth="1.4"/><path d="M10 18h4" stroke={TAU.ink} strokeWidth="1.4" strokeLinecap="round"/></>),
    },
    {
      title: 'Works offline',
      body: 'Turn on airplane mode and TAU still answers. No connection is ever needed after setup.',
      icon: (<><path d="M3 12a9 9 0 0118 0" stroke={TAU.ink} strokeWidth="1.4" strokeLinecap="round"/><path d="M3 4l16 16" stroke={TAU.ink} strokeWidth="1.4" strokeLinecap="round"/></>),
    },
    {
      title: 'TAU truly knows you',
      body: 'No other AI remembers your habits, your tone, your context. TAU builds a private understanding that deepens over time.',
      icon: (<><circle cx="12" cy="12" r="9" stroke={TAU.ink} strokeWidth="1.4"/><path d="M12 8v4l3 2" stroke={TAU.ink} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></>),
    },
  ];
  return (
    <TauDevice>
      <OnboardTop step={4} />
      <div style={{ padding: '40px 32px 0' }}>
        <div style={{
          fontFamily: TAU.font, fontSize: 26, fontWeight: 500, lineHeight: 1.2,
          letterSpacing: -0.5, color: TAU.ink, marginBottom: 32,
        }}>Everything stays<br/>on your phone</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          {points.map((p, i) => (
            <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: TAU.surface, border: `1px solid ${TAU.border}`,
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">{p.icon}</svg>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: TAU.font, fontSize: 16, fontWeight: 500, color: TAU.ink, letterSpacing: -0.2, marginBottom: 4 }}>{p.title}</div>
                <div style={{ fontFamily: TAU.font, fontSize: 13.5, lineHeight: 1.5, color: TAU.dim, letterSpacing: -0.05 }}>{p.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 116, left: 0, right: 0 }}>
        <StepDots step={4} />
      </div>
      <PrimaryBtn>I understand</PrimaryBtn>
    </TauDevice>
  );
}

// ── O6 · Model download ─────────────────────────────────────────────────────
function TauOnboardDownload() {
  const pct = 61;
  return (
    <TauDevice>
      <OnboardTop step={5} />
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '0 32px',
      }}>
        <div style={{
          fontFamily: TAU.font, fontSize: 26, fontWeight: 500, lineHeight: 1.2,
          letterSpacing: -0.5, color: TAU.ink, marginBottom: 10,
        }}>Setting up TAU</div>
        <div style={{
          fontFamily: TAU.font, fontSize: 15, lineHeight: 1.5,
          color: TAU.dim, marginBottom: 44, maxWidth: 300,
        }}>Downloading the model once. After this, TAU works entirely offline — forever.</div>

        {/* progress */}
        <div style={{ marginBottom: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontFamily: TAU.mono, fontSize: 13, color: TAU.ink, letterSpacing: '0.04em' }}>1.4 GB <span style={{ color: TAU.faint }}>/ 2.3 GB</span></span>
          <span style={{ fontFamily: TAU.mono, fontSize: 13, color: TAU.ink, letterSpacing: '0.04em' }}>{pct}%</span>
        </div>
        <div style={{
          height: 6, borderRadius: 99, background: TAU.surfaceHi,
          border: `1px solid ${TAU.border}`, overflow: 'hidden',
        }}>
          <div style={{ width: pct + '%', height: '100%', background: TAU.ink, borderRadius: 99 }} />
        </div>
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
          <Spinner />
          <span style={{ fontFamily: TAU.mono, fontSize: 10.5, color: TAU.faint, letterSpacing: '0.1em', textTransform: 'uppercase' }}>≈ 2 min remaining · 18 MB/s</span>
        </div>

        {/* wifi note */}
        <div style={{
          marginTop: 32, display: 'flex', gap: 12, alignItems: 'center',
          padding: '14px 16px', borderRadius: 12,
          background: TAU.surface, border: `1px solid ${TAU.border}`,
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M5 12.5a10 10 0 0114 0" stroke={TAU.dim} strokeWidth="1.4" strokeLinecap="round"/>
            <path d="M8 15.5a6 6 0 018 0" stroke={TAU.dim} strokeWidth="1.4" strokeLinecap="round"/>
            <circle cx="12" cy="18.5" r="1.4" fill={TAU.dim}/>
          </svg>
          <span style={{ fontFamily: TAU.font, fontSize: 13, color: TAU.dim, letterSpacing: -0.1, lineHeight: 1.4 }}>
            Wi-Fi recommended. You can keep using your phone — this continues in the background.
          </span>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 116, left: 0, right: 0 }}>
        <StepDots step={5} />
      </div>
      <div style={{ position: 'absolute', bottom: 34, left: 0, right: 0, padding: '0 24px', textAlign: 'center' }}>
        <span style={{ fontFamily: TAU.mono, fontSize: 11, color: TAU.faint, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Pause download</span>
      </div>
    </TauDevice>
  );
}

function Spinner() {
  return (
    <svg width="13" height="13" viewBox="0 0 16 16" style={{ animation: 'tauSpin 0.9s linear infinite' }}>
      <circle cx="8" cy="8" r="6" stroke={TAU.ghost} strokeWidth="2" fill="none"/>
      <path d="M8 2a6 6 0 016 6" stroke={TAU.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

// ── Paywall / Upgrade ───────────────────────────────────────────────────────
function TauPaywall() {
  const rows = [
    { label: 'Single persistent chat', free: true, pro: true },
    { label: 'On-device & offline', free: true, pro: true },
    { label: 'Messages', free: 'Limited', pro: 'Unlimited' },
    { label: 'Memory entries', free: '250', pro: 'Unlimited' },
    { label: 'Vanish mode', free: false, pro: true },
    { label: 'Priority model updates', free: false, pro: true },
    { label: 'Sync across devices', free: false, pro: 'Soon' },
    { label: 'Custom personas', free: false, pro: 'Soon' },
  ];
  const Check = ({ on }) => on
    ? <svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M3 7.5l3 3L12 4" stroke={TAU.ink} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
    : <span style={{ width: 11, height: 1.5, background: TAU.ghost, display: 'block', borderRadius: 2 }} />;

  return (
    <TauDevice>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 24px 0', marginTop: 40,
      }}>
        <div style={{ width: 36 }} />
        <div style={{ fontFamily: TAU.mono, fontSize: 12, letterSpacing: '0.22em', color: TAU.dim }}>TAU PRO</div>
        <button style={{
          width: 36, height: 36, borderRadius: 999, background: 'transparent', border: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke={TAU.faint} strokeWidth="1.4" strokeLinecap="round"/></svg>
        </button>
      </div>

      <div style={{ padding: '28px 24px 0' }}>
        <div style={{
          fontFamily: TAU.font, fontSize: 27, fontWeight: 500, lineHeight: 1.18,
          letterSpacing: -0.6, color: TAU.ink, marginBottom: 8,
        }}>A mind without<br/>a memory limit.</div>
        <div style={{
          fontFamily: TAU.font, fontSize: 14.5, lineHeight: 1.5,
          color: TAU.dim, marginBottom: 28, maxWidth: 300,
        }}>Free keeps your last 250 memories. Pro never forgets.</div>

        {/* comparison table */}
        <div style={{
          borderRadius: 16, background: TAU.surface, border: `1px solid ${TAU.border}`,
          overflow: 'hidden',
        }}>
          {/* header */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 64px 78px', alignItems: 'center', padding: '12px 16px', borderBottom: `1px solid ${TAU.border}` }}>
            <span />
            <span style={{ fontFamily: TAU.mono, fontSize: 10, color: TAU.faint, letterSpacing: '0.14em', textAlign: 'center' }}>FREE</span>
            <span style={{ fontFamily: TAU.mono, fontSize: 10, color: TAU.ink, letterSpacing: '0.14em', textAlign: 'center' }}>PRO</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 64px 78px', alignItems: 'center',
              padding: '12px 16px',
              borderBottom: i < rows.length - 1 ? `1px solid ${TAU.border}` : 'none',
            }}>
              <span style={{ fontFamily: TAU.font, fontSize: 13.5, color: TAU.ink, letterSpacing: -0.1 }}>{r.label}</span>
              <span style={{ display: 'flex', justifyContent: 'center' }}>
                {typeof r.free === 'string'
                  ? <span style={{ fontFamily: TAU.mono, fontSize: 11, color: TAU.dim }}>{r.free}</span>
                  : <Check on={r.free} />}
              </span>
              <span style={{ display: 'flex', justifyContent: 'center' }}>
                {typeof r.pro === 'string'
                  ? <span style={{ fontFamily: TAU.mono, fontSize: 11, color: r.pro === 'Soon' ? TAU.faint : TAU.ink }}>{r.pro}</span>
                  : <Check on={r.pro} />}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* subscribe */}
      <div style={{ position: 'absolute', bottom: 34, left: 0, right: 0, padding: '0 24px',
        background: `linear-gradient(to top, ${TAU.bg} 70%, transparent)`, paddingTop: 20 }}>
        <button style={{
          width: '100%', padding: '16px', borderRadius: 14,
          background: TAU.ink, color: '#000', border: 'none',
          fontFamily: TAU.font, fontSize: 16, fontWeight: 500, letterSpacing: -0.2,
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <span>Subscribe to Pro</span>
          <span style={{ fontFamily: TAU.mono, fontSize: 13, opacity: 0.6 }}>€9 / MO</span>
        </button>
        <div style={{
          fontFamily: TAU.mono, fontSize: 9.5, color: TAU.faint, letterSpacing: '0.1em',
          textTransform: 'uppercase', textAlign: 'center', marginTop: 12,
        }}>Cancel anytime · billed via App Store</div>
      </div>
    </TauDevice>
  );
}

Object.assign(window, {
  TauOnboardValue, TauOnboardAuth, TauOnboardName, TauOnboardLang, TauOnboardPrivacy,
  TauOnboardDownload, TauPaywall,
});