(() => {
const DS = window.VigaExportDesignSystem_fc0fdf;
const ASSETS = '../../assets';

const PHOTOS = {
  cherryOrchard: `${ASSETS}/photo-cherry-orchard.png`,
  kiwiOrchard: `${ASSETS}/photo-kiwi-orchard.png`,
  blossom: `${ASSETS}/photo-cherry-blossom.png`,
  packing: `${ASSETS}/photo-packing.png`,
  cherryCut: `${ASSETS}/img-cherries.png`,
  kiwiCut: `${ASSETS}/img-kiwi.png`,
};

const MAIL = 'contacto@vigaexport.cl';

const OFFICES = (t) => [
  { name: t.contact.plant, address: 'Las Virginias 939, Camino Camarico, Rengo, Chile.', phone: '+56 44 246 1251', email: 'contacto@vigaexport.cl' },
  { name: t.contact.office, address: 'Av. Las Condes 9460, of. 415, Las Condes, Santiago, Chile.', phone: '+56 9 8129 7913', email: 'info@vigaexport.cl' },
];

const Section = ({ children, tone = 'white', tight = false, style }) => (
  <section style={{
    background: tone === 'bone' ? 'var(--viga-bone)' : tone === 'ink' ? 'var(--viga-black)' : 'var(--viga-white)',
    padding: `${tight ? 'var(--section-y-tight)' : 'var(--section-y)'} var(--gutter)`,
    ...style,
  }}>
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>{children}</div>
  </section>
);

/* Full-bleed photograph with a protection gradient. Photos are portrait 3:4. */
const Plate = ({ src, height = 520, scrim = 'none', dim = 0, children, position = 'center', style }) => (
  <div style={{ position: 'relative', height: `${height}px`, overflow: 'hidden', background: 'var(--viga-black)', ...style }}>
    <img src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: position }} />
    {dim > 0 && <div style={{ position: 'absolute', inset: 0, background: `rgba(26,25,30,${dim})` }} />}
    {scrim !== 'none' && <div style={{ position: 'absolute', inset: 0, background: scrim === 'left' ? 'var(--scrim-left)' : scrim === 'bottom' ? 'var(--scrim-bottom)' : 'var(--scrim-full)' }} />}
    {children && <div style={{ position: 'relative', height: '100%' }}>{children}</div>}
  </div>
);

const Tbd = ({ children }) => (
  <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-sm)', fontStyle: 'italic', color: 'var(--neutral-400)' }}>{children}</span>
);

const MailButton = ({ label, mail = MAIL, variant = 'onInk', size = 'lg' }) => (
  <DS.Button variant={variant} size={size} href={`mailto:${mail}`} withArrow>{label} {mail}</DS.Button>
);

window.VIGA = { ASSETS, PHOTOS, MAIL, OFFICES, Section, Plate, Tbd, MailButton };
Object.assign(window, DS);
})();