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

function Integration({ t }) {
  const [active, setActive] = React.useState(0);
  const stage = t.integration.stages[active];
  return (
    <div>
      <div style={{ position: 'relative', background: 'var(--viga-black)' }}>
        <img src={PHOTOS.packing} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', opacity: 0.45 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right,rgba(26,25,30,.95) 0%,rgba(26,25,30,.72) 60%,rgba(26,25,30,.6) 100%)' }} />
        <div style={{ position: 'relative', padding: 'var(--section-y) var(--gutter)' }}>
          <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>
            <SectionHeading onInk size="xl" eyebrow={t.integration.eyebrow} title={t.integration.title} lede={t.integration.lede} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 'var(--grid-gap)' }}>
              {t.integration.stages.map((s, i) => (
                <div key={s.title} onClick={() => setActive(i)} style={{ cursor: 'pointer' }}>
                  <ProcessStep index={i + 1} title={s.title} body={s.body} onInk active={i === active} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 'var(--space-9)', alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <Eyebrow>0{active + 1}</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-3)', fontWeight: 'var(--weight-regular)', margin: 0 }}>{stage.title}</h2>
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', fontWeight: 'var(--weight-light)', lineHeight: 'var(--leading-body)', color: 'var(--neutral-600)', maxWidth: 'var(--measure-body)', margin: 0 }}>{stage.body}</p>
        </div>
      </Section>

      <Section tone="bone">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
          <SectionHeading eyebrow={t.nav.integration} title={t.integration.packingTitle} lede={t.integration.packingLede} />
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'var(--space-9)', alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
              {t.integration.packingPoints.map(([title, body]) => (
                <div key={title} style={{ borderTop: '1px solid var(--line-subtle)', paddingTop: 'var(--space-4)', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: 'var(--viga-black)' }}>{title}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-sm)', fontWeight: 'var(--weight-light)', lineHeight: 'var(--leading-body)', color: 'var(--neutral-600)' }}>{body}</span>
                </div>
              ))}
            </div>
            <Plate src={PHOTOS.packing} height={460} position="center 40%" />
          </div>
        </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.integration.growersTitle} title={t.integration.growersLede} />
          <MailButton label={t.integration.growersCta} />
        </div>
      </Section>
    </div>
  );
}

window.Integration = Integration;
})();