// 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;
  const pad = density === 'compact' ? 100 : density === 'spacious' ? 180 : 140;

  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} />
      {heroVariant === 'split' ? <D2RHeroSplit c={c} /> : heroVariant === 'editorial' ? <D2RHeroEditorial c={c} /> : <D2RHeroOversized c={c} />}
      <D2RBind c={c} />
      <D2RMethodology c={c} pad={pad} />
      {founder ? <D2RFounder c={c} /> : null}
      <D2RCTA c={c} />
      <D2RFooter 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="#method" style={{ cursor: 'pointer' }}>Method</a>
          <a href="#founder" style={{ cursor: 'pointer' }}>Founder</a>
          <a href="#start" 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 Q3 ENGAGEMENTS
          </span>
          <a href="#start" style={{
            padding: '10px 16px',
            background: c.panel, color: c.panelInk,
            fontSize: 13, fontWeight: 500,
            cursor: 'pointer', textDecoration: 'none'
          }}>
            Start a 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>);

}

/* ──────────────────────────────────────────────────── 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,
          }}>
            For owner-operators ready to scale the business
            without scaling their hours.
          </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 style={{ position: 'relative', width: '100%', aspectRatio: '1320 / 560' }}>
            <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 are colleagues, not features.', 'They take work off your team\'s desk and give it back as leverage.'],
            ['Strategy beats stack.', 'A good plan with mid-tier tools outperforms a great stack with no plan.'],
            ['Operators win.', 'The leaders who learn the craft this year will compound for a decade.']].
            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 are colleagues, not features.', b: 'They take work off your team\'s desk and give it back as leverage.' },
  { n: '— II', t: 'Strategy beats stack.', b: 'A good plan with mid-tier tools outperforms a great stack with no plan.' },
  { n: '— III', t: 'Operators win.', b: 'The leaders who learn the craft this year will compound for a decade.' },
  { 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,
        backgroundImage: 'url(site/troy-method-bg.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.22
      }} />

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

}

/* ──────────────────────────────────────────────────── FOUNDER ── */
function D2RFounder({ c }) {
  return (
    <section id="founder" className="d2r-founder" style={{ padding: '140px 56px', borderTop: `1px solid ${c.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="d2r-founder-header" style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 40, marginBottom: 56 }}>
          <div className="mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>
            04 — FOUNDER
          </div>
          <h2 style={{
            fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 0.95, fontWeight: 500,
            letterSpacing: '-0.03em', margin: 0
          }}>
            Meet <span style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: c.accent }}>Troy Siwek.</span><br />
            A senior operator for the agent era.
          </h2>
        </div>

        <div className="d2r-founder-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'start' }}>
          <figure style={{ margin: 0 }}>
            <div style={{
              aspectRatio: '3/4', position: 'relative',
              background: c.bg
            }}>
              <img
                src="site/troy-teaching.png"
                alt="Troy Siwek at whiteboard explaining the BrightSol-ai method"
                style={{ width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center bottom', display: 'block' }} />
            </div>
            <figcaption style={{
              marginTop: 12, fontSize: 12, color: c.muted, lineHeight: 1.5
            }}>
              Founder · Based in Chicago.
            </figcaption>
          </figure>

          <div>
            {/* The Observation */}
            <div style={{ marginBottom: 40 }}>
              <div className="mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '0.15em', marginBottom: 16 }}>
                THE OBSERVATION
              </div>
              {/* Rewritten 2026-05-24 — PEACE arc retrofit (the Hole). */}
              <p style={{ fontSize: 17, lineHeight: 1.7, margin: 0, color: c.ink }}>
                You're probably reading this on your phone, standing up, because
                you're busy. You keep reading about other business owners who claim
                they've automated half their week, and you haven't had time to
                figure out how. The people claiming expertise keep selling you tools,
                and you still don't have time to learn the last three you bought.
                Nobody offering to help has actually sat in your seat.
              </p>
            </div>

            {/* Why BrightSol-ai */}
            <div style={{ paddingTop: 28, borderTop: `1px solid ${c.line}` }}>
              <div className="mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '0.15em', marginBottom: 16 }}>
                WHY BRIGHTSOL-AI
              </div>
              {/* Rewritten 2026-05-24 — PEACE arc retrofit (Tool / Mission / Transformation). */}
              <p style={{ fontSize: 17, lineHeight: 1.7, margin: 0, color: c.ink }}>
                Troy has been the operator in that seat for 20+ years, the last 15
                inside AI, robotics, and process consulting. He scaled a retail SaaS
                platform to eight figures of recurring revenue and 75% year-over-year
                growth. When the largest retailers in the world need an outside read,
                they bring him in. He built BrightSol-ai to do that same operator-grade
                work for owner-operators like you. And by the end of the first sprint,
                he's learned the process from your seat, and the work that was eating
                your week starts running on its own.
              </p>
            </div>

            {/* Numbers strip */}
            <div className="d2r-founder-stats" style={{
              marginTop: 40, paddingTop: 28, borderTop: `1px solid ${c.line}`,
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24
            }}>
              {[
              ['20+', 'Enterprise & AI experience'],
              ['$100M', 'Largest program architected'],
              ['3,000+', 'Sites under management'],
              ['3×', 'ARR growth, last platform']].
              map(([n, l]) =>
              <div key={l}>
                  <div style={{
                  fontFamily: '"Instrument Serif", serif',
                  fontSize: 36, fontWeight: 400, letterSpacing: '-0.02em',
                  lineHeight: 1, color: c.accent
                }}>{n}</div>
                  <div className="mono" style={{
                  marginTop: 6, fontSize: 10, color: c.muted,
                  letterSpacing: '0.12em', textTransform: 'uppercase'
                }}>{l}</div>
                </div>
              )}
            </div>

            <div style={{ marginTop: 36, display: 'flex', gap: 16 }}>
              <a className="mono" style={{
                fontSize: 12, color: c.accent, letterSpacing: '0.12em',
                borderBottom: `1px solid ${c.accent}`, paddingBottom: 4
              }}>BOOK A CALL WITH TROY →</a>
              <a className="mono" style={{
                fontSize: 12, color: c.muted, letterSpacing: '0.12em',
                borderBottom: `1px solid ${c.lineStrong}`, paddingBottom: 4
              }}>LINKEDIN ↗</a>
              <a className="mono" style={{
                fontSize: 12, color: c.muted, letterSpacing: '0.12em',
                borderBottom: `1px solid ${c.lineStrong}`, paddingBottom: 4
              }}>MEDIA ↗</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────── 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 ── */
// Booking tool: SavvyCal Basic — locked 2026-06-02. See /Website Project/INBOUND-PROCESS.md.
const BOOKING_URL = 'https://savvycal.com/Brightsol-AI/discovery-call-with-troy';

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'
            }}>
              Book intro call <span>→</span>
            </a>
            <a href="mailto:troy.siwek@bright-sol.ai" 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'
            }}>
              troy.siwek@bright-sol.ai <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 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: ['Strategy', 'Build', 'Embed'] },
        { h: 'Insights', l: ['Essays', 'Field notes', 'Playbooks'] },
        { h: 'Contact', l: ['[email placeholder]', 'Book a call', 'LinkedIn'] }].
        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((x) => <a key={x}>{x}</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 });