// Dateora — onboarding screens: Welcome, SignUp, Plan+Trial, Payment

// ─── Welcome ──────────────────────────────────────────────────────
const WelcomeScreen = ({ t, onStart, onSignIn }) => {
  if (t.id === 'mentor') {
    return (
      <div style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: '1.1fr 1fr' }}>
        <div style={{ padding: '48px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <Wordmark t={t} />
          <div style={{ maxWidth: 480 }}>
            <Eyebrow t={t} style={{ marginBottom: 24 }}>For men who freeze</Eyebrow>
            <Display t={t} size={64} style={{ marginBottom: 24 }}>{t.welcomeHeadline}</Display>
            <p style={{ color: t.muted, fontSize: 17, lineHeight: 1.6, maxWidth: 440, marginBottom: 36, textWrap: 'pretty' }}>{t.welcomeSub}</p>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <Btn t={t} variant="primary" size="lg" onClick={onStart}>{t.welcomeCTA}</Btn>
              <Btn t={t} variant="ghost" onClick={onSignIn}>{t.welcomeAlt}</Btn>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 32, fontSize: 12, color: t.subtle, fontFamily: t.fontBody }}>
            <span>14-day trial · no card today</span>
            <span>Cancel from any page</span>
          </div>
        </div>
        <div style={{ position: 'relative', overflow: 'hidden', borderLeft: '1px solid ' + t.border }}>
          <AvatarPortrait t={t} />
          <div style={{ position: 'absolute', bottom: 32, left: 32, right: 32 }}>
            <div style={{
              background: 'rgba(20,17,15,0.7)', backdropFilter: 'blur(20px)',
              border: '1px solid ' + t.border, borderRadius: t.radiusLg,
              padding: '16px 20px',
            }}>
              <div style={{ fontFamily: t.fontDisplay, fontStyle: 'italic', fontSize: 17, color: t.ink, lineHeight: 1.4, marginBottom: 8 }}>
                &ldquo;Tell me about a real situation. Where do you freeze?&rdquo;
              </div>
              <div style={{ fontSize: 12, color: t.muted, display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: t.accent, animation: 'dateora-pulse 1.6s infinite' }}></span>
                Adam · your coach
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (t.id === 'editorial') {
    return (
      <div style={{ width: '100%', height: '100%', padding: '36px 64px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 24, borderBottom: '1px solid ' + t.borderStrong, marginBottom: 48 }}>
          <Wordmark t={t} />
          <div style={{ display: 'flex', gap: 28, fontSize: 13, color: t.muted, fontFamily: t.fontBody, letterSpacing: '0.04em' }}>
            <span>Vol. 01</span>
            <span>·</span>
            <span style={{ fontStyle: 'italic', fontFamily: t.fontDisplay, fontSize: 16 }}>The conversation issue</span>
          </div>
        </div>
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow t={t} style={{ marginBottom: 28 }}>Feature · Coaching</Eyebrow>
            <Display t={t} size={78} style={{ marginBottom: 28 }}>{t.welcomeHeadline}</Display>
            <p style={{ color: t.ink, fontSize: 18, lineHeight: 1.55, maxWidth: 540, marginBottom: 36, fontFamily: t.fontBody, textWrap: 'pretty' }}>{t.welcomeSub}</p>
            <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
              <Btn t={t} variant="primary" size="lg" onClick={onStart}>{t.welcomeCTA} <span style={{ marginLeft: 4 }}>→</span></Btn>
              <Btn t={t} variant="ghost" onClick={onSignIn}>{t.welcomeAlt}</Btn>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{
              aspectRatio: '3/4', background: t.surface, borderRadius: t.radius, overflow: 'hidden', position: 'relative',
              border: '1px solid ' + t.borderStrong,
            }}>
              <AvatarPortrait t={t} />
            </div>
            <div style={{ marginTop: 12, fontSize: 12, color: t.muted, fontFamily: t.fontBody, letterSpacing: '0.04em', display: 'flex', justifyContent: 'space-between' }}>
              <span>Pictured: Adam, on-call coach</span>
              <span style={{ fontStyle: 'italic', fontFamily: t.fontDisplay, fontSize: 14 }}>p. 03</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // studio
  return (
    <div style={{ width: '100%', height: '100%', padding: '32px 56px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Wordmark t={t} />
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          <span style={{ fontSize: 13, color: t.muted, fontFamily: t.fontBody }}>Already in?</span>
          <Btn t={t} variant="secondary" size="sm" onClick={onSignIn}>Log in</Btn>
        </div>
      </div>
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center', paddingTop: 24 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 100,
            background: t.accentSoft, color: t.accent, fontSize: 12, fontFamily: t.fontMono, fontWeight: 500, marginBottom: 28 }}>
            <Icon.spark /> Beta · invite-only
          </div>
          <Display t={t} size={72} style={{ marginBottom: 24 }}>
            Real reps.<br />
            <span style={{ color: t.accent }}>With a real coach.</span><br />
            Until the freeze is gone.
          </Display>
          <p style={{ color: t.muted, fontSize: 17, lineHeight: 1.55, maxWidth: 480, marginBottom: 32, textWrap: 'pretty' }}>{t.welcomeSub}</p>
          <div style={{ display: 'flex', gap: 12 }}>
            <Btn t={t} variant="primary" size="lg" onClick={onStart}>{t.welcomeCTA}</Btn>
            <Btn t={t} variant="secondary" size="lg" onClick={onStart}>See how it works</Btn>
          </div>
          <div style={{ display: 'flex', gap: 24, marginTop: 36, fontSize: 12, color: t.subtle, fontFamily: t.fontMono }}>
            <span>14 days free</span>
            <span>·</span>
            <span>No card today</span>
            <span>·</span>
            <span>Cancel anytime</span>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{
            aspectRatio: '4/5', borderRadius: t.radiusXl, overflow: 'hidden', position: 'relative',
            border: '1px solid ' + t.border, background: t.surface,
            boxShadow: '0 30px 80px -20px rgba(255,90,54,0.15), 0 0 0 1px ' + t.border,
          }}>
            <AvatarPortrait t={t} />
            <div style={{ position: 'absolute', top: 16, left: 16, display: 'flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 100, background: 'rgba(10,10,11,0.6)', backdropFilter: 'blur(10px)', fontSize: 11, fontFamily: t.fontMono, color: t.ink }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: '#FF5A36', animation: 'dateora-pulse 1.2s infinite' }}></span>
              LIVE · Adam
            </div>
            <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, padding: 14, borderRadius: t.radiusLg, background: 'rgba(19,19,20,0.85)', backdropFilter: 'blur(20px)', border: '1px solid ' + t.border }}>
              <div style={{ fontSize: 14, color: t.ink, lineHeight: 1.4 }}>&ldquo;When's the last time you wanted to say hi and didn't?&rdquo;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─── Avatar portrait card ─────────────────────────────────────────
const AvatarPortrait = ({ t }) => {
  // Three different unsplash photos per direction so each direction
  // feels visually distinct. All cropped portrait, men 30s-40s.
  const src = {
    mentor: 'https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=900&q=80',
    editorial: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=900&q=80',
    studio: 'https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?auto=format&fit=crop&w=900&q=80',
  }[t.id];
  const overlay = {
    mentor: 'linear-gradient(180deg, transparent 30%, rgba(20,17,15,0.85) 100%), linear-gradient(110deg, rgba(212,154,92,0.10), transparent 40%)',
    editorial: 'linear-gradient(180deg, transparent 60%, rgba(26,23,20,0.15) 100%)',
    studio: 'linear-gradient(180deg, transparent 40%, rgba(10,10,11,0.6) 100%)',
  }[t.id];
  const filter = {
    mentor: 'saturate(0.85) contrast(1.05) brightness(0.9)',
    editorial: 'grayscale(0.15) contrast(1.05)',
    studio: 'saturate(1.1) contrast(1.1)',
  }[t.id];
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <img src={src} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }}
        style={{ width: '100%', height: '100%', objectFit: 'cover', filter, display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0, background: overlay, pointerEvents: 'none' }}></div>
    </div>
  );
};

// ─── SignUp ───────────────────────────────────────────────────────
const SignUpScreen = ({ t, onSubmit, onBack, mode = 'signup' }) => {
  const [email, setEmail] = React.useState(mode === 'signin' ? 'you@example.com' : '');
  const [pw, setPw] = React.useState(mode === 'signin' ? '••••••••' : '');
  const isSignup = mode === 'signup';
  const title = isSignup ? 'Create your account' : 'Welcome back';
  const sub = isSignup ? 'Email and a password. Nothing else right now.' : 'Sign in to continue with Adam.';
  const cta = isSignup ? 'Continue' : 'Sign in';
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex' }}>
      <div style={{ flex: 1, padding: '36px 56px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Wordmark t={t} size={16} />
          <Btn t={t} variant="ghost" size="sm" onClick={onBack}><Icon.back /> Back</Btn>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 380, margin: '0 auto', width: '100%' }}>
          <Eyebrow t={t} style={{ marginBottom: 16 }}>{isSignup ? 'Step 1 of 3' : 'Sign in'}</Eyebrow>
          <Display t={t} size={t.id === 'editorial' ? 52 : 38} style={{ marginBottom: 12 }}>{title}</Display>
          <p style={{ color: t.muted, fontSize: 15, lineHeight: 1.5, marginBottom: 32 }}>{sub}</p>
          <form onSubmit={(e) => { e.preventDefault(); onSubmit({ email }); }} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Field t={t} label="Email" type="email" value={email} onChange={setEmail} placeholder="you@example.com" />
            <Field t={t} label="Password" type="password" value={pw} onChange={setPw} placeholder="At least 8 characters" />
            <Btn t={t} variant="primary" size="lg" full type="submit" onClick={() => onSubmit({ email })}>{cta}</Btn>
          </form>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, margin: '24px 0', color: t.subtle, fontSize: 12 }}>
            <div style={{ flex: 1, height: 1, background: t.border }}></div>
            <span>or</span>
            <div style={{ flex: 1, height: 1, background: t.border }}></div>
          </div>
          <Btn t={t} variant="secondary" full onClick={() => onSubmit({ email: 'google@example.com' })}>
            <GoogleG /> Continue with Google
          </Btn>
          <div style={{ marginTop: 24, fontSize: 13, color: t.muted, textAlign: 'center' }}>
            {isSignup ? 'Have an account? ' : 'New here? '}
            <span onClick={onBack} style={{ color: t.accent, cursor: 'pointer', fontWeight: 500 }}>
              {isSignup ? 'Sign in' : 'Create one'}
            </span>
          </div>
        </div>
        <div style={{ fontSize: 11, color: t.subtle, textAlign: 'center' }}>
          By continuing you agree to Dateora's Terms and acknowledge our Privacy Policy.
        </div>
      </div>
      {t.id !== 'studio' && (
        <div style={{ width: '42%', position: 'relative', overflow: 'hidden', borderLeft: '1px solid ' + t.border }}>
          <AvatarPortrait t={t} />
        </div>
      )}
    </div>
  );
};

const GoogleG = () => (
  <svg width="16" height="16" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.92a8.78 8.78 0 0 0 2.68-6.6z" fill="#4285F4"/>
    <path d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.83.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.32A9 9 0 0 0 9 18z" fill="#34A853"/>
    <path d="M3.97 10.72A5.41 5.41 0 0 1 3.68 9c0-.6.1-1.18.29-1.72V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.04l3.01-2.32z" fill="#FBBC05"/>
    <path d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.59C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.96L3.97 7.28C4.68 5.16 6.66 3.58 9 3.58z" fill="#EA4335"/>
  </svg>
);

// ─── Plan + Trial ─────────────────────────────────────────────────
const PlanScreen = ({ t, onStart, onBack }) => {
  const features = [
    'Unlimited sessions with Adam',
    'Voice and text conversations',
    'Saved history — review your reps',
    'Weekly progress nudges by email',
    'Cancel from any page, two clicks',
  ];

  if (t.id === 'editorial') {
    return (
      <div style={{ width: '100%', height: '100%', padding: '36px 64px', overflow: 'auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 24, borderBottom: '1px solid ' + t.borderStrong, marginBottom: 56 }}>
          <Wordmark t={t} size={16} />
          <Btn t={t} variant="ghost" size="sm" onClick={onBack}><Icon.back /> Back</Btn>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, maxWidth: 1100, margin: '0 auto', alignItems: 'start' }}>
          <div>
            <Eyebrow t={t}>{t.planEyebrow} · Vol. 01</Eyebrow>
            <Display t={t} size={68} style={{ margin: '16px 0 24px' }}>{t.planTitle}</Display>
            <p style={{ color: t.ink, fontSize: 17, lineHeight: 1.6, maxWidth: 480, fontFamily: t.fontBody }}>{t.planBody}</p>
            <div style={{ marginTop: 36, fontSize: 13, color: t.muted, fontFamily: t.fontBody, fontStyle: 'italic', borderLeft: '2px solid ' + t.accent, paddingLeft: 16 }}>
              &ldquo;Subscription pricing for a coach is unusual. We chose it because reps must be cheap to take.&rdquo; — A note from the editor.
            </div>
          </div>
          <div style={{ background: t.surface, padding: '40px 36px', border: '1px solid ' + t.borderStrong }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
              <span style={{ fontFamily: t.fontDisplay, fontSize: 72, lineHeight: 1, letterSpacing: '-0.02em' }}>{t.planPrice}</span>
              <span style={{ fontSize: 14, color: t.muted, fontFamily: t.fontBody }}>{t.planPeriod}</span>
            </div>
            <div style={{ fontSize: 14, color: t.accent, fontWeight: 600, fontFamily: t.fontBody, marginBottom: 28 }}>14 days free, first</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32, paddingTop: 24, borderTop: '1px solid ' + t.border }}>
              {features.map((f) => (
                <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15, color: t.ink, fontFamily: t.fontBody }}>
                  <div style={{ marginTop: 4, color: t.accent }}><Icon.check /></div>
                  {f}
                </div>
              ))}
            </div>
            <Btn t={t} variant="primary" size="lg" full onClick={onStart}>{t.planCTA}</Btn>
            <div style={{ fontSize: 12, color: t.subtle, marginTop: 14, textAlign: 'center', fontStyle: 'italic', fontFamily: t.fontDisplay, fontSize: 14 }}>{t.planFinePrint}</div>
          </div>
        </div>
      </div>
    );
  }

  // mentor + studio (mostly aligned layout, tokens diverge)
  return (
    <div style={{ width: '100%', height: '100%', padding: '36px 56px', overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
        <Wordmark t={t} size={16} />
        <Btn t={t} variant="ghost" size="sm" onClick={onBack}><Icon.back /> Back</Btn>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', maxWidth: 540, margin: '0 auto', width: '100%' }}>
        <Eyebrow t={t} style={{ marginBottom: 12 }}>Step 2 of 3 · {t.planEyebrow}</Eyebrow>
        <Display t={t} size={t.id === 'studio' ? 44 : 48} style={{ marginBottom: 16, textAlign: 'center' }}>{t.planTitle}</Display>
        <p style={{ color: t.muted, fontSize: 16, lineHeight: 1.55, textAlign: 'center', marginBottom: 36, textWrap: 'pretty' }}>{t.planBody}</p>
        <div style={{
          width: '100%', background: t.surface, border: '1px solid ' + (t.id === 'studio' ? t.accent : t.borderStrong),
          borderRadius: t.radiusXl, padding: 32, position: 'relative',
          boxShadow: t.id === 'studio' ? '0 0 40px -10px ' + t.accentSoft : 'none',
        }}>
          {t.id === 'studio' && (
            <div style={{ position: 'absolute', top: -10, left: 24, padding: '3px 10px', background: t.accent, color: t.accentInk, fontSize: 11, fontFamily: t.fontMono, fontWeight: 600, borderRadius: 100, letterSpacing: '0.05em' }}>FREE FOR 14 DAYS</div>
          )}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24, paddingBottom: 24, borderBottom: '1px solid ' + t.border }}>
            <div>
              <div style={{ fontSize: 13, color: t.muted, marginBottom: 6, fontFamily: t.fontBody }}>Membership</div>
              <div style={{ fontFamily: t.fontDisplay, fontStyle: t.displayStyle, fontWeight: t.displayWeight, fontSize: 24, color: t.ink, letterSpacing: t.displayLetterSpacing }}>Dateora · Unlimited</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: t.fontDisplay, fontWeight: t.id === 'studio' ? 700 : 400, fontStyle: t.displayStyle, fontSize: 44, lineHeight: 1, color: t.ink }}>{t.planPrice}</div>
              <div style={{ fontSize: 12, color: t.muted, marginTop: 2 }}>{t.planPeriod}</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
            {features.map((f) => (
              <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, color: t.ink }}>
                <div style={{ width: 18, height: 18, borderRadius: 9, background: t.accentSoft, color: t.accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon.check /></div>
                {f}
              </div>
            ))}
          </div>
          <Btn t={t} variant="primary" size="lg" full onClick={onStart}>{t.planCTA}</Btn>
          <div style={{ fontSize: 12, color: t.subtle, marginTop: 14, textAlign: 'center' }}>{t.planFinePrint}</div>
        </div>
      </div>
    </div>
  );
};

// ─── Payment ─────────────────────────────────────────────────────
const PaymentScreen = ({ t, onPaid, onBack }) => {
  const [card, setCard] = React.useState('4242 4242 4242 4242');
  const [exp, setExp] = React.useState('12 / 28');
  const [cvc, setCvc] = React.useState('123');
  const [name, setName] = React.useState('');
  const [processing, setProcessing] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setProcessing(true);
    setTimeout(() => onPaid(), 1100);
  };
  return (
    <div style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: '1.1fr 1fr' }}>
      <div style={{ padding: '36px 56px', display: 'flex', flexDirection: 'column', borderRight: '1px solid ' + t.border }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 40 }}>
          <Wordmark t={t} size={16} />
          <Btn t={t} variant="ghost" size="sm" onClick={onBack}><Icon.back /> Back</Btn>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 420, margin: '0 auto', width: '100%' }}>
          <Eyebrow t={t} style={{ marginBottom: 12 }}>Step 3 of 3</Eyebrow>
          <Display t={t} size={36} style={{ marginBottom: 12 }}>Card to start your trial</Display>
          <p style={{ color: t.muted, fontSize: 14, lineHeight: 1.5, marginBottom: 28 }}>
            You won't be charged today. We'll email you 3 days before the trial ends.
          </p>
          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Field t={t} label="Card number" value={card} onChange={setCard} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Field t={t} label="Expiry" value={exp} onChange={setExp} />
              <Field t={t} label="CVC" value={cvc} onChange={setCvc} />
            </div>
            <Field t={t} label="Name on card" value={name} onChange={setName} placeholder="As shown on card" />
            <Btn t={t} variant="primary" size="lg" full type="submit" onClick={submit}>
              {processing ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Spinner /> Starting trial…</span> : 'Start 14-day trial'}
            </Btn>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: t.subtle, justifyContent: 'center', marginTop: 6 }}>
              <Icon.lock /> Secured by Stripe · No charge today
            </div>
          </form>
        </div>
      </div>
      <div style={{ padding: '36px 48px', background: t.surface, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 13, color: t.muted, marginBottom: 24, fontFamily: t.fontBody, letterSpacing: '0.04em' }}>ORDER SUMMARY</div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', padding: '20px 0', borderBottom: '1px solid ' + t.border }}>
            <div>
              <div style={{ fontFamily: t.fontDisplay, fontStyle: t.displayStyle, fontWeight: t.displayWeight, fontSize: 20, color: t.ink, marginBottom: 4, letterSpacing: t.displayLetterSpacing }}>Dateora · Unlimited</div>
              <div style={{ fontSize: 13, color: t.muted }}>Monthly, after 14-day trial</div>
            </div>
            <div style={{ fontFamily: t.fontDisplay, fontSize: 22, color: t.ink, fontWeight: t.id === 'studio' ? 600 : 400 }}>{t.planPrice}</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 0', borderBottom: '1px solid ' + t.border, fontSize: 14, color: t.muted }}>
            <div>14-day free trial</div>
            <div style={{ color: t.success, fontWeight: 500 }}>−{t.planPrice}</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '20px 0', fontSize: 16, color: t.ink, fontWeight: 600 }}>
            <div>Due today</div>
            <div style={{ fontFamily: t.fontDisplay, fontSize: 24 }}>$0.00</div>
          </div>
        </div>
        <div style={{ padding: 16, background: t.surface2, borderRadius: t.radiusLg, border: '1px solid ' + t.border, fontSize: 13, color: t.muted, lineHeight: 1.5 }}>
          <div style={{ color: t.ink, fontWeight: 500, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon.spark /> First charge: 14 days from now
          </div>
          You'll receive an email 3 days before the trial ends. Cancel anytime from your account page — no charge if you do.
        </div>
      </div>
    </div>
  );
};

const Spinner = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" style={{ animation: 'dateora-spin 0.9s linear infinite' }}>
    <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="2" strokeOpacity="0.3" />
    <path d="M14 8a6 6 0 0 0-6-6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

Object.assign(window, { WelcomeScreen, SignUpScreen, PlanScreen, PaymentScreen, AvatarPortrait, Spinner, GoogleG });