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

function Species({ t }) {
  const [key, setKey] = React.useState('cherry');
  const s = t.species[key];
  const tone = key === 'cherry' ? 'cherry' : 'kiwi';
  const cut = key === 'cherry' ? PHOTOS.cherryCut : PHOTOS.kiwiCut;
  const photo = key === 'cherry' ? PHOTOS.cherryOrchard : PHOTOS.kiwiOrchard;

  return (
    <div>
      <DiagonalPanel
        tone={tone}
        split={46}
        minHeight={520}
        padding="var(--space-9) var(--gutter)"
        left={
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', alignItems: 'flex-start' }}>
            <Eyebrow onInk>{t.species.eyebrow}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', fontWeight: 'var(--weight-regular)', color: 'var(--viga-gold)', lineHeight: 'var(--leading-display)', margin: 0 }}>{s.name}</h1>
            <em style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body-lg)', color: 'rgba(255,255,255,.66)' }}>{s.latin}</em>
            <div style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-3)' }}>
              {['cherry', 'kiwi'].map((k) => (
                <Button key={k} size="sm" variant={k === key ? 'onInk' : 'outlineOnInk'} onClick={() => setKey(k)}>{t.species[k].name}</Button>
              ))}
            </div>
          </div>
        }
        right={
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '320px' }}>
            <img src={cut} alt={s.name} style={{ maxHeight: '360px', width: 'auto' }} />
          </div>
        }
      />

      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.2fr)', gap: 'var(--space-9)', alignItems: 'start' }}>
          <SectionHeading eyebrow={s.label} title={s.name} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            <div>
              <Eyebrow rule={false}>{t.species.varietiesLabel}</Eyebrow>
              <div style={{ marginTop: 'var(--space-3)', display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
                {s.varieties.map((v) => <Tag key={v} tone={tone}>{v}</Tag>)}
              </div>
            </div>
            <div>
              <Eyebrow rule={false}>{t.species.seasonLabel}</Eyebrow>
              <div style={{ marginTop: 'var(--space-3)', fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', color: 'var(--viga-black)' }}>{s.season}</div>
            </div>
          </div>
        </div>
      </Section>

      <Plate src={photo} height={520} position="center 50%" />

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

window.Species = Species;
})();