// Variant D — team-focused redesign of VariantC.
// Removes the engineer-specific leaderboard and the individual-ranked
// Slack digest; replaces them with TeamLeaderboard + SlackBotTeams.
// Copy shift: "humans + agents" framing → "teams + agent share per team".
// Page flow is otherwise identical to VariantC for easy A/B comparison.

function VariantD({ headline = 'every ai token, mapped to the work it shipped.' }) {
    const isMobile = window.useMediaQuery ? window.useMediaQuery('(max-width: 768px)') : false;
    const padX = isMobile ? 16 : 28;
    const padY = isMobile ? 56 : 88;

    const scrollTo = (sel) => (e) => {
        e.preventDefault();
        const el = document.querySelector(sel);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };

    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>

            {/* 02 · hero */}
            <section style={{
                padding: isMobile ? '56px 16px 24px' : '88px 28px 40px',
                position: 'relative',
                textAlign: 'center',
                maxWidth: 1400, margin: '0 auto'
            }}>
                <div style={{ marginBottom: 18 }}>
                    <SlashTag>ai impact engine · for engineering orgs</SlashTag>
                </div>

                <h1 style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 'clamp(40px, 7.5vw, 104px)', fontWeight: 700,
                    letterSpacing: '-0.045em', lineHeight: 0.95,
                    color: 'var(--fg-0)',
                    margin: 0,
                    maxWidth: 1200,
                    marginInline: 'auto'
                }}>
                    <span style={{ display: 'block' }}>every ai token,</span>
                    <span style={{ display: 'block', color: 'var(--accent)' }}>mapped to the work it shipped.</span>
                </h1>

                <p style={{
                    fontFamily: 'var(--font-body)', fontSize: 18,
                    color: 'var(--fg-2)', lineHeight: 1.55,
                    maxWidth: 680, margin: '24px auto 0'
                }}>
                    tokenthread is the only product that ties llm consumption to the
                    prs, tickets, and commits your teams ship. every team on one
                    board. cross-team work split. shadow ai surfaced. no manual
                    tagging. by monday of week two.
                </p>

                <div style={{
                    marginTop: 32,
                    display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 14
                }}>
                    <a href="#waitlist" onClick={scrollTo('#waitlist')} style={{
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                        height: 46, padding: '0 22px',
                        background: 'var(--accent)', color: 'var(--accent-fg)',
                        borderRadius: 'var(--radius-sm)',
                        fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
                        textDecoration: 'none'
                    }}>request beta →</a>
                    <a href="#leaderboard" onClick={scrollTo('#leaderboard')} type="button" style={{
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                        height: 46, padding: '0 22px',
                        background: 'transparent', color: 'var(--fg-1)',
                        border: '1px solid var(--border-strong)',
                        borderRadius: 'var(--radius-sm)',
                        fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
                        textDecoration: 'none'
                    }}>see the team board ↓</a>
                </div>
            </section>

            {/* 03 · problem — six output-first questions */}
            <section style={{
                padding: `${padY}px ${padX}px`,
                borderTop: '1px dashed var(--fg-3)',
                maxWidth: 1180, margin: '0 auto'
            }}>
                <div style={{ marginBottom: 28 }}>
                    <SlashTag>six questions your tools can't answer</SlashTag>
                </div>
                <h2 style={{
                    fontFamily: 'var(--font-display)', fontSize: isMobile ? 36 : 48, fontWeight: 600,
                    letterSpacing: '-0.025em', color: 'var(--fg-0)',
                    lineHeight: 1.05, marginTop: 10, marginBottom: 28,
                    maxWidth: 820
                }}>
                    your ai stack can tell you what it spent.<br />
                    <span style={{ color: 'var(--accent)' }}>not what it shipped.</span>
                </h2>

                <ol style={{
                    listStyle: 'none', padding: 0, margin: 0,
                    display: 'grid',
                    gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
                    columnGap: 40, rowGap: 0,
                    borderTop: '1px dashed var(--fg-3)',
                }}>
                    {[
                        '01  what did this week\'s tokens actually ship?',
                        '02  which teams are getting the most agent leverage?',
                        '03  which projects are ai-leveraged — and which are stuck?',
                        '04  which teams ship more code with agent help than without?',
                        '05  when agents fail, what work gets wasted?',
                        '06  which prs would never have shipped without ai?',
                    ].map((q, i) => (
                        <li key={i} style={{
                            padding: '18px 0',
                            borderBottom: '1px dashed var(--fg-3)',
                            fontFamily: 'var(--font-mono)', fontSize: isMobile ? 14 : 16,
                            color: 'var(--fg-1)', lineHeight: 1.5,
                            display: 'flex', gap: 14, alignItems: 'baseline',
                        }}>
                            <span style={{ color: 'var(--accent)', flex: 'none' }}>
                                {q.slice(0, 2)}
                            </span>
                            <span>{q.slice(4)}</span>
                        </li>
                    ))}
                </ol>

                <p style={{
                    marginTop: 28, fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6,
                    maxWidth: 720
                }}>
                    tokenthread answers each one by monday of week two. no manual
                    tagging. no proxies. no sql.
                </p>
            </section>

            {/* 04 · full-bleed team leaderboard with trust-led side callouts */}
            <section id="leaderboard" style={{
                padding: `${padY}px ${padX}px`,
                borderTop: '1px dashed var(--fg-3)',
                maxWidth: 1400, margin: '0 auto'
            }}>
                <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    marginBottom: 14
                }}>
                    <SlashTag>the team board · token → pr</SlashTag>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
                        acme inc · this week
                    </span>
                </div>

                <h2 style={{
                    fontFamily: 'var(--font-display)', fontSize: isMobile ? 32 : 44, fontWeight: 600,
                    letterSpacing: '-0.025em', color: 'var(--fg-0)',
                    marginTop: 6, marginBottom: 24, lineHeight: 1.05, maxWidth: 820
                }}>
                    every token, attributed.{' '}
                    <span style={{ color: 'var(--accent)' }}>or counted as missing.</span>
                </h2>

                <div style={{
                    display: 'grid',
                    gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : 'minmax(0, 1.7fr) minmax(0, 1fr)',
                    gap: isMobile ? 32 : 40,
                    alignItems: 'start',
                }}>
                    <div style={{ minWidth: 0 }}>
                        {window.TeamLeaderboard ? <window.TeamLeaderboard rows={6} /> : null}
                    </div>

                    <div style={{ display: 'grid', gap: 14 }}>
                        {[
                            {
                                t: 'monday in slack',
                                b: 'top teams + agent share per team, weekly digest in-channel. /tt-expert for ad-hoc lookups.'
                            },
                            {
                                t: 'cross-team work, split',
                                b: 'a PR touching two teams is split across them. never double-counted.'
                            },
                            {
                                t: 'unattributed, visible',
                                b: 'tokens that didn\'t ship show as hatched lanes. nothing hidden.'
                            },
                            {
                                t: 'new teams, eased in',
                                b: 'teams onboarding to ai or running sensitive work: full capture, no public rank. opt-in.'
                            },
                        ].map((c, i) => (
                            <div key={i} style={{
                                padding: '14px 16px',
                                background: 'var(--bg-1)',
                                border: '1px solid var(--border)',
                                borderRadius: 'var(--radius-sm)',
                            }}>
                                <div className="t-overline" style={{ color: 'var(--accent)', marginBottom: 6 }}>
                                    // {c.t}
                                </div>
                                <div style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55 }}>
                                    {c.b}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* 05 · how it works — 2 steps */}
            <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 2 hops</SlashTag>
                    <h2 style={{
                        fontFamily: 'var(--font-display)', fontSize: isMobile ? 32 : 44, fontWeight: 600,
                        letterSpacing: '-0.025em', color: 'var(--fg-0)',
                        marginTop: 10, lineHeight: 1.05, maxWidth: 760
                    }}>capture, then correlate.{' '}
                        <span style={{ color: 'var(--accent)' }}>that's the whole pipeline.</span>
                    </h2>
                </div>

                <div style={{
                    display: 'grid',
                    gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
                    gap: isMobile ? 28 : 0
                }}>
                    {[
                        {
                            n: '01',
                            title: 'capture',
                            code: 'sidecar · one binary',
                            body: 'a single sidecar per engineer tails the session files your tools already write — claude code, codex, aider, cursor. no ide plugin, no proxy, no workflow change.'
                        },
                        {
                            n: '02',
                            title: 'correlate',
                            code: 'git anchors · vector match',
                            body: 'every session is bound to the pr or ticket it produced. cross-team work is split across teams. unattributed tokens stay visible as hatched lanes.'
                        },
                    ].map((s, i) => (
                        <div key={i} style={{
                            padding: isMobile ? 0 : '0 32px',
                            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>

            {/* 06 · org-flows sankey — q03 callback */}
            <section style={{
                padding: `${padY}px ${padX}px`,
                maxWidth: 1400, margin: '0 auto',
                borderBottom: '1px dashed var(--fg-3)'
            }}>
                <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    marginBottom: 14
                }}>
                    <SlashTag>q03: which projects are ai-leveraged?</SlashTag>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
                        helio · 7d
                    </span>
                </div>

                <h2 style={{
                    fontFamily: 'var(--font-display)', fontSize: isMobile ? 32 : 44, fontWeight: 600,
                    letterSpacing: '-0.025em', color: 'var(--fg-0)',
                    marginTop: 6, marginBottom: 24, lineHeight: 1.05, maxWidth: 820
                }}>
                    the org view{' '}
                    <span style={{ color: 'var(--accent)' }}>shows it.</span>
                </h2>

                {window.OrgFlowsHero ? <window.OrgFlowsHero /> : null}

                <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>

                <p style={{
                    marginTop: 22, fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6,
                    maxWidth: 820
                }}>
                    every lane is tokens flowing into a shipped artifact. wide lanes
                    are high-leverage projects. hatched lanes are tokens that didn't
                    ship. the team board ranks teams; this ranks the projects they
                    ship.
                </p>
            </section>

            {/* 07 · slack section */}
            <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: isMobile ? 36 : 48, fontWeight: 600,
                            letterSpacing: '-0.025em', color: 'var(--fg-0)',
                            marginTop: 12, marginBottom: 18, lineHeight: 1.05
                        }}>the team board,<br />
                            <span style={{ color: 'var(--accent)' }}>in your eng-leads channel.</span>
                        </h2>
                        <p style={{ fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 24 }}>
                            by 9am monday, the weekly impact digest is in your
                            eng-leads channel: top teams, what they shipped, agent
                            share per team — every rank one click from the merged
                            pr. engineers can /tt-expert any topic without leaving
                            the thread.
                        </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)' }}>/tt-expert</span>
                            <span style={{ color: 'var(--fg-1)' }}>checkout v2</span>
                        </div>
                    </div>
                    {window.SlackBotTeams ? <window.SlackBotTeams /> : null}
                </div>
            </section>

            {/* 08 · waitlist + 5 outcome perks */}
            <section id="waitlist" style={{
                padding: `${padY}px ${padX}px`,
                borderTop: '1px dashed var(--fg-3)',
                maxWidth: 1400, margin: '0 auto'
            }}>
                <div style={{ marginBottom: 28 }}>
                    <SlashTag>what week two looks like</SlashTag>
                    <h2 style={{
                        fontFamily: 'var(--font-display)', fontSize: isMobile ? 32 : 44, fontWeight: 600,
                        letterSpacing: '-0.025em', color: 'var(--fg-0)',
                        marginTop: 10, marginBottom: 4, lineHeight: 1.05, maxWidth: 820
                    }}>
                        every team's ai impact,{' '}
                        <span style={{ color: 'var(--accent)' }}>in slack by monday.</span>
                    </h2>
                </div>

                <div style={{
                    display: 'grid',
                    gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
                    gap: isMobile ? 28 : 40,
                    alignItems: 'start'
                }}>
                    <WaitlistForm accentLabel="request access" />

                    <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)' }}>// in the box</div>
                        {[
                            'private dashboard at your-org.tokenthread.ai',
                            'weekly impact digest in slack, ready for monday',
                            'every llm session correlated to a pr or ticket',
                            'learning mode for new teams — full capture, no rank',
                            'shadow ai surfaced — unapproved tool spend, day one',
                        ].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>

            {/* 09 · final cta — book / follow */}
            <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 ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1fr)',
                    gap: 0,
                    border: '1px dashed var(--fg-3)',
                    borderRadius: 'var(--radius-md)',
                    overflow: 'hidden'
                }}>
                    <div style={{ padding: '36px 32px', minWidth: 0 }}>
                        <SlashTag>ready to see your own?</SlashTag>
                        <h3 style={{
                            fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600,
                            color: 'var(--fg-0)', letterSpacing: '-0.025em',
                            marginTop: 10, marginBottom: 14
                        }}>book the pilot.</h3>
                        <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 18 }}>
                            30-day private beta, gated to one engineering team at a
                            time. drop your details and we'll be in touch.
                        </p>
                        <a href="#waitlist" onClick={scrollTo('#waitlist')} 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 to the form ↑
                        </a>
                    </div>
                    <div style={{
                        padding: '36px 32px',
                        minWidth: 0,
                        borderLeft: isMobile ? 'none' : '1px dashed var(--fg-3)',
                        borderTop: isMobile ? '1px dashed var(--fg-3)' : 'none'
                    }}>
                        <SlashTag>not yet?</SlashTag>
                        <h3 style={{
                            fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600,
                            color: 'var(--fg-0)', letterSpacing: '-0.025em',
                            marginTop: 10, marginBottom: 14
                        }}>track our build.</h3>
                        <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 18 }}>
                            monthly progress notes — what shipped, what's next, what
                            we learned. one click to unsubscribe.
                        </p>
                        <EmailSignup label="monthly progress notes." 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>// tokenthread · ai impact engine for engineering orgs</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, { VariantD });