// ─────────────────────────────────────────────────────────────
// LifeWheel Coach — Signup / Landing page
// Coach acquisition: hero, problem, product, privacy, pricing, signup
// ─────────────────────────────────────────────────────────────

function LWLanding() {
  const { c: cBase, fonts: fontsBase, type, lang } = useLW();
  // Re-render the entire landing on lang flips.
  void lang;
  const { w, isMobile } = useViewport();

  // ── Brutalist theme — cream paper (light) or dark paper (dark) ──
  // The coach landing has its own visual system distinct from the
  // dark-green app: mono primary, ink-press chunky shadows, hard
  // borders, ASCII section markers, MOST POPULAR rubber stamp.
  // The user picks the BACKGROUND but every other commitment stays.
  const [brutMode, setBrutMode] = useState(() => {
    try {
      const stored = localStorage.getItem('lw_coach_brutmode');
      if (stored === 'dark' || stored === 'light') return stored;
    } catch {}
    return 'light';
  });
  useEffect(() => {
    try { localStorage.setItem('lw_coach_brutmode', brutMode); } catch {}
  }, [brutMode]);

  // Light tokens — cream paper, ink-black type
  const lightTokens = {
    bg:           '#F2EBD8',
    bgSubtle:     '#EAE2CB',
    card:         '#FFFFFF',
    cardHover:    '#FFF8E5',
    elevated:     '#FFFFFF',
    overlay:      'rgba(242,235,216,0.92)',
    borderSubtle:  'rgba(26,26,26,0.10)',
    borderDefault: 'rgba(26,26,26,0.18)',
    borderStrong:  'rgba(26,26,26,0.32)',
    ink:          '#1A1A1A',
    textPrimary:   '#1A1A1A',
    textSecondary: '#4A4A40',
    textTertiary:  '#7A7468',
    textOnAccent:  '#F2EBD8',
    accent:        '#0F8F5F',
    accentHover:   '#0B6F49',
    accentMuted:   'rgba(15,143,95,0.12)',
    accentInk:     '#0B5436',
    stamp:         '#9B2C2C',  // oxblood
    flame:         '#B8501F',
    flameBg:       'rgba(184,80,31,0.10)',
    flameBorder:   'rgba(184,80,31,0.35)',
    error:         '#B53030',
    info:          '#3E60A8',
    spheres: {
      health:'#B83A3A', career:'#B8501F', money:'#B89010', love:'#A83864',
      joy:'#B8870F', growth:'#0F8F5F', people:'#3E60A8', contribution:'#6F3FB8',
    },
    shadow: 'none',
    shadowModal: '0 4px 0 0 #1A1A1A',
  };

  // Dark tokens — near-black paper, cream type. The press-shadow
  // (which was ink-on-cream) inverts to cream-on-near-black, keeping
  // the printed-stamp signature in both modes. Sphere colors brighten
  // so they pop on dark; oxblood stamp warms toward hot red.
  const darkTokens = {
    bg:           '#15140F',     // near-black with very slight warmth
    bgSubtle:     '#1C1B16',     // section
    card:         '#22211B',     // card paper
    cardHover:    '#2A2922',
    elevated:     '#22211B',
    overlay:      'rgba(21,20,15,0.92)',
    borderSubtle:  'rgba(242,235,216,0.10)',
    borderDefault: 'rgba(242,235,216,0.20)',
    borderStrong:  'rgba(242,235,216,0.36)',
    ink:          '#F2EBD8',     // cream ink (text + borders)
    textPrimary:   '#F2EBD8',
    textSecondary: '#C8BFA8',
    textTertiary:  '#8A8170',
    textOnAccent:  '#15140F',
    accent:        '#3EC08D',     // brighter neon mint pops on dark
    accentHover:   '#5BD4A0',
    accentMuted:   'rgba(62,192,141,0.16)',
    accentInk:     '#7EE0AC',     // emphasis underline color
    stamp:         '#E85555',     // hot red (oxblood is too dim on dark)
    flame:         '#E8943A',
    flameBg:       'rgba(232,148,58,0.14)',
    flameBorder:   'rgba(232,148,58,0.40)',
    error:         '#E85555',
    info:          '#5D8CE8',
    spheres: { // brighter versions for dark mode
      health:'#E85555', career:'#E8943A', money:'#E8C73A', love:'#E85D8C',
      joy:'#E8B83A', growth:'#3EC08D', people:'#5D8CE8', contribution:'#8C5DE8',
    },
    shadow: 'none',
    shadowModal: '0 4px 0 0 #F2EBD8',
  };

  const c = { ...cBase, ...(brutMode === 'dark' ? darkTokens : lightTokens) };
  const fonts = {
    ...fontsBase,
    display: '"Fraunces", "Iowan Old Style", Georgia, serif',
    app:     '"IBM Plex Mono", "Menlo", "Courier New", monospace',
    body:    '"IBM Plex Mono", "Menlo", "Courier New", monospace',
    mono:    '"IBM Plex Mono", "Menlo", "Courier New", monospace',
  };
  const [signupName, setSignupName] = useState('');
  const [signupEmail, setSignupEmail] = useState('');
  const [signupPassword, setSignupPassword] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const [billing, setBilling] = useState('monthly'); // monthly | yearly

  // Already signed in? Show a soft hint to open the dashboard.
  const [signedInAs, setSignedInAs] = useState(null);
  useEffect(() => window.LWAuth ? window.LWAuth.onAuthChanged(setSignedInAs) : undefined, []);

  // Honor `?next=` (e.g. coach landed on /coach-invite/{token}, got bounced
  // to signup, signed up via Apple — bounce them back to the claim flow).
  const honorNext = () => {
    let next = null;
    try {
      if (window.LWRouter) {
        const r = window.LWRouter.parseRoute();
        if (r && r.params && r.params.next) next = r.params.next;
      }
      if (!next) next = new URLSearchParams(window.location.search).get('next');
    } catch {}
    if (next) {
      if (next.startsWith('#')) {
        window.location.replace(window.location.pathname + window.location.search + next);
      } else if (window.LWRouter && window.LWRouter.legacyHrefToHash) {
        const mapped = window.LWRouter.legacyHrefToHash(next);
        if (mapped) window.location.replace(window.location.pathname + window.location.search + mapped);
        else window.location.replace(next);
      } else {
        window.location.replace(next);
      }
      return true;
    }
    return false;
  };

  const handleApple = async () => {
    if (submitting) return;
    setSubmitting(true); setError(null);
    try {
      await window.LWAuth.signInWithApple();
      if (honorNext()) return;
      (window.LWRouter ? window.LWRouter.go('Dashboard.html') : (window.location.href = 'Dashboard.html'));
    } catch (err) {
      if (err && err.code === 'auth/popup-closed-by-user') {
        setSubmitting(false);
        return;
      }
      setError(prettyAuthError(err));
      setSubmitting(false);
    }
  };

  const handleSignup = async (e) => {
    e.preventDefault();
    if (!signupEmail || !signupPassword || submitting) return;
    setSubmitting(true); setError(null);
    try {
      await window.LWAuth.signUp({
        email: signupEmail.trim(),
        password: signupPassword,
        displayName: signupName.trim() || signupEmail.split('@')[0],
      });
      // After signup, honor `?next=` (e.g. coach landed on /coach-invite/{token},
      // got bounced here, signed up — bounce them back to the claim flow which
      // then auto-claims since they're now authed).
      let next = null;
      try {
        if (window.LWRouter) {
          const r = window.LWRouter.parseRoute();
          if (r && r.params && r.params.next) next = r.params.next;
        }
        if (!next) next = new URLSearchParams(window.location.search).get('next');
      } catch {}
      if (next) {
        if (next.startsWith('#')) {
          window.location.replace(window.location.pathname + window.location.search + next);
        } else if (window.LWRouter && window.LWRouter.legacyHrefToHash) {
          const mapped = window.LWRouter.legacyHrefToHash(next);
          if (mapped) window.location.replace(window.location.pathname + window.location.search + mapped);
          else window.location.replace(next);
        } else {
          window.location.replace(next);
        }
        return;
      }
      (window.LWRouter ? window.LWRouter.go('Dashboard.html') : (window.location.href = 'Dashboard.html'));
    } catch (err) {
      setError(prettyAuthError(err));
      setSubmitting(false);
    }
  };

  const formProps = {
    name: signupName, setName: setSignupName,
    email: signupEmail, setEmail: setSignupEmail,
    password: signupPassword, setPassword: setSignupPassword,
    submitting, error, onSubmit: handleSignup, onApple: handleApple,
    signedInAs,
  };

  return (
    <div style={{ minHeight: '100vh', background: c.bg, color: c.textPrimary, position: 'relative', overflow: 'hidden' }}>
      {/* Atmospheric backdrop — fixed so it follows scroll */}
      <Atmosphere c={c} brutMode={brutMode} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <Nav c={c} fonts={fonts} signedInAs={signedInAs} brutMode={brutMode} setBrutMode={setBrutMode} />
        <Hero c={c} fonts={fonts} type={type} isMobile={isMobile} {...formProps} />
        <SocialProof c={c} fonts={fonts} />
        <ProblemSection c={c} fonts={fonts} type={type} isMobile={isMobile} />
        <WheelInterlude c={c} fonts={fonts} isMobile={isMobile} />
        <ProductSection c={c} fonts={fonts} type={type} isMobile={isMobile} />
        <KeepStackSection c={c} fonts={fonts} isMobile={isMobile} />
        <PrivacySection_LANDING c={c} fonts={fonts} type={type} isMobile={isMobile} />
        <Testimonial c={c} fonts={fonts} type={type} isMobile={isMobile} />
        <PricingSection c={c} fonts={fonts} type={type} isMobile={isMobile} billing={billing} setBilling={setBilling} />
        <SeatTeaseSection c={c} fonts={fonts} isMobile={isMobile} />
        <FAQSection c={c} fonts={fonts} type={type} isMobile={isMobile} />
        <FinalCTA c={c} fonts={fonts} type={type} isMobile={isMobile} {...formProps} />
        <Footer c={c} fonts={fonts} />
      </div>
      <LandingStyles c={c} fonts={fonts} />
    </div>
  );
}

// ─── Brutalist paper backdrop ────────────────────────────────
// Cream paper texture in light, near-black with faint mint glow
// in dark. Paper grain works in both modes (mix-blend handles it).
function Atmosphere({ c, brutMode = 'light' }) {
  const isDark = brutMode === 'dark';
  return (
    <div aria-hidden="true" style={{
      position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
      background: c.bg,
    }}>
      {/* Light: warm sunlight wash · Dark: mint accent wash */}
      <div style={{
        position: 'absolute', top: 0, right: 0, width: '45vw', height: '45vw',
        background: isDark
          ? `radial-gradient(circle at top right, ${hexToRgba(c.accent, 0.14)} 0%, transparent 60%)`
          : `radial-gradient(circle at top right, ${hexToRgba('#D4A537', 0.10)} 0%, transparent 60%)`,
      }} />
      {isDark && (
        <div style={{
          position: 'absolute', bottom: 0, left: 0, width: '40vw', height: '40vw',
          background: `radial-gradient(circle at bottom left, ${hexToRgba(c.spheres.contribution, 0.08)} 0%, transparent 60%)`,
        }} />
      )}
      {/* Paper grain — multiply on light, screen on dark to read as fiber both ways */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.65'/></svg>")`,
        opacity: isDark ? 0.06 : 0.10,
        mixBlendMode: isDark ? 'screen' : 'multiply',
      }} />
    </div>
  );
}

// ─── Global animation keyframes + utility classes ─────────────
// "br-*" classes implement the mono-brutalism material system.
// All flat. Hard borders. No shadows except the chunky offset
// "press" shadow (4px ink-black). No backdrop-filter. No blur.
function LandingStyles({ c, fonts }) {
  return (
    <style>{`
      @keyframes lw-fade-up {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes lw-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      @keyframes lw-float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
      }
      @keyframes lw-pulse {
        0%, 100% { box-shadow: 0 6px 18px ${hexToRgba(c.accent, 0.42)}, inset 0 1px 0 ${hexToRgba('#ffffff', 0.22)}; }
        50%      { box-shadow: 0 8px 24px ${hexToRgba(c.accent, 0.55)}, inset 0 1px 0 ${hexToRgba('#ffffff', 0.32)}, 0 0 0 6px ${hexToRgba(c.accent, 0.10)}; }
      }
      @keyframes lw-shimmer {
        0%, 100% { transform: translateX(-100%); }
        50%      { transform: translateX(100%); }
      }
      @keyframes lw-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
      }
      .lw-marquee-track {
        display: flex; flex-shrink: 0; align-items: center; gap: 36px;
        animation: lw-marquee 36s linear infinite;
        white-space: nowrap;
      }
      .lw-marquee-host:hover .lw-marquee-track { animation-play-state: paused; }
      @media (prefers-reduced-motion: reduce) {
        .lw-marquee-track { animation: none !important; }
      }
      .lw-pulse { animation: lw-pulse 2.6s cubic-bezier(.4,0,.2,1) infinite; }
      .lw-reveal { opacity: 0; animation: lw-fade-up 700ms cubic-bezier(.2,.7,.2,1) forwards; }
      .lw-reveal-1 { animation-delay: 80ms; }
      .lw-reveal-2 { animation-delay: 180ms; }
      .lw-reveal-3 { animation-delay: 280ms; }
      .lw-reveal-4 { animation-delay: 380ms; }

      /* ── Brutalist paper card ────────────────────────────────
         Hard 1.5px ink border, no rounded corners (or 2px max),
         no gradients, no backdrop-filter. Optional 4px chunky
         offset ink shadow makes it feel printed/stamped. */
      .br-paper {
        background: ${c.card};
        border: 1.5px solid ${c.ink};
        border-radius: 2px;
        position: relative;
        transition: transform 160ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease, background 200ms ease;
      }
      .br-paper:hover {
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 0 ${c.ink};
        background: ${c.cardHover};
      }
      .br-paper-shadowed {
        background: ${c.card};
        border: 1.5px solid ${c.ink};
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 ${c.ink};
        transition: transform 160ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease;
        position: relative;
      }
      .br-paper-shadowed:hover {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0 0 ${c.ink};
      }

      /* ── Brutalist input — paper field with thick black border ─ */
      .br-input {
        background: ${c.card} !important;
        border: 1.5px solid ${c.ink} !important;
        border-radius: 2px;
        font-family: ${fonts.mono};
        color: ${c.textPrimary};
        transition: box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
      }
      .br-input:focus {
        outline: none;
        background: ${c.cardHover} !important;
        box-shadow: 4px 4px 0 0 ${c.accent};
        border-color: ${c.accent} !important;
      }
      .br-input::placeholder { color: ${c.textTertiary}; opacity: 1; }

      /* ── Brutalist primary CTA — bracket button ────────────── */
      .br-cta {
        position: relative;
        background: ${c.accent};
        color: ${c.textOnAccent};
        border: 1.5px solid ${c.ink};
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 ${c.ink};
        font-family: ${fonts.mono};
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: transform 120ms cubic-bezier(.2,.7,.2,1), box-shadow 120ms ease, background 160ms ease;
      }
      .br-cta:hover:not(:disabled) {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0 0 ${c.ink};
        background: ${c.accentHover};
      }
      .br-cta:active:not(:disabled) {
        transform: translate(2px, 2px);
        box-shadow: 0 0 0 0 ${c.ink};
      }

      /* ── Brutalist secondary — outlined paper ──────────────── */
      .br-btn {
        background: transparent;
        color: ${c.ink};
        border: 1.5px solid ${c.ink};
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 ${c.ink};
        font-family: ${fonts.mono};
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: transform 120ms cubic-bezier(.2,.7,.2,1), box-shadow 120ms ease, background 160ms ease;
      }
      .br-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0 0 ${c.ink};
        background: ${c.ink};
        color: ${c.bg};
      }
      .br-btn:active {
        transform: translate(2px, 2px);
        box-shadow: 0 0 0 0 ${c.ink};
      }

      /* ── Section marker chip "[§02]" ───────────────────────── */
      .br-marker {
        font-family: ${fonts.mono};
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: ${c.ink};
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 10px;
        border: 1.5px solid ${c.ink};
        border-radius: 2px;
        background: ${c.bg};
      }

      /* ── Hand-stamped badge (rotated, oxblood) ─────────────── */
      .br-stamp {
        position: absolute;
        font-family: ${fonts.mono};
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 13px;
        color: ${c.stamp};
        border: 2.5px solid ${c.stamp};
        padding: 6px 14px;
        border-radius: 4px;
        transform: rotate(-4deg);
        background: ${hexToRgba(c.stamp, 0.04)};
        box-shadow: inset 0 0 0 1px ${hexToRgba(c.stamp, 0.18)};
        white-space: nowrap;
      }

      /* ── ASCII-style horizontal rule ───────────────────────── */
      .br-rule {
        height: 1.5px;
        background: ${c.ink};
        width: 100%;
      }

      /* ── Margin note (italic mono on left bar) ─────────────── */
      .br-note {
        border-left: 2px solid ${c.ink};
        padding: 4px 14px;
        font-family: ${fonts.mono};
        font-style: italic;
        font-size: 14px;
        line-height: 1.55;
        color: ${c.textSecondary};
      }

      /* Link hover */
      .lw-link-hover { transition: color 160ms ease, background 160ms ease; }
      .lw-link-hover:hover { color: ${c.ink} !important; background: ${hexToRgba(c.accent, 0.18)}; }

      /* FAQ row */
      .br-faq {
        transition: background 200ms ease;
        border-bottom: 1.5px solid ${c.ink};
      }
      .br-faq:hover { background: ${hexToRgba(c.accent, 0.06)}; }

      @media (prefers-reduced-motion: reduce) {
        .lw-reveal, .br-paper, .br-cta, .br-btn, .br-input { animation: none !important; transition: none !important; }
      }
    `}</style>
  );
}

// Map raw Firebase Auth errors into copy a coach can act on.
function prettyAuthError(err) {
  const code = err && err.code ? err.code : '';
  const t = (k) => (window.LWLang ? window.LWLang.t(k) : k);
  switch (code) {
    case 'auth/email-already-in-use': return t('auth.err_in_use');
    case 'auth/invalid-email':        return t('auth.err_invalid_email');
    case 'auth/weak-password':        return t('auth.err_weak');
    case 'auth/wrong-password':       return t('auth.err_wrong');
    case 'auth/user-not-found':       return t('auth.err_no_user');
    case 'auth/network-request-failed': return t('auth.err_network');
    case 'auth/operation-not-allowed': return t('auth.err_op_disabled');
    default: return (err && err.message) || t('auth.err_default');
  }
}

// Shared signup form (used by Hero + FinalCTA).
function SignupFields({ c, fonts, name, setName, email, setEmail, password, setPassword, submitting, error, onSubmit, onApple, center = false }) {
  const t = (k) => (window.LWLang ? window.LWLang.t(k) : k);
  const isRu = (window.LWLang ? window.LWLang.lang() : 'en') === 'ru';
  const inputStyle = {
    padding: '14px 16px',
    fontFamily: fonts.mono, fontSize: 14, color: c.ink, outline: 'none',
    width: '100%',
  };
  return (
    <div style={{
      maxWidth: 460,
      margin: center ? '0 auto 14px' : '0 0 14px',
    }}>
      {onApple && (
        <button type="button" onClick={onApple} disabled={submitting} style={{
          width: '100%',
          padding: '14px 20px',
          marginBottom: 12,
          background: c.ink,
          color: c.bg,
          border: `1.5px solid ${c.ink}`,
          borderRadius: 2,
          boxShadow: `3px 3px 0 0 ${c.ink}`,
          fontFamily: fonts.mono, fontSize: 13, fontWeight: 800,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          cursor: submitting ? 'progress' : 'pointer',
          opacity: submitting ? 0.7 : 1,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          <span aria-hidden style={{ fontSize: 16, lineHeight: 1, fontFamily: '-apple-system, BlinkMacSystemFont, "Apple Color Emoji", sans-serif' }}></span>
          {t('auth.continue_with_apple')}
        </button>
      )}
      {onApple && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, margin: '0 0 12px',
          fontFamily: fonts.mono, fontSize: 10, fontWeight: 700,
          letterSpacing: '0.16em', textTransform: 'uppercase', color: c.textTertiary,
        }}>
          <span style={{ flex: 1, height: 1.5, background: c.borderDefault }} />
          {t('auth.or_with_email')}
          <span style={{ flex: 1, height: 1.5, background: c.borderDefault }} />
        </div>
      )}
      <form onSubmit={onSubmit} style={{ display: 'grid', gap: 12 }}>
        <input className="br-input" type="text" placeholder={t('auth.your_name')} value={name} onChange={e => setName(e.target.value)} style={inputStyle} autoComplete="name" />
        <input className="br-input" type="email" required placeholder="your@coachingpractice.com" value={email} onChange={e => setEmail(e.target.value)} style={inputStyle} autoComplete="email" />
        <input className="br-input" type="password" required minLength={6} placeholder={t('auth.password_hint')} value={password} onChange={e => setPassword(e.target.value)} style={inputStyle} autoComplete="new-password" />
        <button type="submit" disabled={submitting} className="br-cta" style={{
          padding: '14px 20px', marginTop: 4,
          background: submitting ? c.textTertiary : c.accent,
          cursor: submitting ? 'progress' : 'pointer',
          fontSize: 13,
          opacity: submitting ? 0.7 : 1,
        }}>
          [ {(submitting ? t('auth.signing_up') : t('auth.signup_cta')).toUpperCase()} → ]
        </button>
        {error && (
          <div style={{
            padding: '12px 14px',
            background: hexToRgba(c.error, 0.10),
            border: `1.5px solid ${c.error}`,
            color: c.error, fontFamily: fonts.mono, fontSize: 12,
            letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>! {error}</div>
        )}
      </form>
    </div>
  );
}

// ─── Nav ───────────────────────────────────────────────────────
// Receives c + fonts from LWLanding (brutalism override) instead of
// useLW() which would return the dark-green app theme tokens.
function Nav({ c, fonts, signedInAs, brutMode, setBrutMode }) {
  const { t } = useLW();
  const { isMobile } = useViewport();
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: c.bg,
      borderBottom: `1.5px solid ${c.ink}`,
      padding: isMobile ? '12px 20px' : '14px 32px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      fontFamily: fonts.mono,
    }}>
      <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
        <LWMark c={c} size={26} />
        <span style={{ fontFamily: fonts.mono, fontSize: 14, fontWeight: 700, color: c.ink, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
          LifeWheel<span style={{ color: c.textTertiary, marginLeft: 6 }}>.coach</span>
        </span>
        {!isMobile && (
          <span style={{
            marginLeft: 14, fontFamily: fonts.display, fontStyle: 'italic',
            fontSize: 14, fontWeight: 500, color: c.textTertiary,
            letterSpacing: '0.01em',
          }}>{(window.LWLang && window.LWLang.lang() === 'ru') ? 'Том 04 · Май 2026' : 'Vol. 04 · May 2026'}</span>
        )}
      </a>
      {!isMobile && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <a href="#how" style={navLinkStyle(c, fonts)}>{t('signup.nav_how')}</a>
          <a href="#privacy" style={navLinkStyle(c, fonts)}>{t('signup.nav_privacy')}</a>
          <a href="#pricing" style={navLinkStyle(c, fonts)}>{t('signup.nav_pricing')}</a>
          <a href="/" style={navLinkStyle(c, fonts)}>{t('signup.nav_for_clients')}</a>
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <ModeToggle c={c} fonts={fonts} brutMode={brutMode} setBrutMode={setBrutMode} />
        <LangToggle c={c} fonts={fonts} />
        {!isMobile && !signedInAs && (
          <a href="Login.html" style={{ ...navLinkStyle(c, fonts), color: c.textSecondary }}>{t('signup.nav_signin')}</a>
        )}
        {signedInAs ? (
          <a href="Dashboard.html" className="br-cta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '8px 14px', fontSize: 12,
            textDecoration: 'none',
          }}>
            [ {t('signup.nav_open_dash')} ]
          </a>
        ) : (
          <a href="#cta" className="br-cta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '8px 14px', fontSize: 12,
            textDecoration: 'none',
          }}>
            [ {t('signup.nav_start_free')} ]
          </a>
        )}
      </div>
    </nav>
  );
}
function navLinkStyle(c, fonts) {
  return {
    fontFamily: fonts.mono, fontSize: 12, fontWeight: 600,
    color: c.ink, textDecoration: 'none',
    letterSpacing: '0.08em', textTransform: 'uppercase',
    paddingBottom: 2, borderBottom: '1.5px solid transparent',
    transition: 'border-color 160ms ease',
  };
}

// Re-exposed on `window` so login.jsx (a separate babel script) can use the
// same component without duplicating it. Top-level JSX file globals collide
// on `window` either way (per the documented babel-standalone footgun) — a
// distinct, intentional name keeps the boundary explicit.
window.LangToggle = LangToggle;

// Compact EN/RU toggle for the public-facing landing/login pages. Persists
// the choice to localStorage via the existing setTweak('lang') flow so the
// rest of the app stays in sync.
function LangToggle({ c, fonts }) {
  const current = (window.LWLang && window.LWLang.lang()) || 'en';
  const setLang = (l) => {
    if (l === current) return;
    if (window.LWLang) window.LWLang.setLang(l);
    try {
      const raw = localStorage.getItem('lw_coach_prefs');
      const p = raw ? JSON.parse(raw) : {};
      p.lang = l;
      localStorage.setItem('lw_coach_prefs', JSON.stringify(p));
    } catch {}
    try { window.dispatchEvent(new CustomEvent('tweakchange', { detail: { lang: l } })); } catch {}
  };
  const item = (l, label) => {
    const active = current === l;
    return (
      <button onClick={() => setLang(l)} style={{
        background: active ? c.ink : 'transparent',
        color: active ? c.bg : c.textTertiary,
        border: 'none', cursor: 'pointer', padding: '2px 6px',
        fontFamily: fonts.mono, fontSize: 11, fontWeight: 700,
        letterSpacing: '0.10em',
      }}>{label}</button>
    );
  };
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '5px 10px', borderRadius: 2,
      border: `1.5px solid ${c.ink}`, background: c.bg,
    }}>
      {item('en', 'EN')}
      <span style={{ color: c.textTertiary, fontSize: 10 }}>/</span>
      {item('ru', 'RU')}
    </div>
  );
}

// ─── Brutalist mode toggle (light cream / dark paper) ────────
function ModeToggle({ c, fonts, brutMode, setBrutMode }) {
  const item = (m, label, glyph) => {
    const active = brutMode === m;
    return (
      <button onClick={() => setBrutMode(m)} title={`${label} mode`} style={{
        background: active ? c.ink : 'transparent',
        color: active ? c.bg : c.textTertiary,
        border: 'none', cursor: 'pointer', padding: '2px 6px',
        fontFamily: fonts.mono, fontSize: 11, fontWeight: 700,
        letterSpacing: '0.10em',
      }}>{glyph}</button>
    );
  };
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '5px 6px', borderRadius: 2,
      border: `1.5px solid ${c.ink}`, background: c.bg,
    }}>
      {item('light', 'Light', '☀')}
      {item('dark', 'Dark', '☾')}
    </div>
  );
}

// LifeWheel mark — 8 sphere wedges
function LWMark({ c, size = 32 }) {
  const sphereColors = Object.values(c.spheres);
  const r = size / 2;
  const wedges = sphereColors.map((col, i) => {
    const a0 = (i / 8) * Math.PI * 2 - Math.PI / 2;
    const a1 = ((i + 1) / 8) * Math.PI * 2 - Math.PI / 2;
    const x0 = r + Math.cos(a0) * r, y0 = r + Math.sin(a0) * r;
    const x1 = r + Math.cos(a1) * r, y1 = r + Math.sin(a1) * r;
    return <path key={i} d={`M${r} ${r} L${x0} ${y0} A${r} ${r} 0 0 1 ${x1} ${y1} Z`} fill={col} opacity={0.85} />;
  });
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {wedges}
      <circle cx={r} cy={r} r={r * 0.32} fill={c.bg} />
    </svg>
  );
}

// ─── Hero ──────────────────────────────────────────────────────
function Hero({ c, fonts, type, isMobile, name, setName, email, setEmail, password, setPassword, submitting, error, onSubmit, onApple, signedInAs }) {
  const { t } = useLW();
  return (
    <section style={{
      padding: isMobile ? '40px 20px 56px' : '72px 32px 80px',
      maxWidth: 1280, margin: '0 auto',
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr',
      gap: isMobile ? 40 : 72, alignItems: 'start',
      position: 'relative',
    }}>
      <div style={{ position: 'relative' }}>
        <div className="lw-reveal" style={{ marginBottom: 18, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span className="br-marker">§01 / {(window.LWLang && window.LWLang.lang() === 'ru') ? 'РЕГИСТРАЦИЯ' : 'SIGNUP'}</span>
          <span style={{
            fontFamily: fonts.mono, fontSize: 11, fontWeight: 600,
            color: c.textTertiary, letterSpacing: '0.14em', textTransform: 'uppercase',
            lineHeight: 1.4,
          }}>—— {t('signup.hero_eyebrow')}</span>
        </div>
        <h1 className="lw-reveal lw-reveal-1" style={{
          fontFamily: fonts.mono, fontSize: isMobile ? 32 : 56, fontWeight: 700,
          lineHeight: 1.05, letterSpacing: '-0.02em', color: c.ink,
          margin: 0, marginBottom: 6, textWrap: 'balance', textTransform: 'uppercase',
        }}>
          {t('signup.hero_title_a')}{' '}
          <span style={{
            color: c.stamp,
            textDecoration: 'underline',
            textDecorationColor: c.stamp,
            textDecorationThickness: '3px',
            textUnderlineOffset: '8px',
            textDecorationSkipInk: 'none',
          }}>{t('signup.hero_title_accent')}</span><br />
          {t('signup.hero_title_b')}
        </h1>
        <div className="lw-reveal lw-reveal-1" style={{
          height: 1.5, width: 96, background: c.ink, marginTop: 18, marginBottom: 22,
        }} />
        <div className="br-note lw-reveal lw-reveal-2" style={{ marginBottom: 32, maxWidth: 540 }}>
          {t('signup.hero_sub')}
        </div>

        <div className="lw-reveal lw-reveal-3" style={{ position: 'relative' }}>
          {/* Hand-drawn editorial arrow pointing at the form */}
          {!signedInAs && !isMobile && (
            <div aria-hidden="true" style={{
              position: 'absolute', top: -10, right: -180, width: 170,
              fontFamily: fonts.display, fontStyle: 'italic', fontSize: 18,
              color: c.stamp, lineHeight: 1.2, transform: 'rotate(-4deg)',
              pointerEvents: 'none',
            }}>
              <svg width="80" height="48" viewBox="0 0 80 48" style={{ display: 'block', marginBottom: -2 }}>
                <path d="M2 6 C 18 4, 38 18, 50 28 C 60 36, 70 38, 76 32" fill="none" stroke={c.stamp} strokeWidth="1.4" strokeLinecap="round" />
                <path d="M68 26 L 76 32 L 70 38" fill="none" stroke={c.stamp} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              {(window.LWLang && window.LWLang.lang() === 'ru') ? 'начни тут' : 'start here'}
            </div>
          )}
          {signedInAs ? (
            <a href="Dashboard.html" className="br-cta" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '14px 22px', fontSize: 13,
              textDecoration: 'none', marginBottom: 14,
            }}>
              [ {t('auth.open_dashboard')} → ]
            </a>
          ) : (
            <SignupFields c={c} fonts={fonts}
              name={name} setName={setName}
              email={email} setEmail={setEmail}
              password={password} setPassword={setPassword}
              submitting={submitting} error={error} onSubmit={onSubmit} onApple={onApple} />
          )}
        </div>
        <div className="lw-reveal lw-reveal-4" style={{
          fontFamily: fonts.mono, fontSize: 12, color: c.textTertiary,
          display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4,
          letterSpacing: '0.04em',
        }}>
          {signedInAs ? (
            <span>{t('signup.hero_signed_in_as').toUpperCase()}: <strong style={{ color: c.ink }}>{signedInAs.email}</strong> · <a href="#" onClick={(e) => { e.preventDefault(); window.LWAuth.signOut(); }} className="lw-link-hover" style={{ color: c.ink, textDecoration: 'underline' }}>{t('signup.hero_sign_out')}</a></span>
          ) : (
            <>
              <span style={{ textTransform: 'uppercase', letterSpacing: '0.10em' }}>—— {t('signup.hero_trial_line').replace(/\s*·\s*$/, '')}</span>
              <a href="Login.html" className="lw-link-hover" style={{ color: c.ink, textDecoration: 'underline', textUnderlineOffset: 3, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{t('signup.hero_have_account')} →</a>
            </>
          )}
        </div>
      </div>

      {/* Hero visual: animated wheel + floating signal cards */}
      <HeroVisual c={c} fonts={fonts} isMobile={isMobile} />
    </section>
  );
}

// ─── Hero visual: Multi-client dashboard mockup ─────────────
// V1 product brief differentiation wedge — no other coaching
// platform shows multi-client wheel state at a glance. Replaces
// the previous single-wheel + annotations.
function HeroVisual({ c, fonts, isMobile }) {
  const lang = window.LWLang ? window.LWLang.lang() : 'en';
  const isRu = lang === 'ru';
  const SPHERES = ['health', 'career', 'money', 'love', 'joy', 'growth', 'people', 'contribution'];

  const clients = isRu ? [
    { initials: 'МЛ', name: 'Майя Л.',    scores: [7, 9, 6, 5, 8, 7, 8, 6], time: '10:00', flag: 'настроение ↓1.2',  flagKind: 'warn' },
    { initials: 'ДП', name: 'Джордан П.', scores: [6, 7, 5, 4, 6, 5, 5, 7], time: '13:30', flag: '8 дней тишины',    flagKind: 'warn' },
    { initials: 'АП', name: 'Ария П.',    scores: [8, 7, 7, 8, 8, 7, 8, 7], time: '16:00', flag: 'стабильно',         flagKind: 'ok' },
    { initials: 'ЧВ', name: 'Чен В.',     scores: [7, 8, 6, 7, 7, 9, 7, 8], time: null,    flag: 'привычка ↑12 дн',  flagKind: 'good' },
    { initials: 'РК', name: 'Раджа К.',   scores: [5, 6, 4, 5, 5, 6, 4, 6], time: null,    flag: 'журнал · 1ч',       flagKind: 'note' },
    { initials: 'ЛО', name: 'Лена О.',    scores: [9, 8, 8, 9, 9, 8, 9, 8], time: null,    flag: 'настроение ↑0.3',  flagKind: 'good' },
  ] : [
    { initials: 'ML', name: 'Maya L.',    scores: [7, 9, 6, 5, 8, 7, 8, 6], time: '10:00', flag: 'mood ↓1.2',     flagKind: 'warn' },
    { initials: 'JP', name: 'Jordan P.',  scores: [6, 7, 5, 4, 6, 5, 5, 7], time: '13:30', flag: '8 days quiet',  flagKind: 'warn' },
    { initials: 'AP', name: 'Aria P.',    scores: [8, 7, 7, 8, 8, 7, 8, 7], time: '16:00', flag: 'stable',         flagKind: 'ok' },
    { initials: 'CW', name: 'Chen W.',    scores: [7, 8, 6, 7, 7, 9, 7, 8], time: null,    flag: 'habit ↑12d',    flagKind: 'good' },
    { initials: 'RK', name: 'Raja K.',    scores: [5, 6, 4, 5, 5, 6, 4, 6], time: null,    flag: 'journal · 1h',  flagKind: 'note' },
    { initials: 'LO', name: 'Lena O.',    scores: [9, 8, 8, 9, 9, 8, 9, 8], time: null,    flag: 'mood ↑0.3',     flagKind: 'good' },
  ];

  const flagColor = (kind) => kind === 'warn' ? c.stamp : kind === 'good' ? c.accent : kind === 'note' ? c.textSecondary : c.textTertiary;
  const flagPrefix = (kind) => kind === 'warn' ? '↗ ' : kind === 'good' ? '↑ ' : '·· ';

  const MiniWheel = ({ scores, size = 38 }) => {
    const cx = size / 2, cy = size / 2, rMax = size * 0.46;
    return (
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ flexShrink: 0, display: 'block' }}>
        <circle cx={cx} cy={cy} r={rMax} fill="none" stroke={c.ink} strokeWidth="1" />
        {SPHERES.map((sk, i) => {
          const a0 = (i / 8) * Math.PI * 2 - Math.PI / 2;
          const a1 = ((i + 1) / 8) * Math.PI * 2 - Math.PI / 2;
          const r = (scores[i] / 10) * rMax;
          const p1 = `${cx + Math.cos(a0) * r} ${cy + Math.sin(a0) * r}`;
          const p2 = `${cx + Math.cos(a1) * r} ${cy + Math.sin(a1) * r}`;
          return (
            <path key={i} d={`M${cx} ${cy} L${p1} A${r} ${r} 0 0 1 ${p2} Z`}
              fill={c.spheres[sk]} stroke={c.ink} strokeWidth="0.5" />
          );
        })}
      </svg>
    );
  };


  return (
    <div className="lw-reveal lw-reveal-2" style={{
      position: 'relative',
      background: c.card,
      border: `1.5px solid ${c.ink}`,
      borderRadius: 2,
      boxShadow: `4px 4px 0 0 ${c.ink}`,
      overflow: 'hidden',
      maxWidth: '100%',
    }}>
      {/* Header — software window caption tone */}
      <div style={{
        padding: '11px 18px',
        borderBottom: `1.5px solid ${c.ink}`,
        background: c.bgSubtle,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: fonts.mono, fontSize: 10, fontWeight: 600,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: c.textSecondary, gap: 12,
      }}>
        <span>{isRu ? 'Сегодня · Вт 14 мая' : 'Today · Tue May 14'}</span>
        <span style={{ color: c.textTertiary }}>{isRu ? '3 сессии · 6 клиентов' : '3 sessions · 6 clients'}</span>
      </div>
      {/* Client list */}
      <div>
        {clients.map((client, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: isMobile ? '12px 14px' : '14px 18px',
            borderBottom: i < clients.length - 1 ? `1px dashed ${c.borderDefault}` : 'none',
          }}>
            <MiniWheel scores={client.scores} size={isMobile ? 32 : 38} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: fonts.mono, fontSize: 13, fontWeight: 700,
                color: c.ink, letterSpacing: '0.02em', textTransform: 'uppercase',
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>{client.name}</div>
              <div style={{
                fontFamily: fonts.mono, fontSize: 11, fontWeight: 500,
                color: flagColor(client.flagKind),
                marginTop: 2, letterSpacing: '0.04em',
              }}>{flagPrefix(client.flagKind)}{client.flag}</div>
            </div>
            {client.time && (
              <div style={{
                fontFamily: fonts.mono, fontSize: 13, fontWeight: 700,
                color: c.ink, fontVariantNumeric: 'tabular-nums',
                flexShrink: 0,
              }}>{client.time}</div>
            )}
          </div>
        ))}
      </div>
      {/* Footer */}
      <div style={{
        padding: '10px 18px',
        borderTop: `1.5px solid ${c.ink}`,
        background: c.bgSubtle,
        fontFamily: fonts.mono, fontSize: 10, fontWeight: 600,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: c.textTertiary, textAlign: 'center',
      }}>
        {isRu ? '—— 6 из 14 клиентов · посмотреть всех ——' : '—— 6 of 14 clients · view all ——'}
      </div>
    </div>
  );
}

function FloatCard({ c, fonts, children, style, delay = 0, parallax = 0 }) {
  const { animationName, animationDuration, animationDelay, animationIterationCount, animationTimingFunction, ...rest } = style || {};
  return (
    <div data-parallax={parallax || undefined} style={{
      position: 'absolute', padding: '12px 14px', borderRadius: 2,
      minWidth: 160,
      background: c.card,
      border: `1.5px solid ${c.ink}`,
      boxShadow: `3px 3px 0 0 ${c.ink}`,
      opacity: 0, animation: `lw-fade-up 600ms cubic-bezier(.2,.7,.2,1) ${delay}ms forwards${animationName ? `, ${animationName} ${animationDuration} ${animationTimingFunction || 'ease-in-out'} ${animationDelay || '0s'} ${animationIterationCount || 'infinite'}` : ''}`,
      ...rest,
    }}>
      {children}
    </div>
  );
}

// ─── Social proof bar — brutalist ticker marquee ───────────────
// Stock-ticker style infinite scroll. Items duplicated 2x with
// translateX 0 → -50% gives a seamless loop. Hover pauses it
// (the user can read at their own pace).
function SocialProof({ c, fonts }) {
  const { t } = useLW();
  const isRu = window.LWLang && window.LWLang.lang() === 'ru';
  const items = [
    t('signup.social_count'),
    t('signup.social_icf'),
    t('signup.social_gdpr'),
    t('signup.social_soc2'),
    isRu ? 'СОФТ, КОТОРЫЙ УВАЖАЕТ ОТНОШЕНИЯ С КЛИЕНТОМ' : 'COACHING SOFTWARE THAT RESPECTS THE RELATIONSHIP',
    isRu ? 'КЛИЕНТЫ ПОЛЬЗУЮТСЯ LIFEWHEEL БЕСПЛАТНО — ВСЕГДА' : 'CLIENTS USE LIFEWHEEL FREE — FOREVER',
    isRu ? 'КОЛЕСО ПРИНАДЛЕЖИТ КЛИЕНТУ' : 'THE WHEEL BELONGS TO THE CLIENT',
  ];
  // Duplicate the items so the marquee loops seamlessly.
  const looped = [...items, ...items];
  return (
    <div className="lw-marquee-host" style={{
      borderTop: `1.5px solid ${c.ink}`, borderBottom: `1.5px solid ${c.ink}`,
      padding: '14px 0', background: c.bgSubtle,
      overflow: 'hidden',
      fontFamily: fonts.mono, fontSize: 11, fontWeight: 600, letterSpacing: '0.18em',
      textTransform: 'uppercase', color: c.ink,
    }}>
      <div className="lw-marquee-track">
        {looped.flatMap((label, i) => [
          <span key={`l-${i}`} style={{ display: 'inline-flex', alignItems: 'center' }}>{label}</span>,
          <span key={`s-${i}`} style={{ color: c.textTertiary, fontSize: 10 }}>✦</span>,
        ])}
      </div>
    </div>
  );
}

// ─── Problem section ───────────────────────────────────────────
function ProblemSection({ c, fonts, type, isMobile }) {
  const { t } = useLW();
  const problems = [
    { title: t('signup.problem_1_title'), body: t('signup.problem_1_body') },
    { title: t('signup.problem_2_title'), body: t('signup.problem_2_body') },
    { title: t('signup.problem_3_title'), body: t('signup.problem_3_body') },
  ];

  return (
    <section style={{
      padding: isMobile ? '56px 20px 64px' : '96px 32px 96px',
      maxWidth: 1100, margin: '0 auto', position: 'relative',
    }}>
      <div style={{ maxWidth: 760, marginBottom: isMobile ? 32 : 56, position: 'relative' }}>
        <div style={{ marginBottom: 18 }}>
          <span className="br-marker">[§02 / {t('signup.problem_eyebrow').toUpperCase()}]</span>
        </div>
        <h2 style={{
          fontFamily: fonts.mono, fontSize: isMobile ? 28 : 44, fontWeight: 700,
          lineHeight: 1.06, letterSpacing: '-0.02em', color: c.ink, margin: 0, marginBottom: 4,
          textWrap: 'balance', textTransform: 'uppercase',
        }}>
          {t('signup.problem_title_a')} <span style={{
            color: c.stamp,
            borderBottom: `3px solid ${c.stamp}`,
            paddingBottom: 2,
          }}>{t('signup.problem_title_accent')}</span>
        </h2>
        <div style={{ height: 1.5, background: c.ink, width: 96, marginTop: 16, marginBottom: 18 }} />
        <p className="br-note" style={{ maxWidth: 660, fontStyle: 'italic' }}>
          {t('signup.problem_sub')}
        </p>
      </div>

      <div style={{
        display: 'grid', gap: 0,
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        border: `1.5px solid ${c.ink}`,
        background: c.card,
        position: 'relative',
      }}>
        {problems.map((p, i) => (
          <div key={i} className="br-paper" style={{
            padding: isMobile ? '26px 22px' : '32px 26px',
            border: 'none',
            borderRight: !isMobile && i < problems.length - 1 ? `1.5px solid ${c.ink}` : 'none',
            borderBottom: isMobile && i < problems.length - 1 ? `1.5px solid ${c.ink}` : 'none',
            borderRadius: 0,
            background: 'transparent',
          }}>
            <div style={{
              fontFamily: fonts.display, fontSize: 88, fontWeight: 500, fontStyle: 'italic',
              lineHeight: 0.9, marginBottom: 18, color: c.stamp,
              letterSpacing: '-0.04em',
            }}>
              {['I', 'II', 'III'][i] || (i + 1)}.
            </div>
            <h3 style={{
              fontFamily: fonts.mono, fontSize: 16, fontWeight: 700,
              color: c.ink, margin: 0, marginBottom: 12, lineHeight: 1.3,
              textTransform: 'uppercase', letterSpacing: '-0.005em',
            }}>
              {p.title}
            </h3>
            <p style={{
              fontFamily: fonts.mono, fontSize: 13, lineHeight: 1.6,
              color: c.textSecondary, margin: 0,
            }}>
              {p.body}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Product section (with screenshot mocks) ───────────────────
function ProductSection({ c, fonts, type, isMobile }) {
  const { t } = useLW();
  const features = [
    { eyebrow: t('signup.product_f1_eyebrow'), title: t('signup.product_f1_title'), body: t('signup.product_f1_body'), mock: <DashboardMock c={c} fonts={fonts} /> },
    { eyebrow: t('signup.product_f2_eyebrow'), title: t('signup.product_f2_title'), body: t('signup.product_f2_body'), mock: <ClientMock c={c} fonts={fonts} /> },
    { eyebrow: t('signup.product_f3_eyebrow'), title: t('signup.product_f3_title'), body: t('signup.product_f3_body'), mock: <PrepMock c={c} fonts={fonts} /> },
  ];

  return (
    <section id="how" style={{
      padding: isMobile ? '56px 20px 64px' : '96px 32px 96px',
      maxWidth: 1280, margin: '0 auto', position: 'relative',
    }}>
      <div style={{ maxWidth: 760, marginBottom: isMobile ? 40 : 64, marginLeft: 'auto', marginRight: 'auto', textAlign: 'center', position: 'relative' }}>
        <div style={{ marginBottom: 18 }}>
          <span className="br-marker">[§03 / {t('signup.product_eyebrow').toUpperCase()}]</span>
        </div>
        <h2 style={{
          fontFamily: fonts.mono, fontSize: isMobile ? 28 : 48, fontWeight: 700,
          lineHeight: 1.06, letterSpacing: '-0.02em', color: c.ink, margin: 0, marginBottom: 4,
          textWrap: 'balance', textTransform: 'uppercase',
        }}>
          {t('signup.product_title_a')} <span style={{
            color: c.accentInk,
            borderBottom: `3px solid ${c.accentInk}`,
            paddingBottom: 2,
          }}>{t('signup.product_title_accent')}</span> {t('signup.product_title_b')}
        </h2>
        <div style={{ height: 1.5, background: c.ink, width: 96, margin: '18px auto 18px' }} />
        <p style={{
          fontFamily: fonts.mono, fontSize: isMobile ? 13 : 14, lineHeight: 1.6,
          color: c.textSecondary, margin: 0, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto',
        }}>
          {t('signup.product_sub')}
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 48 : 80 }}>
        {features.map((f, i) => (
          <div key={i} style={{
            display: 'grid', gap: isMobile ? 24 : 56,
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr',
            alignItems: 'center',
            direction: !isMobile && i % 2 === 1 ? 'rtl' : 'ltr',
          }}>
            <div style={{ direction: 'ltr' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14, flexWrap: 'wrap' }}>
                <span style={{
                  fontFamily: fonts.display, fontStyle: 'italic', fontWeight: 500,
                  fontSize: 28, color: c.stamp, lineHeight: 0.9,
                }}>
                  {(window.LWLang && window.LWLang.lang() === 'ru')
                    ? ['Одно', 'Два', 'Три'][i] || (i + 1)
                    : ['One', 'Two', 'Three'][i] || (i + 1)}.
                </span>
                <span style={{
                  fontFamily: fonts.mono, fontSize: 11, fontWeight: 600, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: c.textTertiary,
                }}>—— {f.eyebrow}</span>
              </div>
              <h3 style={{
                fontFamily: fonts.mono, fontSize: isMobile ? 22 : 30, fontWeight: 700,
                lineHeight: 1.15, letterSpacing: '-0.015em', color: c.ink,
                margin: 0, marginBottom: 14, textWrap: 'balance',
                textTransform: 'uppercase',
              }}>
                {f.title}
              </h3>
              <div style={{ height: 1.5, width: 64, background: c.ink, marginBottom: 14 }} />
              <p style={{
                fontFamily: fonts.mono, fontSize: isMobile ? 13 : 14, lineHeight: 1.65,
                color: c.textSecondary, margin: 0,
              }}>
                {f.body}
              </p>
            </div>
            <div style={{ direction: 'ltr' }}>
              {f.mock}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Mock screenshots — paper card with dotted-journal grid ───
// Top: a small mono caption inside the card (not a banner). Body:
// a faint dotted-journal pattern reads as personal notebook, not
// engineering drafting board.
function MockShell({ c, fonts, children, height = 320, label = 'Preview' }) {
  return (
    <div style={{
      background: c.card,
      border: `1.5px solid ${c.ink}`,
      borderRadius: 2,
      boxShadow: `4px 4px 0 0 ${c.ink}`,
      overflow: 'hidden', height,
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        padding: '10px 16px',
        borderBottom: `1.5px solid ${c.ink}`,
        background: c.bgSubtle,
        color: c.textSecondary,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: fonts.mono, fontSize: 10, fontWeight: 600,
        letterSpacing: '0.16em', textTransform: 'uppercase',
      }}>
        <span>{label}</span>
        <span style={{ color: c.textTertiary }}>{(window.LWLang && window.LWLang.lang() === 'ru') ? 'предпросмотр' : 'preview'}</span>
      </div>
      <div style={{
        flex: 1, padding: 18, overflow: 'hidden', position: 'relative',
        /* Dotted-journal pattern — faint ink dots on a 16px grid; reads
           as a personal notebook page, not an engineering grid. */
        backgroundImage: `radial-gradient(${hexToRgba(c.ink, 0.18)} 0.8px, transparent 0.8px)`,
        backgroundSize: '16px 16px',
        backgroundPosition: '8px 8px',
      }}>{children}</div>
    </div>
  );
}

function DashboardMock({ c, fonts }) {
  const t = (k) => (window.LWLang ? window.LWLang.t(k) : k);
  const lang = window.LWLang ? window.LWLang.lang() : 'en';
  const greetingHTML = (() => {
    if (lang === 'ru') return { a: 'Доброе утро, ', accent: 'Сара' };
    return { a: 'Good morning, ', accent: 'Sarah' };
  })();
  const clients = lang === 'ru' ? [
    { name: 'Майя Лин',     time: '10:00', flag: 'настроение ↓ 1,2' },
    { name: 'Джордан Парк', time: '13:30', flag: '8 дней тишины' },
    { name: 'Ария Патель',  time: '16:00', flag: null },
  ] : [
    { name: 'Maya Lin',    time: '10:00', flag: 'mood ↓ 1.2' },
    { name: 'Jordan Park', time: '13:30', flag: '8 days quiet' },
    { name: 'Aria Patel',  time: '16:00', flag: null },
  ];
  return (
    <MockShell c={c} fonts={fonts} height={360} label={lang === 'ru' ? 'Сегодня' : 'Today'}>
      <div style={{ fontFamily: fonts.mono, fontSize: 18, fontWeight: 700, color: c.ink, marginBottom: 4, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>
        {greetingHTML.a}<span style={{ color: c.stamp, borderBottom: `2px solid ${c.stamp}`, paddingBottom: 1 }}>{greetingHTML.accent}</span>
      </div>
      <div style={{ fontFamily: fonts.mono, fontSize: 11, color: c.textTertiary, marginBottom: 14, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t('signup.mock_today_meta')}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {clients.map((s, i) => (
          <div key={i} style={{
            padding: '10px 12px', borderRadius: 2,
            background: c.bgSubtle, border: `1.5px solid ${c.ink}`,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 2,
              background: c.accent, color: c.textOnAccent,
              border: `1.5px solid ${c.ink}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: fonts.mono, fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
            }}>{s.name.split(' ').map(x => x[0]).join('')}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: fonts.mono, fontSize: 12, fontWeight: 700, color: c.ink, textTransform: 'uppercase', letterSpacing: '0.02em' }}>{s.name}</div>
              {s.flag && (
                <div style={{ fontFamily: fonts.mono, fontSize: 10, color: c.stamp, fontWeight: 600, letterSpacing: '0.04em' }}>! {s.flag.toUpperCase()}</div>
              )}
            </div>
            <div style={{ fontFamily: fonts.mono, fontSize: 13, fontWeight: 700, color: c.ink }}>{s.time}</div>
          </div>
        ))}
      </div>
    </MockShell>
  );
}

function ClientMock({ c, fonts }) {
  const t = (k) => (window.LWLang ? window.LWLang.t(k) : k);
  const lang = window.LWLang ? window.LWLang.lang() : 'en';
  const sk = ['health', 'career', 'money', 'love', 'joy', 'growth', 'people', 'contribution'];
  const scores = [6, 8, 5, 7, 7, 8, 6, 7];
  const size = 130, cx = size / 2, cy = size / 2, rMax = size * 0.42;
  const clientName = lang === 'ru' ? 'Майя Лин' : 'Maya Lin';
  return (
    <MockShell c={c} fonts={fonts} height={360} label={lang === 'ru' ? 'Карточка клиента' : 'Client profile'}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 2,
          background: c.accent, color: c.textOnAccent,
          border: `1.5px solid ${c.ink}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: fonts.mono, fontSize: 14, fontWeight: 700,
        }}>{lang === 'ru' ? 'МЛ' : 'ML'}</div>
        <div>
          <div style={{ fontFamily: fonts.mono, fontSize: 16, fontWeight: 700, color: c.ink, textTransform: 'uppercase', letterSpacing: '-0.005em' }}>{clientName}</div>
          <div style={{ fontFamily: fonts.mono, fontSize: 10, color: c.textTertiary, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t('signup.mock_client_meta')}</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <svg width="100%" viewBox={`0 0 ${size} ${size}`}>
          <circle cx={cx} cy={cy} r={rMax} fill="none" stroke={c.ink} strokeWidth="1" />
          {sk.map((key, i) => {
            const a0 = (i / 8) * Math.PI * 2 - Math.PI / 2;
            const a1 = ((i + 1) / 8) * Math.PI * 2 - Math.PI / 2;
            const rFilled = (scores[i] / 10) * rMax;
            const fp0 = `${cx} ${cy}`;
            const fp1 = `${cx + Math.cos(a0) * rFilled} ${cy + Math.sin(a0) * rFilled}`;
            const fp2 = `${cx + Math.cos(a1) * rFilled} ${cy + Math.sin(a1) * rFilled}`;
            const ep0 = fp1;
            const ep1 = `${cx + Math.cos(a0) * rMax} ${cy + Math.sin(a0) * rMax}`;
            const ep2 = `${cx + Math.cos(a1) * rMax} ${cy + Math.sin(a1) * rMax}`;
            const ep3 = fp2;
            return (
              <g key={i}>
                <path d={`M${fp0} L${fp1} A${rFilled} ${rFilled} 0 0 1 ${fp2} Z`}
                  fill={c.spheres[key]} stroke={c.ink} strokeWidth="0.75" />
                <path d={`M${ep0} L${ep1} A${rMax} ${rMax} 0 0 1 ${ep2} L${ep3} A${rFilled} ${rFilled} 0 0 0 ${ep0} Z`}
                  fill="none" stroke={c.ink} strokeWidth="0.5" />
              </g>
            );
          })}
        </svg>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ fontFamily: fonts.mono, fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.textTertiary, marginBottom: 2 }}>{t('signup.mock_client_mood_30')}</div>
          <svg viewBox="0 0 100 30" width="100%" height={30}>
            <polyline points="0,18 12,15 24,20 36,12 48,14 60,10 72,8 84,11 100,7"
              fill="none" stroke={c.ink} strokeWidth="1.5" />
          </svg>
          <div style={{ fontFamily: fonts.display, fontStyle: 'italic', fontSize: 13, color: c.ink, lineHeight: 1.4, marginTop: 4 }}>
            {t('signup.mock_client_quote')}
          </div>
        </div>
      </div>
    </MockShell>
  );
}

function PrepMock({ c, fonts }) {
  const t = (k) => (window.LWLang ? window.LWLang.t(k) : k);
  const tasks = [t('signup.mock_prep_t1'), t('signup.mock_prep_t2'), t('signup.mock_prep_t3')];
  return (
    <MockShell c={c} fonts={fonts} height={360} label={(window.LWLang && window.LWLang.lang() === 'ru') ? 'Сводка перед сессией' : 'Session brief'}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
        <div>
          <div style={{ fontFamily: fonts.mono, fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.textTertiary }}>{t('signup.mock_prep_eyebrow')}</div>
          <div style={{ fontFamily: fonts.mono, fontSize: 16, fontWeight: 700, color: c.ink, marginTop: 2, textTransform: 'uppercase', letterSpacing: '-0.005em' }}>{t('signup.mock_prep_meta')}</div>
        </div>
      </div>
      <div style={{
        padding: '10px 12px', borderRadius: 2, marginBottom: 12,
        background: hexToRgba(c.flame, 0.10), border: `1.5px solid ${c.flame}`,
      }}>
        <div style={{ fontFamily: fonts.mono, fontSize: 10, fontWeight: 700, color: c.flame, marginBottom: 2, letterSpacing: '0.12em', textTransform: 'uppercase' }}>! {t('signup.mock_prep_movers')}</div>
        <div style={{ fontFamily: fonts.mono, fontSize: 12, color: c.ink, fontWeight: 500 }}>
          {t('signup.mock_prep_movers_data')}
        </div>
      </div>
      <div style={{ fontFamily: fonts.mono, fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.textTertiary, marginBottom: 8 }}>—— {t('signup.mock_prep_open')}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {tasks.map((label, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: fonts.mono, fontSize: 12, color: c.ink }}>
            <span style={{ width: 14, height: 14, border: `1.5px solid ${c.ink}`, flexShrink: 0, background: c.bg }} />
            <span>{label}</span>
          </div>
        ))}
      </div>
    </MockShell>
  );
}

// ─── Privacy section ───────────────────────────────────────────
function PrivacySection_LANDING({ c, fonts, type, isMobile }) {
  const { t } = useLW();
  const promises = [
    { title: t('signup.privacy_p1_title'), body: t('signup.privacy_p1_body') },
    { title: t('signup.privacy_p2_title'), body: t('signup.privacy_p2_body') },
    { title: t('signup.privacy_p3_title'), body: t('signup.privacy_p3_body') },
    { title: t('signup.privacy_p4_title'), body: t('signup.privacy_p4_body') },
  ];

  return (
    <section id="privacy" style={{
      padding: isMobile ? '56px 20px 64px' : '96px 32px 96px',
      background: c.bgSubtle,
      borderTop: `1.5px solid ${c.ink}`, borderBottom: `1.5px solid ${c.ink}`,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gap: isMobile ? 32 : 56, gridTemplateColumns: isMobile ? '1fr' : '0.9fr 1.1fr' }}>
          <div>
            <div style={{ marginBottom: 18 }}>
              <span className="br-marker">[§04 / {t('signup.privacy_eyebrow').toUpperCase()}]</span>
            </div>
            <h2 style={{
              fontFamily: fonts.mono, fontSize: isMobile ? 28 : 44, fontWeight: 700,
              lineHeight: 1.06, letterSpacing: '-0.02em', color: c.ink, margin: 0, marginBottom: 4,
              textWrap: 'balance', textTransform: 'uppercase',
            }}>
              {t('signup.privacy_title_a')} <span style={{
                color: c.accentInk,
                borderBottom: `3px solid ${c.accentInk}`,
                paddingBottom: 2,
              }}>{t('signup.privacy_title_accent')}</span> {t('signup.privacy_title_b')}
            </h2>
            <div style={{ height: 1.5, background: c.ink, width: 96, marginTop: 18, marginBottom: 18 }} />
            <p style={{
              fontFamily: fonts.mono, fontSize: isMobile ? 13 : 14, lineHeight: 1.65,
              color: c.textSecondary, margin: 0, marginBottom: 22,
            }}>
              {t('signup.privacy_sub')}
            </p>
            <a href="#cta" className="br-btn lw-link-hover" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 18px', fontSize: 12,
              textDecoration: 'none',
            }}>
              [ {t('signup.privacy_charter')} ]
            </a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {promises.map((p, i) => (
              <div key={i} className="br-paper" style={{
                padding: isMobile ? '18px 20px' : '20px 24px',
                display: 'flex', gap: 14,
              }}>
                <div style={{
                  flexShrink: 0, width: 32, height: 32, borderRadius: 0,
                  background: c.accent, color: c.textOnAccent,
                  border: `1.5px solid ${c.ink}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: fonts.mono, fontSize: 14, fontWeight: 700,
                }}>✓</div>
                <div>
                  <div style={{
                    fontFamily: fonts.mono, fontSize: 14, fontWeight: 700,
                    color: c.ink, marginBottom: 6, lineHeight: 1.3,
                    textTransform: 'uppercase', letterSpacing: '-0.005em',
                  }}>{p.title}</div>
                  <div style={{
                    fontFamily: fonts.mono, fontSize: 12.5, lineHeight: 1.6,
                    color: c.textSecondary,
                  }}>{p.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Testimonial ───────────────────────────────────────────────
function Testimonial({ c, fonts, type, isMobile }) {
  const { t } = useLW();
  // Per V1 brief: drop fake testimonial. Show school certifications
  // beta coaches come from. When real coach quotes are available,
  // replace with quote + headshot — that beats every logo strip.
  const lang = window.LWLang ? window.LWLang.lang() : 'en';
  const isRu = lang === 'ru';
  const schools = ['ICF', 'АРК', 'Erickson', 'iPEC', '5 Prism', 'Co-Active'];
  return (
    <section style={{
      padding: isMobile ? '56px 20px 64px' : '88px 32px 88px',
      maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative',
    }}>
      <div style={{
        fontFamily: fonts.display, fontStyle: 'italic', fontWeight: 500,
        fontSize: isMobile ? 16 : 18, color: c.textTertiary, marginBottom: 24,
      }}>
        {isRu ? '— Бета-коучи с сертификацией —' : '— Beta coaches certified through —'}
      </div>
      <div style={{
        display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: isMobile ? 12 : 22,
      }}>
        {schools.map((name, i) => (
          <div key={i} style={{
            padding: '10px 18px',
            border: `1.5px solid ${c.ink}`, borderRadius: 2,
            background: c.card,
            boxShadow: `2px 2px 0 0 ${c.ink}`,
            fontFamily: fonts.display, fontStyle: 'italic', fontWeight: 500,
            fontSize: isMobile ? 16 : 20, color: c.ink,
            letterSpacing: '-0.01em',
          }}>{name}</div>
        ))}
      </div>
      <div style={{
        marginTop: 22,
        fontFamily: fonts.mono, fontSize: 11, color: c.textTertiary,
        letterSpacing: '0.10em', textTransform: 'uppercase',
      }}>
        {isRu ? '—— подтверждённые квалификации, не рекламные логотипы ——' : '—— verified credentials, not licensed logos ——'}
      </div>
    </section>
  );
}

// ─── Pricing ───────────────────────────────────────────────────
function PricingSection({ c, fonts, type, isMobile, billing, setBilling }) {
  const { t } = useLW();
  // Tight MVP: Studio tier dropped (multi-coach workspace not built). Only the
  // features that actually exist today are listed. Once Stripe billing + intake
  // builder + PDF export ship, the Practice card can grow back.
  // V1 brief tiers: Free during beta / Pro $49/mo / Studio with bulk seats Q3.
  // Pro is highlighted (the on-ramp from beta). Studio is waitlist-only.
  const tiers = [
    {
      name: t('signup.tier_solo'), tag: t('signup.tier_solo_tag'),
      free: true,
      features: [
        t('signup.feat_solo_1'),
        t('signup.feat_solo_2'),
        t('signup.feat_solo_3'),
        t('signup.feat_solo_4'),
        t('signup.feat_solo_5'),
      ],
      cta: t('signup.cta_start_trial'), highlight: false,
    },
    {
      name: t('signup.tier_practice'), tag: t('signup.tier_practice_tag'),
      monthly: 49, yearly: 39, currency: '$',
      features: [
        t('signup.feat_practice_1'),
        t('signup.feat_practice_2'),
        t('signup.feat_practice_3'),
        t('signup.feat_practice_4'),
        t('signup.feat_practice_5'),
        t('signup.feat_practice_6'),
      ],
      cta: t('signup.cta_start_trial'), highlight: true,
    },
    {
      name: t('signup.tier_studio'), tag: t('signup.tier_studio_tag'),
      custom: true,
      features: [
        t('signup.feat_studio_1'),
        t('signup.feat_studio_2'),
        t('signup.feat_studio_3'),
        t('signup.feat_studio_4'),
      ],
      cta: t('signup.cta_talk'), highlight: false,
    },
  ];

  return (
    <section id="pricing" style={{
      padding: isMobile ? '56px 20px 64px' : '96px 32px 96px',
      maxWidth: 1200, margin: '0 auto', position: 'relative',
    }}>
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto', marginBottom: isMobile ? 36 : 48, position: 'relative' }}>
        <div style={{ marginBottom: 18 }}>
          <span className="br-marker">[§06 / {t('signup.pricing_eyebrow').toUpperCase()}]</span>
        </div>
        <h2 style={{
          fontFamily: fonts.mono, fontSize: isMobile ? 28 : 44, fontWeight: 700,
          lineHeight: 1.06, letterSpacing: '-0.02em', color: c.ink, margin: 0, marginBottom: 4,
          textWrap: 'balance', textTransform: 'uppercase',
        }}>
          {t('signup.pricing_title_a')} <span style={{
            color: c.accentInk,
            borderBottom: `3px solid ${c.accentInk}`,
            paddingBottom: 2,
          }}>{t('signup.pricing_title_accent')}</span>
        </h2>
        <div style={{ height: 1.5, background: c.ink, width: 96, margin: '18px auto 18px' }} />
        <p style={{ fontFamily: fonts.mono, fontSize: isMobile ? 13 : 14, lineHeight: 1.65, color: c.textSecondary, margin: 0, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto' }}>
          {t('signup.pricing_sub')}
        </p>
      </div>

      {/* Billing toggle — segmented brutalist */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 42, position: 'relative' }}>
        <div style={{
          display: 'inline-flex',
          border: `1.5px solid ${c.ink}`,
          boxShadow: `4px 4px 0 0 ${c.ink}`,
          background: c.card,
        }}>
          {[
            { v: 'monthly', label: t('signup.pricing_monthly') },
            { v: 'yearly', label: t('signup.pricing_yearly') },
          ].map((opt, i) => (
            <button key={opt.v} onClick={() => setBilling(opt.v)} style={{
              padding: '10px 22px', border: 'none', cursor: 'pointer',
              background: billing === opt.v ? c.ink : 'transparent',
              color: billing === opt.v ? c.bg : c.ink,
              fontFamily: fonts.mono, fontSize: 11, fontWeight: 700,
              letterSpacing: '0.10em', textTransform: 'uppercase',
              borderLeft: i > 0 ? `1.5px solid ${c.ink}` : 'none',
              transition: 'all 120ms ease',
            }}>
              {opt.label}
            </button>
          ))}
        </div>
      </div>

      <div style={{
        display: 'grid', gap: 28,
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, minmax(0, 1fr))',
        maxWidth: isMobile ? '100%' : 1100, margin: '0 auto',
        position: 'relative',
      }}>
        {tiers.map((tier, ti) => (
          <div key={tier.name} style={{
            position: 'relative',
            padding: isMobile ? '28px 24px' : '32px 28px',
            background: c.card,
            border: `1.5px solid ${c.ink}`,
            boxShadow: tier.highlight
              ? `6px 6px 0 0 ${c.accent}, 7.5px 7.5px 0 0 ${c.ink}`
              : `4px 4px 0 0 ${c.ink}`,
            display: 'flex', flexDirection: 'column',
            transition: 'transform 160ms cubic-bezier(.2,.7,.2,1), box-shadow 160ms ease',
          }}>
            {tier.highlight && (
              <div className="br-stamp" style={{ top: -16, right: 18 }}>
                ✦ {t('signup.pricing_most_popular').toUpperCase()}
              </div>
            )}
            {/* Editorial plan letter */}
            <div style={{
              fontFamily: fonts.display, fontStyle: 'italic', fontWeight: 500,
              fontSize: 22, color: c.textTertiary, marginBottom: 6, lineHeight: 1,
            }}>
              {['i.', 'ii.', 'iii.'][ti] || `${ti + 1}.`}
            </div>
            <div style={{
              fontFamily: fonts.mono, fontSize: 24, fontWeight: 700,
              color: c.ink, marginBottom: 6, letterSpacing: '-0.01em',
              textTransform: 'uppercase',
            }}>{tier.name}</div>
            <div style={{ fontFamily: fonts.mono, fontSize: 12, color: c.textSecondary, marginBottom: 22, lineHeight: 1.5, minHeight: 36 }}>
              {tier.tag}
            </div>
            <div style={{ height: 1.5, background: c.ink, marginBottom: 22 }} />
            <div style={{ marginBottom: 22, minHeight: 64 }}>
              {tier.free ? (
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontFamily: fonts.mono, fontSize: 56, fontWeight: 700, color: c.accentInk, letterSpacing: '-0.04em', lineHeight: 1 }}>
                    {(window.LWLang && window.LWLang.lang() === 'ru') ? 'БЕТА' : 'FREE'}
                  </span>
                </div>
              ) : tier.custom ? (
                <div style={{ fontFamily: fonts.mono, fontSize: 22, fontWeight: 700, color: c.ink, letterSpacing: '-0.015em', textTransform: 'uppercase', lineHeight: 1.15 }}>
                  {(window.LWLang && window.LWLang.lang() === 'ru') ? 'Лето…2026' : 'Coming Q3'}
                </div>
              ) : (
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: fonts.mono, fontSize: 56, fontWeight: 700, color: c.ink, letterSpacing: '-0.04em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                    {tier.currency || '$'}{billing === 'yearly' ? tier.yearly : tier.monthly}
                  </span>
                  <span style={{ fontFamily: fonts.mono, fontSize: 12, color: c.textTertiary, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{t('signup.pricing_per_month')}</span>
                  {billing === 'yearly' && (
                    <span style={{
                      marginLeft: 6, padding: '2px 8px',
                      fontFamily: fonts.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.10em',
                      background: c.accent,
                      color: c.textOnAccent,
                      border: `1.5px solid ${c.ink}`,
                    }}>−20%</span>
                  )}
                </div>
              )}
              {tier.free && (
                <div style={{ fontFamily: fonts.mono, fontSize: 11, color: c.textTertiary, marginTop: 8, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  ── {(window.LWLang && window.LWLang.lang() === 'ru') ? 'до 3 клиентов' : 'up to 3 clients'}
                </div>
              )}
              {tier.custom && (
                <div style={{ fontFamily: fonts.mono, fontSize: 11, color: c.textTertiary, marginTop: 8, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  ── {(window.LWLang && window.LWLang.lang() === 'ru') ? 'оптовые места · лист ожидания' : 'bulk seats · join waitlist'}
                </div>
              )}
              {!tier.custom && !tier.free && billing === 'yearly' && (
                <div style={{ fontFamily: fonts.mono, fontSize: 11, color: c.textTertiary, marginTop: 8, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  ── {t('signup.pricing_billed_year', { n: tier.yearly * 12 })}
                </div>
              )}
            </div>
            <button className={tier.highlight ? 'br-cta' : 'br-btn'} style={{
              width: '100%', padding: '14px 18px',
              fontSize: 12,
              marginBottom: 22,
            }}>
              [ {tier.cta.toUpperCase()} → ]
            </button>
            {/* Receipt-style features list */}
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 0, flex: 1, borderTop: `1px solid ${c.borderSubtle}` }}>
              {tier.features.map((f, j) => (
                <li key={j} style={{
                  display: 'flex', gap: 12, padding: '10px 0',
                  fontFamily: fonts.mono, fontSize: 12.5, color: c.ink, lineHeight: 1.5,
                  borderBottom: `1px dashed ${c.borderSubtle}`,
                }}>
                  <span style={{ color: c.accentInk, fontWeight: 700, flexShrink: 0 }}>+</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── FAQ ───────────────────────────────────────────────────────
function FAQSection({ c, fonts, type, isMobile }) {
  const { t } = useLW();
  const faqs = [
    { q: t('signup.faq_q1'), a: t('signup.faq_a1') },
    { q: t('signup.faq_q2'), a: t('signup.faq_a2') },
    { q: t('signup.faq_q3'), a: t('signup.faq_a3') },
    { q: t('signup.faq_q4'), a: t('signup.faq_a4') },
    { q: t('signup.faq_q5'), a: t('signup.faq_a5') },
    { q: t('signup.faq_q6'), a: t('signup.faq_a6') },
    { q: t('signup.faq_q7'), a: t('signup.faq_a7') },
  ];

  return (
    <section style={{ padding: isMobile ? '48px 20px 64px' : '80px 32px 96px', maxWidth: 900, margin: '0 auto', position: 'relative' }}>
      <div style={{ marginBottom: 28, textAlign: 'center' }}>
        <span className="br-marker">[§07 / {(window.LWLang && window.LWLang.lang() === 'ru') ? 'ВОПРОСЫ' : 'FAQ'}]</span>
      </div>
      <h2 style={{
        fontFamily: fonts.mono, fontSize: isMobile ? 26 : 40, fontWeight: 700,
        lineHeight: 1.1, letterSpacing: '-0.02em', color: c.ink,
        margin: 0, marginBottom: 36, textAlign: 'center', textTransform: 'uppercase',
      }}>
        {t('signup.faq_title_a')} <span style={{
          color: c.accentInk,
          borderBottom: `3px solid ${c.accentInk}`,
          paddingBottom: 2,
        }}>{t('signup.faq_title_accent')}</span>
      </h2>
      <div style={{
        display: 'flex', flexDirection: 'column', gap: 0,
        border: `1.5px solid ${c.ink}`, background: c.card,
      }}>
        {faqs.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} c={c} fonts={fonts} defaultOpen={i === 0} index={i} isLast={i === faqs.length - 1} />)}
      </div>
    </section>
  );
}

function FAQItem({ q, a, c, fonts, defaultOpen, index, isLast }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className="br-faq" style={{
      borderBottom: isLast ? 'none' : `1.5px solid ${c.ink}`,
      background: open ? c.bgSubtle : 'transparent',
    }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', padding: '20px 24px', background: 'none', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        textAlign: 'left',
      }}>
        <span style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <span style={{
            fontFamily: fonts.display, fontStyle: 'italic', fontWeight: 500,
            fontSize: 22, color: c.textTertiary, lineHeight: 1, flexShrink: 0, width: 28,
          }}>{String(index + 1).padStart(2, '0')}.</span>
          <span style={{
            fontFamily: fonts.mono, fontSize: 15, fontWeight: 600,
            color: c.ink, lineHeight: 1.4,
          }}>{q}</span>
        </span>
        <span style={{
          flexShrink: 0, width: 28, height: 28, borderRadius: 0,
          background: open ? c.ink : c.bg,
          color: open ? c.bg : c.ink,
          border: `1.5px solid ${c.ink}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: fonts.mono, fontSize: 14, fontWeight: 700,
          transition: 'all 160ms ease',
        }}>{open ? '−' : '+'}</span>
      </button>
      {open && (
        <div style={{
          padding: '0 24px 22px 56px',
          fontFamily: fonts.mono, fontSize: 13, lineHeight: 1.65, color: c.textSecondary,
          animation: 'lw-fade-up 280ms cubic-bezier(.2,.7,.2,1) both',
        }}>{a}</div>
      )}
    </div>
  );
}

// ─── Final CTA ─────────────────────────────────────────────────
function FinalCTA({ c, fonts, type, isMobile, name, setName, email, setEmail, password, setPassword, submitting, error, onSubmit, onApple, signedInAs }) {
  const { t } = useLW();
  // Inversion block — bg/fg swap relative to the surrounding page so
  // §08 always reads as "the dramatic passage". Light mode: ink-black
  // block with cream type. Dark mode: cream block with ink type.
  const ctaBg = c.ink;
  const ctaFg = c.bg;
  // Inverted form colors — flip the c object so SignupFields renders right
  const cInv = { ...c, bg: c.ink, ink: c.bg, card: c.ink, cardHover: c.ink,
    textPrimary: c.bg, textSecondary: c.bgSubtle, textTertiary: c.textTertiary,
    textOnAccent: c.ink, borderSubtle: c.borderSubtle, borderDefault: c.borderDefault };
  return (
    <section id="cta" style={{
      padding: isMobile ? '64px 20px 80px' : '120px 32px 120px',
      background: ctaBg,
      color: ctaFg,
      borderTop: `1.5px solid ${c.ink}`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <div style={{ marginBottom: 24 }}>
          <span style={{
            fontFamily: fonts.mono, fontSize: 11, fontWeight: 600,
            letterSpacing: '0.16em', textTransform: 'uppercase', color: ctaFg,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '4px 10px', border: `1.5px solid ${ctaFg}`,
          }}>[§08 / {(window.LWLang && window.LWLang.lang() === 'ru') ? 'ЗАПУСК' : 'GET STARTED'}]</span>
        </div>
        <h2 style={{
          fontFamily: fonts.mono, fontSize: isMobile ? 32 : 56, fontWeight: 700,
          lineHeight: 1.05, letterSpacing: '-0.02em', color: ctaFg,
          margin: 0, marginBottom: 18, textWrap: 'balance', textTransform: 'uppercase',
        }}>
          {t('signup.cta_title_a')} <span style={{
            color: c.accent,
            borderBottom: `3px solid ${c.accent}`,
            paddingBottom: 2,
          }}>{t('signup.cta_title_accent')}</span>
        </h2>
        <div style={{ height: 1.5, background: ctaFg, width: 96, margin: '20px auto 22px' }} />
        <p style={{
          fontFamily: fonts.mono, fontSize: isMobile ? 13 : 15, lineHeight: 1.6,
          color: ctaFg, opacity: 0.7, margin: 0, marginBottom: 32,
          letterSpacing: '0.04em', textTransform: 'uppercase',
        }}>
          {t('signup.cta_sub')}
        </p>
        {signedInAs ? (
          <a href="Dashboard.html" className="br-cta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '15px 24px', fontSize: 13,
            textDecoration: 'none',
          }}>
            [ {t('auth.open_dashboard')} → ]
          </a>
        ) : (
          <div style={{ background: ctaFg, color: ctaBg, padding: 28, maxWidth: 460, margin: '0 auto', border: `1.5px solid ${ctaFg}`, boxShadow: `8px 8px 0 0 ${c.accent}` }}>
            <SignupFields c={cInv} fonts={fonts} center
              name={name} setName={setName}
              email={email} setEmail={setEmail}
              password={password} setPassword={setPassword}
              submitting={submitting} error={error} onSubmit={onSubmit} onApple={onApple} />
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────
function Footer({ c, fonts }) {
  const { t } = useLW();
  const cols = [
    { title: t('signup.footer_col_product'), links: [t('signup.footer_link_how'), t('signup.footer_link_pricing'), t('signup.footer_link_for_clients'), t('signup.footer_link_telegram'), t('signup.footer_link_changelog')] },
    { title: t('signup.footer_col_coaches'), links: [t('signup.footer_link_signin'), t('signup.footer_link_help'), t('signup.footer_link_dpa'), t('signup.footer_link_onboarding'), t('signup.footer_link_refer')] },
    { title: t('signup.footer_col_company'), links: [t('signup.footer_link_about'), t('signup.footer_link_privacy'), t('signup.footer_link_terms'), t('signup.footer_link_charter'), t('signup.footer_link_contact')] },
  ];
  return (
    <footer style={{
      padding: '48px 32px 32px', maxWidth: 1280, margin: '0 auto',
      borderTop: `1.5px solid ${c.ink}`, background: c.bg,
    }}>
      <div style={{
        display: 'grid', gap: 32,
        gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
        marginBottom: 40,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <LWMark c={c} size={24} />
            <span style={{ fontFamily: fonts.mono, fontSize: 14, fontWeight: 700, color: c.ink, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              LIFEWHEEL.COACH
            </span>
          </div>
          <p style={{ fontFamily: fonts.mono, fontSize: 12, color: c.textSecondary, margin: 0, lineHeight: 1.55 }}>
            {t('signup.footer_tagline')}
          </p>
        </div>
        {cols.map(col => (
          <div key={col.title}>
            <div style={{
              fontFamily: fonts.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: c.ink, marginBottom: 12,
              borderBottom: `1.5px solid ${c.ink}`, paddingBottom: 6,
            }}>{col.title}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
              {col.links.map(l => (
                <li key={l}>
                  <a href="#" className="lw-link-hover" style={{
                    fontFamily: fonts.mono, fontSize: 12, color: c.textSecondary, textDecoration: 'none',
                    padding: '2px 0', display: 'inline-block',
                  }}>· {l}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      {/* Colophon — printed-publication footer note */}
      <div style={{
        marginTop: 8, marginBottom: 18,
        padding: '14px 0',
        borderTop: `1.5px solid ${c.ink}`, borderBottom: `1.5px dashed ${c.borderDefault}`,
        fontFamily: fonts.mono, fontSize: 11, color: c.textSecondary,
        lineHeight: 1.6, fontStyle: 'italic',
      }}>
        {(window.LWLang && window.LWLang.lang() === 'ru')
          ? '✦  ВЫХОДНЫЕ ДАННЫЕ ·· Набрано IBM Plex Mono и Fraunces. Сделано для коучей, которым нужно видеть 167 часов между сессиями. Колесо всегда принадлежит клиенту; портал мы держим в порядке.'
          : '✦  COLOPHON ·· Set in IBM Plex Mono & Fraunces. Composed for coaches who want to see the 167 hours between sessions. The wheel is yours, always; the workspace is ours to keep crafted.'}
      </div>
      <div style={{
        paddingTop: 14,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14,
        fontFamily: fonts.mono, fontSize: 11, color: c.textTertiary,
        letterSpacing: '0.06em', textTransform: 'uppercase',
      }}>
        <span>{t('signup.footer_copyright')} ·· {(window.LWLang && window.LWLang.lang() === 'ru') ? 'Том 04 · Май 2026' : 'Vol. 04 · May 2026'}</span>
        <span>{t('signup.footer_built_by')}</span>
      </div>
    </footer>
  );
}

// ─── Keep your stack — counter-positioning interlude ──────────
// "We don't replace your stack — we're the coaching layer it's
// missing." Goes between Product (what we are) and Privacy.
// No §-marker — reads as a sidebar/aside, not a chapter.
function KeepStackSection({ c, fonts, isMobile }) {
  const t = (k) => (window.LWLang ? window.LWLang.t(k) : k);
  // Returns empty string if the key isn't defined (lang.js falls back
  // to returning the key itself on miss). Avoids "signup.x_b" leaking.
  const tt = (k) => { const v = t(k); return (v === k || !v) ? '' : v; };
  const lang = window.LWLang ? window.LWLang.lang() : 'en';
  const isRu = lang === 'ru';

  // Tools coaches keep — rendered as a paper card list
  const kept = ['Cal.com', 'Calendly', 'Zoom', 'Stripe', 'YooKassa', 'Notion', 'Telegram'];
  const added = isRu ? [
    'Многоклиентский портал колеса',
    'Данные между сессиями',
    'Отчёты, которым доверяют',
    'Цели и привычки в LifeWheel',
  ] : [
    'Multi-client wheel dashboard',
    'Between-session client data',
    'Progress reports they trust',
    'Goals + habits inside LifeWheel',
  ];

  return (
    <section style={{
      padding: isMobile ? '56px 20px 64px' : '96px 32px 96px',
      maxWidth: 1100, margin: '0 auto', position: 'relative',
    }}>
      <div style={{ marginBottom: 22 }}>
        <span style={{
          fontFamily: fonts.display, fontStyle: 'italic', fontWeight: 500,
          fontSize: 18, color: c.textTertiary,
        }}>
          {isRu ? '— Не путать с —' : '— An aside —'}
        </span>
      </div>
      <h2 style={{
        fontFamily: fonts.mono, fontSize: isMobile ? 28 : 44, fontWeight: 700,
        lineHeight: 1.06, letterSpacing: '-0.02em', color: c.ink, margin: 0, marginBottom: 4,
        textWrap: 'balance', textTransform: 'uppercase', maxWidth: 880,
      }}>
        {t('signup.stack_title_a')} <span style={{
          color: c.accentInk,
          textDecoration: 'underline',
          textDecorationColor: c.accentInk,
          textDecorationThickness: '3px',
          textUnderlineOffset: '8px',
          textDecorationSkipInk: 'none',
        }}>{t('signup.stack_title_accent')}</span>{tt('signup.stack_title_b') ? ` ${tt('signup.stack_title_b')}` : ''}
      </h2>
      <div style={{ height: 1.5, background: c.ink, width: 96, marginTop: 18, marginBottom: 22 }} />
      <p style={{
        fontFamily: fonts.mono, fontSize: isMobile ? 13 : 14, lineHeight: 1.65,
        color: c.textSecondary, margin: 0, marginBottom: 32, maxWidth: 720,
      }}>
        {t('signup.stack_sub')}
      </p>

      <div style={{
        display: 'grid', gap: isMobile ? 16 : 24,
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
      }}>
        {/* You keep */}
        <div style={{
          background: c.card, border: `1.5px solid ${c.ink}`, borderRadius: 2,
          boxShadow: `4px 4px 0 0 ${c.ink}`, padding: '22px 24px',
        }}>
          <div style={{
            fontFamily: fonts.mono, fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
            color: c.textTertiary, textTransform: 'uppercase', marginBottom: 16,
          }}>{t('signup.stack_kept_label')}</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {kept.map((tool, i) => (
              <li key={i} style={{
                fontFamily: fonts.mono, fontSize: 12, fontWeight: 600,
                color: c.ink, padding: '6px 12px',
                border: `1.5px solid ${c.ink}`, borderRadius: 2,
                background: c.bg,
              }}>{tool}</li>
            ))}
          </ul>
        </div>
        {/* We add */}
        <div style={{
          background: c.accent, color: c.textOnAccent,
          border: `1.5px solid ${c.ink}`, borderRadius: 2,
          boxShadow: `4px 4px 0 0 ${c.ink}`, padding: '22px 24px',
        }}>
          <div style={{
            fontFamily: fonts.mono, fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
            color: c.textOnAccent, opacity: 0.7, textTransform: 'uppercase', marginBottom: 16,
          }}>{t('signup.stack_added_label')}</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {added.map((item, i) => (
              <li key={i} style={{
                fontFamily: fonts.mono, fontSize: 13, fontWeight: 600,
                color: c.textOnAccent, lineHeight: 1.4,
                display: 'flex', gap: 10,
              }}>
                <span style={{ flexShrink: 0 }}>+</span>
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ─── Seat tease — bulk LifeWheel Premium seats coming Q3 ──────
// Sits between Pricing and FAQ. Separate email capture for the
// 5 US coaches who explicitly asked for the B2B2C reseller model.
function SeatTeaseSection({ c, fonts, isMobile }) {
  const t = (k) => (window.LWLang ? window.LWLang.t(k) : k);
  const tt = (k) => { const v = t(k); return (v === k || !v) ? '' : v; };
  const lang = window.LWLang ? window.LWLang.lang() : 'en';
  const isRu = lang === 'ru';
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || submitting) return;
    setSubmitting(true);
    try {
      // Write to Firebase RTDB seat-waitlist node so we can email them when seats ship.
      if (window.firebase && window.firebase.database) {
        const node = window.firebase.database().ref('coachSeatWaitlist').push();
        await node.set({
          email: email.trim(),
          lang,
          ts: Date.now(),
          ua: typeof navigator !== 'undefined' ? navigator.userAgent : null,
        });
      }
      setSubmitted(true);
    } catch (err) {
      console.error('[seats]', err);
      setSubmitted(true); // still show thanks; the email is captured client-side anyway
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section style={{
      padding: isMobile ? '64px 20px' : '96px 32px',
      maxWidth: 1100, margin: '0 auto', position: 'relative',
    }}>
      <div style={{
        background: c.card, border: `1.5px solid ${c.ink}`, borderRadius: 2,
        boxShadow: `6px 6px 0 0 ${c.ink}`,
        padding: isMobile ? '32px 24px' : '44px 48px',
        display: 'grid', gap: isMobile ? 24 : 48,
        gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr',
        alignItems: 'center',
      }}>
        <div>
          <div style={{ marginBottom: 16, display: 'inline-block' }}>
            <span style={{
              display: 'inline-block', padding: '5px 12px',
              border: `1.5px solid ${c.stamp}`, color: c.stamp,
              fontFamily: fonts.mono, fontSize: 11, fontWeight: 700,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              transform: 'rotate(-2deg)',
              background: hexToRgba(c.stamp, 0.06),
            }}>✦ {t('signup.seats_eyebrow')}</span>
          </div>
          <h2 style={{
            fontFamily: fonts.mono, fontSize: isMobile ? 24 : 36, fontWeight: 700,
            lineHeight: 1.1, letterSpacing: '-0.02em', color: c.ink, margin: 0, marginBottom: 4,
            textWrap: 'balance', textTransform: 'uppercase',
          }}>
            {t('signup.seats_title_a')} <span style={{
              color: c.accentInk,
              textDecoration: 'underline',
              textDecorationColor: c.accentInk,
              textDecorationThickness: '3px',
              textUnderlineOffset: '8px',
              textDecorationSkipInk: 'none',
            }}>{t('signup.seats_title_accent')}</span>{tt('signup.seats_title_b') ? ` ${tt('signup.seats_title_b')}` : ''}
          </h2>
          <div style={{ height: 1.5, background: c.ink, width: 64, marginTop: 16, marginBottom: 18 }} />
          <p style={{
            fontFamily: fonts.mono, fontSize: 13, lineHeight: 1.65,
            color: c.textSecondary, margin: 0,
          }}>
            {t('signup.seats_sub')}
          </p>
        </div>
        <div>
          {submitted ? (
            <div style={{
              padding: '24px 22px',
              border: `1.5px solid ${c.accent}`, borderRadius: 2,
              background: hexToRgba(c.accent, 0.08),
              fontFamily: fonts.mono, fontSize: 13, color: c.ink, lineHeight: 1.5,
            }}>
              <div style={{ fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6, color: c.accent }}>
                ✓ {isRu ? 'В списке ожидания' : 'On the waitlist'}
              </div>
              {isRu ? 'Напишем, когда оптовые места готовы. Без спама.' : 'We will write when bulk seats are ready. No spam.'}
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input
                className="br-input" type="email" required
                placeholder={t('signup.seats_form_email_placeholder') || 'your@coachingpractice.com'}
                value={email} onChange={e => setEmail(e.target.value)}
                style={{ padding: '14px 16px', fontFamily: fonts.mono, fontSize: 14, color: c.ink, outline: 'none', width: '100%' }}
              />
              <button type="submit" disabled={submitting} className="br-cta" style={{
                padding: '14px 18px', fontSize: 12,
                background: submitting ? c.textTertiary : c.accent,
                cursor: submitting ? 'progress' : 'pointer',
                opacity: submitting ? 0.7 : 1,
              }}>
                [ {(t('signup.seats_cta') || 'Join the seat waitlist').toUpperCase()} → ]
              </button>
              <div style={{
                fontFamily: fonts.mono, fontSize: 10, color: c.textTertiary,
                letterSpacing: '0.10em', textTransform: 'uppercase',
              }}>—— {isRu ? 'Отдельный список. Письмо только когда оптовые места готовы.' : 'Separate list. Email only when seats ship.'}</div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Wheel interlude — the artifact, alive ─────────────────
// Editorial breath between Problem and Product. Brings back the
// rotating wheel as a decorative anchor — wheel-native is our
// differentiation, this is where the user *sees* the wheel.
// Auto-rotates slowly (240s); scroll-driven additional rotation.
function WheelInterlude({ c, fonts, isMobile }) {
  const lang = window.LWLang ? window.LWLang.lang() : 'en';
  const isRu = lang === 'ru';
  const SPHERES = ['health', 'career', 'money', 'love', 'joy', 'growth', 'people', 'contribution'];
  const NAMES = isRu
    ? ['Здоровье', 'Работа', 'Деньги', 'Любовь', 'Радость', 'Рост', 'Люди', 'Вклад']
    : ['Health', 'Career', 'Money', 'Love', 'Joy', 'Growth', 'People', 'Contribution'];
  const scores = [7, 9, 6, 5, 8, 7, 8, 6];
  const size = isMobile ? 280 : 420;
  const cx = size / 2, cy = size / 2;
  const rMax = size * 0.42;

  // Scroll-driven rotation. Reuses the same rAF pattern as the prior
  // HeroVisual; honors prefers-reduced-motion.
  const sceneRef = useRef(null);
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    let raf = 0, last = -1;
    const tick = () => {
      raf = 0;
      const root = sceneRef.current;
      if (!root) return;
      const rect = root.getBoundingClientRect();
      const vh = window.innerHeight || 800;
      const t = (rect.top + rect.height / 2 - vh / 2) / vh;
      if (t === last) return;
      last = t;
      const wheel = root.querySelector('[data-wheel]');
      if (wheel) wheel.style.setProperty('--lw-rot', `${(-t * 24).toFixed(2)}deg`);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section ref={sceneRef} style={{
      padding: isMobile ? '32px 20px 64px' : '24px 32px 80px',
      maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative',
    }}>
      {/* Italic intro caption */}
      <div style={{
        fontFamily: fonts.display, fontStyle: 'italic', fontWeight: 500,
        fontSize: isMobile ? 16 : 20, color: c.textTertiary, marginBottom: 20,
      }}>
        {isRu ? '— Колесо жизни —' : '— The wheel of life —'}
      </div>
      {/* The wheel — auto-spin wrapper + scroll-rotation on inner SVG */}
      <div style={{
        position: 'relative', width: size, height: size, margin: '0 auto',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          animation: 'lw-spin-static 240s linear infinite',
          willChange: 'transform',
        }}>
          <svg data-wheel width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{
            transform: 'rotate(var(--lw-rot, 0deg))',
            transition: 'transform 320ms cubic-bezier(.2,.7,.2,1)',
            willChange: 'transform',
          }}>
            <circle cx={cx} cy={cy} r={rMax} fill="none" stroke={c.ink} strokeWidth="1.5" />
            {SPHERES.map((sk, i) => {
              const a0 = (i / 8) * Math.PI * 2 - Math.PI / 2;
              const a1 = ((i + 1) / 8) * Math.PI * 2 - Math.PI / 2;
              const rFilled = (scores[i] / 10) * rMax;
              const fp1 = `${cx + Math.cos(a0) * rFilled} ${cy + Math.sin(a0) * rFilled}`;
              const fp2 = `${cx + Math.cos(a1) * rFilled} ${cy + Math.sin(a1) * rFilled}`;
              const ep1 = `${cx + Math.cos(a0) * rMax} ${cy + Math.sin(a0) * rMax}`;
              const ep2 = `${cx + Math.cos(a1) * rMax} ${cy + Math.sin(a1) * rMax}`;
              return (
                <g key={i}>
                  <path d={`M${cx} ${cy} L${fp1} A${rFilled} ${rFilled} 0 0 1 ${fp2} Z`}
                    fill={c.spheres[sk]} stroke={c.ink} strokeWidth="1" />
                  <path d={`M${fp1} L${ep1} A${rMax} ${rMax} 0 0 1 ${ep2} L${fp2} A${rFilled} ${rFilled} 0 0 0 ${fp1} Z`}
                    fill="none" stroke={c.ink} strokeWidth="1" />
                </g>
              );
            })}
            <circle cx={cx} cy={cy} r={rMax * 0.20} fill={c.bg} stroke={c.ink} strokeWidth="1.5" />
            <text x={cx} y={cy + 7} textAnchor="middle" fontFamily={fonts.mono} fontSize={20} fontWeight={700} fill={c.ink}>7.0</text>
          </svg>
        </div>
      </div>
      {/* Closing caption */}
      <div style={{
        marginTop: 24, fontFamily: fonts.mono, fontSize: 11,
        color: c.textTertiary, letterSpacing: '0.16em', textTransform: 'uppercase',
      }}>
        {isRu ? '—— Универсально в коучинге. Редко в софте. ——' : '—— Universal in coaching. Rare in software. ——'}
      </div>
      {/* Local keyframes for the static auto-spin (renamed to avoid clash
          with any prior lw-spin definition that may not exist anymore) */}
      <style>{`
        @keyframes lw-spin-static {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
      `}</style>
    </section>
  );
}

window.LWLanding = LWLanding;