// page-about.jsx — "About / Our Story"

const ABOUT_W = 1440;
const ABOUT_H = 4700;

function PageAbout() {
  return (
    <CPage active="About" width={ABOUT_W} height={ABOUT_H}>
      <AboutHero />
      <AboutMandate />
      <AboutModel />
      <AboutSectors />
      <AboutCTA />
    </CPage>
  );
}

function AboutHero() {
  return (
    <section className="c-section-pad c-hero-pad" style={{
      position: 'relative',
      padding: '80px 56px 140px',
      overflow: 'hidden',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      {/* small orb echo */}
      <div aria-hidden className="c-orb" style={{
        position: 'absolute', right: -200, top: -100, width: 700, height: 700,
        borderRadius: '50%',
        background: `radial-gradient(circle at 40% 40%, ${P1686.violet}66 0%, ${P1686.blue}44 40%, transparent 70%)`,
        filter: 'blur(70px)', opacity: 0.5, pointerEvents: 'none',
      }} />

      <div className="c-content">
      <div style={{ position: 'relative', maxWidth: 1100, paddingTop: 60 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>About · 01</MonoLabel>
        <h1 className="c-headline-mega" style={{
          margin: '24px 0 0', fontWeight: 500,
          fontSize: 132, lineHeight: 0.95, letterSpacing: -3.8,
          maxWidth: 1100, textWrap: 'balance',
        }}>
          We hold the long arc.
        </h1>
        <p className="c-body-lg" style={{
          marginTop: 36, fontSize: 19, lineHeight: 1.55, color: P1686.muted,
          maxWidth: 640,
        }}>
          1686 is a holding company for a small, deliberately chosen set of
          operating businesses. We are builders. We work alongside our
          companies, using AI to help them see and realize value over
          decades.
        </p>
      </div>

      {/* eyebrow strip */}
      <div className="c-flex-stack" style={{
        position: 'relative', marginTop: 96,
        display: 'flex', justifyContent: 'space-between',
        paddingTop: 24, borderTop: `1px solid ${P1686.line}`,
        fontSize: 13, color: P1686.muted, gap: 12,
      }}>
        <span>Indefinite hold · no external clock</span>
        <span>Operators run the businesses</span>
        <span>Concentrated portfolio · four companies</span>
      </div>
      </div>
    </section>
  );
}

function AboutMandate() {
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content c-grid-stack-md" style={{
        display: 'grid', gridTemplateColumns: '3fr 9fr', gap: 56, alignItems: 'start',
      }}>
        <div style={{ paddingTop: 8 }}>
          <MonoLabel style={{ color: P1686.violetHi }}>§ Mandate</MonoLabel>
        </div>
        <div>
          <p className="c-headline-statement" style={{
            margin: 0, fontSize: 44, fontWeight: 400,
            lineHeight: 1.18, letterSpacing: -1, color: P1686.text,
            maxWidth: 1080, textWrap: 'pretty',
          }}>
            We build with operators who think in decades. The portfolio is
            small on purpose:{' '}
            <span style={{ color: P1686.muted }}>four operating companies in
            compliance &amp; trust, professional services, developer
            infrastructure, and hospitality.</span>{' '}
            Each is stewarded for the long arc.
          </p>
          <div className="c-grid-3" style={{
            marginTop: 56,
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
            paddingTop: 32, borderTop: `1px solid ${P1686.line}`,
          }}>
            {[
              ['Build',    'Operating companies we build alongside founders. AI-leveraged from day one.'],
              ['Hold',     'Indefinite. Cash flows back into the operating company first.'],
              ['Operate',  'Shared finance, recruiting, and engineering across the portfolio.'],
            ].map(([k, v]) => (
              <div key={k}>
                <MonoLabel style={{ color: P1686.muted }}>{k}</MonoLabel>
                <p style={{ margin: '12px 0 0', fontSize: 15, lineHeight: 1.55, color: P1686.text }}>{v}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutModel() {
  const we = [
    'Build alongside founders of small, focused software and services companies. Leverage AI from day one.',
    'Hold for the long arc. Cash flows back into the operating company before any distribution.',
    'Share back-office leverage across the portfolio: finance, recruiting, security, agentic engineering.',
    'Stay close to a small number of companies. Compound quietly. Speak rarely.',
  ];
  const wedont = [
    'Take outside money. Charge management fees. Run on external timelines.',
    'Push operating companies toward forced exits or quarterly growth targets.',
    'Operate in sectors where we lack domain depth ourselves.',
    'Subsidize businesses that cannot stand on their own unit economics.',
  ];
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content">
      <header style={{ marginBottom: 64, maxWidth: 900 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>§ Operating Model</MonoLabel>
        <h2 className="c-headline-mid" style={{
          margin: '14px 0 0', fontWeight: 500,
          fontSize: 68, lineHeight: 1, letterSpacing: -1.8,
        }}>What we do, and what we don't.</h2>
      </header>

      <div className="c-grid-2" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        border: `1px solid ${P1686.line}`, borderRadius: 16, overflow: 'hidden',
        background: P1686.surface,
      }}>
        <ModelCol heading="We do" items={we} tone="text" />
        <ModelCol heading="We don't" items={wedont} tone="mute" />
      </div>
      </div>
    </section>
  );
}

function ModelCol({ heading, items, tone }) {
  return (
    <div style={{
      padding: '36px 36px 40px',
      borderRight: tone === 'text' ? `1px solid ${P1686.line}` : 'none',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        fontSize: 20, fontWeight: 500, letterSpacing: -0.3,
        color: tone === 'text' ? P1686.text : P1686.muted, marginBottom: 28,
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: 99,
          background: tone === 'text' ? P1686.moss : P1686.mute2,
        }} />
        {heading}
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
        {items.map((t, i) => (
          <li key={i} style={{
            padding: '20px 0', borderTop: i === 0 ? 'none' : `1px solid ${P1686.line}`,
            fontSize: 17, lineHeight: 1.55,
            color: tone === 'text' ? P1686.text : P1686.muted,
          }}>{t}</li>
        ))}
      </ul>
    </div>
  );
}

function AboutSectors() {
  const sectors = [
    {
      n: '01',
      name: 'Compliance & Trust',
      portfolio: 'NILAR',
      desc: 'Verification, scoring, and adjudication systems for unregulated and rapidly forming markets.',
      tint: P1686.violet,
    },
    {
      n: '02',
      name: 'Professional Services',
      portfolio: 'SignalAdvisor',
      desc: 'Software that compounds the output of expert humans: advisors, consultants, knowledge workers.',
      tint: P1686.blue,
    },
    {
      n: '03',
      name: 'Developer Infrastructure',
      portfolio: 'BOE / Bag of Engines',
      desc: 'Composable runtimes and primitives for teams shipping agentic and AI-native software.',
      tint: P1686.moss,
    },
  ];
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content">
      <header style={{ marginBottom: 64, maxWidth: 900 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>§ Where We Operate</MonoLabel>
        <h2 className="c-headline-mid" style={{
          margin: '14px 0 0', fontWeight: 500,
          fontSize: 68, lineHeight: 1, letterSpacing: -1.8,
        }}>Three sectors, four companies.</h2>
      </header>
      <div className="c-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {sectors.map((s) => (
          <div key={s.n} className="c-card" style={{
            position: 'relative', overflow: 'hidden',
            background: P1686.surface, border: `1px solid ${P1686.line}`,
            borderRadius: 16, padding: '32px 32px 36px', minHeight: 280,
          }}>
            <div aria-hidden style={{
              position: 'absolute', bottom: -140, right: -140, width: 320, height: 320,
              borderRadius: '50%',
              background: `radial-gradient(circle, ${s.tint}33 0%, transparent 65%)`,
              filter: 'blur(20px)',
            }} />
            <div style={{ position: 'relative' }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                marginBottom: 32,
              }}>
                <span style={{
                  fontSize: 48, fontWeight: 300, letterSpacing: -1.6,
                  color: P1686.violetHi, lineHeight: 1,
                }}>{s.n}</span>
                <MonoLabel>1 holding</MonoLabel>
              </div>
              <h3 style={{
                margin: 0, fontSize: 26, fontWeight: 500, letterSpacing: -0.5,
                lineHeight: 1.2,
              }}>{s.name}</h3>
              <p style={{
                margin: '12px 0 0', fontSize: 15, lineHeight: 1.6, color: P1686.muted,
              }}>{s.desc}</p>
              <div style={{
                marginTop: 28, paddingTop: 18, borderTop: `1px solid ${P1686.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <MonoLabel>Portfolio</MonoLabel>
                <span style={{ fontSize: 15, color: P1686.text }}>{s.portfolio}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
    }}>
      <div className="c-content c-grid-2" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        <a href="/#portfolio" className="c-card" style={{
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          background: P1686.surface, border: `1px solid ${P1686.line}`,
          borderRadius: 16, padding: '32px 36px 36px', minHeight: 220,
          textDecoration: 'none', color: 'inherit',
        }}>
          <MonoLabel style={{ color: P1686.violetHi }}>Continue →</MonoLabel>
          <div>
            <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: -0.6 }}>The portfolio</div>
            <div style={{ marginTop: 8, fontSize: 14, color: P1686.muted }}>Four operating companies, in order of joining.</div>
          </div>
        </a>
        <a href="/leadership" className="c-card" style={{
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          background: P1686.surface, border: `1px solid ${P1686.line}`,
          borderRadius: 16, padding: '32px 36px 36px', minHeight: 220,
          textDecoration: 'none', color: 'inherit',
        }}>
          <MonoLabel style={{ color: P1686.violetHi }}>Continue →</MonoLabel>
          <div>
            <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: -0.6 }}>The principals</div>
            <div style={{ marginTop: 8, fontSize: 14, color: P1686.muted }}>Four people. No analysts. No external timelines.</div>
          </div>
        </a>
      </div>
    </section>
  );
}

window.PageAbout = PageAbout;
window.ABOUT_DIMS = { w: ABOUT_W, h: ABOUT_H };