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

function Contact({ t }) {
  const offices = OFFICES(t);
  return (
    <div>
      <div style={{ background: 'var(--viga-black)', padding: 'var(--section-y) var(--gutter)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'var(--space-9)', alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
            <SectionHeading onInk size="xl" eyebrow={t.contact.eyebrow} title={t.contact.title} lede={t.contact.lede} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', alignItems: 'flex-start' }}>
              <Eyebrow onInk rule={false}>{t.contact.commercial}</Eyebrow>
              <a href={`mailto:${MAIL}`} style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-3)', color: 'var(--viga-gold)', lineHeight: 1.1, borderBottom: '1px solid rgba(219,192,120,.4)', paddingBottom: '6px' }}>
                {MAIL}
              </a>
              <MailButton label={t.contact.cta} />
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            {offices.map((o) => (
              <div key={o.name} style={{ borderTop: '1px solid rgba(219,192,120,.26)', paddingTop: 'var(--space-4)', display: 'flex', flexDirection: 'column', gap: '6px' }}>
                <Eyebrow onInk rule={false}>{o.name}</Eyebrow>
                <span style={{ fontFamily: 'var(--font-body)', fontWeight: 'var(--weight-light)', lineHeight: 'var(--leading-body)', color: 'var(--text-on-ink-secondary)' }}>{o.address}</span>
                <span style={{ display: 'flex', gap: 'var(--space-5)', marginTop: '4px', flexWrap: 'wrap' }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--viga-gold)', fontSize: 'var(--text-caption)' }}><Icon name="phone" size={14} />{o.phone}</span>
                  <a href={`mailto:${o.email}`} style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--viga-gold)', fontSize: 'var(--text-caption)' }}><Icon name="mail" size={14} />{o.email}</a>
                </span>
              </div>
            ))}
            <div style={{ marginTop: 'var(--space-2)' }}>
              <Plate src={PHOTOS.cherryOrchard} height={260} position="60% 40%" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Contact = Contact;
})();