/* Dexilion — about page. */

(function () {

const { Eyebrow, Grain, Grid, Shell, tx, ImageSlot, SiteHeader, PageHero,
  EditorialList, ConversionBand, SiteFooter } = window;

function Prose() {
  const a = window.SITE.about;
  return (
    <section style={{ background: 'var(--paper-50)', padding: 'var(--section-y) 0', position: 'relative', overflow: 'hidden' }}>
      <Grain />
      <Shell><div className="dx-prose-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 320px', gap: '56px', alignItems: 'start' }}>
        <div style={{ maxWidth: 'var(--container-narrow)' }}>
          {a.prose.map((p, i) => (
            <p key={i} style={{
              margin: i ? '20px 0 0' : 0, fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)',
              color: 'var(--text-body)', textWrap: 'pretty'
            }}>{tx(p)}</p>))}
        </div>
        <div style={{ borderTop: '3px solid var(--gold-400)', paddingTop: '18px' }}>
          <div style={{ font: 'var(--text-eyebrow)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
            {a.factsHeading}</div>
          <dl className="dx-facts" style={{ margin: '16px 0 0', display: 'grid', gridTemplateColumns: '1fr', gap: '14px' }}>
            {a.facts.map(f => (
              <div key={f.label} style={{ display: 'flex', justifyContent: 'space-between', gap: '16px', paddingBottom: '12px', borderBottom: '1px solid var(--paper-200)' }}>
                <dt style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>{f.label}</dt>
                <dd style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-body-sm)', color: 'var(--text-strong)', textAlign: 'right' }}>
                  {tx(f.value)}</dd>
              </div>))}
          </dl>
        </div>
      </div></Shell>
    </section>
  );
}

function Principles() {
  const a = window.SITE.about;
  return (
    <section style={{
      background: 'var(--white)', padding: 'var(--section-y) 0', borderTop: '1px solid var(--paper-200)',
      position: 'relative', overflow: 'hidden'
    }}>
      <Grid fade="linear-gradient(180deg,#000 0%,transparent 55%)" />
      <Shell>
        <EditorialList
          eyebrow={a.principlesEyebrow} heading={a.principlesHeading}
          rows={a.principles.map(p => ({ title: p.title, summary: p.body }))} />
      </Shell>
    </section>
  );
}

function Team() {
  const a = window.SITE.about;
  return (
    <section style={{ background: 'var(--paper-100)', padding: 'var(--section-y) 0', position: 'relative', overflow: 'hidden' }}>
      <Grain />
      <Shell>
        <div style={{ position: 'relative', maxWidth: '46ch' }}>
          <Eyebrow>{a.teamEyebrow}</Eyebrow>
          <h2 style={{ font: 'var(--text-h2)', letterSpacing: 'var(--ls-heading)', margin: '18px 0 0', color: 'var(--text-strong)' }}>
            {a.teamHeading}</h2>
        </div>
        <div className="dx-split" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '320px 1fr', gap: '48px', alignItems: 'start', marginTop: '36px' }}>
          <ImageSlot label={a.founder.photoAlt} src={a.founder.photo} ratio="4 / 5" pos="left center" style={{ borderRadius: 'var(--radius-lg)', maxWidth: '320px' }} />
          <div style={{ maxWidth: 'var(--container-narrow)' }}>
            <div style={{
              fontFamily: 'var(--font-serif)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)',
              letterSpacing: 'var(--ls-heading)', color: 'var(--text-strong)'
            }}>{tx(a.founder.name)}</div>
            <div style={{ marginTop: '4px', fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>{tx(a.founder.role)}</div>
            {a.founder.bio.map((p, i) => (
              <p key={i} style={{
                margin: '18px 0 0', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)',
                color: 'var(--text-body)', textWrap: 'pretty'
              }}>{tx(p)}</p>))}
          </div>
        </div>
      </Shell>
    </section>
  );
}

function Page() {
  const a = window.SITE.about;
  return (
    <React.Fragment>
      <SiteHeader active="about" />
      <PageHero eyebrow={a.eyebrow} headline={a.headline} />
      <Prose />
      <Principles />
      <Team />
      <ConversionBand />
      <SiteFooter />
    </React.Fragment>
  );
}

mountPage(<Page />);

})();