// Industries Served — 10 sectors with overview, products, logistics, supply chain support.
(function () {
  const { Reveal, Eyebrow } = window.GR;

  const INDUSTRIES = [
    {
      name: 'Water Treatment',
      overview: 'Supplying disinfection and treatment chemicals to municipal water utilities, wastewater facilities, and industrial water operators throughout Latin America.',
      products: ['Sodium Hypochlorite', 'Calcium Hypochlorite', 'PAC', 'Liquid Chlorine Gas'],
      logistics: 'Bulk tanker, IBC, and cylinder delivery directly to treatment plants. Cold-chain not required.',
      supply: 'Continuous availability through diversified sourcing — supply continuity is critical for water operators and we plan accordingly.',
    },
    {
      name: 'Chemical Manufacturing',
      overview: 'Raw material supply — across both commodities and industrial chemicals — to chemical producers requiring consistent feedstock for continuous production processes.',
      products: ['Caustic Soda', 'Methanol', 'Xylene', 'Ethanol', 'IPA'],
      logistics: 'ISO tank, bulk vessel, and drum shipments coordinated to plant schedules and storage capacity.',
      supply: 'Contracted recurring supply with forward planning to match production demand cycles.',
    },
    {
      name: 'Industrial Cleaning',
      overview: 'Active ingredient and solvent supply to professional cleaning product manufacturers and industrial cleaning operators across LATAM.',
      products: ['LABSA', 'SLES', 'IPA', 'Sodium Hypochlorite', 'Caustic Soda'],
      logistics: 'Drum and IBC deliveries with documentation for industrial-grade material handling.',
      supply: 'Reliable replenishment with proactive inventory planning to avoid production stoppages.',
    },
    {
      name: 'Consumer Goods Manufacturing',
      overview: 'Industrial chemical raw material inputs for household product manufacturing across LATAM consumer goods producers.',
      products: ['SLES', 'LABSA', 'Caustic Soda', 'Ethanol'],
      logistics: 'IBC, drum, and bulk supply aligned with formulation volumes and production runs.',
      supply: 'Long-term supply agreements with major LATAM consumer goods manufacturers.',
    },
    {
      name: 'Detergent Production',
      overview: 'Key surfactants and alkaline supply to detergent formulators and cleaning product manufacturers.',
      products: ['LABSA', 'SLES', 'Caustic Soda Flakes', 'Caustic Soda Liquid'],
      logistics: 'Bulk surfactant and alkaline delivery — IBC and bulk options to match plant infrastructure.',
      supply: 'High-volume contracted supply with consistent quality across batches.',
    },
    {
      name: 'Industrial Processing',
      overview: 'Manufacturing and processing operations requiring reliable commodity and industrial chemical input supply across diverse applications.',
      products: ['Caustic Soda', 'Xylene', 'Methanol', 'IPA', 'Chlorine'],
      logistics: 'Tailored shipment cadences from ISO tank to drum-pack depending on consumption profile.',
      supply: 'Diversified sourcing across continents to insulate operations from regional supply disruption.',
    },
    {
      name: 'Distribution & Wholesale',
      overview: 'Bulk supply to regional chemical distributors and wholesale operators throughout Latin America — reliable, consistent product availability for resale.',
      products: ['Full chemicals & commodities portfolio'],
      logistics: 'Bulk and packaged supply with documentation supporting downstream resale and customs clearance.',
      supply: 'Wholesale-grade availability across product lines with volume pricing.',
    },
    {
      name: 'Sanitation & Hygiene',
      overview: 'Industrial disinfectants and sanitation chemicals to hygiene operators, institutional cleaning services, and facilities management.',
      products: ['Sodium Hypochlorite', 'Calcium Hypochlorite', 'IPA', 'Ethanol'],
      logistics: 'Cylinder, drum, and IBC delivery to operator depots and service hubs.',
      supply: 'Year-round supply continuity for essential hygiene operations.',
    },
    {
      name: 'Paints & Coatings',
      overview: 'Commodity solvent supply to paint manufacturers, coatings formulators, and industrial finishing operations throughout the region.',
      products: ['Xylene', 'Methanol', 'IPA'],
      logistics: 'ISO tank and drum supply matched to formulation runs and inventory cycles.',
      supply: 'Consistent solvent supply with documented purity grades for formulation reliability.',
    },
    {
      name: 'Industrial Supply Chains',
      overview: 'Direct chemical and commodity supply for industrial supply chain operators serving manufacturing, processing, and distribution networks throughout LATAM.',
      products: ['Full portfolio · custom packaging'],
      logistics: 'End-to-end logistics coordination including customs, port handling, and inland distribution.',
      supply: 'Operationally integrated supply with forward planning and inventory buffers.',
    },
  ];

  function IndustriesPage() {
    return (
      <React.Fragment>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 56px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Sectors We Serve</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                The Industries<br />That Move LATAM.
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6,
                color: 'rgba(30,27,75,0.72)', maxWidth: 720, marginTop: 24,
              }}>
                We supply both industrial chemicals and commodities to 10 key sectors across Latin America — from water utilities and chemical manufacturers to distribution and supply chain operators.
              </p>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '24px var(--gutter) 120px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <div className="gr-grid-2" style={{
              display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16,
            }}>
              {INDUSTRIES.map((ind, i) => (
                <Reveal key={ind.name} delay={(i % 4) * 60}>
                  <article
                    onMouseEnter={(e) => {
                      e.currentTarget.style.borderColor = 'var(--color-green)';
                      e.currentTarget.style.boxShadow = 'var(--shadow-card-hover)';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.borderColor = 'rgba(30,27,75,0.12)';
                      e.currentTarget.style.boxShadow = 'none';
                    }}
                    style={{
                      border: '1px solid rgba(30,27,75,0.12)',
                      background: '#fff', padding: 32, height: '100%',
                      transition: 'all 0.32s var(--ease-out)',
                    }}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
                      <span style={{
                        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                        color: 'var(--color-green)', textTransform: 'uppercase',
                      }}>
                        Sector {String(i + 1).padStart(2, '0')} / 10
                      </span>
                    </div>
                    <h3 style={{
                      fontFamily: 'var(--font-display)', fontSize: 32, letterSpacing: '0.02em',
                      textTransform: 'uppercase', color: 'var(--color-navy)',
                      lineHeight: 0.98, margin: '0 0 14px',
                    }}>
                      {ind.name}
                    </h3>
                    <p className="t-body" style={{ margin: '0 0 22px', fontSize: 14.5 }}>{ind.overview}</p>

                    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                      <div>
                        <div style={{
                          fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
                          letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-green)',
                          marginBottom: 8,
                        }}>Products Supplied</div>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                          {ind.products.map((t) => (
                            <span key={t} style={{
                              fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em',
                              padding: '5px 10px', border: '1px solid rgba(30,27,75,0.15)',
                              color: 'var(--color-navy)',
                            }}>{t}</span>
                          ))}
                        </div>
                      </div>
                      <div>
                        <div style={{
                          fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
                          letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-green)',
                          marginBottom: 6,
                        }}>Logistics</div>
                        <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(30,27,75,0.78)', margin: 0, lineHeight: 1.55 }}>
                          {ind.logistics}
                        </p>
                      </div>
                      <div>
                        <div style={{
                          fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
                          letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-green)',
                          marginBottom: 6,
                        }}>Supply Chain Support</div>
                        <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(30,27,75,0.78)', margin: 0, lineHeight: 1.55 }}>
                          {ind.supply}
                        </p>
                      </div>
                    </div>
                  </article>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }

  window.GR = Object.assign(window.GR || {}, { IndustriesPage });
})();