(() => {
const { PHOTOS, Section, Plate, MailButton } = window.VIGA;

function About({ t }) {
  return (
    <div>
      <Plate src={PHOTOS.blossom} height={440} scrim="bottom" dim={0.38} position="center 40%">
        <div style={{ height: '100%', display: 'flex', alignItems: 'flex-end', padding: 'var(--space-8) var(--gutter)' }}>
          <div style={{ maxWidth: 'var(--container)', margin: '0 auto', width: '100%' }}>
            <SectionHeading onInk size="xl" eyebrow={t.about.eyebrow} title={t.about.title} />
          </div>
        </div>
      </Plate>

      <Section>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', maxWidth: 'var(--container-narrow)' }}>
          <Eyebrow>{t.about.eyebrow}</Eyebrow>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-3)', lineHeight: 'var(--leading-tight)', color: 'var(--viga-black)', margin: 0, maxWidth: '30ch' }}>
            {t.about.lede}
          </p>
        </div>
      </Section>

      <Section tone="bone">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'var(--space-9)', alignItems: 'center' }}>
          <div>
            <Eyebrow>{t.about.specsTitle}</Eyebrow>
            <div style={{ marginTop: 'var(--space-4)' }}>
              {t.about.specs.map(([l, v]) => <SpecRow key={l} label={l} value={v} />)}
            </div>
          </div>
          <Plate src={PHOTOS.cherryOrchard} height={480} position="60% 45%" />
        </div>
      </Section>

      <Section tone="ink" tight>
        <div style={{ display: 'flex', gap: 'var(--space-7)', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
          <SectionHeading onInk size="md" eyebrow={t.contact.eyebrow} title={t.contact.title} />
          <MailButton label={t.contact.cta} />
        </div>
      </Section>
    </div>
  );
}

window.About = About;
})();