// agri2-page-3.jsx
// Agriculture Industry Page (v2) — Part 3
// Subsectors (6 facility-type cards) + Discovery + FAQ + Closing CTA.

// ============================================================
// AgriSubsectors — 6 agricultural facility types in a 3×2 grid.
// Cream background, stock-photo placeholders, headline + body per card.
// Mirrors the Mun "Different public facilities" layout.
// ============================================================
const AGRI_SUBSECTORS = [
  {
    n: '01', stamp: 'Climate-controlled · year-round',
    title: 'Greenhouses & Controlled Environment Agriculture',
    desc: 'Greenhouses rely on intensive heating, lighting, ventilation, and irrigation systems to maintain optimal growing conditions year-round. Energy strategies often focus on operational efficiency, climate control, and reducing seasonal utility costs.',
    placeholder: 'GREENHOUSE · CEA',
    img: `${window.GI_BASE}assets/industries/greenhouses_controlled_environment_agriculture.webp`,
  },
  {
    n: '02', stamp: 'Continuous load',
    title: 'Dairy & Livestock Operations',
    desc: 'Dairy farms and livestock facilities consume energy through ventilation, refrigeration, water heating, feeding systems, and barn operations. Reliable energy infrastructure is critical for animal health and continuous production.',
    placeholder: 'DAIRY · LIVESTOCK',
    img: `${window.GI_BASE}assets/industries/dairy_livestock_operations.webp`,
  },
  {
    n: '03', stamp: 'Harvest peak · seasonal',
    title: 'Grain Handling & Storage Facilities',
    desc: 'Grain elevators and storage operations require energy for drying systems, conveyors, aeration equipment, and material handling infrastructure. Managing seasonal peak loads and operational efficiency is essential during harvest periods.',
    placeholder: 'GRAIN · STORAGE',
    img: `${window.GI_BASE}assets/industries/grain_handling_storage_facilities.webp`,
  },
  {
    n: '04', stamp: 'Refrigeration-driven',
    title: 'Food Processing & Agricultural Packaging',
    desc: 'Agricultural processing facilities depend on refrigeration, sanitation systems, process equipment, and packaging lines to prepare products for distribution. Energy optimization supports production reliability and cost control.',
    placeholder: 'PROCESSING · PACKAGING',
    img: `${window.GI_BASE}assets/industries/food_processing_agricultural_packaging.webp`,
  },
  {
    n: '05', stamp: 'Strict environmental control',
    title: 'Poultry & Hatchery Facilities',
    desc: 'Poultry barns and hatcheries maintain strict environmental conditions through heating, ventilation, lighting, and automated feeding systems. Consistent energy performance is necessary to maintain operational stability and animal welfare.',
    placeholder: 'POULTRY · HATCHERY',
    img: `${window.GI_BASE}assets/industries/poultry_hatchery_facilities.webp`,
  },
  {
    n: '06', stamp: 'Equipment & infrastructure',
    title: 'Agricultural Warehousing & Equipment Facilities',
    desc: 'Farm equipment storage, maintenance buildings, and agricultural warehouses rely on lighting, ventilation, and mechanical systems to support daily operations. Energy upgrades can improve facility efficiency while supporting expanding agricultural operations.',
    placeholder: 'WAREHOUSE · EQUIPMENT',
    img: `${window.GI_BASE}assets/industries/agricultural_warehousing_equipment_facilities.webp`,
  },
];

const AgriSubsectorTile = ({ s }) => {
  const [imgFailed, setImgFailed] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
      background: 'transparent',
      display: 'flex', flexDirection: 'column', gap: 0,
      height: '100%',
    }}>
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 3',
        overflow: 'hidden',
        background:
          'repeating-linear-gradient(45deg, rgba(15,33,51,0.04) 0 1px, transparent 1px 18px),' +
          'linear-gradient(135deg, var(--gi-wise-blue) 0%, #1B3450 100%)',
        border: '1px solid rgba(15,33,51,0.10)',
      }}>
        {/* Stock photo */}
        {!imgFailed && (
          <img
            src={s.img}
            alt={s.title}
            onError={() => setImgFailed(true)}
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', objectFit: 'cover',
              display: 'block',
              filter: 'saturate(0.94) contrast(1.04)',
            }}
          />
        )}
        {/* Gradient veil for legibility of stamp */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(15,33,51,0.32) 0%, rgba(15,33,51,0.08) 36%, rgba(15,33,51,0.10) 100%)',
        }} />

        {/* corner crops */}
        {[
          { top: 10, left: 10 },
          { top: 10, right: 10 },
          { bottom: 10, left: 10 },
          { bottom: 10, right: 10 },
        ].map((c, i) => (
          <span key={i} aria-hidden="true" style={{
            position: 'absolute',
            top: c.top, left: c.left, right: c.right, bottom: c.bottom,
            width: 14, height: 14,
            borderTop:    c.top    != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderBottom: c.bottom != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderLeft:   c.left   != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderRight:  c.right  != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
          }} />
        ))}

        {/* stamp top-left */}
        <span style={{
          position: 'absolute', left: 14, top: 14,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '5px 9px',
          background: 'rgba(15,33,51,0.85)',
          backdropFilter: 'blur(4px)',
          fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: '#fff', fontWeight: 500,
        }}>
          <span>{s.stamp}</span>
        </span>

        {/* Fallback center text when image fails to load */}
        {imgFailed && (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'grid', placeItems: 'center',
            color: 'rgba(255,255,255,0.50)',
            fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.20em',
            textTransform: 'uppercase', textAlign: 'center', padding: 16,
          }}>[ {s.placeholder} ]</div>
        )}
      </div>

      <h3 style={{
        font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.012em',
        color: 'var(--gi-deep-ink)', margin: '20px 0 10px',
        textWrap: 'balance',
      }}>{s.title}</h3>
      <p style={{
        font: '400 14px/22px var(--ff-sans)',
        color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty',
      }}>{s.desc}</p>

    {/* <div style={{
      marginTop: 'auto', paddingTop: 14,
      borderTop: '1px solid rgba(15,33,51,0.16)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: 'var(--ff-mono)', fontSize: 10.5,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      color: 'var(--gi-deep-ink)', fontWeight: 500,
    }}>
      <span>Explore application</span>
      <span aria-hidden="true" style={{
        color: 'var(--gi-amber)', fontSize: 14,
        transform: hover ? 'translateX(6px)' : 'none',
        transition: 'transform 300ms cubic-bezier(.2,.6,.2,1)',
      }}>→</span>
    </div> */}
    </article>
  );
};

const AgriSubsectors = () => (
  <section data-gi-resp="agri-subsectors" data-screen-label="06 Subsectors" style={{
    background: 'var(--gi-paper-cream)', padding: '128px 0 0',
  }}>
    <div data-gi-resp="container" style={{
      maxWidth: 1440, margin: '0 auto', padding: '0 48px',
    }}>
      <div data-gi-reveal data-gi-resp="agri-subsectors-head" className="gi-section-head" style={{
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96, justifyItems: 'flex-end',
        alignItems: 'end', marginBottom: 56,
      }}>
        <div>
          <div style={{ marginBottom: 22 }}>
            <Eyebrow className="gi-eyebrow--green">Sector applications</Eyebrow>
          </div>
          <h2 style={{
            font: '500 44px/52px var(--ff-sans)', letterSpacing: '-0.024em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
          }}>
            Different agricultural operations.{' '}
            <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
              Different energy profiles.
            </span>
          </h2>
        </div>
        <p style={{
          font: '400 16px/26px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          textWrap: 'pretty',
        }}>
          Agricultural facilities span very different operating profiles — from
          year-round greenhouse climate control to seasonal grain handling, from
          continuous dairy operations to refrigerated food processing. Each calls
          for a different sequencing of measures.
        </p>
      </div>

      <div data-gi-reveal-stagger data-gi-resp="agri-subsectors-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        gap: '40px 28px',
      }}>
        {AGRI_SUBSECTORS.map((s) => <AgriSubsectorTile key={s.n} s={s} />)}
      </div>

      <div data-gi-resp="agri-subsectors-cta" style={{
        marginTop: 56, paddingTop: 32,
        borderTop: '1px solid rgba(15,33,51,0.18)',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40,
        alignItems: 'center',
      }}>
        <p style={{
          font: '400 15px/24px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty', maxWidth: 640,
        }}>
          Not sure which sub-sector best describes your operation?{' '}
          <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic' }}>
            That&rsquo;s usually the right place to start a conversation.
          </span>{' '}
          A 20-minute call is enough to map your seasonal load profile against the right scope of work.
        </p>
        <div data-gi-resp="agri-subsectors-cta-buttons" style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          
          <Button target="_blank" variant="ink" size="md" href="https://zfrmz.com/YYeFcdEY5IaGNvoCVM0P">Book a sector consult →</Button>
          <Button variant="outline" size="md" href="/projects/?category=agriculture">See all agricultural projects</Button>
        </div>
      </div>
    </div>
  </section>
);


// ============================================================
// AgriDiscovery — Our discovery process. 3 step cards on Paper Cream.
// (Replaces the previous "Our approach" section.)
// ============================================================
const AgriDiscovery = () => {
  const step02bullets = [
    'demand-charge exposure during the harvest window',
    'seasonal load profile across drying, irrigation, ventilation',
    'operating consumption against utility billing peaks',
    'potential solar and storage economics',
    'REAP and federal grant eligibility',
  ];

  return (
    <section data-gi-resp="agri-discovery" data-screen-label="07 Our Discovery Process" style={{
      background: 'var(--gi-paper-cream)', padding: '128px 0',
    }}>
      <div data-gi-resp="container" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <div data-gi-reveal data-gi-resp="agri-discovery-head" className="gi-section-head" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80,
          alignItems: 'end', justifyItems: 'flex-end',
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow className="gi-eyebrow--green">Our discovery process</Eyebrow>
            </div>
            <h2 style={{
              font: '500 56px/62px var(--ff-sans)', letterSpacing: '-0.028em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
            }}>
              Start with a conversation.{' '}
              <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
                Not a commitment.
              </span>
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
            textWrap: 'pretty',
          }}>
            Most agricultural operations already have enough utility and operational
            data to identify meaningful energy-saving opportunities. The first step
            is understanding how the operation consumes power across the
            agricultural year and where the strongest financial opportunities exist.
          </p>
        </div>

        <div data-gi-reveal-stagger data-gi-resp="agri-discovery-grid" style={{
          marginTop: 80,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {/* Step 01 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 01</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Quick 20-minute discovery call.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We review your operation type, seasonal load profile, REAP grant
              eligibility, and current energy concerns. No commitment required.
            </p>
          </article>

          {/* Step 02 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 02</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 14px',
              textWrap: 'balance',
            }}>12 months of utility bills.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty',
            }}>
              Interval and utility billing data — covering at least one full grain
              drying season — help identify:
            </p>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              {step02bullets.map((b) => (
                <li key={b} style={{
                  display: 'grid', gridTemplateColumns: '14px 1fr', gap: 12,
                  font: '400 14px/22px var(--ff-sans)',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span aria-hidden="true" style={{
                    width: 6, height: 6, marginTop: 8,
                    background: 'var(--gi-sage-accent)', display: 'inline-block',
                  }} />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </article>

          {/* Step 03 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 03</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Receive a farm opportunity overview.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We provide high-level insight into where solar, storage, LED lighting,
              electrical upgrades, or energy audits may create operational and
              financial value — alongside applicable grant funding pathways.
            </p>
          </article>
        </div>

        <div data-gi-resp="agri-discovery-cta" style={{
          marginTop: 48, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <Button target="_blank" variant="primary" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute discovery call</Button>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.10em',
            color: 'var(--gi-graphite)', textTransform: 'uppercase',
          }}>No commitment required.</span>
        </div>
      </div>
    </section>
  );
};


// ============================================================
// AgriFAQ — Paper White. 5 sector questions specific to agriculture.
// ============================================================
const AgriFAQ = () => {
  const items = [
    {
      q: 'Is rooftop solar viable on a barn or agricultural building?',
      a: "Yes — barn roofs, processing buildings, and agricultural outbuildings are among the most common surfaces for commercial solar in Ontario.\n\nA pre-installation structural assessment confirms the roof's capacity for the additional dead and live (snow) load. Roof age, mount type, and orientation are evaluated. The Tilecroft Farms 79.6 kW system is a multi-plane barn-roof installation that achieved 82% annual offset — the highest verified offset of any Green Integrations project across all sectors."
    },
    {
      q: 'How do seasonal loads — grain drying, irrigation — affect solar economics?',
      a: "Solar economics on a farm are built on annual offset, not month-by-month matching.\n\nA typical Ontario farm has high baseline ventilation and lighting year-round, an irrigation peak in summer (which aligns well with solar generation), and a grain drying spike in autumn (which does not). The solar system is sized to the annual consumption profile. Where the autumn drying peak creates significant demand-charge exposure, battery storage can address that without needing to fully offset the energy volume."
    },
    {
      q: 'What is the REAP grant and is our farm eligible?',
      a: "REAP refers to federal Rural and Northern Communities Clean Energy programmes administered by Natural Resources Canada and AAFC. These provide grant funding to qualifying agricultural and rural operations for renewable energy generation, storage, and energy efficiency upgrades.\n\nEligibility is project-specific — generally tied to the type of operation, the project category, and how the project is structured. We screen projects for eligibility as part of the initial assessment and manage the application end-to-end. Most farms either don't apply for available funding or leave eligible portions unclaimed."
    },
    {
      q: 'Can solar be installed on greenhouse roofs?',
      a: "Greenhouse roofing is typically transparent or translucent and is not a candidate surface for solar modules. However, adjacent buildings — packing houses, processing facilities, headhouses, or workshops — frequently have suitable roof area.\n\nGround-mount installations are often the best option for greenhouse operations with available land. The R Brush Farms 129.8 kW project in Blenheim is an example of a building-roof installation supporting a greenhouse operation — the modules sit on the adjacent processing building roofline."
    },
    {
      q: 'How long does an agricultural solar project take from assessment to commissioning?',
      a: "An agricultural project typically takes 4–9 months from initial assessment to commissioning, depending on size, grid interconnection requirements, and grant programme timing.\n\nThe sequence: 12-month interval data analysis (1–2 weeks), site and structural assessment (2–4 weeks), grant application preparation and submission (varies by programme), Hydro One or LDC interconnection application (4–12 weeks), engineering and procurement (4–8 weeks), installation (1–4 weeks), commissioning and ESA inspection (1–2 weeks). Grant programme cycles are often the longest variable — we sequence project milestones around them."
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section data-gi-resp="agri-faq" data-screen-label="08 FAQ" style={{ background: 'var(--gi-paper-white)', color: 'var(--gi-deep-ink)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal style={{
          display: 'flex', justifyContent: 'space-between', gap: 96,
          alignItems: 'flex-end', marginBottom: 64,
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Questions from farm operators &amp; agricultural managers</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
            }}>Frequently asked questions.</h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          }}>
            Agricultural energy questions specific to Ontario&rsquo;s farm operations.
          </p>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? '1px solid rgba(15,33,51,0.14)' : 'none',
                borderBottom: '1px solid rgba(15,33,51,0.14)',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} data-gi-resp="faq-trigger" style={{
                  width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '32px 0', textAlign: 'left',
                  display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24, alignItems: 'center',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em',
                    color: 'var(--gi-sage-accent)', fontWeight: 600,
                  }}>Q · {String(i+1).padStart(2, '0')}</span>
                  <h3 style={{
                    font: '500 22px/30px var(--ff-sans)', letterSpacing: '-0.014em',
                    color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
                  }}>{it.q}</h3>
                  <span style={{
                    fontFamily: 'var(--ff-sans)', fontSize: 26, fontWeight: 300,
                    color: 'var(--gi-deep-ink)', justifySelf: 'end',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 260ms cubic-bezier(.2,0,0,1)', lineHeight: 1,
                  }}>+</span>
                </button>
                <div className="gi-faq-answer" data-open={isOpen ? 'true' : 'false'}>
                  <div className="gi-faq-answer-inner" data-gi-resp="faq-answer-inner" style={{
                    padding: isOpen ? '0 0 32px' : '0',
                    transition: 'padding 260ms cubic-bezier(0.4,0,0.2,1)',
                    display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24,
                  }}>
                    <span />
                    <p style={{
                      font: '400 16px/28px var(--ff-sans)',
                      color: 'var(--gi-slate)', margin: 0,
                      textWrap: 'pretty', maxWidth: 820, whiteSpace: 'pre-line',
                    }}>{it.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};


// ============================================================
// AgriClosingCTA — Soft Green
// ============================================================
const AgriClosingCTA = () => (
  <section data-gi-resp="agri-closing-cta" data-screen-label="09 Closing CTA" style={{
    background: 'var(--gi-soft-green)', color: '#fff',
    padding: '128px 0', position: 'relative', overflow: 'hidden',
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', right: -120, top: -120, opacity: 0.08, pointerEvents: 'none',
    }}>
      <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 640, height: 640 }} />
    </div>
    <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow onDark className="gi-eyebrow--gold">Start your assessment</Eyebrow>
        </div>
        <h2 style={{
          font: '500 64px/70px var(--ff-sans)', letterSpacing: '-0.03em',
          color: '#fff', margin: 0, textWrap: 'balance',
        }}>
          Plan around your <span style={{ color: '#D4A24C' }}>season</span>. Not against it.
        </h2>
        <p style={{
          font: '400 19px/30px var(--ff-sans)',
          color: 'rgba(255,255,255,0.86)', margin: '28px 0 44px', maxWidth: 720, textWrap: 'pretty',
        }}>
          A farm assessment identifies what&rsquo;s addressable across drying,
          irrigation, ventilation, refrigeration, and lighting — and what the
          combined picture looks like once REAP and other federal funding are applied.
        </p>
        <div data-gi-resp="agri-closing-cta-buttons" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="/about/contact/">Start your assessment</Button>
          <Button target="_blank" variant="outlineOnDark" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
        </div>
        <p data-gi-resp="agri-closing-cta-no-commitment" style={{
          font: '400 13px/20px var(--ff-sans)',
          color: 'rgba(255,255,255,0.62)', margin: '32px 0 0', fontStyle: 'italic',
        }}>
          No commitment required.
        </p>
      </div>
    </div>
  </section>
);

Object.assign(window, { AgriSubsectors, AgriDiscovery, AgriFAQ, AgriClosingCTA });