// variant-b.jsx — "Agentic Terminal"
// Dark, builder-focused, code-aware. Monospace UI accents, live terminal,
// numbered modules, ascii. Same content, very different aesthetic.

const { useState: useStateB, useEffect: useEffectB } = React;

const B_BG = '#0a0a0a';
const B_INK = '#f4f1ea';
const B_DIM = '#8a8580';
const B_LINE = '#1f1f1f';
const B_RED = 'var(--b-accent, #FF3B1F)';

const bStyles = {
  page: {
    width: 1440, background: B_BG, color: B_INK,
    fontFamily: "'Archivo', sans-serif", overflow: 'hidden',
    position: 'relative',
  },
  mono: {
    fontFamily: "'JetBrains Mono', monospace", fontWeight: 500,
    letterSpacing: 0.4,
  },
  eyebrow: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    fontWeight: 600, letterSpacing: 1.4, textTransform: 'uppercase',
    color: B_RED,
  },
  h2: {
    fontFamily: "'Archivo', sans-serif", fontWeight: 900,
    fontSize: 84, lineHeight: 0.92, letterSpacing: -3,
    textTransform: 'uppercase', margin: 0, color: B_INK,
  },
  nav: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '20px 48px', borderBottom: `1px solid ${B_LINE}`,
    position: 'sticky', top: 0, background: B_BG, zIndex: 50,
    fontFamily: "'JetBrains Mono', monospace",
  },
};

function BSection({ num, label, children, last }) {
  return (
    <section style={{ borderBottom: last ? 'none' : `1px solid ${B_LINE}`, position: 'relative' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '16px 48px', borderBottom: `1px solid ${B_LINE}`,
        fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
        letterSpacing: 1.2, textTransform: 'uppercase', color: B_DIM,
      }}>
        <span style={{ color: B_RED, fontWeight: 700 }}>{num}</span>
        <span>{label}</span>
        <span style={{ flex: 1, height: 1, background: B_LINE, marginLeft: 12 }} />
      </div>
      {children}
    </section>
  );
}

// ---------- Module card ----------
function BModuleCard({ slug, name, blurb, cmd, items, status }) {
  const [hover, setHover] = useStateB(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        border: `1px solid ${hover ? B_RED : B_LINE}`,
        padding: 24, background: hover ? '#111' : B_BG,
        display: 'flex', flexDirection: 'column', gap: 16,
        transition: 'border-color 0.15s, background 0.15s',
        cursor: 'pointer', minHeight: 280, position: 'relative',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 0.6 }}>
        <span style={{ color: B_DIM }}>{slug}</span>
        <span style={{ color: status === 'NEW' ? B_RED : '#7fe39a' }}>● {status}</span>
      </div>
      <div style={{ fontFamily: "'Archivo', sans-serif", fontWeight: 900, fontSize: 34, lineHeight: 1, letterSpacing: -1, textTransform: 'uppercase' }}>
        {name}
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.45, color: '#bdb6a8', flex: 1 }}>
        {blurb}
      </div>
      <div style={{ borderTop: `1px solid ${B_LINE}`, paddingTop: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>
        <span style={{ color: B_RED }}>$ </span>
        <span style={{ color: B_INK }}>{cmd}</span>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {items.map(t => (
          <span key={t} style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
            fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase',
            padding: '3px 7px', border: `1px solid ${B_LINE}`, color: B_DIM,
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function VariantB({ headline, showTerminal = true, showMetricBar = true, logoOnly = false } = {}) {
  return (
    <div style={bStyles.page}>
      {/* NAV */}
      <nav style={bStyles.nav}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span aria-label="Talented" style={{
            width: 28, height: 44, display: 'inline-block', flexShrink: 0,
            background: B_INK,
            WebkitMask: 'url(assets/talented-mark-white.png) center / contain no-repeat',
            mask: 'url(assets/talented-mark-white.png) center / contain no-repeat',
          }} />
          {!logoOnly && (
            <React.Fragment>
              <span style={{ color: B_RED, fontWeight: 700, fontSize: 13, letterSpacing: 0.5 }}>talented</span>
              <span style={{ color: B_DIM, fontSize: 11 }}>:: ai studio · newport beach, ca</span>
            </React.Fragment>
          )}
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 12, fontWeight: 500, letterSpacing: 0.4 }}>
          {['services', 'agents', 'work', 'learn', 'pricing', 'community'].map(l => (
            <a key={l} target={l === 'community' ? '_blank' : undefined} rel={l === 'community' ? 'noopener' : undefined} href={l === 'services' ? 'pages/services.html' : l === 'agents' ? 'pages/agents.html' : l === 'learn' ? 'pages/learn.html' : l === 'work' ? 'pages/work.html' : l === 'pricing' ? 'pages/pricing.html' : l === 'community' ? 'https://www.skool.com/talented' : '#'} style={{ color: B_INK, textDecoration: 'none', display: 'flex', gap: 4 }}>
              <span style={{ color: B_DIM }}>/</span>{l}
            </a>
          ))}
        </div>
        <a href="pages/contact.html" style={{
          background: B_RED, color: '#fff', padding: '12px 20px',
          fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700,
          letterSpacing: 0.6, textTransform: 'uppercase', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span>./book.sh</span> →
        </a>
      </nav>

      {/* HERO */}
      <section style={{ padding: '40px 48px 60px', position: 'relative' }}>
        {/* breadcrumb-style status bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: B_DIM, marginBottom: 32 }}>
          <span style={{ color: B_RED }}>●</span>
          <span>system: online</span>
          <span>·</span>
          <span>412 agents in production</span>
          <span>·</span>
          <span>last deploy: 14m ago</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'start' }}>
          {/* huge type left */}
          <div>
            <h1 style={{
              fontFamily: "'Archivo', sans-serif", fontWeight: 900,
              fontSize: 168, lineHeight: 0.86, letterSpacing: -7,
              textTransform: 'uppercase', margin: 0,
            }}>
              {headline ? (
                <div style={{ fontSize: 140, letterSpacing: -6 }}>
                  {headline.replace(/\.$/, '')}<span style={{ color: B_RED }}>.</span>
                </div>
              ) : (
                <React.Fragment>
                  <div>Agents</div>
                  <div style={{ color: B_DIM, fontSize: 100, fontWeight: 800, letterSpacing: -3, lineHeight: 1 }}>that don't</div>
                  <div>just talk<span style={{ color: B_RED }}>.</span></div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>
                    <span>They</span>
                    <span style={{
                      fontFamily: "'JetBrains Mono', monospace", fontWeight: 700,
                      fontSize: 80, letterSpacing: -2, color: B_RED, textTransform: 'lowercase',
                    }}>$ ship.</span>
                  </div>
                </React.Fragment>
              )}
            </h1>
            <div style={{ marginTop: 32, fontSize: 20, lineHeight: 1.4, maxWidth: 600, color: '#d6d2c8' }}>
              Talented is the studio operators call when "let's add some AI" needs to mean shipped, observed, and earning by Friday. Plus the growth marketing that pays for it.
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 32, fontFamily: "'JetBrains Mono', monospace" }}>
              <a href="pages/contact.html" style={{
                background: B_RED, color: '#fff', padding: '14px 22px',
                fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase',
                textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>./free-plan.sh →</a>
              <a href="pages/agents.html" style={{
                background: 'transparent', color: B_INK, border: `1px solid ${B_LINE}`,
                padding: '14px 22px', fontSize: 12, fontWeight: 700, letterSpacing: 0.8,
                textTransform: 'uppercase', textDecoration: 'none',
              }}>cat /agents/*.md</a>
            </div>
          </div>

          {/* live terminal */}
          {showTerminal && (
          <div style={{ position: 'sticky', top: 80 }}>
            <div style={{ border: `1px solid ${B_LINE}`, background: '#050505' }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '10px 14px', borderBottom: `1px solid ${B_LINE}`,
                fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: B_DIM,
              }}>
                <span style={{ display: 'inline-flex', gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: B_RED }} />
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#3a3a3a' }} />
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#3a3a3a' }} />
                </span>
                <span style={{ marginLeft: 12 }}>talented@studio · ~/agents/osteria</span>
              </div>
              <div style={{ padding: '18px 18px 22px', minHeight: 320 }}>
                <FakeTerminal
                  prompt="osteria"
                  accent={B_RED}
                  lines={[
                    { prompt: true, text: 'init reservations-agent --client=osteria' },
                    { text: '↳ booting claude · loading tools · connecting opentable', color: '#bdb6a8', after: 600 },
                    { text: '✓ ready · 4 tools registered · 1 hour ledger', color: '#7fe39a', after: 400 },
                    { prompt: true, text: 'simulate(party=4, time="sat 7pm")' },
                    { text: '↳ checking floor · checking captures · rerouting', color: '#bdb6a8', after: 500 },
                    { text: '✓ table 12 held · 7:15pm · sms drafted', color: '#7fe39a', after: 400 },
                    { text: '✓ guest replied "yes" in 4s · confirmed', color: '#7fe39a', after: 500 },
                    { prompt: true, text: 'report --week' },
                    { text: '+22% covers · −61% no-shows · $14,400 / wk', color: B_RED, after: 1200 },
                    { pause: 1200, text: '' },
                  ]}
                />
              </div>
            </div>
            <div style={{ marginTop: 12, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: B_DIM, letterSpacing: 0.4 }}>
              // anonymized trace · osteria group · march 2026
            </div>
          </div>
          )}
        </div>
      </section>

      {/* metric bar */}
      {showMetricBar && (
      <div style={{ borderTop: `1px solid ${B_LINE}`, borderBottom: `1px solid ${B_LINE}`, padding: '24px 48px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {[
          { n: 1247, suffix: 'x', label: 'avg ROI · growth channels' },
          { n: 412, suffix: '', label: 'agents shipped to prod' },
          { n: 612, suffix: '', label: 'engineers trained · 2024-26' },
          { n: 127400, suffix: '+', label: 'hours reclaimed for client teams' },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ fontFamily: "'Archivo', sans-serif", fontWeight: 900, fontSize: 64, lineHeight: 0.9, letterSpacing: -2 }}>
              <AnimatedCounter to={s.n} suffix={s.suffix} />
            </div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: B_DIM, letterSpacing: 0.6, textTransform: 'uppercase' }}>{s.label}</div>
          </div>
        ))}
      </div>
      )}

      {/* CHAT */}
      <BSection num="01" label="ask_talented · the shortest line to a human engineer">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 600px', gap: 60, padding: '60px 48px' }}>
          <div>
            <h2 style={bStyles.h2}>
              Skip the<br/>contact form<span style={{ color: B_RED }}>.</span><br/>Type what<br/>you want built.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.5, maxWidth: 480, marginTop: 24, color: '#bdb6a8' }}>
              The agent below isn't here to answer questions — it's here to catch your prompt and hand it to a Talented engineer with the full context. You hit <span style={{ color: B_RED, fontFamily: "'JetBrains Mono', monospace" }}>send →</span>, you pick a time, the engineer brings your prompt to the call.
            </p>
            <div style={{ marginTop: 32, padding: 16, border: `1px solid ${B_LINE}`, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: B_DIM }}>
              <div style={{ marginBottom: 6 }}><span style={{ color: B_RED }}>response:</span> within 4 hours</div>
              <div style={{ marginBottom: 6 }}><span style={{ color: B_RED }}>format:</span> 30-min phone or zoom</div>
              <div style={{ marginBottom: 6 }}><span style={{ color: B_RED }}>optional:</span> 10-min prompt-clinic first</div>
              <div><span style={{ color: B_RED }}>cost:</span> $0 · no strings</div>
            </div>
          </div>
          <div style={{ height: 580 }}>
            <ChatDemo variant="dark" accent={B_RED} />
          </div>
        </div>
      </BSection>

      {/* MODULES — services as code modules */}
      <BSection num="02" label="modules.list · what you can hire us for">
        <div style={{ padding: '48px 48px 24px' }}>
          <h2 style={bStyles.h2}>Two stacks.<br/>One studio<span style={{ color: B_RED }}>.</span></h2>
        </div>
        <div style={{ padding: '0 48px 24px' }}>
          <div style={{ ...bStyles.eyebrow, color: B_RED, marginBottom: 20 }}>// AI · engineering · teaching</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            <BModuleCard slug="ai/01" status="NEW" name="Agentic Engineering" blurb="Custom agents that read your data, call real tools, and ship with traces + evals. Not chatbots." cmd="talented init agent" items={['CLAUDE', 'TOOLS', 'EVALS']} />
            <BModuleCard slug="ai/02" status="NEW" name="Vibe Coding" blurb="Cursor-speed v0 prototypes. Pair with us, ship a working artifact in days, then harden." cmd="talented prototype" items={['REACT', 'PY', 'GO']} />
            <BModuleCard slug="ai/03" status="NEW" name="AI Consulting" blurb="4-week engagement, real roadmap, real ROI model. We do the homework before kickoff." cmd="talented audit" items={['STRATEGY', 'ROADMAP']} />
            <BModuleCard slug="ai/04" status="OPEN" name="Workshops + Cohorts" blurb="3-day onsites for product teams. 6-week cohorts for engineers. 612 alumni." cmd="talented teach" items={['COHORT', 'ONSITE']} />
            <BModuleCard slug="ai/05" status="NEW" name="Agent Ops" blurb="Triage inboxes, draft replies, reconcile orders, monitor reviews. Quiet automations." cmd="talented ops" items={['SLACK', 'TEMPORAL']} />
            <BModuleCard slug="ai/06" status="OPEN" name="Fractional AI Eng" blurb="Embed a senior on your team 2 or 4 days/wk. They ship, they teach." cmd="talented embed" items={['90-DAY', 'EMBED']} />
          </div>
        </div>
        <div style={{ padding: '32px 48px 48px' }}>
          <div style={{ ...bStyles.eyebrow, color: B_DIM, marginBottom: 20 }}>// growth · restaurants &amp; ecommerce</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            <BModuleCard slug="gr/01" status="STABLE" name="CRO + Web" blurb="Landing pages, copy, design, tech-stack audit. 700% more leads in 90 days." cmd="talented cro" items={['CRO', 'COPY']} />
            <BModuleCard slug="gr/02" status="STABLE" name="Paid + Perf" blurb="Meta, Google, TikTok, affiliate. Q4 average ROAS across DTC: 17x." cmd="talented ads" items={['META', 'TIKTOK']} />
            <BModuleCard slug="gr/03" status="STABLE" name="Growth Mkt" blurb="End-to-end digital management with analytics that surface decisions." cmd="talented growth" items={['CLV', 'PLAN']} />
            <BModuleCard slug="gr/04" status="STABLE" name="Email + Lifecycle" blurb="Strategy, automations, segmentation, scalable cold systems. 67x avg ROI." cmd="talented email" items={['KLAVIYO']} />
          </div>
        </div>
      </BSection>

      {/* AGENT SHOWCASE */}
      <BSection num="03" label="ls /production · what we've shipped">
        <div style={{ padding: '48px 48px 60px' }}>
          <h2 style={bStyles.h2}>Shipped work.<br/>Real numbers<span style={{ color: B_RED }}>.</span></h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20, marginTop: 48 }}>
            {[
              { tag: '/restaurant/nyc', title: 'reservations-recovery', metric: '↑ 22% covers · −61% no-shows', desc: 'Closes the loop OpenTable → host → SMS. Cancellations refill in <5min.', term: <AgentMockReservations /> },
              { tag: '/dtc/skincare', title: 'creative-fatigue-roas', metric: 'ROAS 1.8 → 3.4 · 11 days', desc: 'Watches creatives, drafts variants, runs splits, kills losers.', term: <AgentMockGrowth /> },
              { tag: '/ops/b2b-saas', title: 'inbox-triage', metric: '4 hrs/day reclaimed', desc: 'Routes, drafts, escalates with context. CX approves; agent types.', term: <AgentMockOps /> },
            ].map((c, i) => (
              <div key={i} style={{ border: `1px solid ${B_LINE}` }}>
                <div style={{ padding: 14, borderBottom: `1px solid ${B_LINE}`, display: 'flex', justifyContent: 'space-between', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: B_DIM, letterSpacing: 0.5 }}>
                  <span>{c.tag}</span>
                  <span style={{ color: '#7fe39a' }}>● running</span>
                </div>
                <div style={{ background: '#050505', minHeight: 180 }}>{c.term}</div>
                <div style={{ padding: 20, borderTop: `1px solid ${B_LINE}` }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700 }}>{c.title}</div>
                  <div style={{ marginTop: 8, fontSize: 14, lineHeight: 1.4, color: '#bdb6a8' }}>{c.desc}</div>
                  <div style={{ marginTop: 12, color: B_RED, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700 }}>{c.metric}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </BSection>

      {/* WORK / CASE STUDIES */}
      <BSection num="04" label="work.feed · case studies">
        <div style={{ padding: '48px 48px 60px' }}>
          <h2 style={bStyles.h2}>The shipped log<span style={{ color: B_RED }}>.</span></h2>
          <div style={{ marginTop: 40, borderTop: `1px solid ${B_LINE}` }}>
            {[
              { date: '2026-04-12', client: 'OSTERIA GROUP', kind: 'AGENT', desc: 'Reservations + no-show recovery agent · 8 days · NYC + Brooklyn', metric: '+22% covers' },
              { date: '2026-03-22', client: 'GLOW SKINCARE', kind: 'GROWTH+AGENT', desc: 'Creative-fatigue agent + paid social rebuild · 6 weeks', metric: 'ROAS 1.8→3.4' },
              { date: '2026-02-08', client: 'NORTHBREW', kind: 'CRO', desc: 'Coffee subscription · landing-page rebuild + email lifecycle', metric: '+387% conv.' },
              { date: '2026-01-18', client: 'PIER 23 SEAFOOD', kind: 'AGENT', desc: 'Inbox triage + reservation assistant · 3 locations', metric: '4 hrs/day saved' },
              { date: '2025-12-04', client: 'WAVELY', kind: 'EMBED', desc: 'Fractional AI engineer · 4 days/wk · 90-day · marketplace', metric: 'v0 → prod in 11 days' },
              { date: '2025-11-19', client: 'KITAYAMA', kind: 'WORKSHOP', desc: 'On-site agentic engineering · 14 product engineers', metric: '4 internal agents shipped' },
            ].map((row, i) => (
              <a key={i} href="pages/work.html" style={{
                display: 'grid', gridTemplateColumns: '120px 200px 130px 1fr 140px',
                gap: 24, padding: '20px 0', borderBottom: `1px solid ${B_LINE}`,
                fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: B_INK,
                textDecoration: 'none', alignItems: 'center', transition: 'background 0.15s',
              }}
                onMouseEnter={(e) => e.currentTarget.style.background = '#111'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
              >
                <span style={{ color: B_DIM }}>{row.date}</span>
                <span style={{ fontFamily: "'Archivo', sans-serif", fontWeight: 800, fontSize: 16, letterSpacing: 0.3 }}>{row.client}</span>
                <span style={{ color: B_RED, fontSize: 11, fontWeight: 700, letterSpacing: 0.8 }}>{row.kind}</span>
                <span style={{ color: '#bdb6a8', fontFamily: "'Archivo', sans-serif", fontSize: 14 }}>{row.desc}</span>
                <span style={{ textAlign: 'right', fontWeight: 700, color: B_INK }}>{row.metric} →</span>
              </a>
            ))}
          </div>
        </div>
      </BSection>

      {/* LEARN */}
      <BSection num="05" label="learn.cal · open cohorts &amp; community">
        <div style={{ padding: '48px 48px 60px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
          <div>
            <h2 style={bStyles.h2}>We teach<br/>what we<br/>ship<span style={{ color: B_RED }}>.</span></h2>
            <p style={{ fontSize: 18, lineHeight: 1.5, color: '#bdb6a8', marginTop: 24, maxWidth: 480 }}>
              612 engineers trained. 4 cohorts running. A private community of operators building agents in production — share your bugs, steal our prompts.
            </p>
            <a href="pages/learn.html" style={{
              marginTop: 32, display: 'inline-block',
              background: 'transparent', color: B_INK, border: `1px solid ${B_INK}`,
              padding: '14px 22px', fontFamily: "'JetBrains Mono', monospace",
              fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase',
              textDecoration: 'none',
            }}>./join.sh →</a>
          </div>
          <div>
            {[
              { date: '2026.06.12', title: 'agentic engineering · cohort 04', spots: '8/14', meta: '6 weeks · remote · $2,400' },
              { date: '2026.07.09', title: 'vibe coding onsite · brooklyn', spots: 'PRIV', meta: '3 days · onsite · private' },
              { date: '2026.08.02', title: 'restaurants building agents', spots: '21/30', meta: '1 day · NYC · $400' },
              { date: 'ongoing', title: 'the talented community', spots: '420+', meta: 'private slack · invite' },
            ].map((e, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '110px 1fr 90px',
                gap: 16, padding: '20px 0', borderTop: i === 0 ? `1px solid ${B_LINE}` : 'none',
                borderBottom: `1px solid ${B_LINE}`, alignItems: 'center',
              }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: B_RED, fontWeight: 700 }}>{e.date}</div>
                <div>
                  <div style={{ fontFamily: "'Archivo', sans-serif", fontWeight: 800, fontSize: 19, letterSpacing: -0.2, textTransform: 'uppercase' }}>{e.title}</div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: B_DIM, marginTop: 4, letterSpacing: 0.4 }}>{e.meta}</div>
                </div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700, textAlign: 'right' }}>{e.spots}</div>
              </div>
            ))}
          </div>
        </div>
      </BSection>

      {/* TESTIMONIAL */}
      <BSection num="06" label="quotes.txt · what operators say">
        <div style={{ padding: '60px 48px 80px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[
              { q: 'They shipped our reservations agent in eight days. It paid for the entire engagement before the invoice cleared.', a: '~ maya r · coo · osteria group, nyc' },
              { q: 'Talented is the only agency I\'ve hired that reads our codebase before the kickoff call. Different bar.', a: '~ devon k · head of growth · glow' },
            ].map((q, i) => (
              <div key={i} style={{ borderLeft: `2px solid ${B_RED}`, paddingLeft: 28 }}>
                <div style={{ fontFamily: "'Archivo', sans-serif", fontWeight: 500, fontSize: 26, lineHeight: 1.3, letterSpacing: -0.4 }}>
                  {q.q}
                </div>
                <div style={{ marginTop: 20, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: B_RED, letterSpacing: 0.5 }}>{q.a}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 24, alignItems: 'center', borderTop: `1px solid ${B_LINE}`, paddingTop: 32 }}>
            {['OSTERIA', 'GLOW.CO', 'PIER 23', 'NORTHBREW', 'KITAYAMA', 'WAVELY'].map(l => (
              <div key={l} style={{ fontFamily: "'Archivo', sans-serif", fontWeight: 900, fontSize: 20, letterSpacing: 1, textAlign: 'center', color: B_DIM }}>{l}</div>
            ))}
          </div>
        </div>
      </BSection>

      {/* CTA */}
      <section style={{ padding: '100px 48px', background: B_RED, color: '#fff', position: 'relative' }}>
        <div style={{ ...bStyles.eyebrow, color: '#fff' }}>07 // start with one call</div>
        <h2 style={{
          fontFamily: "'Archivo', sans-serif", fontWeight: 900,
          fontSize: 200, lineHeight: 0.84, letterSpacing: -8,
          textTransform: 'uppercase', margin: '24px 0',
        }}>
          Free<br/>Growth<br/>+ AI plan<span style={{ color: '#0a0a0a' }}>.</span>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, marginTop: 40, alignItems: 'end' }}>
          <p style={{ fontSize: 20, lineHeight: 1.4, maxWidth: 600, color: '#fff' }}>
            100+ insights · agent opportunity map · competitive teardown · ROI model. 30 minutes. No deck.
          </p>
          <a href="pages/contact.html" style={{
            background: '#0a0a0a', color: '#fff', padding: '22px 32px',
            fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700,
            letterSpacing: 1, textTransform: 'uppercase', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>./book.sh →</a>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ background: B_BG, color: B_DIM, padding: '60px 48px 32px', borderTop: `1px solid ${B_LINE}`, fontFamily: "'JetBrains Mono', monospace" }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, fontSize: 13 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, color: B_INK }}>
              <span aria-label="Talented" style={{
                width: 22, height: 35, display: 'inline-block', flexShrink: 0,
                background: B_INK,
                WebkitMask: 'url(assets/talented-mark-white.png) center / contain no-repeat',
                mask: 'url(assets/talented-mark-white.png) center / contain no-repeat',
              }} />
              <span style={{ fontWeight: 700, color: B_RED }}>talented</span>
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.6, maxWidth: 320 }}>
              all things growth &amp; intelligence. agentic engineering · vibe coding · growth marketing. newport beach, ca.
            </div>
            <div style={{ marginTop: 24, color: B_RED, fontSize: 11, letterSpacing: 1, textTransform: 'uppercase' }}>$ let's crush your growth goals.</div>
          </div>
          {[
            { title: '/ai', items: ['agents', 'vibe coding', 'consulting', 'workshops', 'fractional'] },
            { title: '/growth', items: ['cro · seo', 'paid + perf', 'email', 'growth mkt'] },
            { title: '/studio', items: ['about', 'work', 'community', 'contact'] },
          ].map(c => (
            <div key={c.title}>
              <div style={{ color: B_RED, marginBottom: 14, fontSize: 12 }}>{c.title}</div>
              {c.items.map(it => <div key={it} style={{ marginBottom: 6, color: B_INK }}>· {it}</div>)}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40, paddingTop: 20, borderTop: `1px solid ${B_LINE}`, display: 'flex', justifyContent: 'space-between', fontSize: 11 }}>
          <span>© 2026 talented network</span>
          <span>linkedin · twitter · instagram</span>
        </div>
      </footer>
    </div>
  );
}

window.VariantB = VariantB;