// Variant C — "Maximalist scoreboard"
// Goes hardest on the meme: huge wordmark, ascii-receipt vibes, full-bleed leaderboard at top
// Form is a sticky right-side rail. Most experimental.

function VariantC({ headline = 'maxx your tokens. ship what they bought.' }) {
  const isMobile = window.useMediaQuery ? window.useMediaQuery('(max-width: 768px)') : false;
  const padX = isMobile ? 16 : 28;
  const padY = isMobile ? 56 : 88;
  return (
    <div style={{ background: 'var(--bg-0)', minHeight: '100%', position: 'relative', overflow: 'hidden' }}>
      {window.__SHOW_GRID !== false && <GridBackdrop alpha={0.35} />}

      {/* Top bar */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 10,
        height: 56, padding: '0 28px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'rgba(11,13,15,0.85)', backdropFilter: 'blur(12px)',
        borderBottom: '1px solid var(--border)'
      }}>
        <Wordmark size={18} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }} />
          <span>private beta</span>
        </div>
      </div>

      {/* Massive wordmark hero — ascii feel */}
      <section style={{
        padding: isMobile ? '40px 16px 16px' : '64px 28px 24px',
        position: 'relative',
        textAlign: 'center',
        maxWidth: 1400, margin: '0 auto'
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
          letterSpacing: '0.2em', marginBottom: 16
        }}>
          ▮ ▮ ▮ ▮ ▮ &nbsp; T O K E N M A X X E R &nbsp; ▮ ▮ ▮ ▮ ▮
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(48px, 9vw, 128px)', fontWeight: 700,
          letterSpacing: '-0.045em', lineHeight: 0.92,
          color: 'var(--fg-0)',
          margin: 0,
          maxWidth: 1200,
          marginInline: 'auto'
        }}>
          {headline.split('.').filter(Boolean).map((line, i, arr) =>
          <span key={i} style={{ display: 'block', color: i === 1 ? 'var(--accent)' : 'var(--fg-0)' }}>
              {line.trim()}{i < arr.length - 1 ? '.' : ''}
            </span>
          )}
        </h1>

        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 18,
          color: 'var(--fg-2)', lineHeight: 1.55,
          maxWidth: 640, margin: '24px auto 0'
        }}>
          you're already maxxing tokens. we just tell you — <em style={{ color: 'var(--fg-0)', fontStyle: 'normal', fontWeight: 600 }}>and your engineers, and your CTO</em> — what they did.
        </p>
      </section>

      {/* Hero: org-flows console preview + sticky form sidebar */}
      <section style={{
        padding: isMobile ? '20px 16px 40px' : '32px 28px 64px',
        maxWidth: 1400, margin: '0 auto',
        position: 'relative'
      }}>
        {/* Full-width console preview */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 14
        }}>
          <SlashTag>// inside the console · token flows · org breakdown</SlashTag>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
            helio · 7d
          </span>
        </div>
        {window.OrgFlowsHero ? <window.OrgFlowsHero /> : null}

        {/* dense sub-stats — full width */}
        <div style={{
          marginTop: 18,
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          border: '1px dashed var(--fg-3)',
          borderRadius: 'var(--radius-md)',
          overflow: 'hidden'
        }}>
          {[
          ['tokens this wk', '412.6M'],
          ['outcomes', '47 PRs · 23 tickets'],
          ['tokens / PR', '2.02M'],
          ['shadow ai', '2.3%']].
          map(([l, v], i) =>
          <div key={i} style={{
            padding: '16px 18px',
            borderRight: isMobile
              ? (i % 2 === 0 ? '1px dashed var(--fg-3)' : 'none')
              : (i < 3 ? '1px dashed var(--fg-3)' : 'none'),
            borderTop: isMobile && i >= 2 ? '1px dashed var(--fg-3)' : 'none'
          }}>
              <div className="t-overline" style={{ marginBottom: 6 }}>{l}</div>
              <div className="t-num" style={{ fontSize: 22, color: 'var(--fg-0)', fontWeight: 600 }}>{v}</div>
            </div>
          )}
        </div>

        {/* Waitlist + beta perks — separate row below the console */}
        <div style={{
          marginTop: 32,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 20 : 32,
          alignItems: 'start'
        }}>
          <WaitlistForm accentLabel="// see your org's flows first" />

          <div style={{
            padding: '18px 20px',
            border: '1px solid var(--border)',
            borderRadius: 'var(--radius-md)',
            background: 'var(--bg-1)'
          }}>
            <div className="t-overline" style={{ marginBottom: 12, color: 'var(--accent)' }}>// what you get in beta</div>
            {[
            'capture where tokens were used',
            'commit + ticket correlation',
            'slack bot for your squad',
            'private/learning mode',
            'shadow ai detection'].
            map((t, i) =>
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 10,
              padding: '6px 0',
              fontSize: 13, color: 'var(--fg-2)'
            }}>
                <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', flex: 'none' }}>+</span>
                <span>{t}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* How it works — 3-step flow, terminal feel */}
      <section style={{
        padding: `${padY}px ${padX}px`,
        borderTop: '1px dashed var(--fg-3)',
        borderBottom: '1px dashed var(--fg-3)',
        maxWidth: 1400, margin: '0 auto'
      }}>
        <div style={{ marginBottom: 40 }}>
          <SlashTag>// from token to outcome, in 3 hops</SlashTag>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 600,
            letterSpacing: '-0.025em', color: 'var(--fg-0)',
            marginTop: 10, lineHeight: 1.05, maxWidth: 700
          }}>tokens in. outcomes out. ranked.</h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr 1fr',
          gap: isMobile ? 28 : 0
        }}>
          {[
          { n: '01', title: 'capture', code: 'your current ai coding tools', body: 'all your tools feed rich development context into one platform' },
          { n: '02', title: 'correlate', code: 'embed + match', body: 'git anchors, jira anchors, vector similarity. tokens get bound to the artifact they shipped.' },
          { n: '03', title: 'rank', code: 'render 2-5 bullets', body: 'AI generates the summary — automated, not editorialized. ranked across enineers, agents, teams' }].
          map((s, i) =>
          <div key={i} style={{
            padding: isMobile ? 0 : '0 28px',
            borderLeft: !isMobile && i > 0 ? '1px dashed var(--fg-3)' : 'none',
            borderTop: isMobile && i > 0 ? '1px dashed var(--fg-3)' : 'none',
            paddingTop: isMobile && i > 0 ? 28 : 0
          }}>
              <div className="t-num" style={{
              fontSize: 56, color: 'var(--accent)', fontWeight: 600,
              lineHeight: 1, marginBottom: 16, letterSpacing: '-0.04em'
            }}>{s.n}</div>
              <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600,
              color: 'var(--fg-0)', letterSpacing: '-0.02em', marginBottom: 8
            }}>{s.title}</h3>
              <code style={{
              display: 'inline-block',
              fontFamily: 'var(--font-mono)', fontSize: 12,
              background: 'var(--bg-1)', color: 'var(--accent)',
              padding: '4px 8px', borderRadius: 4,
              border: '1px solid var(--border)',
              marginBottom: 14
            }}>{s.code}</code>
              <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6 }}>{s.body}</p>
            </div>
          )}
        </div>
      </section>

      {/* Scoreboard — animated live leaderboard + copy */}
      <section style={{
        padding: `${padY}px ${padX}px`,
        maxWidth: 1400, margin: '0 auto',
        borderBottom: '1px dashed var(--fg-3)'
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.45fr 1fr',
          gap: isMobile ? 32 : 48,
          alignItems: 'start'
        }}>
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 14
            }}>
              <SlashTag>// the scoreboard · live</SlashTag>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
                acme inc · this week
              </span>
            </div>
            <LiveLeaderboard rows={6} />
          </div>

          <div style={{ paddingTop: 32 }}>
            <SlashTag>// why a scoreboard</SlashTag>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 600,
              letterSpacing: '-0.025em', color: 'var(--fg-0)',
              marginTop: 12, marginBottom: 18, lineHeight: 1.05
            }}>
              the rank flips every monday.<br />
              <span style={{ color: 'var(--accent)' }}>your engineers know it.</span>
            </h2>
            <p style={{ fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 18 }}>
              dashboards die in tabs. scoreboards live in the group chat. the
              live leaderboard is the surface most teams actually open — humans
              and agents on the same board, ranked by what they shipped, not
              tokens burned.
            </p>
          </div>
        </div>
      </section>

      {/* Slack */}
      <section style={{ padding: `${padY}px ${padX}px`, maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.1fr',
          gap: isMobile ? 32 : 64,
          alignItems: 'center'
        }}>
          <div>
            <SlashTag>// monday morning, in-channel</SlashTag>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 600,
              letterSpacing: '-0.025em', color: 'var(--fg-0)',
              marginTop: 12, marginBottom: 18, lineHeight: 1.05
            }}>nobody opens dashboards.<br />everybody opens slack.</h2>
            <p style={{ fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 24 }}>
              the weekly impact snapshot lives where your engineers already are. top humans, top agents, what they shipped, with one click to the PR.
            </p>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '10px 14px',
              background: 'var(--bg-1)', border: '1px solid var(--border)',
              borderRadius: 'var(--radius-sm)',
              fontFamily: 'var(--font-mono)', fontSize: 12
            }}>
              <span style={{ color: 'var(--fg-3)' }}>$</span>
              <span style={{ color: 'var(--accent)' }}>/tm-expert</span>
              <span style={{ color: 'var(--fg-1)' }}>postgres migrations</span>
            </div>
          </div>
          <SlackBot />
        </div>
      </section>

      {/* Final CTA — split: beta + email */}
      <section style={{
        padding: `${padY}px ${padX}px`,
        background: 'var(--bg-1)',
        borderTop: '1px dashed var(--fg-3)'
      }}>
        <div style={{
          maxWidth: 1180, margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: 0,
          border: '1px dashed var(--fg-3)',
          borderRadius: 'var(--radius-md)',
          overflow: 'hidden'
        }}>
          <div style={{ padding: '36px 32px' }}>
            <SlashTag>// you read this far</SlashTag>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600,
              color: 'var(--fg-0)', letterSpacing: '-0.025em',
              marginTop: 10, marginBottom: 14
            }}>request the beta</h3>
            <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 18 }}>
              private beta is gated. drop your details and we'll be in touch.
            </p>
            <a href="#top" onClick={(e) => {e.preventDefault();window.scrollTo({ top: 0, behavior: 'smooth' });}} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              height: 44, padding: '0 18px',
              background: 'var(--accent)', color: 'var(--accent-fg)',
              borderRadius: 'var(--radius-sm)',
              fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
              textDecoration: 'none'
            }}>
              jump back to the form ↑
            </a>
          </div>
          <div style={{
            padding: '36px 32px',
            borderLeft: isMobile ? 'none' : '1px dashed var(--fg-3)',
            borderTop: isMobile ? '1px dashed var(--fg-3)' : 'none'
          }}>
            <SlashTag>// not ready yet</SlashTag>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600,
              color: 'var(--fg-0)', letterSpacing: '-0.025em',
              marginTop: 10, marginBottom: 14
            }}>follow our progress</h3>
            <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 18 }}>
              occasional company updates as we build. one click to unsubscribe.
            </p>
            <EmailSignup label="company updates." cta="subscribe" />
          </div>
        </div>
      </section>

      <footer style={{
        padding: '32px 28px',
        maxWidth: 1400, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)'
      }}>
        <span>// tokenmaxxer · democratizing token leaderboards</span>
        <div style={{ display: 'flex', gap: 20 }}>
          {[['privacy', 'privacy.html']].map(([l, href]) =>
          <a key={l} href={href} style={{ color: 'var(--fg-3)', textDecoration: 'none' }}>{l}</a>
          )}
        </div>
      </footer>
    </div>);

}

Object.assign(window, { VariantC });