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

function Home({ t, go }) {
  return (
    <div>
      {/* Hero — fruit on black */}
      <div style={{ position: 'relative', minHeight: '700px', background: 'var(--viga-black)', display: 'flex', flexDirection: 'column' }}>
        <img src={PHOTOS.cherryOrchard} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '70% 40%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right,rgba(26,25,30,.94) 0%,rgba(26,25,30,.86) 34%,rgba(26,25,30,.42) 68%,rgba(26,25,30,.18) 100%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top,rgba(26,25,30,.92) 0%,rgba(26,25,30,.2) 40%,rgba(26,25,30,.55) 100%)' }} />
        <div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'center', padding: 'var(--space-10) var(--gutter) var(--space-8)' }}>
          <div style={{ maxWidth: 'var(--container)', margin: '0 auto', width: '100%' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)', maxWidth: '660px' }}>
              <Eyebrow onInk>{t.hero.eyebrow}</Eyebrow>
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', fontWeight: 'var(--weight-regular)', lineHeight: 'var(--leading-display)', color: 'var(--viga-white)', margin: 0 }}>
                {t.hero.title}
              </h1>
              <p style={{ fontFamily: 'var(--font-body)', fontWeight: 'var(--weight-light)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-body)', color: 'rgba(255,255,255,.88)', maxWidth: '48ch', margin: 0 }}>
                {t.hero.lede}
              </p>
              <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginTop: 'var(--space-2)' }}>
                <MailButton label={t.hero.cta} />
                <Button variant="outlineOnInk" size="lg" onClick={() => go('species')}>{t.hero.cta2}</Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Nosotros */}
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 'var(--space-9)', alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            <SectionHeading eyebrow={t.about.eyebrow} title={t.about.title} />
            <p style={{ fontFamily: 'var(--font-body)', fontWeight: 'var(--weight-light)', lineHeight: 'var(--leading-body)', color: 'var(--neutral-600)', maxWidth: 'var(--measure-body)', margin: 0 }}>
              {t.about.teaser}
            </p>
            <Button variant="ghost" onClick={() => go('about')}>{t.nav.about}</Button>
          </div>
          <Plate src={PHOTOS.blossom} height={480} position="center 45%" />
        </div>
      </Section>

      {/* Especies */}
      <Section tone="bone">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
          <SectionHeading eyebrow={t.species.eyebrow} title={t.species.title} lede={t.species.lede} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--grid-gap)' }}>
            <FruitCard name={t.species.cherry.name} latin={t.species.cherry.latin} season={t.species.cherry.season} image={PHOTOS.cherryCut} tone="cherry" style={{ minHeight: '440px' }} onClick={(e) => { e.preventDefault(); go('species'); }} />
            <FruitCard name={t.species.kiwi.name} latin={t.species.kiwi.latin} season={t.species.kiwi.season} image={PHOTOS.kiwiCut} tone="kiwi" style={{ minHeight: '440px' }} onClick={(e) => { e.preventDefault(); go('species'); }} />
          </div>
        </div>
      </Section>

      {/* Integración vertical, sobre la foto del packing */}
      <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 35%', opacity: 0.5 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right,rgba(26,25,30,.95) 0%,rgba(26,25,30,.7) 55%,rgba(26,25,30,.55) 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 eyebrow={t.integration.eyebrow} title={t.integration.title} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 'var(--grid-gap)' }}>
              {t.integration.stages.map((s, i) => <ProcessStep key={s.title} index={i + 1} title={s.title} body={s.body} onInk />)}
            </div>
            <Button variant="outlineOnInk" onClick={() => go('integration')} withArrow style={{ alignSelf: 'flex-start' }}>{t.nav.integration}</Button>
          </div>
        </div>
      </div>

      {/* Mercados */}
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.2fr)', gap: 'var(--space-9)', alignItems: 'center' }}>
          <SectionHeading eyebrow={t.markets.eyebrow} title={t.markets.title} lede={t.markets.lede} />
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {t.markets.list.map((m, i) => (
              <div key={m} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--space-5)', padding: 'var(--space-5) 0', borderTop: '1px solid var(--line-subtle)', borderBottom: i === t.markets.list.length - 1 ? '1px solid var(--line-subtle)' : 'none' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h1)', fontWeight: 'var(--weight-regular)' }}>{m}</span>
                <span style={{ fontFamily: 'var(--font-wordmark)', fontSize: 'var(--text-micro)', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--viga-gold-deep)' }}>0{i + 1}</span>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* Quote sobre el kiwi */}
      <Plate src={PHOTOS.kiwiOrchard} height={460} scrim="left" dim={0.3} position="center 60%">
        <div style={{ height: '100%', display: 'flex', alignItems: 'center', padding: '0 var(--gutter)' }}>
          <div style={{ maxWidth: 'var(--container)', margin: '0 auto', width: '100%' }}>
            <PullQuote onInk attribution="Viga Export SpA" role="Rengo, Región de O'Higgins">{t.about.quote}</PullQuote>
          </div>
        </div>
      </Plate>

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

      {/* Contacto */}
      <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} lede={t.contact.lede} />
          <MailButton label={t.contact.cta} />
        </div>
      </Section>
    </div>
  );
}

window.Home = Home;
})();
