const { Eyebrow, Accordion, Divider, Tabs, StatBlock } = window.IndigoAdvisoryDesignSystem_fba97f;

const gutter = { paddingLeft: 'var(--gutter)', paddingRight: 'var(--gutter)' };
const wrap = { maxWidth: 'var(--container)', margin: '0 auto' };

function CapabilitiesScreen() {
  const [tab, setTab] = React.useState('Negotiation');
  const detail = {
    Negotiation: 'We sell dreams. We don\'t buy dreams. We lead the negotiation from your side of the table — preparing the position, running the counterparties, and closing terms that hold. Senior principals stay on the deal from first contact to signature.',
    Structuring: 'We design the capital and deal structure: instruments, covenants, and governance that protect your position and preserve control. Complex, cross-border, and market-ready.',
    Investing: 'We commit our own capital alongside conviction — concentrated positions in technology and leading companies where our structuring edge compounds returns.',
  };
  return (
    <div>
      <section style={{ position: 'relative', overflow: 'hidden', background: '#12161f', minHeight: '58vh', display: 'flex', alignItems: 'flex-end', ...gutter, paddingTop: 'var(--space-10)', paddingBottom: 'var(--space-8)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/facade.png)', backgroundSize: 'cover', backgroundPosition: 'center 45%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(10,13,20,0.92) 0%, rgba(10,13,20,0.72) 42%, rgba(10,13,20,0.22) 100%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,13,20,0.55) 0%, rgba(10,13,20,0) 38%, rgba(10,13,20,0.72) 100%)' }} />
        <div style={{ ...wrap, position: 'relative', width: '100%' }}>
          <Eyebrow style={{ color: 'rgba(255,255,255,0.72)' }}>Capabilities</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display)', fontWeight: 'var(--fw-light)', letterSpacing: 'var(--ls-tight)', lineHeight: 'var(--lh-tight)', margin: 'var(--space-4) 0 0', color: 'var(--paper)', maxWidth: 760, textWrap: 'balance' }}>
            We do the hard part of the deal.
          </h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginTop: 'var(--space-6)', maxWidth: 620 }}>
            <span style={{ width: 48, height: 1, background: 'rgba(232,182,84,0.85)', flex: 'none' }} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-lead)', fontWeight: 'var(--fw-light)', lineHeight: 'var(--lh-normal)', color: 'rgba(255,255,255,0.78)', margin: 0, textWrap: 'pretty' }}>
              Negotiation, structuring, and our own capital — brought to the situations where the outcome is still being decided.
            </p>
          </div>
        </div>
      </section>

      <section style={{ ...gutter, paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-9)' }}>
        <div style={wrap}>
          <Tabs tabs={['Negotiation', 'Structuring', 'Investing']} value={tab} onChange={setTab} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-lead)', fontWeight: 'var(--fw-light)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', maxWidth: 680, margin: 'var(--space-6) 0 0' }}>
            {detail[tab]}
          </p>
        </div>
      </section>

      <section style={{ background: 'var(--washi-100)', ...gutter, paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-8)' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)' }}>
          <StatBlock value="Institutional" label="Capital structured" accent />
          <StatBlock value="Cross-border" label="Deal footprint" />
          <StatBlock value="Public + private" label="Company types" />
        </div>
      </section>

      <section style={{ ...gutter, paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-10)' }}>
        <div style={{ ...wrap, maxWidth: 'var(--container-narrow)' }}>
          <Eyebrow>Common questions</Eyebrow>
          <div style={{ marginTop: 'var(--space-5)' }}>
            <Accordion items={[
              { title: 'Who do you work with?', content: 'Companies and technology leaders — and the founders, boards, and investors around them.' },
              { title: 'Are you sector-specific?', content: 'Sector-agnostic by mandate, with particular depth in technology and AI.' },
              { title: 'Where are you based?', content: 'Dubai, London, Hong Kong, and Mumbai — deliberately positioned across time zones.' },
              { title: 'Do you invest your own capital?', content: 'Yes. We take concentrated positions where our structuring edge compounds returns.' },
              { title: 'How are you compensated?', content: 'We only partake in the delta and value we create in a transaction. Our economics are tied to the outcome, not to hours or retainers.' },
              { title: 'What size of transaction do you take on?', content: 'We are selective rather than volume-driven. The test is whether our structuring edge changes the outcome materially — not the headline size of the deal.' },
              { title: 'Do you take control positions?', content: 'Rarely. We prefer significant minority stakes that align our capital with the outcome while leaving control with the operators who built the business.' },
              { title: 'Can you underwrite a full capital requirement?', content: 'Yes. Where conviction is high, we underwrite the entire path — including the IPO — so the company raises once and then executes.' },
              { title: 'What is your investment horizon?', content: 'Our core investments typically carry a ten-year horizon. We stay with a company well beyond the initial commitment — supporting subsequent capital and debt raises, business development, mergers and acquisitions, and the structuring decisions that shape the next decade of growth.' },
              { title: 'How long does a typical mandate run?', content: 'Mandates commonly run six to eighteen months. Where we invest alongside, the relationship extends through to listing or exit.' },
              { title: 'Do you work alongside existing advisers?', content: 'Routinely. We sit on your side of the table and coordinate with incumbent counsel, auditors, and bankers rather than displacing them.' },
              { title: 'How do we start a conversation?', content: 'Send a short note on the situation and the decision in front of you. If we are the right party, we will say so quickly — and if we are not, we will tell you that too.' },
            ]} />
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CapabilitiesScreen });