/* global React, SectionLabel */

function About() {
  return (
    <section id="about" data-screen-label="About" style={{
      background: '#FFF',
      minHeight: '100svh',
      padding: 'clamp(48px, 8vh, 96px) clamp(20px, 4vw, 40px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center',
      boxSizing: 'border-box',
    }}>
      <div style={{ maxWidth: 900, width: '100%', margin: '0 auto' }}>
        <SectionLabel style={{ marginBottom: 28 }}>About Us</SectionLabel>
        <h2 style={{
          font: '400 clamp(24px, 3.6vw, 36px)/1.15 var(--font-display)',
          color: '#283836',
          margin: '0 0 32px 0',
          textWrap: 'pretty',
        }}>
          One source of truth for the Single Family Office.{' '}
          <span style={{ color: 'rgba(40, 56, 54, 0.50)' }}>
            LexPars delivers total data integrity, autonomy, and accessibility in a single platform.
          </span>
        </h2>
        <p style={{ fontSize: 18, color: '#283836', margin: '0 0 8px 0' }}>—</p>
        <p style={{
          font: '400 clamp(15px, 1.6vw, 18px)/1.4 var(--font-body)',
          color: '#283836',
          maxWidth: 580, margin: '0 auto',
          textWrap: 'pretty',
        }}>
          It also has the functionality to create a fully customisable platform. Enabling a truly bespoke experience for all of our clients.
        </p>
      </div>
    </section>
  );
}

window.About = About;