// Industrial Chemicals page — distinct from commodities.
(function () {
  const { useState, useMemo } = React;
  const { Reveal, Eyebrow, Link, ProductCard, CHEMICALS } = window.GR;

  const CATEGORIES = ['All', 'Water Treatment', 'Surfactants', 'Alcohols'];

  const INDUSTRIES_SUPPLIED = [
    'Water Treatment Utilities',
    'Industrial Cleaning Manufacturers',
    'Detergent & Surfactant Producers',
    'Pharmaceutical & Cosmetics',
    'Sanitation & Hygiene Operators',
    'Pulp, Paper & Textile Industry',
  ];

  function ChemicalsPage({ openQuote }) {
    const [filter, setFilter] = useState('All');
    const filtered = useMemo(
      () => (filter === 'All' ? CHEMICALS : CHEMICALS.filter((p) => p.category === filter)),
      [filter]
    );

    return (
      <React.Fragment>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 56px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Industrial Chemicals</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                Specialty Chemical<br />Inputs for Industry.
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6,
                color: 'rgba(30,27,75,0.72)', maxWidth: 760, marginTop: 28,
              }}>
                We distribute specialty industrial chemicals — Sodium Hypochlorite, Calcium Hypochlorite, SLES, LABSA, PAC, and IPA — sourced from certified manufacturers and delivered to industrial buyers across Latin America.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div style={{
                display: 'flex', flexWrap: 'wrap', gap: 24, marginTop: 28,
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
                color: 'var(--color-green)', textTransform: 'uppercase',
              }}>
                <span>● 6 Active Product Lines</span>
                <span>● LATAM Distribution Network</span>
                <span>● Certified Suppliers Only</span>
              </div>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '24px var(--gutter) 72px', background: 'var(--color-off-white)' }}>
          <div className="gr-container-wide gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr',
            gap: 56, padding: 0, paddingTop: 56,
          }}>
            <div>
              <Eyebrow>Product Overview</Eyebrow>
              <Reveal>
                <h2 className="t-h1" style={{ color: 'var(--color-navy)' }}>
                  Industrial-Grade.<br />Specification-Matched.
                </h2>
              </Reveal>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Reveal><p className="t-body">Each product line we distribute is sourced from manufacturers vetted for product quality, production capacity, and regulatory compliance. We supply industrial-grade material with documented specifications — not consumer-grade substitutes.</p></Reveal>
              <Reveal delay={100}><p className="t-body">Concentration grades, packaging, and minimum order quantities are determined per client requirement. We supply drums, IBCs, ISO tanks, and bulk shipments — coordinated with our port logistics operation for reliable delivery into LATAM.</p></Reveal>
              <Reveal delay={200}><p className="t-body">Distribution availability is continuous across our active product portfolio, supported by inventory planning and diversified sourcing to prevent the supply gaps that disrupt industrial operations.</p></Reveal>
            </div>
          </div>
        </section>

        <div style={{
          position: 'sticky', top: 'var(--nav-h)', zIndex: 20,
          background: '#fff', borderBottom: '1px solid var(--color-green)',
          padding: '12px 0',
        }}>
          <div className="gr-container-wide" style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {CATEGORIES.map((f) => (
              <button
                key={f} type="button" onClick={() => setFilter(f)}
                style={{
                  background: 'transparent', border: 0, padding: '6px 4px',
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
                  letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer',
                  color: filter === f ? 'var(--color-green)' : 'rgba(30,27,75,0.55)',
                  borderBottom: filter === f ? '1px solid var(--color-green)' : '1px solid transparent',
                  transition: 'all 0.18s var(--ease-out)',
                }}
              >
                {f}
              </button>
            ))}
          </div>
        </div>

        <section style={{ padding: '56px var(--gutter)' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <div className="gr-grid-3" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
            }}>
              {filtered.map((p, i) => (
                <ProductCard key={p.name} p={p} i={i} onQuote={openQuote} kind="chemical" />
              ))}
            </div>
          </div>
        </section>

        <section style={{ padding: '96px var(--gutter)', background: 'var(--color-off-white)' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Industries Supplied</Eyebrow>
            <Reveal>
              <h2 className="t-h1" style={{ color: 'var(--color-navy)', marginBottom: 28 }}>
                Where Our Industrial<br />Chemicals Are Used.
              </h2>
            </Reveal>
            <div className="gr-grid-3" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
            }}>
              {INDUSTRIES_SUPPLIED.map((label, i) => (
                <Reveal key={label} delay={i * 50}>
                  <div style={{
                    background: '#fff', border: '1px solid rgba(30,27,75,0.1)',
                    padding: 22, display: 'flex', alignItems: 'center', gap: 14,
                  }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--color-green)' }}>
                      {String(i + 1).padStart(2, '0')}
                    </span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500, color: 'var(--color-navy)' }}>
                      {label}
                    </span>
                  </div>
                </Reveal>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <Link to="/industries" className="gr-btn gr-btn-ghost-dark">
                View All Industries Served →
              </Link>
            </div>
          </div>
        </section>

        <section style={{ padding: '88px var(--gutter)', background: '#fff' }}>
          <div className="gr-container gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48,
            alignItems: 'center', padding: 0,
          }}>
            <div>
              <Eyebrow>Supply Information</Eyebrow>
              <Reveal>
                <h2 className="t-h1" style={{ color: 'var(--color-navy)' }}>
                  Need a Full Specification Sheet?
                </h2>
              </Reveal>
              <Reveal delay={120}>
                <p className="t-body" style={{ marginTop: 18, fontSize: 16, maxWidth: 600 }}>
                  Detailed concentration grades, packaging options, minimum order quantities, technical data sheets, and delivery lead times available upon request for every product line in our industrial chemicals portfolio.
                </p>
              </Reveal>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button type="button" onClick={openQuote} className="gr-btn gr-btn-primary">
                Request Spec Sheet →
              </button>
              <Link to="/commodities" className="gr-btn gr-btn-ghost-dark">
                See Commodities Portfolio
              </Link>
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }

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