// Direction 2 Refined — "Forest & Moss" Standalone
// A polished, full-bleed homepage build.
// Adds: founder moment, sharper hero variants, stat strip, principles panel, richer methodology.

const D2R_PALETTES = {
  forest: {
    bg: '#fbfaf6',
    bgAlt: '#f5f3ec',
    panel: '#0f1c14',
    panelInk: '#e8ede4',
    panelMuted: '#8a9a8d',
    ink: '#0f1c14',
    muted: '#5b6b5e',
    line: '#0f1c1418',
    lineStrong: '#0f1c1430',
    accent: '#2d4a32',
    accent2: '#b8c9a8',
    accentSoft: '#e3ead8'
  },
  sage: {
    bg: '#f7f5ee',
    bgAlt: '#f0eee5',
    panel: '#1a2a1f',
    panelInk: '#ecefd8',
    panelMuted: '#8a9a8d',
    ink: '#1a2a1f',
    muted: '#5a6b5d',
    line: '#1a2a1f18',
    lineStrong: '#1a2a1f30',
    accent: '#3d5a3f',
    accent2: '#c4d4b0',
    accentSoft: '#e8ecdc'
  },
  moss: {
    bg: '#f3f4ec',
    bgAlt: '#ebede2',
    panel: '#101a12',
    panelInk: '#e0e8d8',
    panelMuted: '#7d8d80',
    ink: '#0e1810',
    muted: '#525e54',
    line: '#0e181018',
    lineStrong: '#0e181030',
    accent: '#385a40',
    accent2: '#a8c598',
    accentSoft: '#dde6cd'
  },
  ink: {
    bg: '#f4f4ee',
    bgAlt: '#ededdf',
    panel: '#0a0f0c',
    panelInk: '#dee8d8',
    panelMuted: '#7a8a7d',
    ink: '#0a0f0c',
    muted: '#4a554c',
    line: '#0a0f0c18',
    lineStrong: '#0a0f0c30',
    accent: '#1f3a28',
    accent2: '#a8c598',
    accentSoft: '#dce5cf'
  }
};

function D2R({ palette = 'forest', heroVariant = 'split', density = 'comfortable', founder = true, accentTint = false }) {
  const c = D2R_PALETTES[palette] || D2R_PALETTES.forest;

  return (
    <div className="site" style={{
      background: accentTint ? c.accentSoft : c.bg, color: c.ink,
      fontFamily: '"Inter Tight", -apple-system, sans-serif',
      minHeight: '100%', width: '100%'
    }}>
      <D2RNav c={c} />
      <BSAHero c={c} />
      <BSAProblem c={c} />
      <BSAPricing c={c} />
      <BSAServices c={c} />
      <BSATooling c={c} />
      <BSAGuideTeam c={c} />
      <BSAInsights c={c} />
      <BSAFinalCTA c={c} />
      <BSAFooter c={c} />
    </div>);

}

/* ──────────────────────────────────────────────────── NAV ── */
function D2RNav({ c }) {
  return (
    <nav className="d2r-nav" style={{
      borderBottom: `1px solid ${c.line}`,
      position: 'sticky', top: 0, zIndex: 40,
      background: c.bg + 'ee', backdropFilter: 'blur(10px)'
    }}>
      <div className="d2r-nav-inner" style={{
        maxWidth: 1320, margin: '0 auto',
        padding: '20px 56px',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 40
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <D2RMark c={c} size={28} />
          <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>
            BRIGHTSOL<span style={{ color: c.accent, fontWeight: 400 }}>/</span>AI
          </span>
        </div>
        <div className="d2r-nav-links" style={{ display: 'flex', gap: 32, fontSize: 14 }}>
          <a href="#services" style={{ cursor: 'pointer' }}>Services</a>
          <a href="#pricing" style={{ cursor: 'pointer' }}>Pricing</a>
          <a href="#leadership" style={{ cursor: 'pointer' }}>Leadership</a>
          <a href={SCHEDULE_URL} target="_blank" rel="noopener noreferrer" style={{ cursor: 'pointer' }}>Start</a>
        </div>
        <div className="d2r-nav-cta" style={{ display: 'flex', justifyContent: 'flex-end', gap: 16, alignItems: 'center' }}>
          <span className="mono d2r-nav-badge" style={{
            fontSize: 11, color: c.muted, letterSpacing: '0.1em',
            display: 'inline-flex', alignItems: 'center', gap: 8
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%', background: c.accent,
              boxShadow: `0 0 0 3px ${c.accent}25`
            }} />
            ACCEPTING NEW BUILDS
          </span>
          <a href={SCHEDULE_URL} target="_blank" rel="noopener noreferrer" style={{
            padding: '10px 16px',
            background: c.panel, color: c.panelInk,
            fontSize: 13, fontWeight: 500,
            cursor: 'pointer', textDecoration: 'none'
          }}>
            Start the conversation
          </a>
        </div>
      </div>
    </nav>);

}

function D2RMark({ c, size = 28 }) {
  // Locked Sol Node mark — see Website Project/assets/logos/brightsol-ai-mark-color.svg
  // Gold center, four cardinal nodes in accent-forest, two diagonal nodes in sage.
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" role="img" aria-label="BrightSol-AI">
      <line x1="32" y1="32" x2="32" y2="10" stroke={c.accent} strokeWidth="1" opacity="0.4" />
      <line x1="32" y1="32" x2="32" y2="54" stroke={c.accent} strokeWidth="1" opacity="0.4" />
      <line x1="32" y1="32" x2="10" y2="32" stroke={c.accent} strokeWidth="1" opacity="0.4" />
      <line x1="32" y1="32" x2="54" y2="32" stroke={c.accent} strokeWidth="1" opacity="0.4" />
      <line x1="32" y1="32" x2="46" y2="18" stroke={c.accent} strokeWidth="1" opacity="0.4" />
      <line x1="32" y1="32" x2="18" y2="46" stroke={c.accent} strokeWidth="1" opacity="0.4" />
      <circle cx="32" cy="10" r="4" fill={c.accent} />
      <circle cx="32" cy="54" r="4" fill={c.accent} />
      <circle cx="10" cy="32" r="4" fill={c.accent} />
      <circle cx="54" cy="32" r="4" fill={c.accent} />
      <circle cx="46" cy="18" r="3" fill={c.accent2} />
      <circle cx="18" cy="46" r="3" fill={c.accent2} />
      <circle cx="32" cy="32" r="9" fill="#d9c074" />
    </svg>);

}

/* ──────────────────────────────────────────────────── NEW HOMEPAGE ── */
function BSALabel({ c, children, style }) {
  return (
    <div className="mono" style={{
      fontSize: 11, color: c.muted, letterSpacing: '0.15em',
      textTransform: 'uppercase', ...style
    }}>
      {children}
    </div>
  );
}

function BSASectionHeader({ c, label, title, body, dark = false }) {
  return (
    <div className="bsa-section-header" style={{
      display: 'grid', gridTemplateColumns: '160px 1fr 0.8fr',
      gap: 40, alignItems: 'start', marginBottom: 44
    }}>
      <BSALabel c={c} style={{ color: dark ? c.panelMuted : c.muted }}>{label}</BSALabel>
      <h2 style={{
        fontSize: 'clamp(36px, 4.8vw, 72px)', lineHeight: 0.98,
        fontWeight: 500, letterSpacing: '-0.03em', margin: 0,
        color: dark ? c.panelInk : c.ink
      }}>
        {title}
      </h2>
      {body ? <p style={{
        fontSize: 17, lineHeight: 1.6, margin: 0,
        color: dark ? c.panelInk : c.muted, opacity: dark ? 0.78 : 1,
        alignSelf: 'end'
      }}>{body}</p> : null}
    </div>
  );
}

function BSAWorkflowVisual({ c, dark = false }) {
  const steps = [
    ['Lead', 'Website, form, email'],
    ['Agent', 'Sorts and drafts'],
    ['Tools', 'CRM, inbox, docs'],
    ['Owner', 'Approves the move']
  ];
  const ink = dark ? c.panelInk : c.ink;
  const muted = dark ? c.panelMuted : c.muted;
  const line = dark ? `${c.panelInk}22` : c.line;
  const fill = dark ? 'rgba(232,237,228,0.055)' : c.bg;

  return (
    <div className="bsa-workflow-visual" style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12,
      alignItems: 'stretch'
    }}>
      {steps.map(([title, body], i) =>
        <div key={title} style={{
          position: 'relative',
          border: `1px solid ${line}`,
          background: fill,
          padding: '18px 16px',
          minHeight: 126
        }}>
          <div className="mono" style={{
            color: i === 1 ? c.accent2 : muted,
            fontSize: 10, letterSpacing: '0.14em',
            textTransform: 'uppercase'
          }}>0{i + 1}</div>
          <div style={{
            marginTop: 22, fontSize: 26, lineHeight: 1,
            letterSpacing: '-0.025em', fontWeight: 500,
            color: ink
          }}>{title}</div>
          <div style={{ marginTop: 8, color: muted, fontSize: 13, lineHeight: 1.35 }}>{body}</div>
          {i < steps.length - 1 ? <div className="bsa-flow-arrow" style={{
            position: 'absolute', right: -11, top: '50%',
            width: 20, height: 20, marginTop: -10,
            borderRadius: '50%', background: c.accent,
            color: c.panelInk, display: 'grid', placeItems: 'center',
            fontSize: 13, zIndex: 2
          }}>→</div> : null}
        </div>
      )}
    </div>
  );
}

function BSAAgentConsole({ c }) {
  const agents = [
    ['Lead Gen', 'CRM and prospecting', 72, '14 accounts in flight'],
    ['Admin', 'Inbox and calendar', 64, '8 replies drafted'],
    ['Chief of Staff', 'Ops and weekly reporting', 91, 'Mon brief ready'],
    ['Creator', 'YouTube to posts', 58, '5 clips queued']
  ];

  return (
    <div className="bsa-agent-console" style={{
      background: c.panel, color: c.panelInk,
      border: `1px solid ${c.panelInk}12`,
      minHeight: 520, height: '100%',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden'
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', gap: 16,
        padding: '22px 24px', borderBottom: `1px solid ${c.panelInk}18`
      }}>
        <BSALabel c={c} style={{ color: c.panelMuted }}>BRIGHTSOL · CONSOLE</BSALabel>
        <BSALabel c={c} style={{ color: c.accent2 }}>LIVE WITH 4 AGENTS</BSALabel>
      </div>
      <div style={{ padding: '26px 24px 18px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 16, alignItems: 'end' }}>
        <div style={{ fontSize: 80, lineHeight: 0.9, letterSpacing: '-0.06em', fontWeight: 500 }}>182</div>
        <div>
          <div style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', color: '#d9c074', fontSize: 28 }}>hrs</div>
          <BSALabel c={c} style={{ color: c.panelMuted, marginTop: 4 }}>returned to the business</BSALabel>
        </div>
      </div>
      <div style={{ padding: '0 24px 24px', display: 'grid', gap: 12 }}>
        {agents.map(([title, job, pct, status], i) =>
          <div key={title} style={{
            border: `1px solid ${c.panelInk}18`,
            background: 'rgba(232,237,228,0.045)',
            padding: '18px 18px 16px'
          }}>
            <div className="mono" style={{
              color: c.panelMuted, fontSize: 10,
              letterSpacing: '0.14em', textTransform: 'uppercase'
            }}>Agent · 0{i + 1}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'baseline', marginTop: 14 }}>
              <div>
                <div style={{ fontSize: 26, lineHeight: 1, letterSpacing: '-0.025em', fontWeight: 500 }}>{title}</div>
                <div style={{ color: c.panelMuted, marginTop: 7, fontSize: 14 }}>{job}</div>
              </div>
              <div className="mono" style={{ color: '#d9c074', fontSize: 11 }}>{pct}%</div>
            </div>
            <div style={{ height: 4, background: `${c.panelInk}15`, marginTop: 16 }}>
              <div style={{ width: `${pct}%`, height: '100%', background: c.accent2 }} />
            </div>
            <div className="mono" style={{ color: '#d9c074', marginTop: 12, fontSize: 10, letterSpacing: '0.08em' }}>• {status}</div>
          </div>
        )}
      </div>
    </div>
  );
}

function BSAHero({ c }) {
  return (
    <section className="bsa-hero" style={{ borderBottom: `1px solid ${c.line}` }}>
      <div className="bsa-hero-editorial" style={{ maxWidth: 1320, margin: '0 auto', padding: '44px 56px 34px' }}>
        <div style={{
          borderTop: `1px solid ${c.line}`, paddingTop: 20,
          display: 'grid', gridTemplateColumns: '160px 1fr', gap: 32
        }}>
          <BSALabel c={c}>01 — INTRO</BSALabel>
          <BSALabel c={c}>A CONSULTING PRACTICE FOR THE AGENT ERA</BSALabel>
        </div>
        <div className="bsa-hero-copy" style={{
          marginTop: 24,
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.18fr) minmax(300px, 0.6fr)',
          gap: 40,
          alignItems: 'end'
        }}>
          <h1 style={{
            fontSize: 'clamp(46px, 5.7vw, 84px)', lineHeight: 0.95,
            fontWeight: 500, letterSpacing: '-0.055em',
            margin: 0, textWrap: 'balance'
          }}>
            Automate the busywork.<br />
            Then <span style={{
              fontFamily: '"Instrument Serif", serif',
              fontWeight: 400, fontStyle: 'italic', color: c.accent
            }}>get ahead.</span>
          </h1>
          <div className="bsa-hero-subline" style={{
            display: 'grid', gridTemplateColumns: '44px minmax(0, 1fr)',
            gap: 18, alignItems: 'start', marginBottom: 8
          }}>
            <span style={{ height: 1, background: c.accent, marginTop: 15 }} />
            <p style={{
              margin: 0, fontFamily: '"Instrument Serif", serif',
              fontStyle: 'italic', fontSize: 20, lineHeight: 1.34,
              color: c.ink, opacity: 0.76
            }}>
              Practical agents, connected websites, and automations that take manual work off the owner's desk.
            </p>
          </div>
        </div>
      </div>
      <div style={{ background: c.panel, color: c.panelInk }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '18px 56px 34px' }}>
          <div className="bsa-operator-stage" style={{
            display: 'grid', gridTemplateColumns: '1.08fr 0.92fr',
            minHeight: 420, overflow: 'hidden',
            border: `1px solid ${c.panelInk}14`
          }}>
            <div style={{ position: 'relative', minHeight: 420, overflow: 'hidden' }}>
              <img src="site/hero-portrait.png" alt="Business owner supported by BrightSol AI agents" style={{
                width: '100%', height: '100%', objectFit: 'cover',
                filter: 'saturate(0.72) contrast(0.92) brightness(0.82)'
              }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(15,28,20,0.16), rgba(15,28,20,0.58))' }} />
              <div className="mono" style={{
                position: 'absolute', left: 36, top: 32,
                background: 'rgba(15,28,20,0.68)', color: c.panelInk,
                padding: '12px 16px', fontSize: 11,
                letterSpacing: '0.16em', textTransform: 'uppercase'
              }}>Fig.01 · The operator</div>
            </div>
            <div style={{ padding: 26, background: '#0b1710', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'center' }}>
                <BSALabel c={c} style={{ color: c.panelMuted }}>BrightSol · Command center</BSALabel>
                <div className="mono" style={{ color: '#d9c074', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Built around owner relief</div>
              </div>
              <div style={{ marginTop: 18, maxWidth: 420 }}>
                <div style={{ fontSize: 38, lineHeight: 0.95, letterSpacing: '-0.045em', fontWeight: 500, maxWidth: 390 }}>
                  “I got my nights and weekends back.”
                </div>
                <p style={{ margin: '12px 0 0', color: c.panelMuted, fontSize: 15, lineHeight: 1.42 }}>
                  Agents handle the first pass. Automations keep things moving. The owner keeps the decisions that matter.
                </p>
              </div>
              <div style={{
                marginTop: 18,
                width: '100%',
                border: `1px solid ${c.panelInk}20`,
                background: 'rgba(232,237,228,0.035)',
                padding: 18,
                boxShadow: '0 18px 48px rgba(0,0,0,0.18)'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center' }}>
                  <BSALabel c={c} style={{ color: c.panelMuted }}>Today's flow</BSALabel>
                  <div className="mono" style={{ color: '#d9c074', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Owner reviews 3</div>
                </div>
                <div style={{ marginTop: 14, display: 'grid', gap: 10 }}>
                  {[
                    ['New lead', 'Drafted and routed', 'Ready'],
                    ['Admin queue', 'Tasks assigned', 'Assigned'],
                    ['Follow-up', 'Reply prepared', 'Prepared']
                  ].map(([title, status, label]) =>
                    <div key={title} style={{
                      display: 'grid', gridTemplateColumns: '1fr auto', gap: 12,
                      alignItems: 'center', borderTop: `1px solid ${c.panelInk}16`, paddingTop: 10
                    }}>
                      <div>
                        <div style={{ fontSize: 16, lineHeight: 1, fontWeight: 500, letterSpacing: '-0.02em' }}>{title}</div>
                        <div style={{ marginTop: 5, color: c.panelMuted, fontSize: 12 }}>{status}</div>
                      </div>
                      <div className="mono" style={{ color: '#d9c074', fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{label}</div>
                    </div>
                  )}
                </div>
              </div>
              <div className="bsa-console-card-grid" style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {[
                  ['Lead follow-up', 'Inbound routed, draft prepared'],
                  ['Project flow', 'Tasks moved without owner chasing'],
                  ['Admin queue', 'Approvals surfaced only when needed'],
                  ['Website handoff', 'Forms connected to real operations']
                ].map(([title, body], i) =>
                  <div key={title} style={{
                    border: `1px solid ${c.panelInk}18`,
                    background: i === 0 ? 'rgba(217,192,116,0.09)' : 'rgba(232,237,228,0.035)',
                    padding: '14px 14px 13px'
                  }}>
                    <div className="mono" style={{ color: c.panelMuted, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase' }}>0{i + 1}</div>
                    <div style={{ marginTop: 10, fontSize: 19, lineHeight: 1.05, fontWeight: 500, letterSpacing: '-0.03em' }}>{title}</div>
                    <div style={{ marginTop: 8, color: c.panelMuted, fontSize: 13, lineHeight: 1.38 }}>{body}</div>
                  </div>
                )}
              </div>
              <div style={{
                marginTop: 14,
                borderTop: `1px solid ${c.panelInk}18`,
                paddingTop: 14,
                display: 'grid',
                gridTemplateColumns: '1fr 1fr 1fr',
                gap: 10
              }}>
                {[
                  ['14', 'tasks moved'],
                  ['8', 'drafts ready'],
                  ['3', 'owner reviews']
                ].map(([num, label]) =>
                  <div key={label}>
                    <div style={{ fontSize: 28, lineHeight: 1, color: c.panelInk, fontWeight: 500 }}>{num}</div>
                    <div className="mono" style={{ marginTop: 5, color: c.panelMuted, fontSize: 8, letterSpacing: '0.11em', textTransform: 'uppercase' }}>{label}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
          <div className="d2r-hero-beliefs bsa-beliefs" style={{
            display: 'grid', gridTemplateColumns: '120px 1fr 1fr 1fr', gap: 32,
            paddingTop: 28, marginTop: 28, borderTop: `1px solid ${c.panelInk}20`
          }}>
            <div className="mono" style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.15em' }}>
              02 · WHAT WE BELIEVE
            </div>
            {[
              ['Agents take work off your desk.', 'We build agents that handle the first pass so you can focus on decisions.'],
              ['The tools should fit the business.', 'We help pick and connect the right systems instead of chasing every new app.'],
              ['Owners get time back.', 'The goal is a business that runs with less daily follow-up from you.']
            ].map(([t, b]) =>
              <div key={t}>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.15 }}>{t}</div>
                <p style={{ marginTop: 8, opacity: 0.7, fontSize: 15, lineHeight: 1.45 }}>{b}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function BSAProblem({ c }) {
  const transitions = [
    ['Leads sit in the inbox', 'Leads flow into CRM. Draft emails and call plans are automated.'],
    ['Admin work returns to the owner', 'Your agent chief of staff handles it all.'],
    ['Ideas stay ideas', 'Your product pipeline flourishes with automation.']
  ];
  return (
    <section className="bsa-section" style={{ padding: '52px 56px 72px', borderBottom: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="bsa-section-header" style={{
          marginBottom: 38,
          borderTop: `1px solid ${c.line}`,
          paddingTop: 28
        }}>
          <BSALabel c={c}>03 — THE REAL PROBLEM</BSALabel>
          <div style={{ marginTop: 18, maxWidth: 780 }}>
            <h2 style={{ margin: 0, fontSize: 'clamp(32px, 3.7vw, 52px)', lineHeight: 1, letterSpacing: '-0.045em', fontWeight: 500 }}>
              The owner is still doing too much.
            </h2>
            <p style={{ margin: '12px 0 0', color: c.muted, fontSize: 17, lineHeight: 1.42, maxWidth: 620 }}>
              Every lead, task, tool, and AI idea keeps coming back to your desk.
            </p>
          </div>
        </div>
        <div className="bsa-problem-grid" style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 34, alignItems: 'start' }}>
          <div>
            <div style={{
              position: 'relative',
              minHeight: 520,
              overflow: 'hidden',
              border: `1px solid ${c.line}`,
              background: c.panel
            }}>
              <img src="site/owner-overloaded.png" alt="Business owner carrying too much operational work" style={{
                width: '100%',
                height: 520,
                objectFit: 'cover',
                objectPosition: 'center',
                filter: 'saturate(0.52) contrast(0.9) brightness(0.72)'
              }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(15,28,20,0.72), rgba(15,28,20,0.15))' }} />
              <div style={{ position: 'absolute', left: 20, bottom: 20, color: c.panelInk, maxWidth: 300 }}>
                <div className="mono" style={{ color: c.panelMuted, fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase' }}>Before BrightSol</div>
                <div style={{ marginTop: 10, fontSize: 26, lineHeight: 1, letterSpacing: '-0.035em', fontWeight: 500 }}>Too much work is waiting on one person.</div>
              </div>
            </div>
          </div>
          <div style={{ background: c.bgAlt, border: `1px solid ${c.line}`, padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18, alignItems: 'start' }}>
              <div>
                <h3 style={{ margin: '10px 0 0', fontSize: 28, lineHeight: 1, letterSpacing: '-0.035em', fontWeight: 500 }}>
                  You stop being the bottleneck.
                </h3>
              </div>
            </div>
            <p style={{ margin: '14px 0 0', color: c.muted, fontSize: 16, lineHeight: 1.4, maxWidth: 620 }}>
              The system handles the repeat, mundane work. You spend time on what's important.
            </p>
            <div style={{ marginTop: 22, display: 'grid', gap: 12 }}>
              <div className="bsa-analysis-row" style={{
                display: 'grid',
                gridTemplateColumns: '0.82fr 40px 1.18fr',
                gap: 14,
                alignItems: 'end'
              }}>
                <div className="mono" style={{ color: c.muted, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Before</div>
                <div />
                <div className="mono" style={{ color: c.accent, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase' }}>After BrightSol-AI</div>
              </div>
              {transitions.map(([before, after], i) =>
                <div key={before} className="bsa-analysis-row" style={{
                  display: 'grid',
                  gridTemplateColumns: '0.82fr 40px 1.18fr',
                  gap: 14,
                  alignItems: 'center',
                  borderTop: i === 0 ? `1px solid ${c.line}` : 'none',
                  borderBottom: `1px solid ${c.line}`,
                  padding: '16px 0'
                }}>
                  <div>
                    <div style={{ marginTop: 8, fontSize: 20, lineHeight: 1.1, letterSpacing: '-0.025em', fontWeight: 500 }}>{before}</div>
                  </div>
                  <div style={{
                    width: 40,
                    height: 40,
                    borderRadius: '50%',
                    border: `1px solid ${c.lineStrong}`,
                    display: 'grid',
                    placeItems: 'center',
                    color: c.accent,
                    fontSize: 18
                  }}>→</div>
                  <div>
                    <div style={{ marginTop: 8, fontSize: 20, lineHeight: 1.1, letterSpacing: '-0.025em', fontWeight: 500 }}>{after}</div>
                  </div>
                </div>
              )}
            </div>
            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {[
                ['14', 'tasks moved'],
                ['8', 'drafts ready'],
                ['3', 'need owner']
              ].map(([n, label]) =>
                <div key={label} style={{ borderTop: `1px solid ${c.line}`, paddingTop: 10 }}>
                  <div style={{ fontSize: 28, lineHeight: 1, color: c.accent, fontWeight: 500 }}>{n}</div>
                  <div className="mono" style={{ marginTop: 4, color: c.muted, fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{label}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BSAServices({ c }) {
  const services = [
    ['Agents', 'agent', ['Chief of staff', 'Admin assistant', 'Project manager']],
    ['Automation', 'automation', ['Lead routing', 'CRM updates', 'Human approval']],
    ['Creator workflows', 'creator', ['YouTube', 'Clips', 'Newsletter']],
    ['Websites', 'website', ['Forms', 'Analytics', 'Connected automation']],
  ];
  const tools = [
    'ChatGPT', 'Claude', 'Gemini',
    'n8n', 'Make', 'Zapier', 'Power Automate', 'Gumloop',
    'HubSpot', 'Pipedrive', 'Zoho Bigin', 'Attio',
    'Beehiiv', 'MailerLite', 'Brevo', 'ActiveCampaign',
    'Calendly', 'Microsoft Bookings',
    'Squarespace', 'Webflow', 'Wix', 'WordPress',
    'Google Search Console', 'SE Ranking', 'Ubersuggest', 'Semrush',
    'Buffer', 'Publer', 'SocialBee', 'Hootsuite',
    'Riverside', 'Descript', 'Buzzsprout', 'Transistor',
    'Castmagic', 'Podium', 'PodSqueeze',
    'CapCut', 'DaVinci Resolve'
  ];
  const toolRows = [
    tools.slice(0, 18),
    tools.slice(18)
  ];
  const ToolTickerRow = ({ items, reverse }) => (
    <div className="bsa-tool-marquee" style={{
      overflow: 'hidden',
      borderTop: `1px solid ${c.line}`,
      padding: '11px 0'
    }}>
      <div className={reverse ? 'bsa-tool-track bsa-tool-track-reverse' : 'bsa-tool-track'} style={{
        display: 'flex',
        gap: 10,
        width: 'max-content'
      }}>
        {[...items, ...items].map((tool, i) =>
          <span key={`${tool}-${i}`} className="mono" style={{
            flex: '0 0 auto',
            border: `1px solid ${c.line}`,
            background: c.bg,
            color: c.muted,
            padding: '9px 12px',
            fontSize: 10,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            whiteSpace: 'nowrap'
          }}>{tool}</span>
        )}
      </div>
    </div>
  );
  const BSAServiceVisual = ({ kind }) => {
    if (kind === 'agent') {
      return (
        <div style={{ position: 'relative', background: '#0b1220', overflow: 'hidden', border: `1px solid ${c.panelInk}22` }}>
          <img src="site/agents-dashboard.png?v=2026-07-01l" alt="AI Chief of Staff executive dashboard: revenue, active agents, decisions, risk score, pipeline and receivables" style={{
            width: '100%',
            height: 'auto',
            display: 'block'
          }} />
        </div>
      );
    }
    if (kind === 'automation') {
      return (
        <div style={{ background: c.bgAlt, border: `1px solid ${c.line}`, padding: 18, minHeight: 178 }}>
          <div className="mono" style={{ color: c.muted, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Automation path</div>
          <div style={{ marginTop: 18, display: 'grid', gap: 10 }}>
            {[
              ['Book appointment', 'Calendar', 'CRM'],
              ['CRM update', 'Pipeline', 'Follow-up email'],
              ['Support ticket', 'Auto-route', 'Owner only if needed']
            ].map(([left, middle, right], i) =>
              <div key={left} style={{ border: `1px solid ${c.lineStrong}`, background: i === 1 ? c.accentSoft : c.bg, padding: 12 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 24px 1fr 24px 1fr', gap: 8, alignItems: 'center' }}>
                  <div>
                    <div className="mono" style={{ color: c.muted, fontSize: 7, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Input</div>
                    <div style={{ marginTop: 8, fontSize: 15, fontWeight: 500, lineHeight: 1.1 }}>{left}</div>
                  </div>
                  <div style={{ color: c.accent, textAlign: 'center', fontSize: 16 }}>→</div>
                  <div>
                    <div className="mono" style={{ color: c.muted, fontSize: 7, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Automation</div>
                    <div style={{ marginTop: 8, fontSize: 15, fontWeight: 500, lineHeight: 1.1 }}>{middle}</div>
                  </div>
                  <div style={{ color: c.accent, textAlign: 'center', fontSize: 16 }}>→</div>
                  <div>
                    <div className="mono" style={{ color: c.muted, fontSize: 7, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Outcome</div>
                    <div style={{ marginTop: 8, fontSize: 15, fontWeight: 500, lineHeight: 1.1 }}>{right}</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }
    if (kind === 'creator') {
      return (
        <div style={{ background: c.bgAlt, border: `1px solid ${c.line}`, padding: 18, minHeight: 178 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.12fr 0.88fr', gap: 12, height: '100%' }}>
            <div style={{ position: 'relative', minHeight: 128, overflow: 'hidden', background: '#000' }}>
              <img src="site/creator-youtube.png" alt="YouTube video still: how I run my business on autopilot" style={{
                width: '100%',
                height: '100%',
                minHeight: 128,
                objectFit: 'cover',
                display: 'block'
              }} />
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                <div style={{
                  width: 56,
                  height: 40,
                  borderRadius: 9,
                  background: 'rgba(214,0,0,0.92)',
                  display: 'grid',
                  placeItems: 'center',
                  boxShadow: '0 6px 22px rgba(0,0,0,0.4)'
                }}>
                  <div style={{ width: 0, height: 0, borderLeft: '15px solid #fff', borderTop: '9px solid transparent', borderBottom: '9px solid transparent', marginLeft: 3 }} />
                </div>
              </div>
              <div className="mono" style={{
                position: 'absolute',
                right: 8,
                bottom: 8,
                background: 'rgba(0,0,0,0.82)',
                color: '#fff',
                fontSize: 9,
                letterSpacing: '0.04em',
                padding: '3px 6px',
                borderRadius: 3
              }}>12:04</div>
            </div>
            <div style={{ display: 'grid', gap: 8 }}>
              {[
                ['LinkedIn', 'Post, episode post, carousel drafted'],
                ['Email', 'Newsletter ready, CRM ready for campaign'],
                ['Short-form', 'Clips drafted, thumbnails']
              ].map(([item, detail], i) =>
                <div key={item} style={{ border: `1px solid ${c.line}`, background: c.bg, padding: 10 }}>
                  <div className="mono" style={{ color: c.muted, fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>0{i + 1}</div>
                  <div style={{ marginTop: 8, fontSize: 16, fontWeight: 500 }}>{item}</div>
                  <div style={{ marginTop: 6, color: c.muted, fontSize: 12 }}>{detail}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      );
    }
    return (
      <div style={{ background: c.bgAlt, border: `1px solid ${c.line}`, padding: 18, minHeight: 178 }}>
        <div style={{ border: `1px solid ${c.lineStrong}`, background: c.bg, minHeight: 140, overflow: 'hidden' }}>
          <div style={{ display: 'flex', gap: 5, padding: '9px 11px', borderBottom: `1px solid ${c.line}` }}>
            {[0, 1, 2].map((dot) => <span key={dot} style={{ width: 6, height: 6, borderRadius: '50%', background: dot === 0 ? c.accent : c.lineStrong }} />)}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: 10 }}>
            {[
              ['site/remember-you-preview.png', 'Remember You', 'https://remember-you.com/'],
              ['site/practice-peace-preview.png', 'Practice Peace', 'https://practicepeace.co/']
            ].map(([src, label, href]) =>
              <a
                key={label}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={`Open ${label} website`}
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  overflow: 'hidden',
                  border: `1px solid ${c.line}`,
                  textDecoration: 'none',
                  background: c.bg
                }}
              >
                <img src={src} alt={`${label} customer website preview`} style={{
                  width: '100%',
                  height: 150,
                  objectFit: 'cover',
                  objectPosition: 'center top',
                  filter: 'saturate(0.96) contrast(0.98)'
                }} />
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  gap: 10,
                  alignItems: 'center',
                  padding: '9px 10px',
                  borderTop: `1px solid ${c.line}`,
                  background: c.bgAlt
                }}>
                  <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.1, color: c.ink }}>{label}</div>
                  <div className="mono" style={{ color: c.accent, fontSize: 8, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                    Open ↗
                  </div>
                </div>
              </a>
            )}
          </div>
        </div>
      </div>
    );
  };
  return (
    <section id="services" className="bsa-section" style={{ padding: '82px 56px', background: c.bgAlt, borderBottom: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="bsa-services-head" style={{
          borderTop: `1px solid ${c.line}`,
          paddingTop: 28,
          marginBottom: 36
        }}>
          <BSALabel c={c}>05 — WHAT WE BUILD</BSALabel>
          <div style={{ marginTop: 18, maxWidth: 980 }} className="bsa-services-head-grid">
            <h2 style={{
              fontSize: 'clamp(32px, 3.5vw, 48px)',
              lineHeight: 1,
              fontWeight: 500,
              letterSpacing: '-0.04em',
              margin: 0,
              maxWidth: 980
            }}>
              Turn-key agents, websites, and automation.
            </h2>
            <p style={{
              fontSize: 17,
              lineHeight: 1.42,
              margin: '12px 0 0',
              color: c.muted,
              maxWidth: 720
            }}>
              We set up the everyday work of your business so leads get answered, appointments get booked, and follow-up happens without you chasing it.
            </p>
          </div>
        </div>
        <div className="bsa-card-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {services.map(([title, kind, items], i) =>
            <div key={title} style={{ border: `1px solid ${c.line}`, background: c.bg, padding: 18, minHeight: 360 }}>
              <BSAServiceVisual kind={kind} />
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18, alignItems: 'start', marginTop: 18 }}>
                <BSALabel c={c}>0{i + 1}</BSALabel>
              </div>
              <h3 style={{ margin: '12px 0 14px', fontSize: 30, lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 500 }}>
                {title}
              </h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {items.map((item) =>
                  <div key={item} className="mono" style={{
                    fontSize: 9,
                    lineHeight: 1.2,
                    color: c.muted,
                    border: `1px solid ${c.line}`,
                    padding: '8px 9px',
                    letterSpacing: '0.08em',
                    textTransform: 'uppercase'
                  }}>
                    {item}
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
        <div style={{
          marginTop: 28,
          borderTop: `1px solid ${c.line}`,
          paddingTop: 22
        }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            gap: 18,
            alignItems: 'center',
            marginBottom: 10
          }}>
            <BSALabel c={c}>Models and tools we evaluate</BSALabel>
            <p style={{ margin: 0, color: c.muted, fontSize: 14, lineHeight: 1.35, maxWidth: 430 }}>
              We research the tools we recommend, test the adjacent options, and keep the point of view current.
            </p>
          </div>
          <div style={{
            marginLeft: '-56px',
            marginRight: '-56px',
            borderBottom: `1px solid ${c.line}`,
            background: c.bgAlt
          }}>
            {toolRows.map((row, i) =>
              <ToolTickerRow key={i} items={row} reverse={false} />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function BSAPricing({ c }) {
  const rows = [
    ['Agentic', 'Simple agentic delivery', 'One useful agent or workflow.', '$1,200'],
    ['Agentic', 'Medium agentic delivery', 'Multi-step agent with handoffs.', '$4,000'],
    ['Agentic', 'Full custom agentic program', 'Multiple agents and custom automations.', 'TBD'],
    ['Training', 'AI training pack', 'Practical team training and starter workflows.', '$500'],
    ['Website', 'Simple website build', 'A clean online home.', '$1,300'],
    ['Website', 'Custom website build', 'Strategic site with connected automation.', '$5,500+'],
  ];
  return (
    <section id="pricing" className="bsa-section" style={{ padding: '56px 56px 28px', borderBottom: 'none' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="bsa-pricing-head" style={{ borderTop: `1px solid ${c.line}`, paddingTop: 18, marginBottom: 18 }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '180px 1fr',
            gap: 28,
            alignItems: 'end'
          }}>
            <BSALabel c={c}>04 — STARTING POINTS</BSALabel>
            <div>
              <h2 style={{
                margin: 0,
                fontSize: 'clamp(42px, 5.4vw, 72px)',
                lineHeight: 0.94,
                letterSpacing: '-0.055em',
                fontWeight: 500
              }}>
                Simple pricing.
              </h2>
              <p style={{ margin: '14px 0 0', color: c.muted, fontSize: 22, lineHeight: 1.24, maxWidth: 900 }}>
                Pick a lane. We will help you choose the right starting point.
              </p>
            </div>
          </div>
        </div>
        <div className="bsa-pricing-table" style={{ border: `1px solid ${c.line}`, background: c.bgAlt }}>
          <div className="bsa-price-row bsa-price-head-row" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(84px, 0.55fr) minmax(0, 2.1fr) minmax(0, 1.7fr) minmax(96px, 0.85fr)',
            gap: 26,
            padding: '16px 22px',
            borderBottom: `1px solid ${c.line}`,
            alignItems: 'center'
          }}>
            {['Type', 'Build', 'Use case', 'Starting price'].map((heading) =>
              <div key={heading} className="mono" style={{
                fontSize: 13,
                fontWeight: 700,
                letterSpacing: '0.11em',
                textTransform: 'uppercase',
                color: c.ink
              }}>{heading}</div>
            )}
          </div>
          {rows.map(([type, name, desc, price], i) => {
            const highlight = type === 'Agentic' || type === 'Training';
            return (
              <div key={name} className="bsa-price-row" style={{
                display: 'grid',
                gridTemplateColumns: 'minmax(84px, 0.55fr) minmax(0, 2.1fr) minmax(0, 1.7fr) minmax(96px, 0.85fr)',
                gap: 26,
                padding: '24px 22px',
                borderBottom: i < rows.length - 1 ? `1px solid ${c.line}` : 'none',
                alignItems: 'center',
                background: highlight ? c.accentSoft : c.bgAlt
              }}>
                <div className="mono" style={{
                  display: 'inline-flex',
                  width: 'fit-content',
                  border: `1px solid ${highlight ? c.accent + '40' : c.line}`,
                  color: c.muted,
                  padding: '8px 10px',
                  fontSize: 10,
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase'
                }}>{type}</div>
                <h3 style={{ margin: 0, fontSize: 29, lineHeight: 1.02, fontWeight: 600, letterSpacing: '-0.03em' }}>
                  {name}
                </h3>
                <p style={{ margin: 0, color: c.muted, lineHeight: 1.38, fontSize: 16 }}>{desc}</p>
                <div style={{
                  color: c.accent,
                  fontSize: 'clamp(26px, 3vw, 38px)',
                  lineHeight: 1,
                  fontWeight: 500,
                  whiteSpace: 'nowrap',
                  textAlign: 'right',
                  letterSpacing: '-0.03em',
                  justifySelf: 'end',
                  minWidth: 90
                }}>{price}</div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
          <p className="mono" style={{ margin: 0, fontSize: 11, color: c.muted, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            Simple starting points. Clear next step.
          </p>
          <a href={SCHEDULE_URL} target="_blank" rel="noopener noreferrer" style={{ color: c.accent, borderBottom: `1px solid ${c.accent}`, paddingBottom: 4, textDecoration: 'none' }}>
            Start the conversation
          </a>
        </div>
        <div style={{
          marginTop: 26,
          borderTop: `1px solid ${c.line}`,
          borderBottom: `1px solid ${c.line}`,
          background: `linear-gradient(180deg, ${c.bgAlt} 0%, ${c.bg} 100%)`,
          padding: '26px 0 24px'
        }}>
          <div className="mono" style={{
            color: c.muted,
            fontSize: 10,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            opacity: 0.75
          }}>
            Next: what we build
          </div>
        </div>
      </div>
    </section>
  );
}

function BSAProcess({ c }) {
  const steps = [
    ['Weeks 1-2', 'Discover', 'Map the real work.'],
    ['Week 2', 'Frame', 'Choose what to build first.'],
    ['Weeks 3-4', 'Build', 'Ship agents and integrations.'],
    ['Weeks 5-6', 'Operate', 'Run it with you, then step back.'],
  ];
  return (
    <section id="method" className="bsa-section" style={{ padding: '46px 56px', background: c.bg, borderBottom: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '180px minmax(0, 1fr)',
          gap: 28,
          alignItems: 'start',
          borderTop: `1px solid ${c.line}`,
          paddingTop: 24
        }} className="bsa-method-compact-head">
          <BSALabel c={c}>06 — METHOD</BSALabel>
          <div>
            <h2 style={{ margin: 0, fontSize: 'clamp(30px, 3.6vw, 50px)', lineHeight: 1, letterSpacing: '-0.04em', fontWeight: 500 }}>
              A simple build rhythm.
            </h2>
            <p style={{ margin: '10px 0 0', color: c.muted, fontSize: 17, lineHeight: 1.38, maxWidth: 620 }}>
              Enough structure to keep the project moving. Not a consulting theater production.
            </p>
          </div>
        </div>
        <div className="bsa-card-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 24 }}>
          {steps.map(([timing, title, body], i) =>
            <div key={title} style={{
              border: `1px solid ${c.line}`,
              background: c.bgAlt,
              padding: 16,
              minHeight: 148,
              position: 'relative'
            }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: i < 2 ? c.accent : c.accent2 }} />
              <div className="mono" style={{ color: c.accent, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{timing}</div>
              <h3 style={{ fontSize: 27, lineHeight: 1, letterSpacing: '-0.035em', fontWeight: 500, margin: '34px 0 10px' }}>{title}</h3>
              <p style={{ color: c.muted, lineHeight: 1.35, margin: 0, fontSize: 15 }}>{body}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function BSATooling({ c }) {
  const libraryCategories = [
    ['Newsletter platforms', 'Email + newsletters'],
    ['Automation platforms', 'Ops + handoffs'],
    ['Scheduling', 'Calendar + booking'],
    ['Website builders', 'Webflow + Squarespace'],
    ['SEO', 'Search + visibility'],
    ['Social scheduling', 'Content ops'],
    ['Video editing', 'Creator workflow'],
    ['Podcast tools', 'Production + clips']
  ];
  const points = [
    ['Beehiiv', 78, 82, c.accent],
    ['MailerLite', 66, 76, c.accent],
    ['Brevo', 61, 61, c.accent2],
    ['ActiveCampaign', 48, 84, c.accent2],
    ['Flodesk', 38, 53, c.muted]
  ];
  const scoreRows = [
    ['Beehiiv', 'Creator growth', '88'],
    ['MailerLite', 'Lean SMB email', '84'],
    ['Brevo', 'Volume sending', '81']
  ];
  return (
    <section id="proof" className="bsa-section" style={{ padding: '74px 56px', background: c.bgAlt, borderBottom: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ borderTop: `1px solid ${c.line}`, paddingTop: 28, marginBottom: 34 }}>
          <BSALabel c={c}>07 — TOOLING JUDGMENT</BSALabel>
          <div style={{ marginTop: 18, maxWidth: 1040 }}>
            <h2 style={{
              margin: 0,
              fontSize: 'clamp(32px, 3.6vw, 52px)',
              lineHeight: 1,
              letterSpacing: '-0.045em',
              fontWeight: 500
            }}>
              We test and score the tools regularly. Our recommendations come with receipts and data.
            </h2>
            <p style={{ margin: '12px 0 0', color: c.muted, fontSize: 17, lineHeight: 1.42, maxWidth: 720 }}>
              Clients never have to sort through every model, SaaS tool, and automation platform alone. We compare the platforms we recommend, pressure-test the adjacent options, and keep the research current.
            </p>
          </div>
        </div>
        <div className="bsa-tooling-grid" style={{ display: 'grid', gridTemplateColumns: '0.48fr 1.52fr', gap: 28, alignItems: 'stretch' }}>
          <div style={{
            background: c.panel,
            color: c.panelInk,
            padding: 24,
            display: 'grid',
            gridTemplateRows: 'auto 1fr auto',
            gap: 22,
            minHeight: 560,
            overflow: 'hidden',
            position: 'relative'
          }}>
            <div className="bsa-report-cover" style={{
              position: 'absolute',
              right: -78,
              top: 150,
              width: 176,
              height: 232,
              background: '#f8f7ef',
              border: `1px solid ${c.panelInk}22`,
              transform: 'rotate(7deg)',
              boxShadow: '0 24px 60px rgba(0,0,0,0.28)'
            }} />
            <div className="bsa-report-cover" style={{
              position: 'absolute',
              right: -18,
              top: 168,
              width: 150,
              height: 196,
              background: '#24405d',
              border: `1px solid ${c.panelInk}22`,
              transform: 'rotate(-5deg)',
              boxShadow: '0 24px 60px rgba(0,0,0,0.2)'
            }}>
              <div style={{ height: 40, background: '#a9c598', display: 'flex', alignItems: 'center', padding: '0 14px' }}>
                <div className="mono" style={{ color: '#1b3552', fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>BrightSol</div>
              </div>
              <div style={{ padding: 15 }}>
                <div className="mono" style={{ color: '#ffffffcc', fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                  Category POV
                </div>
                <div style={{ marginTop: 12, color: '#fff', fontSize: 18, lineHeight: 1, letterSpacing: '-0.03em' }}>
                  CRM + scheduling
                </div>
              </div>
            </div>
            <div className="bsa-report-cover" style={{
              position: 'absolute',
              right: -50,
              top: 186,
              width: 146,
              height: 190,
              background: '#1b3552',
              border: `1px solid ${c.panelInk}22`,
              transform: 'rotate(-3deg)',
              boxShadow: '0 24px 60px rgba(0,0,0,0.26)'
            }}>
              <div style={{ height: 42, background: '#d9c074', display: 'flex', alignItems: 'center', padding: '0 14px' }}>
                <div className="mono" style={{ color: '#1b3552', fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>BrightSol</div>
              </div>
              <div style={{ padding: 16 }}>
                <div className="mono" style={{ color: '#ffffffcc', fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                  Platform POV
                </div>
                <div style={{ marginTop: 12, color: '#fff', fontSize: 22, lineHeight: 0.96, letterSpacing: '-0.03em' }}>
                  Newsletter tools
                </div>
              </div>
            </div>
            <div>
              <BSALabel c={c} style={{ color: c.panelMuted }}>Research library</BSALabel>
              <h3 style={{ margin: '14px 0 0', fontSize: 34, lineHeight: 0.96, letterSpacing: '-0.04em', fontWeight: 500, maxWidth: 260 }}>
                BrightSol-AI tools report.
              </h3>
            </div>
            <div style={{ display: 'grid', gap: 12, alignSelf: 'center', position: 'relative', maxWidth: 210 }}>
              {[
                ['40+', 'tools reviewed'],
                ['10', 'active categories'],
                ['5', 'fit signals']
              ].map(([num, label]) =>
                <div key={label} style={{ borderTop: `1px solid ${c.panelInk}22`, paddingTop: 14 }}>
                  <div style={{ fontSize: 42, lineHeight: 0.9, letterSpacing: '-0.05em', fontWeight: 500 }}>{num}</div>
                  <div className="mono" style={{ marginTop: 7, color: c.panelMuted, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{label}</div>
                </div>
              )}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {libraryCategories.map(([title, body]) =>
                <div key={title} style={{ border: `1px solid ${c.panelInk}22`, padding: 11, background: `${c.panelInk}06` }}>
                  <div style={{ fontSize: 14, lineHeight: 1.08, letterSpacing: '-0.02em', fontWeight: 500 }}>{title}</div>
                  <div className="mono" style={{ marginTop: 7, color: c.panelMuted, fontSize: 8, letterSpacing: '0.09em', textTransform: 'uppercase' }}>{body}</div>
                </div>
              )}
            </div>
          </div>
          <div className="bsa-report-frame" style={{
            background: '#dfe2e7',
            padding: '62px 66px 44px 40px',
            boxShadow: `0 28px 90px ${c.ink}14`,
            border: `1px solid ${c.line}`,
            overflow: 'hidden'
          }}>
            <div className="bsa-report-stack" style={{ position: 'relative' }}>
              {[
                { title: 'Scheduling fit map', bg: '#e4e7e0', step: 52, z: 1 },
                { title: 'CRM fit map', bg: '#eef0ea', step: 26, z: 2 }
              ].map((card) =>
                <div key={card.title} style={{
                  position: 'absolute',
                  inset: 0,
                  transform: `translate(${card.step}px, ${-card.step}px)`,
                  background: card.bg,
                  border: '1px solid #d2d4cf',
                  boxShadow: '0 10px 30px rgba(20,25,20,0.10)',
                  zIndex: card.z,
                  padding: '6px 22px'
                }}>
                  <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.03em', color: '#3a413a' }}>{card.title}</div>
                </div>
              )}
              <div style={{
                position: 'relative',
                zIndex: 3,
                background: '#fbfbf7',
                color: '#20241f',
                border: '1px solid #d2d4cf',
                padding: 24,
                minHeight: 500,
                boxShadow: '0 18px 45px rgba(20, 25, 20, 0.13)'
              }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'start', borderBottom: '1px solid #d7d9d3', paddingBottom: 16 }}>
                <div>
                  <div className="mono" style={{ color: '#677168', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                    BrightSol POV Library · sample report
                  </div>
                  <h3 style={{ margin: '11px 0 0', fontSize: 34, lineHeight: 0.98, letterSpacing: '-0.04em', fontWeight: 500 }}>
                    Newsletter platform fit map
                  </h3>
                </div>
                <div className="mono" style={{ color: '#677168', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', textAlign: 'right' }}>
                  Public preview<br />Illustrative data
                </div>
              </div>
              <div className="bsa-report-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 22, marginTop: 22 }}>
                <div>
                  <div style={{
                    position: 'relative',
                    height: 318,
                    border: '1px solid #d7d9d3',
                    background: `
                      linear-gradient(to right, transparent 49.8%, #c8ccc5 49.8%, #c8ccc5 50.2%, transparent 50.2%),
                      linear-gradient(to bottom, transparent 49.8%, #c8ccc5 49.8%, #c8ccc5 50.2%, transparent 50.2%),
                      linear-gradient(#edf0ea 1px, transparent 1px),
                      linear-gradient(90deg, #edf0ea 1px, transparent 1px),
                      #ffffff
                    `,
                    backgroundSize: '100% 100%, 100% 100%, 54px 54px, 54px 54px, 100% 100%'
                  }}>
                    <div className="mono" style={{ position: 'absolute', top: 10, left: 12, color: '#677168', fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Higher strategic fit</div>
                    <div className="mono" style={{ position: 'absolute', right: 12, bottom: 10, color: '#677168', fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Easier to operate</div>
                    <div style={{ position: 'absolute', top: 18, right: 18, border: '1px solid #d7d9d3', background: '#f6f6f1', padding: '8px 9px' }}>
                      <div className="mono" style={{ color: '#677168', fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Best fit zone</div>
                    </div>
                    {points.map(([name, x, y, color]) =>
                      <div key={name} style={{
                        position: 'absolute',
                        left: `${x}%`,
                        bottom: `${y}%`,
                        transform: 'translate(-50%, 50%)',
                        display: 'flex',
                        alignItems: 'center',
                        gap: 7,
                        whiteSpace: 'nowrap'
                      }}>
                        <span style={{ width: 13, height: 13, borderRadius: '50%', background: color, border: '2px solid #fbfbf7', boxShadow: '0 0 0 1px #8b948a' }} />
                        <span style={{ fontSize: 13, fontWeight: 500, background: '#fbfbf7d9', padding: '3px 5px', border: '1px solid #e2e4df' }}>{name}</span>
                      </div>
                    )}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginTop: 14 }}>
                    {[
                      ['Fit', 'ICP + use case'],
                      ['Cost', 'Pricing reality'],
                      ['Risk', 'Lock-in + support']
                    ].map(([title, body]) =>
                      <div key={title} style={{ border: '1px solid #d7d9d3', background: '#f6f6f1', padding: 10 }}>
                        <div className="mono" style={{ color: '#4f654f', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{title}</div>
                        <div style={{ color: '#677168', fontSize: 12, lineHeight: 1.25, marginTop: 7 }}>{body}</div>
                      </div>
                    )}
                  </div>
                </div>
                <div>
                  <div className="mono" style={{ color: '#677168', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Shortlist</div>
                  <div style={{ display: 'grid', gap: 10, marginTop: 12 }}>
                    {scoreRows.map(([tool, note, score], i) =>
                      <div key={tool} style={{ border: '1px solid #d7d9d3', background: i === 0 ? '#eef3e8' : '#ffffff', padding: 13 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'baseline' }}>
                          <div style={{ fontSize: 19, lineHeight: 1, fontWeight: 500 }}>{tool}</div>
                          <div style={{ fontSize: 27, lineHeight: 1, color: '#2f5636', fontWeight: 500 }}>{score}</div>
                        </div>
                        <div style={{ marginTop: 8, color: '#677168', fontSize: 13, lineHeight: 1.25 }}>{note}</div>
                      </div>
                    )}
                  </div>
                  <div style={{ marginTop: 18, borderTop: '1px solid #d7d9d3', paddingTop: 14 }}>
                    <div className="mono" style={{ color: '#677168', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Recommendation logic</div>
                    <p style={{ margin: '10px 0 0', color: '#3f4b40', fontSize: 13, lineHeight: 1.42 }}>
                      We compare tools against the client workflow, operating owner, cost reality, implementation lift, and maintenance risk.
                    </p>
                  </div>
                  <div style={{ marginTop: 18, border: '1px solid #d7d9d3', background: '#ffffff', padding: 12 }}>
                    <div className="mono" style={{ color: '#677168', fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Report output</div>
                    <div style={{ marginTop: 8, display: 'grid', gap: 7 }}>
                      {['Shortlist', 'Do not buy', 'Implementation notes'].map((item) =>
                        <div key={item} style={{ display: 'grid', gridTemplateColumns: '10px 1fr', gap: 8, alignItems: 'center' }}>
                          <span style={{ width: 7, height: 7, background: '#4f654f' }} />
                          <span style={{ fontSize: 13, color: '#3f4b40' }}>{item}</span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
              <p style={{ margin: '20px 0 0', color: '#677168', lineHeight: 1.35, fontSize: 12 }}>
                Preview only. Actual client recommendations use dated matrices, source lists, run logs, and implementation notes.
              </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BSAGuideTeam({ c }) {
  return (
    <section id="leadership" className="bsa-section" style={{ padding: '82px 56px', borderBottom: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="bsa-services-head" style={{
          borderTop: `1px solid ${c.line}`,
          paddingTop: 28,
          marginBottom: 36
        }}>
          <BSALabel c={c}>08 — LEADERSHIP</BSALabel>
          <div className="bsa-services-head-grid" style={{
            marginTop: 18,
            maxWidth: 980
          }}>
            <h2 style={{
              fontSize: 'clamp(32px, 3.5vw, 48px)',
              lineHeight: 1,
              fontWeight: 500,
              letterSpacing: '-0.04em',
              margin: 0,
              maxWidth: 980
            }}>
              Founder-owned. Operator-led.
            </h2>
            <p style={{
              fontSize: 17,
              lineHeight: 1.42,
              margin: '12px 0 0',
              color: c.muted,
              maxWidth: 640
            }}>
              Business-owner judgment at the front. Real technical depth behind the build.
            </p>
          </div>
        </div>
        <div className="bsa-leadership-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
          {[
            {
              name: 'Christina Olsen',
              role: 'Founder',
              img: 'site/christina-olsen.jpg',
              alt: 'Christina Olsen, founder of BrightSol AI',
              body: 'Christina built BrightSol on a simple conviction: the systems that give large companies an edge should be within reach for small and medium business owners too. Real AI solutions for real businesses, void of hype and slop.'
            },
            {
              name: 'Cathleen Kruk',
              role: 'Cofounder',
              img: 'site/cathleen-kruk.png',
              alt: 'Cathleen Kruk, cofounder of BrightSol AI',
              body: "Cathleen brings an operator's mindset and deep experience in systems, process improvement, and technology-enabled business transformation. Her background spans SaaS and software implementation, HR and recruiting operations, financial services, and manufacturing, with hands-on experience standardizing workflows, improving reporting, integrating programs, and helping teams turn complex business needs into scalable processes."
            }
          ].map((leader) =>
            <article key={leader.name} style={{
              display: 'grid', gridTemplateRows: 'auto 1fr',
              border: `1px solid ${c.line}`, background: c.bgAlt
            }}>
              <div style={{ aspectRatio: '1 / 1', overflow: 'hidden', background: c.bg }}>
                <img src={leader.img} alt={leader.alt} style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  objectPosition: leader.name === 'Christina Olsen' ? 'center top' : 'center',
                  filter: 'saturate(0.92) contrast(1.02)'
                }} />
              </div>
              <div style={{ padding: 26 }}>
                <BSALabel c={c}>{leader.role}</BSALabel>
                <h3 style={{ margin: '12px 0 14px', fontSize: 38, lineHeight: 1, letterSpacing: '-0.035em', fontWeight: 500 }}>{leader.name}</h3>
                <p style={{ margin: 0, color: c.muted, lineHeight: 1.45, fontSize: 17 }}>{leader.body}</p>
              </div>
            </article>
          )}
        </div>
        <div className="bsa-guide-grid" style={{ display: 'grid', gridTemplateColumns: '0.82fr 1.18fr', gap: 42, alignItems: 'start', marginTop: 36 }}>
          <div style={{
            borderTop: `1px solid ${c.lineStrong}`, paddingTop: 22
          }}>
            <h3 style={{ margin: 0, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.035em', fontWeight: 500 }}>
              We have assembled a bench of specialists in AI, robotics, automation, software delivery, and process design.
            </h3>
          </div>
          <div className="bsa-card-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {[
              ['AI', ['Go-to-market design', 'Research', 'Background checks', 'Marketing', 'Creator + podcast automation']],
              ['Robotics', ['Automation logic', 'Systems thinking', 'Process flow']],
              ['Software', ['Delivery depth', 'Integrations', 'QA', 'Enterprise vendor evaluation', 'Package selection']],
              ['Ops', ['Process design', 'Project delivery', 'Change support', 'Ongoing maintenance', 'Monthly retainers']]
            ].map(([title, bullets]) =>
              <div key={title} style={{ border: `1px solid ${c.line}`, padding: 16, background: c.bgAlt, minHeight: 190 }}>
                <div style={{ fontSize: 28, lineHeight: 1, fontWeight: 500, letterSpacing: '-0.03em' }}>{title}</div>
                <div style={{ display: 'grid', gap: 8, marginTop: 18 }}>
                  {bullets.map((bullet) =>
                    <div key={bullet} className="mono" style={{
                      color: c.muted,
                      fontSize: 8,
                      lineHeight: 1.28,
                      letterSpacing: '0.075em',
                      textTransform: 'uppercase'
                    }}>{bullet}</div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function BSAInsights({ c }) {
  return (
    <section className="bsa-section" style={{ padding: '72px 56px', background: c.bgAlt, borderBottom: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="bsa-insights" style={{ display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 40, alignItems: 'center' }}>
          <BSALabel c={c}>08 — INSIGHTS</BSALabel>
          <div>
            <h2 style={{ margin: 0, fontSize: 'clamp(30px, 4vw, 54px)', lineHeight: 1, letterSpacing: '-0.025em', fontWeight: 500 }}>
              Practical guidance for owners building with agents.
            </h2>
            <p style={{ margin: '14px 0 0', color: c.muted, lineHeight: 1.55, maxWidth: 720 }}>
              Posts, Beehiiv notes, and YouTube walkthroughs are coming next. First we are shipping the core offer clearly.
            </p>
          </div>
          <div className="mono" style={{ fontSize: 10, color: c.accent, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            Fast follow
          </div>
        </div>
      </div>
    </section>
  );
}

const SCHEDULE_URL = 'https://cal.com/christina-olsen-uwbd4k/15min?layout=mobile';
const CONTACT_EMAIL = 'hello@bright-sol.ai';

function BSAFinalCTA({ c }) {
  return (
    <section id="start" className="bsa-section" style={{ padding: '0 56px 72px', background: c.bg }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="bsa-final-cta" style={{
          background: c.panel, color: c.panelInk, padding: '88px 64px',
          display: 'grid', gridTemplateColumns: '1.25fr 0.75fr', gap: 56,
          position: 'relative', overflow: 'hidden'
        }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.34 }}>
            <FlowField color={c.accent2} density={48} />
          </div>
          <div style={{ position: 'relative' }}>
            <BSALabel c={c} style={{ color: c.panelMuted, marginBottom: 24 }}>09 — BEGIN</BSALabel>
            <h2 style={{ margin: 0, fontSize: 'clamp(44px, 6vw, 86px)', lineHeight: 0.95, letterSpacing: '-0.035em', fontWeight: 500 }}>
              Bring us the work that keeps coming back to your desk.
            </h2>
            <p style={{ margin: '24px 0 0', fontSize: 18, lineHeight: 1.58, color: c.panelInk, opacity: 0.78, maxWidth: 620 }}>
              We will listen, ask where the process breaks, and tell you what we would build first. If BrightSol is not the right fit, we will say that plainly.
            </p>
            <p className="mono" style={{ margin: '26px 0 0', fontSize: 10, color: c.panelMuted, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              No pitch deck required. No tool decision required. Start with the work that is stuck.
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'flex-end' }}>
            <div style={{
              border: `1px solid ${c.panelInk}26`,
              background: `${c.panelInk}08`,
              padding: 22,
              marginBottom: 12
            }}>
              <div className="mono" style={{ color: c.panelMuted, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                Let's work together
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 18, alignItems: 'end', marginTop: 24 }}>
                <div>
                  <div style={{ fontSize: 32, lineHeight: 1, letterSpacing: '-0.035em', fontWeight: 500 }}>
                    15 min
                  </div>
                  <p style={{ margin: '8px 0 0', color: c.panelMuted, lineHeight: 1.35, fontSize: 14 }}>
                    Bring one process that keeps coming back to you.
                  </p>
                </div>
                <div style={{ width: 76, border: `1px solid ${c.panelInk}28`, background: c.panelInk, color: c.panel, padding: 9 }}>
                  <div className="mono" style={{ fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.62 }}>Call</div>
                  <div style={{ marginTop: 12, fontSize: 30, lineHeight: 0.9, letterSpacing: '-0.04em', fontWeight: 500 }}>01</div>
                </div>
              </div>
              <div style={{ marginTop: 20, display: 'grid', gap: 8 }}>
                {['Where work gets stuck', 'What we would build first', 'Whether BrightSol is a fit'].map((item) =>
                  <div key={item} style={{ display: 'grid', gridTemplateColumns: '10px 1fr', gap: 9, alignItems: 'center' }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: c.accent2 }} />
                    <span style={{ color: c.panelInk, opacity: 0.78, fontSize: 14 }}>{item}</span>
                  </div>
                )}
              </div>
            </div>
            <a href={SCHEDULE_URL} target="_blank" rel="noopener noreferrer" style={{
              padding: '20px 24px', background: c.panelInk, color: c.panel,
              fontSize: 16, fontWeight: 500, textDecoration: 'none',
              display: 'flex', justifyContent: 'space-between'
            }}>Start the conversation <span>→</span></a>
            <a href={`mailto:${CONTACT_EMAIL}`} style={{
              padding: '20px 24px', border: `1px solid ${c.panelInk}35`, color: c.panelInk,
              fontSize: 16, textDecoration: 'none',
              display: 'flex', justifyContent: 'space-between'
            }}>Email BrightSol <span>↗</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function BSAFooter({ c }) {
  return (
    <footer className="d2r-footer" style={{ padding: '56px', background: c.bg }}>
      <div className="d2r-footer-grid" style={{
        maxWidth: 1320, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40,
        paddingTop: 40, borderTop: `1px solid ${c.line}`
      }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 8 }}>
            BRIGHTSOL<span style={{ color: c.accent, fontWeight: 400 }}>/</span>AI
          </div>
          <p style={{ fontSize: 13, color: c.muted, lineHeight: 1.5, margin: 0, maxWidth: 340 }}>
            Agentic automation, practical business agents, and connected websites for growing service businesses.
          </p>
        </div>
        {[
          { h: 'Builds', l: [
            { label: 'Agents', href: '#services' },
            { label: 'Automation', href: '#services' },
            { label: 'Connected websites', href: '#services' },
          ]},
          { h: 'Proof', l: [
            { label: 'Pricing', href: '#pricing' },
            { label: 'Tooling judgment', href: '#proof' },
            { label: 'Start', href: SCHEDULE_URL, external: true },
          ]},
          { h: 'Contact', l: [
            { label: 'Schedule a 15-minute call', href: SCHEDULE_URL, external: true },
            { label: CONTACT_EMAIL, href: `mailto:${CONTACT_EMAIL}`, style: { wordBreak: 'break-all' } },
          ]},
        ].map((col) =>
          <div key={col.h}>
            <div className="mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>
              {col.h}
            </div>
            <div style={{ display: 'grid', gap: 6, fontSize: 13 }}>
              {col.l.map((item) =>
                <a key={item.label} href={item.href}
                  target={item.external ? '_blank' : undefined}
                  rel={item.external ? 'noopener noreferrer' : undefined}
                  style={{ cursor: 'pointer', ...(item.style || {}) }}>
                  {item.label}
                </a>
              )}
            </div>
          </div>
        )}
      </div>
      <div className="mono d2r-footer-meta" style={{
        maxWidth: 1320, margin: '40px auto 0',
        display: 'flex', justifyContent: 'space-between',
        fontSize: 10, color: c.muted, letterSpacing: '0.15em', textTransform: 'uppercase'
      }}>
        <span>© 2026 BrightSol AI · Agentic automation practice</span>
        <span>Based near Naperville · Serving Chicagoland and remote clients</span>
      </div>
    </footer>
  );
}

/* ──────────────────────────────────────────────────── HERO VARIANTS ── */
function D2RHeroSplit({ c }) {
  return (
    <section className="d2r-hero" style={{ position: 'relative' }}>
      <div className="d2r-hero-text" style={{ maxWidth: 1320, margin: '0 auto', padding: '32px 56px 0' }}>
        <div className="d2r-hero-eyebrow" style={{
          display: 'grid', gridTemplateColumns: '120px 1fr',
          borderTop: `1px solid ${c.line}`, paddingTop: 20
        }}>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
            01 — INTRO
          </div>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
            A CONSULTING PRACTICE FOR THE AGENT ERA
          </div>
        </div>

        <h1 style={{
          fontSize: 'clamp(48px, 6vw, 96px)',
          lineHeight: 0.95, fontWeight: 500, letterSpacing: '-0.04em',
          margin: '28px 0 0', textWrap: 'balance'
        }}>
          Catch up.<br />
          Then <span style={{ fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontStyle: 'italic', color: c.accent }}>get ahead.</span>
        </h1>

        <div style={{
          marginTop: 32, paddingBottom: 32,
          display: 'flex', gap: 16, alignItems: 'flex-start',
        }}>
          <span style={{
            display: 'inline-block', width: 32, height: 1,
            background: c.accent, marginTop: 12, flexShrink: 0,
          }} />
          <p style={{
            fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.35, margin: 0,
            color: c.ink, opacity: 0.78, maxWidth: 620, fontWeight: 400,
          }}>
            We help owner operators use AI to reduce manual work, improve processes, and scale without adding headcount.
          </p>
        </div>
      </div>

      <div className="d2r-hero-panel" style={{ background: c.panel, color: c.panelInk }}>
        <div className="d2r-hero-panel-inner" style={{ maxWidth: 1320, margin: '0 auto', padding: '24px 56px 36px' }}>
          <div className="d2r-hero-viz" style={{ position: 'relative', width: '100%', aspectRatio: '1320 / 560', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0 }}>
              <HeroHybrid width={1320} height={560} />
            </div>
          </div>
          <div className="d2r-hero-beliefs" style={{
            display: 'grid', gridTemplateColumns: '120px 1fr 1fr 1fr', gap: 32,
            paddingTop: 28, marginTop: 28, borderTop: `1px solid ${c.panelInk}20`
          }}>
            <div className="mono" style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.15em' }}>
              03 · WHAT WE BELIEVE
            </div>
            {[
            ['Agents take work off your desk.', 'We build agents that handle the first pass so you can focus on decisions.'],
            ['The tools should fit the business.', 'We help pick and connect the right systems instead of chasing every new app.'],
            ['Owners get time back.', 'The goal is a business that runs with less daily follow-up from you.']].
            map(([t, b]) =>
            <div key={t}>
                <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.25 }}>
                  {t}
                </div>
                <p style={{ marginTop: 8, opacity: 0.7, fontSize: 13, lineHeight: 1.55 }}>{b}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// ⚠️  INACTIVE COMPONENT — D2RHeroEditorial
// ------------------------------------------------------------
// NOT in the live render chain. The active hero is D2RHeroSplit
// (selected via heroVariant="split" in Brightsol-ai Home.html).
// Kept in source as an alternate hero variant for future use.
// To resurrect: change heroVariant="editorial" in HTML mount.
// Last reviewed dead: 2026-05-24.
// ============================================================
function D2RHeroEditorial({ c }) {
  return (
    <section style={{ padding: '80px 56px 64px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="mono" style={{
          fontSize: 11, color: c.muted, letterSpacing: '0.18em',
          paddingBottom: 24, borderBottom: `1px solid ${c.line}`,
          display: 'flex', justifyContent: 'space-between'
        }}>
          <span>VOL. 01 — ISSUE 04</span>
          <span>BRIGHTSOL-AI · APR 2026</span>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 64,
          padding: '56px 0', borderBottom: `1px solid ${c.line}`
        }}>
          <div>
            <h1 style={{
              fontFamily: '"Instrument Serif", serif',
              fontSize: 'clamp(64px, 8.5vw, 144px)', lineHeight: 0.95,
              fontWeight: 400, letterSpacing: '-0.025em',
              margin: 0, textWrap: 'balance'
            }}>
              The owner's<br />
              guide to <em style={{ color: c.accent }}>catching up.</em>
            </h1>
          </div>
          <div style={{ alignSelf: 'end' }}>
            <p style={{ fontSize: 17, lineHeight: 1.5, margin: 0, color: c.ink, maxWidth: 380 }}>
              Brightsol-ai is a consulting practice for owner-operators and high-performing
              executives who want to move from AI curiosity to capability that compounds.
            </p>
            <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.6, color: c.muted, maxWidth: 380 }}>
              Education, coaching, and the implementation of agentic systems,
              delivered in three-week sprints.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// ⚠️  INACTIVE COMPONENT — D2RHeroOversized
// ------------------------------------------------------------
// NOT in the live render chain. Alternate hero variant.
// To resurrect: change heroVariant="oversized" in HTML mount.
// Last reviewed dead: 2026-05-24.
// ============================================================
function D2RHeroOversized({ c }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: c.panel, color: c.panelInk }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.6
      }}>
        <FlowField color={c.accent2} density={70} />
      </div>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 70% 30%, transparent 0%, ${c.panel}cc 60%, ${c.panel} 100%)`
      }} />
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '120px 56px 100px', position: 'relative' }}>
        <div className="mono" style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.18em', marginBottom: 48 }}>
          BRIGHTSOL-AI · A CONSULTING PRACTICE FOR THE AGENT ERA
        </div>
        <h1 style={{
          fontSize: 'clamp(72px, 11vw, 200px)',
          lineHeight: 0.88, fontWeight: 500, letterSpacing: '-0.05em',
          margin: 0, textWrap: 'balance'
        }}>
          Catch up.<br />
          <span style={{
            fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontStyle: 'italic',
            color: c.accent2
          }}>Then get ahead.</span>
        </h1>
        <p style={{
          marginTop: 56, fontSize: 21, lineHeight: 1.5,
          maxWidth: 620, opacity: 0.85
        }}>
          A consulting practice for owner-operators and high-performing executives
          who want to move from AI curiosity to capability that compounds.
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 12 }}>
          <button style={{
            padding: '16px 24px', background: c.panelInk, color: c.panel,
            fontSize: 15, fontWeight: 500
          }}>Book intro call →</button>
          <button style={{
            padding: '16px 24px', background: 'transparent', color: c.panelInk,
            border: `1px solid ${c.panelInk}40`, fontSize: 15
          }}>See how we work</button>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── BIND ── */
function D2RBindRow({ c, num, sub, accent, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      className="d2r-bind-row"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        borderBottom: `1px solid ${c.line}`,
        background: hover ? c.accentSoft : 'transparent',
        transition: 'background 0.15s',
      }}>
      <div className="d2r-bind-row-inner" style={{
        maxWidth: 1320, margin: '0 auto', padding: '44px 56px',
        display: 'grid', gridTemplateColumns: '120px 1fr 200px',
        gap: 40, alignItems: 'baseline',
      }}>
        <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>{num}</div>
        <div style={{
          fontSize: 'clamp(24px, 2.8vw, 36px)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.2,
          color: accent ? c.accent : c.ink,
        }}>
          {children}
        </div>
        <div className="mono" style={{
          fontSize: 10, color: c.muted, letterSpacing: '0.1em',
          textAlign: 'right', lineHeight: 1.6, textTransform: 'uppercase',
        }}>
          {sub}
        </div>
      </div>
    </div>);

}

function D2RBind({ c }) {
  return (
    <section className="d2r-bind" style={{ background: c.bg, borderTop: `1px solid ${c.line}` }}>
      <div className="d2r-bind-header" style={{ maxWidth: 1320, margin: '0 auto', padding: '80px 56px 0' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '120px 1fr',
          borderBottom: `1px solid ${c.line}`, paddingBottom: 20,
        }}>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>02 — THE BIND</div>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>SOUND FAMILIAR?</div>
        </div>
      </div>

      <div style={{ borderTop: `1px solid ${c.line}` }}>
        <D2RBindRow c={c} num="01" sub="Never caught up">
          Every time you clear the deck,{' '}
          <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>the deck refills.</span>
        </D2RBindRow>
        <D2RBindRow c={c} num="02" sub="Can't delegate">
          You hired someone great.{' '}
          <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>And you're still doing their job.</span>
        </D2RBindRow>
        <D2RBindRow c={c} num="03" sub="Always tomorrow">
          You've been meaning to figure out AI.{' '}
          <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>For six months.</span>
        </D2RBindRow>
        <D2RBindRow c={c} num="04" sub="Capacity ceiling">
          The ideas don't survive the week.{' '}
          <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>Neither do you.</span>
        </D2RBindRow>
        <D2RBindRow c={c} num="05" sub="The real cost" accent={true}>
          You built this. Now it manages{' '}
          <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>YOU.</span>
        </D2RBindRow>
      </div>

      <div className="d2r-bind-pivot" style={{ background: c.bgAlt, borderTop: `1px solid ${c.line}` }}>
        <div className="d2r-bind-pivot-inner" style={{
          maxWidth: 1320, margin: '0 auto', padding: '44px 56px',
          display: 'grid', gridTemplateColumns: '120px 1fr', gap: 40, alignItems: 'center',
        }}>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>↓</div>
          <p style={{
            fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.4, margin: 0, color: c.ink, opacity: 0.78,
          }}>
            There's a different way to run the week. It doesn't require more hours, a bigger team, or another subscription.
          </p>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── TRUST STRIP ── */
function D2RTrustStrip({ c }) {
  const stats = [
  ['3wk', 'Sprint default engagement'],
  ['Owner', 'Operator and exec focused'],
  ['Neutral', 'But informed on tooling']];

  return (
    <section style={{ borderTop: `1px solid ${c.line}`, borderBottom: `1px solid ${c.line}`, background: c.bgAlt }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '40px 56px',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32
      }}>
        {stats.map(([n, l], i) =>
        <div key={l} style={{
          paddingLeft: 20,
          borderLeft: `1px solid ${c.line}`,
          display: 'flex', flexDirection: 'column', gap: 4
        }}>
            <div style={{ fontSize: 36, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, fontFamily: '"Instrument Serif", serif' }}>
              {n}
            </div>
            <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              {l}
            </div>
          </div>
        )}
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── CAPABILITIES (subtle list) ── */
function D2RCapabilities({ c, pad }) {
  const services = [
  { num: '01', title: 'Business Process Strategy', tag: 'Strategy' },
  { num: '02', title: 'AI Strategy', tag: 'Strategy' },
  { num: '03', title: 'Agent Build & Onboarding', tag: 'Build' },
  { num: '04', title: 'Modernization', tag: 'Build' },
  { num: '05', title: 'System Assessment', tag: 'Strategy' },
  { num: '06', title: 'Go-to-Market Agents', tag: 'Build' },
  { num: '07', title: 'PM & Chief of Staff Agents', tag: 'Build' },
  { num: '08', title: 'Technology Selection', tag: 'Strategy' },
  { num: '09', title: 'Fractional CIO / CAIO / COO', tag: 'Embed' }];

  return (
    <section style={{ padding: `${Math.round(pad * 0.7)}px 56px`, borderTop: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 40,
          alignItems: 'baseline', marginBottom: 32
        }}>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
            04 · PRACTICE
          </div>
          <h2 style={{
            fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 1.15, fontWeight: 500,
            letterSpacing: '-0.02em', margin: 0
          }}>
            Nine capabilities, sequenced across{' '}
            <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: c.accent }}>
              strategy, build, and embed.
            </span>
          </h2>
          <a className="mono" style={{
            fontSize: 11, color: c.accent, letterSpacing: '0.15em',
            borderBottom: `1px solid ${c.accent}`, paddingBottom: 4, whiteSpace: 'nowrap'
          }}>
            SEE FULL PRACTICE ↗
          </a>
        </div>
        <div style={{ borderTop: `1px solid ${c.line}` }}>
          {services.map((s) =>
          <D2RCapRow key={s.num} s={s} c={c} />
          )}
        </div>
      </div>
    </section>);

}

function D2RCapRow({ s, c }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid', gridTemplateColumns: '60px 1fr 120px 24px',
        gap: 24, alignItems: 'center',
        padding: '20px 12px',
        borderBottom: `1px solid ${c.line}`,
        background: hover ? c.accent2 + '25' : 'transparent',
        transition: 'background .2s, padding .2s',
        cursor: 'pointer',
        paddingLeft: hover ? 20 : 12
      }}>
      
      <span className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
        {s.num}
      </span>
      <h3 style={{
        fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em',
        margin: 0, lineHeight: 1.2,
        color: hover ? c.accent : c.ink,
        transition: 'color .2s'
      }}>
        {s.title}
      </h3>
      <span className="mono" style={{
        fontSize: 10, color: c.muted, letterSpacing: '0.15em',
        textTransform: 'uppercase'
      }}>
        {s.tag}
      </span>
      <span style={{
        opacity: hover ? 1 : 0.3, transition: 'opacity .2s, transform .2s',
        transform: hover ? 'translateX(2px)' : 'translateX(0)',
        color: c.accent
      }}>
        ↗
      </span>
    </a>);

}

/* ──────────────────────────────────────────────────── PRINCIPLES (separate band) ── */
// ============================================================
// ⚠️  INACTIVE COMPONENT — D2RPrinciples
// ------------------------------------------------------------
// NOT in the live render chain. Standalone principles band was
// folded into the hero dark-panel "WHAT WE BELIEVE" strip in
// D2RHeroSplit. Kept here in case the standalone band is wanted
// back as a separate section later.
// To resurrect: insert <D2RPrinciples c={c} /> into the main D2R component.
// Last reviewed dead: 2026-05-24.
// ============================================================
function D2RPrinciples({ c }) {
  const items = [
  { n: '— I', t: 'Agents take work off your desk.', b: 'We build agents that handle the first pass so you can focus on decisions.' },
  { n: '— II', t: 'The tools should fit the business.', b: 'We help pick and connect the right systems instead of chasing every new app.' },
  { n: '— III', t: 'Owners get time back.', b: 'The goal is a business that runs with less daily follow-up from you.' },
  { n: '— IV', t: 'Three-week sprints.', b: 'Tight, scoped cycles with a deliverable you can hold. No multi-year retainers. No shelf-ware.' }];

  return (
    <section style={{ background: c.bgAlt, borderTop: `1px solid ${c.line}`, borderBottom: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '88px 56px' }}>
        <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em', marginBottom: 32 }}>
          05 — PRINCIPLES
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }}>
          {items.map((it) =>
          <div key={it.n} style={{ paddingTop: 20, borderTop: `1px solid ${c.lineStrong}` }}>
              <div className="mono" style={{
              fontSize: 11, color: c.accent, letterSpacing: '0.15em', marginBottom: 16
            }}>
                {it.n}
              </div>
              <h3 style={{
              fontFamily: '"Instrument Serif", serif',
              fontSize: 26, fontWeight: 400, letterSpacing: '-0.015em',
              margin: 0, lineHeight: 1.15
            }}>
                {it.t}
              </h3>
              <p style={{ marginTop: 16, fontSize: 14, color: c.muted, lineHeight: 1.55 }}>
                {it.b}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── METHODOLOGY ── */
function D2RMethodology({ c, pad }) {
  const steps = [
  { phase: 'Week 1', name: 'Discover', body: 'Listening tour with you and your team. We map the work, not just the wishlist.' },
  { phase: 'Week 2', name: 'Frame', body: 'A written plan with sequenced bets. Owner, cost, expected lift, and what we are not doing.' },
  { phase: 'Weeks 3–4', name: 'Build', body: 'We ship the first agents and integrations. Real workloads, real measurements.' },
  { phase: 'Week 5', name: 'Operate', body: 'We stay until the system runs without you. Then we step back. The agents keep working.' }];

  return (
    <section id="method" className="d2r-method" style={{ background: c.bg, borderTop: `1px solid ${c.line}`, position: 'relative', overflow: 'hidden' }}>

      {/* Background image */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0,
        opacity: 0
      }} />

      <div className="d2r-method-inner" style={{ maxWidth: 1320, margin: '0 auto', padding: `${pad}px 56px`, position: 'relative', zIndex: 1 }}>

        {/* Header row */}
        <div className="d2r-method-header" style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 40, marginBottom: 64 }}>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
            03 — METHOD
          </div>
          <h2 style={{
            fontSize: 'clamp(44px, 5.5vw, 84px)', lineHeight: 0.95, fontWeight: 500,
            letterSpacing: '-0.035em', margin: 0, color: c.ink
          }}>
            How we <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: c.accent }}>work.</span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, margin: 0, color: c.muted, maxWidth: 420, alignSelf: 'end' }}>
            Five weeks. Four phases. One deliverable you can hold at the end of each.
          </p>
        </div>

        {/* 4-column phase grid */}
        <div className="d2r-method-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `1px solid ${c.line}` }}>
          {steps.map((s, i) =>
          <div key={s.name} style={{
            padding: '36px 28px 32px',
            borderRight: i < 3 ? `1px solid ${c.line}` : 'none',
            display: 'flex', flexDirection: 'column', gap: 20
          }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.12em' }}>
                  {s.phase}
                </span>
                <span className="mono" style={{ fontSize: 11, color: c.muted, opacity: 0.45 }}>0{i + 1}</span>
              </div>
              <h3 style={{
              fontSize: 36, fontWeight: 500, letterSpacing: '-0.02em',
              margin: 0, lineHeight: 1, color: c.ink
            }}>
                {s.name}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, margin: 0, color: c.muted }}>{s.body}</p>
            </div>
          )}
        </div>

      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── TOOLING MARQUEE ── */
// ============================================================
// ⚠️  INACTIVE COMPONENT — D2RToolingMarquee
// ------------------------------------------------------------
// NOT in the live render chain. Animated scrolling tooling
// list was cut from the current homepage layout.
// To resurrect: insert <D2RToolingMarquee c={c} /> into the
// main D2R component (near methodology or founder).
// Last reviewed dead: 2026-05-24.
// ============================================================
function D2RToolingMarquee({ c }) {
  // Tools grouped by category. Section headers act as visual punctuation.
  // Replace this list with the real one from Martha when ready.
  const rowA = [
  { type: 'h', label: 'AI MODELS' },
  'GPT-5', 'Claude', 'Gemini', 'Llama', 'Mistral', 'Perplexity',
  { type: 'h', label: 'AGENT FRAMEWORKS' },
  'Cowork', 'LangGraph', 'CrewAI', 'AutoGen', 'Custom builds',
  { type: 'h', label: 'AUTOMATION' },
  'Zapier', 'n8n', 'Make', 'Power Automate', 'Pipedream',
  { type: 'h', label: 'DATA & PRIVACY' },
  'Microsoft Presidio', 'Snowflake', 'Postgres', 'Pinecone', 'Weaviate'];

  const rowB = [
  { type: 'h', label: 'MEDIA & CONTENT' },
  'Castmagic', 'Descript', 'ElevenLabs', 'Runway', 'Midjourney',
  { type: 'h', label: 'CRM & GTM' },
  'HubSpot', 'Salesforce', 'Apollo', 'Clay', 'Outreach',
  { type: 'h', label: 'INFRASTRUCTURE' },
  'Vercel', 'AWS', 'Azure', 'Cloudflare', 'Supabase',
  { type: 'h', label: 'IN EVALUATION' },
  'Devin', 'Manus', 'Replit Agents', 'Anthropic Computer Use'];


  const Item = ({ item }) => {
    if (typeof item === 'object' && item.type === 'h') {
      return (
        <span className="mono" style={{
          fontSize: 10, letterSpacing: '0.22em', color: c.accent,
          padding: '4px 14px', borderLeft: `1px solid ${c.lineStrong}`,
          borderRight: `1px solid ${c.lineStrong}`,
          textTransform: 'uppercase', whiteSpace: 'nowrap'
        }}>
          {item.label}
        </span>);

    }
    return (
      <span style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 13, color: c.ink, opacity: 0.78,
        whiteSpace: 'nowrap', padding: '0 18px'
      }}>
        {item}
      </span>);

  };

  const Row = ({ items, dir = 'left', speed = 80 }) => {
    // Duplicate so the loop is seamless
    const doubled = [...items, ...items];
    return (
      <div style={{
        position: 'relative', overflow: 'hidden',
        height: 36, display: 'flex', alignItems: 'center'
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center',
          animation: `bsMarquee${dir === 'left' ? 'L' : 'R'} ${speed}s linear infinite`,
          minWidth: '200%'
        }}
        onMouseEnter={(e) => e.currentTarget.style.animationPlayState = 'paused'}
        onMouseLeave={(e) => e.currentTarget.style.animationPlayState = 'running'}>
          
          {doubled.map((it, i) =>
          <React.Fragment key={i}>
              <Item item={it} />
              {typeof it !== 'object' && i < doubled.length - 1 ?
            <span style={{ color: c.muted, opacity: 0.4 }}>·</span> :
            null}
            </React.Fragment>
          )}
        </div>
        {/* Edge fades */}
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 80,
          background: `linear-gradient(90deg, ${c.bg} 0%, ${c.bg}00 100%)`, pointerEvents: 'none'
        }} />
        <div style={{
          position: 'absolute', right: 0, top: 0, bottom: 0, width: 80,
          background: `linear-gradient(270deg, ${c.bg} 0%, ${c.bg}00 100%)`, pointerEvents: 'none'
        }} />
      </div>);

  };

  return (
    <section style={{ background: c.bg, borderTop: `1px solid ${c.line}`, borderBottom: `1px solid ${c.line}` }}>
      <style>{`
        @keyframes bsMarqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes bsMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
      `}</style>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '40px 56px 36px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 40,
          alignItems: 'baseline', marginBottom: 24
        }}>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
            06.5 · TOOLING
          </div>
          <div>
            <h3 style={{
              fontSize: 22, lineHeight: 1.25, fontWeight: 500, letterSpacing: '-0.015em',
              margin: 0, maxWidth: 560
            }}>
              Currently working with.{' '}
              <span style={{
                fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
                fontWeight: 400, color: c.muted
              }}>
                Neutral on vendors, opinionated on fit.
              </span>
            </h3>
          </div>
          <div className="mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '0.15em' }}>
            UPDATED 04.26 · HOVER TO PAUSE
          </div>
        </div>
      </div>
      <div style={{ paddingBottom: 12 }}>
        <Row items={rowA} dir="left" speed={90} />
        <Row items={rowB} dir="right" speed={110} />
      </div>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '20px 56px 32px' }}>
        <div className="mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '0.15em' }}>
          ◦ THIS LIST DRIFTS WITH THE MARKET. WE PUBLISH WHAT WE WOULD AND WOULD NOT USE, IN THE NEWSLETTER.
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── LEGACY FOUNDER ── */
function D2RFounder({ c }) {
  return null;
}

/* ──────────────────────────────────────────────────── INSIGHTS ── */
function D2RInsights({ c, pad }) {
  const articles = [
  { tag: 'Essay', title: 'The fractional executive, reimagined for the agent era.', read: '6 min', date: '04.26' },
  { tag: 'Field note', title: 'Why most owner-operator AI projects stall at 40 percent.', read: '9 min', date: '03.26' },
  { tag: 'Playbook', title: 'A three-week sprint for installing your first business agent.', read: '12 min', date: '02.26' },
  { tag: 'Interview', title: 'On staying calm in a hyped market, a conversation.', read: '14 min', date: '01.26' }];

  return (
    <section style={{ padding: `${pad}px 56px`, borderTop: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 80 }}>
          <div style={{ display: 'flex', gap: 40, alignItems: 'baseline' }}>
            <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
              08 — INSIGHTS
            </div>
            <h2 style={{
              fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 500,
              letterSpacing: '-0.03em', margin: 0, lineHeight: 1
            }}>
              Writing from <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: c.accent }}>the practice.</span>
            </h2>
          </div>
          <a className="mono" style={{
            fontSize: 12, letterSpacing: '0.15em', color: c.accent,
            borderBottom: `1px solid ${c.accent}`, paddingBottom: 4
          }}>
            ALL WRITING (24) →
          </a>
        </div>
        <div style={{ borderTop: `1px solid ${c.line}` }}>
          {articles.map((a, i) =>
          <D2RInsightRow key={i} a={a} c={c} />
          )}
        </div>
      </div>
    </section>);

}

function D2RInsightRow({ a, c }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      display: 'grid', gridTemplateColumns: '80px 1fr 2fr 100px 60px',
      gap: 24, alignItems: 'center', padding: '32px 0',
      borderBottom: `1px solid ${c.line}`,
      background: hover ? c.accent2 + '30' : 'transparent',
      transition: 'background .2s', cursor: 'pointer'
    }}>
      <span className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.12em', paddingLeft: 12 }}>
        {a.date}
      </span>
      <span className="mono" style={{ fontSize: 11, color: c.accent, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
        {a.tag}
      </span>
      <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em', margin: 0, lineHeight: 1.25 }}>
        {a.title}
      </h3>
      <span className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.12em' }}>
        {a.read}
      </span>
      <span style={{ textAlign: 'right', paddingRight: 12 }}>
        <svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 15L15 3M15 3H6M15 3V12" stroke={c.ink} strokeWidth="1" /></svg>
      </span>
    </a>);

}

/* ──────────────────────────────────────────────────── CTA ── */
const BOOKING_URL = SCHEDULE_URL;

function D2RCTA({ c }) {
  return (
    <section id="start" className="d2r-cta-section" style={{ padding: '0 56px', background: c.bg }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="d2r-cta-grid" style={{
          background: c.panel, color: c.panelInk,
          padding: '100px 64px',
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end',
          position: 'relative', overflow: 'hidden'
        }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
            <FlowField color={c.accent2} density={50} />
          </div>
          <div style={{ position: 'relative' }}>
            <div className="mono" style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.15em', marginBottom: 24 }}>
              09 — BEGIN
            </div>
            <h2 style={{
              fontSize: 'clamp(48px, 6vw, 88px)', fontWeight: 500,
              letterSpacing: '-0.035em', margin: 0, lineHeight: 1, textWrap: 'balance'
            }}>
              A 30-minute call. <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: c.accent2 }}>No pitch.</span>
            </h2>
            <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.55, opacity: 0.8, maxWidth: 540 }}>
              We'll listen to where you are, share what we'd do in your seat,
              and tell you honestly whether we're the right fit.
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{
              padding: '20px 28px', background: c.panelInk, color: c.panel,
              fontSize: 16, fontWeight: 500, textAlign: 'left',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              textDecoration: 'none', cursor: 'pointer'
            }}>
              Start the conversation <span>→</span>
            </a>
            <a href={`mailto:${CONTACT_EMAIL}`} style={{
              padding: '20px 28px', border: `1px solid ${c.panelInk}40`, color: c.panelInk,
              fontSize: 16, textAlign: 'left',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              textDecoration: 'none', cursor: 'pointer'
            }}>
              Email BrightSol <span>↗</span>
            </a>
            <div className="mono" style={{ marginTop: 16, fontSize: 11, opacity: 0.5, letterSpacing: '0.12em' }}>
              CURRENTLY ACCEPTING Q3 ENGAGEMENTS
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── FOOTER ── */
function D2RFooter({ c }) {
  return (
    <footer className="d2r-footer" style={{ padding: '56px', background: c.bg }}>
      <div className="d2r-footer-grid" style={{
        maxWidth: 1320, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 40,
        paddingTop: 40, borderTop: `1px solid ${c.line}`
      }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 8 }}>
            BRIGHTSOL<span style={{ color: c.accent, fontWeight: 400 }}>/</span>AI
          </div>
          <p style={{ fontSize: 13, color: c.muted, lineHeight: 1.5, margin: 0, maxWidth: 320 }}>
            A consulting practice for owners who want to move from AI curiosity to capability.
          </p>
        </div>
        {[
        { h: 'Practice', l: [
          { label: 'Agents', href: '#services' },
          { label: 'Automation', href: '#services' },
          { label: 'Connected websites', href: '#services' },
        ]},
{ h: 'Contact', l: [
          { label: 'Schedule a 15-minute call', href: SCHEDULE_URL, external: true },
          { label: CONTACT_EMAIL, href: `mailto:${CONTACT_EMAIL}`, style: { wordBreak: 'break-all' } },
        ]},
        ].map((col) =>
        <div key={col.h}>
            <div className="mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>
              {col.h}
            </div>
            <div style={{ display: 'grid', gap: 6, fontSize: 13 }}>
              {col.l.map((item) =>
                <a key={item.label} href={item.href}
                  target={item.external ? '_blank' : undefined}
                  rel={item.external ? 'noopener noreferrer' : undefined}
                  style={{ cursor: 'pointer', ...(item.style || {}) }}>
                  {item.label}
                </a>
              )}
            </div>
          </div>
        )}
      </div>
      <div className="mono d2r-footer-meta" style={{
        maxWidth: 1320, margin: '40px auto 0',
        display: 'flex', justifyContent: 'space-between',
        fontSize: 10, color: c.muted, letterSpacing: '0.15em', textTransform: 'uppercase'
      }}>
        <span>© 2026 Brightsol-ai · A consulting practice</span>
        <span>v.2026.04</span>
      </div>
    </footer>);

}

Object.assign(window, { D2R, D2R_PALETTES });