// Commodities page — distinct from industrial chemicals.
(function () {
  const { Reveal, Eyebrow, Link, ProductCard, COMMODITIES } = window.GR;

  const CAPABILITIES = [
    { num: '01', tag: 'International Sourcing', title: 'Global Producer Network',
      body: 'Active commercial relationships with certified chemical commodity producers across the Americas, Europe, and Asia — enabling competitive sourcing across cycles and consistent supply continuity.' },
    { num: '02', tag: 'Trade Coordination', title: 'Bulk Trade Operations',
      body: 'We coordinate commercial trade operations at scale — contract negotiation, pricing structures, shipment scheduling, and quality verification across both spot and contracted volumes.' },
    { num: '03', tag: 'Supplier Relationships', title: 'Long-Term Producer Partnerships',
      body: 'Long-standing relationships with major producers give us preferential access, reliable allocation, and the ability to move volume on commercial terms that newer entrants cannot match.' },
    { num: '04', tag: 'LATAM Distribution', title: 'Regional Market Placement',
      body: 'Commodity volumes are placed directly into Latin American industry — chemical manufacturers, processing plants, distributors — through established commercial channels across every major LATAM market.' },
    { num: '05', tag: 'Trade Operations', title: 'Import & Export Management',
      body: 'Full management of commodity import/export documentation, customs coordination, tariff classification, and chemical regulatory compliance across multiple LATAM jurisdictions.' },
    { num: '06', tag: 'Port Logistics', title: 'Bulk Cargo Operations',
      body: 'Direct port operations experience handling ISO tank shipments, bulk vessels, drum cargo, and containerized chemical commodities at major US and LATAM ports.' },
  ];

  function CommoditiesPage({ openQuote }) {
    return (
      <React.Fragment>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 56px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Commodities</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                Bulk Chemical<br />Commodities Trading.
              </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 trade bulk chemical commodities — Caustic Soda, Methanol, Ethanol, Xylene, Liquid Chlorine Gas — sourced at commercial scale from certified global producers and placed into Latin American industry through our active distribution channels.
              </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 Commodity Lines</span>
                <span>● Bulk-Traded, Globally Priced</span>
                <span>● 3 Continents Sourced</span>
              </div>
            </Reveal>
          </div>
        </section>

        <section className="bg-hex" style={{ padding: '88px var(--gutter)', background: 'var(--color-navy)', color: '#fff' }}>
          <div className="gr-container-wide gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, padding: 0,
          }}>
            <div>
              <Eyebrow>How We Trade</Eyebrow>
              <Reveal>
                <h2 className="t-h1" style={{ color: '#fff' }}>
                  Commercial Scale.<br />Global Sourcing.
                </h2>
              </Reveal>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Reveal>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', margin: 0 }}>
                  Chemical commodities are standardized bulk substances traded at global market prices. Trading them competitively requires three things: deep producer relationships, working port logistics infrastructure, and active LATAM commercial channels. We operate all three.
                </p>
              </Reveal>
              <Reveal delay={100}>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', margin: 0 }}>
                  Our trade operations span ISO tank shipments, drum cargo, and bulk vessel movements — coordinated end-to-end from origin port through customs into final LATAM placement. Documentation, regulatory compliance, and customs handling are managed directly by our team.
                </p>
              </Reveal>
              <Reveal delay={200}>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', margin: 0 }}>
                  Volume terms, pricing structures, and shipment cadences are configured per client — for both contracted recurring supply and spot transactions.
                </p>
              </Reveal>
            </div>
          </div>
        </section>

        <section style={{ padding: '88px var(--gutter)', background: '#fff' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Commodity Portfolio</Eyebrow>
            <Reveal>
              <h2 className="t-h1" style={{ color: 'var(--color-navy)', marginBottom: 28 }}>
                Six Commodity Lines.<br />Continuous Availability.
              </h2>
            </Reveal>
            <div className="gr-grid-3" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
            }}>
              {COMMODITIES.map((p, i) => (
                <ProductCard key={p.name} p={p} i={i} onQuote={openQuote} kind="commodity" />
              ))}
            </div>
          </div>
        </section>

        <section style={{ padding: '96px var(--gutter)', background: 'var(--color-off-white)' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Trade Capabilities</Eyebrow>
            <Reveal>
              <h2 className="t-h1" style={{ color: 'var(--color-navy)', marginBottom: 36 }}>
                The Operational Stack<br />Behind Each Trade.
              </h2>
            </Reveal>
            <div className="gr-grid-3" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
            }}>
              {CAPABILITIES.map((c, i) => (
                <Reveal key={c.num} delay={i * 60}>
                  <article style={{
                    background: '#fff', padding: 28,
                    border: '1px solid rgba(30,27,75,0.1)',
                    height: '100%', display: 'flex', flexDirection: 'column',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22 }}>
                      <span style={{
                        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em',
                        color: 'var(--color-green)', textTransform: 'uppercase',
                      }}>// {c.tag}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(30,27,75,0.4)' }}>{c.num}</span>
                    </div>
                    <h3 style={{
                      fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '0.02em',
                      textTransform: 'uppercase', color: 'var(--color-navy)',
                      lineHeight: 1, margin: '0 0 12px',
                    }}>{c.title}</h3>
                    <p className="t-body" style={{ margin: 0, fontSize: 14 }}>{c.body}</p>
                  </article>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        <section style={{ padding: '88px var(--gutter)' }}>
          <div className="gr-container gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48,
            alignItems: 'center', padding: 0,
          }}>
            <div>
              <Eyebrow>Get a Quote</Eyebrow>
              <Reveal>
                <h2 className="t-h1" style={{ color: 'var(--color-navy)' }}>
                  Need Bulk Commodity Pricing?
                </h2>
              </Reveal>
              <Reveal delay={120}>
                <p className="t-body" style={{ marginTop: 18, fontSize: 16, maxWidth: 600 }}>
                  Send us your target product, volume, and destination — we&rsquo;ll come back with pricing, lead times, and shipment options for your commodity requirement.
                </p>
              </Reveal>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button type="button" onClick={openQuote} className="gr-btn gr-btn-primary">
                Request Commodity Quote →
              </button>
              <Link to="/chemicals" className="gr-btn gr-btn-ghost-dark">
                See Industrial Chemicals
              </Link>
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }

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