// SiteConservative.jsx — Tranzom: end-to-end advisory for pre-IPO & venture equity
// Service provider for HNWI, Family Offices, and Qualified Investors.

const CONS_PALETTES = {
  paper: { bg: '#f5f5f7', ink: '#0a0a12', ink2: '#3a3a48', accent: '#202088', accent2: '#4a4aaa', rule: 'rgba(10,10,18,.1)', card: '#ffffff', muted: '#6b6b78', logo: 'dark' },
  fog:   { bg: '#ebebef', ink: '#141420', ink2: '#44444f', accent: '#202088', accent2: '#3a3ab0', rule: 'rgba(0,0,0,.1)', card: '#f7f7fa', muted: '#6b6b78', logo: 'dark' },
  ink:   { bg: '#0c0c14', ink: '#f1f1f6', ink2: '#b4b4c2', accent: '#6b6bd4', accent2: '#3a3ab8', rule: 'rgba(241,241,246,.1)', card: '#14141e', muted: '#86869a', logo: 'white' },
};

const TYPE_PAIRS = {
  editorial: { display: "'Fraunces', Georgia, serif", body: "'Inter', -apple-system, sans-serif", displayWeight: 400, letterSpacing: '-0.02em' },
  instrument: { display: "'Instrument Serif', 'Times New Roman', serif", body: "'Inter', -apple-system, sans-serif", displayWeight: 400, letterSpacing: '-0.01em' },
  grotesk: { display: "'Space Grotesk', 'Inter', sans-serif", body: "'Inter', -apple-system, sans-serif", displayWeight: 400, letterSpacing: '-0.03em' },
};

// Unicorn companies we've actually transacted in
// Logos loaded from Simple Icons CDN (open-source brand SVGs).
const UNICORNS = [
  { name: 'SpaceX',     slug: 'spacex' },
  { name: 'Anthropic',  slug: 'anthropic' },
  { name: 'Cohere',     slug: 'cohere' },
  { name: 'Stripe',     slug: 'stripe' },
  { name: 'OpenAI',     slug: 'openai' },
  { name: 'Circle',     slug: 'circle' },
  { name: 'Databricks', slug: 'databricks' },
  { name: 'ByteDance',  slug: 'bytedance' },
];

// Color helper: returns the Simple Icons CDN URL with a color override.
// On dark palettes we want logos in light ink; on light palettes, dark.
function logoUrl(slug, hex) {
  const c = (hex || '111111').replace('#', '');
  return `https://cdn.simpleicons.org/${slug}/${c}`;
}

// Inline SVG registry for brands not reliably available on the Simple Icons CDN.
// Single-color marks drawn with currentColor so they inherit palette tint.
const INLINE_LOGOS = {
  // OpenAI blossom/knot mark — simplified rendering, drawn from scratch
  openai: (
    <svg viewBox="0 0 64 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="OpenAI">
      <path d="M58.36 26.2a14.3 14.3 0 0 0-1.23-11.77 14.46 14.46 0 0 0-15.6-6.93A14.3 14.3 0 0 0 30.77 2.7a14.47 14.47 0 0 0-13.8 10 14.3 14.3 0 0 0-9.55 6.93 14.46 14.46 0 0 0 1.78 16.95 14.3 14.3 0 0 0 1.23 11.77 14.47 14.47 0 0 0 15.6 6.93 14.3 14.3 0 0 0 10.76 4.8 14.47 14.47 0 0 0 13.8-10 14.3 14.3 0 0 0 9.55-6.93 14.46 14.46 0 0 0-1.78-16.95ZM36.78 56.3a10.72 10.72 0 0 1-6.88-2.48l.34-.2 11.41-6.58a1.85 1.85 0 0 0 .94-1.62v-16.07l4.82 2.79a.17.17 0 0 1 .1.13v13.31a10.74 10.74 0 0 1-10.73 10.72ZM13.7 46.46a10.7 10.7 0 0 1-1.28-7.2l.34.21 11.41 6.58a1.86 1.86 0 0 0 1.88 0l13.94-8.04v5.57a.17.17 0 0 1-.07.14L28.37 50.4a10.74 10.74 0 0 1-14.67-3.94ZM10.7 21.5a10.72 10.72 0 0 1 5.59-4.71v13.56a1.84 1.84 0 0 0 .93 1.61l13.88 8-4.82 2.8a.17.17 0 0 1-.16 0L14.58 36.1a10.74 10.74 0 0 1-3.93-14.6h.05Zm39.62 9.23-13.94-8.08 4.81-2.78a.17.17 0 0 1 .16 0l11.54 6.66a10.73 10.73 0 0 1-1.62 19.35V32.35a1.82 1.82 0 0 0-.95-1.61Zm4.8-7.22-.34-.21L43.4 16.66a1.86 1.86 0 0 0-1.88 0l-13.94 8.05v-5.57a.16.16 0 0 1 .07-.14l11.56-6.66a10.73 10.73 0 0 1 15.93 11.17ZM24.97 33.4l-4.83-2.79a.17.17 0 0 1-.09-.13V17.18A10.73 10.73 0 0 1 37.64 8.94l-.34.2L25.89 15.7a1.85 1.85 0 0 0-.94 1.62l-.01 16.07Zm2.62-5.64L33.8 24.18l6.21 3.58v7.17l-6.2 3.58-6.22-3.58Z"/>
    </svg>
  ),
  // Cohere triple-bar wordmark proxy (abstract "C" marks)
  cohere: (
    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Cohere">
      <path d="M32 6a26 26 0 1 0 0 52 26 26 0 0 0 0-52Zm0 5.2A20.8 20.8 0 0 1 52.8 32c0 3.9-1.07 7.55-2.93 10.67H35.2V38h12.02A15.55 15.55 0 0 0 48.8 32c0-8.73-7.07-15.8-16.8-15.8-5.08 0-9.64 1.92-12.96 5.05l3.65 3.65A11.58 11.58 0 0 1 32 21.3c6.05 0 10.96 4.77 10.96 10.7 0 .74-.07 1.46-.2 2.15H23.8v4.85h7.47V52.6A20.8 20.8 0 0 1 11.2 32 20.8 20.8 0 0 1 32 11.2Z" fill="currentColor"/>
    </svg>
  ),
};

// Unified logo mark: inline SVG if registered, else CDN <img>, else name fallback.
function LogoMark({ slug, name, size = 30, color = '202088', style }) {
  const inline = INLINE_LOGOS[slug];
  if (inline) {
    return (
      <span style={{ display: 'inline-flex', color: `#${color.replace('#','')}`, height: size, width: size, ...style }}>
        {React.cloneElement(inline, { width: size, height: size, style: { display: 'block' } })}
      </span>
    );
  }
  return (
    <img
      src={`https://cdn.simpleicons.org/${slug}/${color.replace('#','')}`}
      alt={name}
      style={{ height: size, width: 'auto', display: 'block', ...style }}
      onError={(e) => { e.currentTarget.outerHTML = `<span style="font-family:'Fraunces',serif;font-size:${Math.round(size*0.9)}px;color:#${color.replace('#','')};letter-spacing:-0.02em">${name}</span>`; }}
    />
  );
}

// Deal history — actual issuers transacted; no prices or valuations
const DEAL_HISTORY = [
  { yr: '2025 Q4', co: 'Anthropic',  slug: 'anthropic',  st: 'Primary · co-invest',          rg: 'US · AI foundation models', role: 'Full service' },
  { yr: '2025 Q3', co: 'Stripe',     slug: 'stripe',     st: 'Secondary · employee tender',  rg: 'US · Payments infrastructure', role: 'Sourcing + SPV' },
  { yr: '2025 Q2', co: 'SpaceX',     slug: 'spacex',     st: 'Direct secondary · block',     rg: 'US · Space & defense', role: 'Full service' },
  { yr: '2025 Q2', co: 'Cohere',     slug: 'cohere',     st: 'Primary · follow-on',          rg: 'CA · Enterprise AI', role: 'DD + negotiation' },
  { yr: '2025 Q1', co: 'OpenAI',     slug: 'openai',     st: 'Secondary · structured',       rg: 'US · AI foundation models', role: 'Full service' },
  { yr: '2024 Q4', co: 'ByteDance',  slug: 'bytedance',  st: 'Secondary · block',            rg: 'Asia · Consumer internet', role: 'Sourcing' },
  { yr: '2024 Q3', co: 'Databricks', slug: 'databricks', st: 'Primary · co-invest',          rg: 'US · Data & analytics', role: 'Full service' },
  { yr: '2024 Q2', co: 'Circle',     slug: 'circle',     st: 'Secondary · pre-IPO',          rg: 'US · Digital assets', role: 'DD + SPV' },
];

function ConsNav({ P, T, mobile }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 20, background: P.bg, borderBottom: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: mobile ? '14px 20px' : '18px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <img src={P.logo === 'white' ? 'logo-white-v2.png' : 'logo-dark-v2.png'} alt="Tranzom" style={{ height: 26, width: 'auto', display: 'block' }}/>
        </div>
        {!mobile && (
          <nav style={{ display: 'flex', gap: 36, fontFamily: T.body, fontSize: 13, color: P.ink2, fontWeight: 400 }}>
            {['Services', 'Coverage', 'Track Record', 'About'].map(x => <span key={x} style={{ cursor: 'pointer' }}>{x}</span>)}
          </nav>
        )}
        {!mobile ? (
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <span style={{ fontFamily: T.body, fontSize: 13, color: P.ink2, cursor: 'pointer' }}>Client portal</span>
            <button style={{ background: P.ink, color: P.bg, border: 'none', padding: '10px 18px', fontFamily: T.body, fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Speak with us →</button>
          </div>
        ) : (
          <button onClick={() => setOpen(!open)} style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer' }}>
            <svg width="22" height="22" viewBox="0 0 22 22"><line x1="3" y1="7" x2="19" y2="7" stroke={P.ink} strokeWidth="1.2"/><line x1="3" y1="15" x2="19" y2="15" stroke={P.ink} strokeWidth="1.2"/></svg>
          </button>
        )}
      </div>
      {mobile && open && (
        <div style={{ borderTop: `1px solid ${P.rule}`, padding: '20px 20px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {['Services', 'Coverage', 'Track Record', 'About', 'Client portal'].map(x => <span key={x} style={{ fontFamily: T.body, fontSize: 15, color: P.ink }}>{x}</span>)}
          <button style={{ marginTop: 4, background: P.ink, color: P.bg, border: 'none', padding: '12px 18px', fontFamily: T.body, fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Speak with us →</button>
        </div>
      )}
    </div>
  );
}

function ConsHeroGradient({ P }) {
  return (
    <svg width="100%" height="100%" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
      <defs>
        <radialGradient id="cg1" cx="15%" cy="30%" r="55%">
          <stop offset="0%" stopColor={P.accent} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={P.accent} stopOpacity="0"/>
        </radialGradient>
        <radialGradient id="cg2" cx="85%" cy="70%" r="50%">
          <stop offset="0%" stopColor={P.accent2} stopOpacity="0.14"/>
          <stop offset="100%" stopColor={P.accent2} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="1200" height="600" fill="url(#cg1)"><animate attributeName="opacity" values="0.85;1;0.85" dur="9s" repeatCount="indefinite"/></rect>
      <rect width="1200" height="600" fill="url(#cg2)"><animate attributeName="opacity" values="1;0.8;1" dur="11s" repeatCount="indefinite"/></rect>
    </svg>
  );
}

// Logo strip — marquees company logos (no valuations)
function ConsLogoStrip({ P, T, mobile }) {
  const loop = [...UNICORNS, ...UNICORNS];
  // On dark palette (ink), use light logo tint; otherwise use accent indigo
  const tint = P.logo === 'white' ? 'ffffff' : '202088';
  return (
    <div style={{ borderTop: `1px solid ${P.rule}`, borderBottom: `1px solid ${P.rule}`, background: P.bg, overflow: 'hidden', position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 120, background: `linear-gradient(to right, ${P.bg}, transparent)`, zIndex: 2, pointerEvents: 'none' }}/>
      <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 120, background: `linear-gradient(to left, ${P.bg}, transparent)`, zIndex: 2, pointerEvents: 'none' }}/>
      <div style={{ padding: '12px 0 6px', textAlign: 'center', fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: P.muted, textTransform: 'uppercase', letterSpacing: '0.15em' }}>
        Completed transactions
      </div>
      <div style={{ display: 'flex', gap: 0, animation: 'cmarq 40s linear infinite', whiteSpace: 'nowrap', padding: '22px 0 28px', alignItems: 'center' }}>
        {loop.map((u, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: mobile ? 10 : 14, padding: mobile ? '0 24px' : '0 40px', borderRight: `1px solid ${P.rule}`, height: mobile ? 36 : 44, flexShrink: 0 }}>
            <LogoMark slug={u.slug} name={u.name} size={mobile ? 22 : 28} color={tint} style={{ opacity: 0.9 }}/>
            <span style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 20 : 26, color: P.ink, letterSpacing: '-0.02em', lineHeight: 1 }}>{u.name}</span>
          </div>
        ))}
      </div>
      <style>{`@keyframes cmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </div>
  );
}

function ConsHero({ P, T, mobile, headline }) {
  return (
    <section style={{ position: 'relative', background: P.bg, overflow: 'hidden' }}>
      <ConsHeroGradient P={P} />
      <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', padding: mobile ? '56px 20px 48px' : '104px 48px 88px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: mobile ? 28 : 40 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: P.accent, display: 'inline-block' }}/>
          <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.ink2, textTransform: 'uppercase', letterSpacing: '0.14em' }}>Pre-IPO & Venture Equity · End-to-end advisory</span>
        </div>

        <h1 style={{
          fontFamily: T.display, fontWeight: T.displayWeight,
          fontSize: mobile ? 44 : 88, lineHeight: mobile ? 1.02 : 0.98,
          letterSpacing: T.letterSpacing, color: P.ink, margin: 0,
          maxWidth: 1050, textWrap: 'balance',
        }}>
          {headline.split('\n').map((line, i) => (
            <span key={i} style={{ display: 'block', fontStyle: i === 1 ? 'italic' : 'normal', color: i === 1 ? P.accent : P.ink }}>{line}</span>
          ))}
        </h1>

        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 24 : 48, marginTop: mobile ? 32 : 52, alignItems: mobile ? 'flex-start' : 'flex-end', justifyContent: 'space-between' }}>
          <p style={{ fontFamily: T.body, fontSize: mobile ? 15 : 17, lineHeight: 1.5, color: P.ink2, margin: 0, maxWidth: 560, fontWeight: 400 }}>
            Tranzom provides end-to-end advisory services to HNWIs, family offices, and qualified investors seeking to buy or sell venture and pre-IPO equity interests — from counterparty sourcing and price negotiation through SPV formation, diligence, post-investment monitoring, and exit.
          </p>
          <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
            <button style={{ background: P.ink, color: P.bg, border: 'none', padding: '14px 22px', fontFamily: T.body, fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Speak with us →</button>
            <button style={{ background: 'transparent', color: P.ink, border: `1px solid ${P.ink}`, padding: '14px 22px', fontFamily: T.body, fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Our services</button>
          </div>
        </div>
      </div>
      <ConsLogoStrip P={P} T={T} mobile={mobile}/>
    </section>
  );
}

// Who we serve
function ConsClients({ P, T, mobile }) {
  const clients = [
    { l: 'High-Net-Worth Individuals', d: 'Direct access to pre-IPO allocation normally limited to institutional tickets, with bespoke structuring.' },
    { l: 'Family Offices', d: 'Single and multi-family offices building venture exposure alongside public and private portfolios.' },
    { l: 'Qualified Investors', d: 'Accredited investors and investment entities seeking professional sourcing, diligence, and monitoring support.' },
  ];
  return (
    <section style={{ background: P.bg, borderTop: `1px solid ${P.rule}`, padding: mobile ? '56px 20px' : '104px 48px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'flex-end', marginBottom: mobile ? 36 : 56, gap: 16 }}>
          <div>
            <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.ink2, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16 }}>01 — Who we serve</div>
            <h2 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 32 : 52, lineHeight: 1.05, letterSpacing: T.letterSpacing, color: P.ink, margin: 0, maxWidth: 820, textWrap: 'balance' }}>
              Built for <em style={{ color: P.accent }}>private capital</em> accessing private markets.
            </h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${P.rule}` }}>
          {clients.map((c, i) => (
            <div key={i} style={{ padding: mobile ? '28px 0' : '36px 28px 36px 0', borderRight: !mobile && i < 2 ? `1px solid ${P.rule}` : 'none', borderBottom: mobile && i < 2 ? `1px solid ${P.rule}` : 'none' }}>
              <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.muted, marginBottom: 14 }}>0{i + 1}</div>
              <h3 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 22 : 26, letterSpacing: '-0.02em', color: P.ink, margin: 0, lineHeight: 1.15 }}>{c.l}</h3>
              <p style={{ fontFamily: T.body, fontSize: 14, lineHeight: 1.55, color: P.ink2, marginTop: 12 }}>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Services — the engagement spectrum
function ConsServices({ P, T, mobile }) {
  const services = [
    { n: '01', stage: 'Sourcing', title: 'Counterparty sourcing', blurb: 'Access to sellers in pre-IPO and late-stage venture names — employee tenders, early-investor exits, primary allocation.', scope: 'Light-touch' },
    { n: '02', stage: 'Negotiation', title: 'Price & terms negotiation', blurb: 'Benchmarking against recent prints and mosaic data; negotiation of price, fees, ROFR waivers, and transfer mechanics.', scope: 'Light-touch' },
    { n: '03', stage: 'Diligence', title: 'Diligence support', blurb: 'Coordinated cap-table review, 409A and secondary print analysis, commercial and governance checks.', scope: 'Mid-touch' },
    { n: '04', stage: 'Structuring', title: 'SPV formation & administration', blurb: 'Delaware and Cayman SPV setup, fund administration, subscription processing, and ongoing accounting.', scope: 'Full service' },
    { n: '05', stage: 'Monitoring', title: 'Post-investment monitoring', blurb: 'Periodic updates on company performance, funding events, secondary activity, and governance developments.', scope: 'Full service' },
    { n: '06', stage: 'Exit', title: 'Exit & distribution strategy', blurb: 'IPO lock-up planning, secondary sales, structured hedges, and tax-aware distribution to LPs upon liquidity.', scope: 'Full service' },
  ];
  return (
    <section style={{ background: P.card, padding: mobile ? '56px 20px' : '104px 48px', borderTop: `1px solid ${P.rule}`, borderBottom: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 24 : 64, marginBottom: mobile ? 40 : 72 }}>
          <div style={{ flex: '0 0 auto', width: mobile ? '100%' : 320 }}>
            <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.ink2, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16 }}>02 — Services</div>
            <h2 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 32 : 44, lineHeight: 1.05, letterSpacing: T.letterSpacing, color: P.ink, margin: 0 }}>
              End-to-end, or <em style={{ color: P.accent }}>à la carte</em>.
            </h2>
          </div>
          <p style={{ fontFamily: T.body, fontSize: mobile ? 15 : 16, lineHeight: 1.55, color: P.ink2, margin: 0, maxWidth: 520, paddingTop: mobile ? 0 : 12 }}>
            Engage us for a single task — sourcing a specific name, structuring an SPV — or for the full lifecycle from first conversation to distribution. You pay for what you use.
          </p>
        </div>

        {/* Engagement spectrum bar */}
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 0, marginBottom: 48, borderTop: `1px solid ${P.rule}`, borderBottom: `1px solid ${P.rule}` }}>
          {[
            ['Light-touch', 'Sourcing · Negotiation', 'You lead; we supply access and benchmark data.'],
            ['Mid-touch', '+ Diligence support', 'Shared workstream; we assist on analysis and coordination.'],
            ['Full service', '+ SPV · Monitoring · Exit', 'We run the transaction and fund lifecycle end-to-end.'],
          ].map(([tag, scope, desc], i) => (
            <div key={tag} style={{ padding: mobile ? '24px 0' : '28px 28px 28px 0', borderRight: !mobile && i < 2 ? `1px solid ${P.rule}` : 'none', borderBottom: mobile && i < 2 ? `1px solid ${P.rule}` : 'none' }}>
              <div style={{ display: 'inline-block', fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: P.accent, textTransform: 'uppercase', letterSpacing: '0.12em', padding: '4px 8px', border: `1px solid ${P.accent}`, marginBottom: 12 }}>{tag}</div>
              <div style={{ fontFamily: T.body, fontSize: 14, color: P.ink, fontWeight: 500, marginBottom: 6 }}>{scope}</div>
              <div style={{ fontFamily: T.body, fontSize: 13, color: P.ink2, lineHeight: 1.5 }}>{desc}</div>
            </div>
          ))}
        </div>

        {/* Service rows */}
        <div>
          {services.map((s, i) => (
            <div key={s.n} style={{ display: 'grid', gridTemplateColumns: mobile ? '40px 1fr' : '60px 160px 1fr 1fr 120px', gap: mobile ? 16 : 32, padding: mobile ? '24px 0' : '28px 0', borderTop: `1px solid ${P.rule}`, borderBottom: i === services.length - 1 ? `1px solid ${P.rule}` : 'none', alignItems: 'baseline' }}>
              <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.muted }}>{s.n}</span>
              {!mobile && <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: P.accent, textTransform: 'uppercase', letterSpacing: '0.12em' }}>{s.stage}</span>}
              <h3 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 20 : 24, letterSpacing: '-0.02em', color: P.ink, margin: 0, lineHeight: 1.15 }}>{s.title}</h3>
              {!mobile && <p style={{ fontFamily: T.body, fontSize: 13.5, lineHeight: 1.5, color: P.ink2, margin: 0 }}>{s.blurb}</p>}
              {!mobile && <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: P.ink2, textAlign: 'right' }}>{s.scope}</span>}
              {mobile && <p style={{ fontFamily: T.body, fontSize: 13.5, lineHeight: 1.5, color: P.ink2, margin: '4px 0 0', gridColumn: '2 / 3' }}>{s.blurb} <span style={{ display: 'block', color: P.accent, fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 8 }}>{s.stage} · {s.scope}</span></p>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Deal history — no valuations, no prices, just stage/structure/role/region
function ConsTrackRecord({ P, T, mobile }) {
  return (
    <section style={{ background: P.bg, padding: mobile ? '56px 20px' : '104px 48px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'flex-end', marginBottom: mobile ? 36 : 56, gap: 16 }}>
          <div>
            <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.ink2, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16 }}>03 — Track record</div>
            <h2 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 32 : 52, lineHeight: 1.05, letterSpacing: T.letterSpacing, color: P.ink, margin: 0, maxWidth: 820, textWrap: 'balance' }}>
              Selected transactions, <em style={{ color: P.accent }}>recent quarters</em>.
            </h2>
          </div>
          <span style={{ fontFamily: T.body, fontSize: 13, color: P.ink2, maxWidth: 340, textAlign: mobile ? 'left' : 'right', lineHeight: 1.5 }}>
            Representative list of transactions we have advised on. Valuations and share prices intentionally omitted — contact us for current marks.
          </span>
        </div>

        {/* Deal table */}
        <div style={{ borderTop: `1px solid ${P.rule}` }}>
          {!mobile && (
            <div style={{ display: 'grid', gridTemplateColumns: '110px 160px 1.4fr 1.4fr 140px', gap: 32, padding: '14px 0', borderBottom: `1px solid ${P.rule}`, fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: P.muted, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
              <span>Period</span><span>Issuer</span><span>Structure</span><span>Sector · Region</span><span style={{ textAlign: 'right' }}>Our role</span>
            </div>
          )}
          {DEAL_HISTORY.map((d, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: mobile ? '80px 1fr' : '110px 160px 1.4fr 1.4fr 140px',
              gap: mobile ? 14 : 32, padding: mobile ? '20px 0' : '22px 0',
              borderBottom: `1px solid ${P.rule}`, alignItems: 'baseline',
            }}>
              <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.ink2 }}>{d.yr}</span>
              {!mobile ? (
                <>
                  <span style={{ fontFamily: T.body, fontSize: 14, color: P.ink, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 10 }}>
                    <LogoMark slug={d.slug} name="" size={16} color={P.logo === 'white' ? 'ffffff' : '202088'} style={{ opacity: 0.9 }}/>
                    {d.co}
                  </span>
                  <span style={{ fontFamily: T.body, fontSize: 13.5, color: P.ink2 }}>{d.st}</span>
                  <span style={{ fontFamily: T.body, fontSize: 13.5, color: P.ink2 }}>{d.rg}</span>
                  <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: P.accent, textAlign: 'right', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{d.role}</span>
                </>
              ) : (
                <div>
                  <div style={{ fontFamily: T.body, fontSize: 14, color: P.ink, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <LogoMark slug={d.slug} name="" size={14} color={P.logo === 'white' ? 'ffffff' : '202088'} style={{ opacity: 0.9 }}/>
                    {d.co} <span style={{ color: P.ink2, fontWeight: 400 }}> · {d.st}</span>
                  </div>
                  <div style={{ fontFamily: T.body, fontSize: 13, color: P.ink2, marginTop: 3 }}>{d.rg}</div>
                  <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: P.accent, textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 6 }}>{d.role}</div>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Quiet summary strip */}
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 0, marginTop: 40, paddingTop: 24, borderTop: `1px solid ${P.rule}` }}>
          {[
            ['40+', 'Transactions advised'],
            ['25+', 'Unicorn issuers covered'],
            ['12', 'Countries of client base'],
            ['9 yrs', 'Avg. team pre-IPO experience'],
          ].map(([v, l], i) => (
            <div key={i} style={{ padding: mobile ? '20px 0' : '24px 28px 0 0', borderBottom: mobile && i < 2 ? `1px solid ${P.rule}` : 'none' }}>
              <div style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 32 : 44, letterSpacing: '-0.03em', color: P.ink, lineHeight: 1 }}>{v}</div>
              <div style={{ fontFamily: T.body, fontSize: 12.5, color: P.ink2, marginTop: 10 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// How we work — visual process
function ConsProcess({ P, T, mobile }) {
  const steps = [
    ['Intake', 'Mandate scoping — target names, size, wrapper, timing. NDA in place from day one.'],
    ['Sourcing', 'Counterparty outreach through our direct relationships with holders and issuers.'],
    ['Negotiate', 'Price, fees, ROFR waivers, transfer terms. Benchmarked to recent prints.'],
    ['Diligence', 'Cap table, 409A, commercial, governance. Redacted data room coordination.'],
    ['Structure', 'Delaware or Cayman SPV, subscription processing, fund admin setup.'],
    ['Monitor', 'Quarterly updates on company, funding events, governance, secondary prints.'],
    ['Exit', 'IPO lockup planning, structured hedges, tax-aware distribution.'],
  ];
  return (
    <section style={{ background: P.card, padding: mobile ? '56px 20px' : '104px 48px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ marginBottom: mobile ? 40 : 64 }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: P.ink2, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16 }}>04 — How we work</div>
          <h2 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 32 : 52, lineHeight: 1.02, letterSpacing: T.letterSpacing, color: P.ink, margin: 0, maxWidth: 900, textWrap: 'balance' }}>
            A single workflow, <em style={{ color: P.accent }}>from intake through exit.</em>
          </h2>
        </div>

        {/* Process timeline */}
        <div style={{ position: 'relative' }}>
          {!mobile && (
            <div style={{ position: 'absolute', left: 0, right: 0, top: 18, height: 1, background: P.rule }}/>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : `repeat(${steps.length}, 1fr)`, gap: mobile ? 0 : 20, position: 'relative' }}>
            {steps.map(([t, d], i) => (
              <div key={t} style={{ position: 'relative', paddingTop: mobile ? 0 : 44, paddingBottom: mobile ? 20 : 0, paddingLeft: mobile ? 28 : 0, borderLeft: mobile ? `1px solid ${P.rule}` : 'none', borderBottom: mobile && i < steps.length - 1 ? 'none' : 'none' }}>
                {!mobile && (
                  <div style={{ position: 'absolute', left: 0, top: 12, width: 14, height: 14, borderRadius: '50%', background: P.bg, border: `1.5px solid ${P.accent}` }}>
                    <div style={{ position: 'absolute', inset: 3, borderRadius: '50%', background: P.accent }}/>
                  </div>
                )}
                {mobile && (
                  <div style={{ position: 'absolute', left: -7, top: 2, width: 14, height: 14, borderRadius: '50%', background: P.bg, border: `1.5px solid ${P.accent}` }}>
                    <div style={{ position: 'absolute', inset: 3, borderRadius: '50%', background: P.accent }}/>
                  </div>
                )}
                <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: P.muted, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 6 }}>Step {String(i + 1).padStart(2, '0')}</div>
                <h4 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 20 : 20, letterSpacing: '-0.02em', color: P.ink, margin: 0, lineHeight: 1.15 }}>{t}</h4>
                <p style={{ fontFamily: T.body, fontSize: 12.5, lineHeight: 1.5, color: P.ink2, marginTop: 8 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// CTA band
function ConsCTA({ P, T, mobile }) {
  return (
    <section style={{ background: P.bg, padding: mobile ? '56px 20px' : '104px 48px', borderTop: `1px solid ${P.rule}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'center', gap: mobile ? 28 : 48 }}>
        <h2 style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 36 : 64, lineHeight: 1, letterSpacing: T.letterSpacing, color: P.ink, margin: 0, maxWidth: 800, textWrap: 'balance' }}>
          A single conversation <em style={{ color: P.accent }}>starts the process.</em>
        </h2>
        <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
          <button style={{ background: P.ink, color: P.bg, border: 'none', padding: '16px 24px', fontFamily: T.body, fontSize: 14, fontWeight: 500, cursor: 'pointer' }}>Request an introduction →</button>
        </div>
      </div>
    </section>
  );
}

function ConsFooter({ P, T, mobile }) {
  return (
    <footer style={{ background: P.ink, color: P.bg, padding: mobile ? '48px 20px 28px' : '72px 48px 32px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : '2fr 1fr 1fr 1fr', gap: mobile ? 32 : 48, marginBottom: 48 }}>
          <div style={{ gridColumn: mobile ? '1 / -1' : 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
              <img src="logo-white-v2.png" alt="Tranzom" style={{ height: 28, width: 'auto', display: 'block' }}/>
            </div>
            <p style={{ fontFamily: T.display, fontWeight: T.displayWeight, fontSize: mobile ? 20 : 22, lineHeight: 1.25, color: P.bg, opacity: 0.9, margin: 0, maxWidth: 380, letterSpacing: '-0.01em' }}>
              Smart money. Smooth transaction.
            </p>
          </div>
          {[['Services', ['Sourcing', 'Negotiation', 'Diligence', 'SPV & admin', 'Monitoring', 'Exit']], ['Clients', ['HNWI', 'Family Offices', 'Qualified Investors']], ['Firm', ['About', 'Track record', 'Team', 'Contact']]].map(([t, items]) => (
            <div key={t}>
              <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: P.bg, opacity: 0.5, marginBottom: 14 }}>{t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {items.map(x => <span key={x} style={{ fontFamily: T.body, fontSize: 13, color: P.bg, opacity: 0.85, cursor: 'pointer' }}>{x}</span>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: `1px solid ${P.bg}20`, paddingTop: 20, display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: 10, justifyContent: 'space-between', fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: P.bg, opacity: 0.55, textTransform: 'uppercase', letterSpacing: '0.1em', lineHeight: 1.6 }}>
          <span>© 2026 Tranzom · All rights reserved.</span>
          <span>Nothing herein constitutes investment advice or an offer. For qualified investors only.</span>
        </div>
      </div>
    </footer>
  );
}

function SiteConservative({ palette = 'paper', typePair = 'editorial', headline, mobile = false }) {
  const P = CONS_PALETTES[palette];
  const T = TYPE_PAIRS[typePair];
  const H = headline || 'Smart money.\nSmooth transaction.';
  return (
    <div style={{ background: P.bg, color: P.ink, fontFamily: T.body, minHeight: '100%', overflowX: 'hidden' }}>
      <ConsNav P={P} T={T} mobile={mobile} />
      <ConsHero P={P} T={T} mobile={mobile} headline={H} />
      <ConsClients P={P} T={T} mobile={mobile} />
      <ConsServices P={P} T={T} mobile={mobile} />
      <ConsTrackRecord P={P} T={T} mobile={mobile} />
      <ConsProcess P={P} T={T} mobile={mobile} />
      <ConsCTA P={P} T={T} mobile={mobile} />
      <ConsFooter P={P} T={T} mobile={mobile} />
    </div>
  );
}

Object.assign(window, { SiteConservative, CONS_PALETTES, TYPE_PAIRS });
