// page-leadership.jsx — "Leadership / Principals"
// Full-bio row per principal. Portraits are stylized initials cards;
// real photos slot in here when supplied.

const LEAD_W = 1440;
const LEAD_H = 4150;

function PageLeadership() {
  return (
    <CPage active="Leadership" width={LEAD_W} height={LEAD_H}>
      <LeadHero />
      <LeadRows />
      <LeadHowWeRun />
    </CPage>
  );
}

function LeadHero() {
  return (
    <section className="c-section-pad c-hero-pad" style={{
      position: 'relative',
      padding: '80px 56px 120px',
      overflow: 'hidden',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div aria-hidden className="c-orb" style={{
        position: 'absolute', left: -160, top: -80, width: 700, height: 700,
        borderRadius: '50%',
        background: `radial-gradient(circle at 60% 40%, ${P1686.blue}55 0%, ${P1686.violet}33 40%, transparent 70%)`,
        filter: 'blur(70px)', opacity: 0.45, pointerEvents: 'none',
      }} />
      <div className="c-content">
      <div style={{ position: 'relative', paddingTop: 60, maxWidth: 1100 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>Leadership · 01</MonoLabel>
        <h1 className="c-headline-mega" style={{
          margin: '24px 0 0', fontWeight: 500,
          fontSize: 132, lineHeight: 0.95, letterSpacing: -3.8,
          textWrap: 'balance',
        }}>
          Four people.<br />
          <span style={{ color: P1686.muted }}>No analysts.</span>
        </h1>
        <p className="c-body-lg" style={{
          marginTop: 36, fontSize: 19, lineHeight: 1.55, color: P1686.muted,
          maxWidth: 640,
        }}>
          A small group of operators and engineers. Combined: more than a
          century of building software, scaling sales, and running teams at
          AWS, FICO, Salesforce, MuleSoft, Delta, and elsewhere.
        </p>

        <div className="c-stats-4" style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: `1px solid ${P1686.line}`, borderBottom: `1px solid ${P1686.line}`,
        }}>
          {[
            ['Principals',      String(PRINCIPALS.length).padStart(2, '0')],
            ['Combined years',  '100+'],
            ['Outside investors', 'none'],
            ['Headquarters',    'remote-first'],
          ].map(([k, v], i, arr) => (
            <div key={k} style={{
              padding: '24px 28px',
              borderRight: i < arr.length - 1 ? `1px solid ${P1686.line}` : 'none',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <MonoLabel>{k}</MonoLabel>
              <span className="c-stat-val" style={{
                fontSize: 28, fontWeight: 500, letterSpacing: -0.6,
                color: P1686.text, lineHeight: 1,
              }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      </div>
    </section>
  );
}

function LeadRows() {
  return (
    <section className="c-section-pad" style={{
      padding: '40px 56px 80px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content">
      {PRINCIPALS.map((p, i) => <LeadRow key={p.initials} p={p} i={i} />)}
      </div>
    </section>
  );
}

function LeadRow({ p, i }) {
  // Alternate the portrait tint so the page has rhythm.
  const tints = [P1686.violet, P1686.blue, P1686.moss, P1686.violetHi];
  const tint = tints[i % tints.length];
  return (
    <article className="c-leadrow" style={{
      display: 'grid', gridTemplateColumns: '320px 1fr', gap: 56,
      padding: '64px 0',
      borderBottom: i < PRINCIPALS.length - 1 ? `1px solid ${P1686.line}` : 'none',
      alignItems: 'start',
    }}>
      {/* portrait placeholder */}
      <div className="c-leadrow-photo" style={{
        position: 'relative',
        width: 320, height: 380,
        background: P1686.surface,
        border: `1px solid ${P1686.line}`,
        borderRadius: 12, overflow: 'hidden',
      }}>
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(90% 90% at 30% 30%, ${tint}33 0%, ${P1686.surface} 60%, ${P1686.bg2} 100%)`,
        }} />
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          backgroundImage: `radial-gradient(${P1686.lineHi} 0.5px, transparent 0.5px)`,
          backgroundSize: '14px 14px',
          opacity: 0.4, mixBlendMode: 'overlay',
        }} />
        <span style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 120, fontWeight: 300, letterSpacing: -4,
          color: P1686.lineHi, lineHeight: 1,
        }}>{p.initials}</span>
        <span style={{
          position: 'absolute', top: 18, left: 20,
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 10, color: P1686.muted, letterSpacing: 0.12,
          textTransform: 'uppercase',
        }}>P—{String(i + 1).padStart(2, '0')} · portrait</span>
        <span style={{
          position: 'absolute', bottom: 18, left: 20, right: 20,
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 10, color: P1686.mute2, letterSpacing: 0.12,
          textTransform: 'uppercase',
        }}>Photograph forthcoming</span>
      </div>

      <div style={{ paddingTop: 8 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 8 }}>
          <MonoLabel style={{ color: P1686.violetHi }}>{String(i + 1).padStart(2, '0')}</MonoLabel>
          <MonoLabel>{p.role}</MonoLabel>
        </div>
        <h2 className="c-headline-mid" style={{
          margin: 0, fontWeight: 500,
          fontSize: 64, lineHeight: 1, letterSpacing: -1.8,
        }}>{p.name}</h2>
        <p className="c-body-lg" style={{
          marginTop: 24, fontSize: 19, lineHeight: 1.55, color: P1686.text,
          maxWidth: 720,
        }}>{p.bio}</p>

        <div style={{
          marginTop: 32, paddingTop: 24, borderTop: `1px solid ${P1686.line}`,
          display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 32,
        }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {p.tags.map((t) => (
              <span key={t} style={{
                padding: '6px 12px', borderRadius: 999,
                border: `1px solid ${P1686.lineHi}`,
                fontSize: 12, color: P1686.muted,
                fontFamily: '"JetBrains Mono", monospace',
                letterSpacing: 0.08, textTransform: 'uppercase',
              }}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </article>
  );
}

function LeadHowWeRun() {
  const items = [
    {
      n: '01',
      title: 'Small surface area.',
      body: 'No analysts, no committees, no decks. Decisions happen in conversation between principals.',
    },
    {
      n: '02',
      title: 'Engineering inside the holding co.',
      body: 'A shared agentic-engineering practice, led by Del, operates across every portfolio company on day one.',
    },
    {
      n: '03',
      title: 'Operator first.',
      body: 'Founders keep operating control. Our role is leverage and counsel, not management override.',
    },
  ];
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      position: 'relative',
      padding: '120px 56px 140px',
      overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(60% 60% at 80% 60%, ${P1686.violet}1a 0%, transparent 60%)`,
        pointerEvents: 'none',
      }} />
      <div className="c-content" style={{ position: 'relative' }}>
        <header style={{ marginBottom: 64, maxWidth: 900 }}>
          <MonoLabel style={{ color: P1686.violetHi }}>§ How We Run</MonoLabel>
          <h2 className="c-headline-mid" style={{
            margin: '14px 0 0', fontWeight: 500,
            fontSize: 68, lineHeight: 1, letterSpacing: -1.8,
          }}>The operating discipline.</h2>
        </header>
        <div className="c-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {items.map((it) => (
            <div key={it.n} style={{
              background: P1686.surface, border: `1px solid ${P1686.line}`,
              borderRadius: 16, padding: '36px 32px 40px',
            }}>
              <span style={{
                fontSize: 48, fontWeight: 300, letterSpacing: -1.6,
                color: P1686.violetHi, lineHeight: 1,
              }}>{it.n}</span>
              <h3 style={{
                margin: '28px 0 14px', fontWeight: 500,
                fontSize: 24, lineHeight: 1.2, letterSpacing: -0.4,
              }}>{it.title}</h3>
              <p style={{
                margin: 0, fontSize: 15, lineHeight: 1.6, color: P1686.muted,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PageLeadership = PageLeadership;
window.LEAD_DIMS = { w: LEAD_W, h: LEAD_H };