// About page.
(function () {
  const { Reveal, Eyebrow } = window.GR;

  const VALUES = [
    ['Reliability', 'We deliver what we commit to. Consistent product availability and on-time logistics are non-negotiable — whether we are trading a commodity or distributing an industrial chemical.'],
    ['Transparency', 'Open communication with clients and suppliers at every stage of the commercial and logistics process — pricing, lead times, documentation, and execution status.'],
    ['Long-Term Partnerships', 'We build lasting relationships, not transactional exchanges. Clients and suppliers stay because we deliver consistent value over time.'],
    ['Operational Efficiency', 'Streamlined processes across sourcing, logistics, and distribution — minimizing cost, friction, and time-to-market across both product categories.'],
    ['Supply Consistency', 'Reliable, uninterrupted product availability through diversified supplier networks and proactive supply chain planning.'],
    ['International Trade Expertise', 'Deep working knowledge of cross-border chemical trade regulations, port operations, and LATAM commercial dynamics across both commodity and specialty chemical categories.'],
  ];

  const REGIONS = [
    ['North America', 'Headquarters & Operations Hub'],
    ['South America', 'Primary Distribution Market'],
    ['Europe', 'Certified Supplier Network'],
    ['Asia', 'Certified Supplier Network'],
  ];

  function PullQuote({ children }) {
    return (
      <blockquote style={{
        borderLeft: '4px solid var(--color-navy)',
        padding: '8px 0 8px 28px', margin: 0,
        fontFamily: 'var(--font-body)', fontSize: 22, lineHeight: 1.5,
        color: 'var(--color-navy)', fontWeight: 500,
      }}>
        {children}
      </blockquote>
    );
  }

  function AboutPage() {
    return (
      <React.Fragment>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 64px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Who We Are</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                A Family Built<br />on Reliability.
              </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: 28,
              }}>
                Six years. Three continents. Industrial chemicals distribution and chemical commodities trading — under one trusted name, operated from Florida with reach across Latin America.
              </p>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '56px var(--gutter)' }}>
          <div className="gr-container gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56, padding: 0,
          }}>
            <Eyebrow>Operating Model</Eyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <Reveal><p className="t-body">GR Unity Trading LLC is a privately funded, family-owned company dedicated to the commercialization and distribution of industrial chemicals and commodities throughout Latin America. Headquartered in Florida, USA.</p></Reveal>
              <Reveal delay={100}><p className="t-body">We are not a marketplace, broker, or pass-through intermediary. We are an active trading and distribution company that manages the full commercial and logistical cycle — from international sourcing through final delivery to industrial buyers.</p></Reveal>
              <Reveal delay={200}><p className="t-body">Our dual operational capability — running industrial chemicals distribution and chemical commodities trading under one team — gives our clients a uniquely comprehensive supply partner for both categories of chemical raw material.</p></Reveal>
            </div>
          </div>
        </section>

        <section style={{ padding: '88px var(--gutter)', background: 'var(--color-off-white)' }}>
          <div className="gr-container" style={{ padding: 0 }}>
            <Eyebrow>Our Experience</Eyebrow>
            <Reveal>
              <PullQuote>
                With more than 6 years of experience in industrial raw materials and international trade, GR Unity Trading LLC has developed operational knowledge across sourcing, logistics, import/export operations, supplier coordination, and LATAM market distribution. We understand the operational, regulatory, and commercial demands of cross-border chemical trade — and have built the supplier relationships and logistics infrastructure to execute reliably at scale.
              </PullQuote>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '96px var(--gutter)' }}>
          <div className="gr-container gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, padding: 0,
          }}>
            <div>
              <Eyebrow>What Sets Us Apart</Eyebrow>
              <Reveal>
                <h2 className="t-h1" style={{ color: 'var(--color-navy)' }}>
                  Industrial Chemicals<br /><span style={{ color: 'var(--color-green)' }}>&amp;</span> Commodities — Both.
                </h2>
              </Reveal>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Reveal><p className="t-body">These are two distinct categories of chemical supply — and GR Unity Trading operates professionally in both, with separate sourcing, pricing, and logistics workflows.</p></Reveal>
              <Reveal delay={80}>
                <div style={{ background: 'var(--color-off-white)', padding: 24, borderLeft: '4px solid var(--color-navy)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--color-green)', marginBottom: 10, textTransform: 'uppercase' }}>Industrial Chemicals</div>
                  <p className="t-body" style={{ margin: 0 }}>Specialty chemical inputs supplied directly to manufacturers and industrial operators: Sodium Hypochlorite, Calcium Hypochlorite, SLES, LABSA, PAC, IPA. These require technical application knowledge and specification matching for industrial clients.</p>
                </div>
              </Reveal>
              <Reveal delay={160}>
                <div style={{ background: 'var(--color-off-white)', padding: 24, borderLeft: '4px solid var(--color-green)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--color-green)', marginBottom: 10, textTransform: 'uppercase' }}>Commodities</div>
                  <p className="t-body" style={{ margin: 0 }}>Standardized bulk substances traded at global market prices: Methanol, Ethanol, Caustic Soda, Xylene, Liquid Chlorine Gas. High-volume, internationally priced — requiring deep market knowledge and port logistics infrastructure to trade competitively.</p>
                </div>
              </Reveal>
              <Reveal delay={240}><p className="t-body">Most distributors operate in one or the other. We serve both — making us a comprehensive chemical supply partner for Latin American industry.</p></Reveal>
            </div>
          </div>
        </section>

        <section className="bg-hex" style={{ padding: '96px var(--gutter)', background: 'var(--color-navy)', color: '#fff' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Global Reach</Eyebrow>
            <Reveal>
              <h2 className="t-display-3" style={{ color: '#fff' }}>
                Operating Across 3 Continents
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6,
                color: 'rgba(255,255,255,0.78)', maxWidth: 680, marginTop: 24,
              }}>
                We collaborate with manufacturers and suppliers across North America, South America, Europe, and Asia — and distribute throughout Latin America with operational coverage of every major industrial market in the region.
              </p>
            </Reveal>
            <div className="gr-grid-4" style={{
              marginTop: 48,
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
            }}>
              {REGIONS.map((r, i) => (
                <Reveal key={r[0]} delay={i * 80}>
                  <div style={{ borderTop: '1px solid var(--color-green)', paddingTop: 16 }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--color-green)', marginBottom: 12 }}>
                      {String(i + 1).padStart(2, '0')} / 04
                    </div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, letterSpacing: '0.02em', textTransform: 'uppercase', color: '#fff', lineHeight: 1 }}>
                      {r[0]}
                    </div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 10 }}>
                      {r[1]}
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        <section style={{ padding: '112px var(--gutter)' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>What We Stand For</Eyebrow>
            <Reveal>
              <h2 className="t-display-3" style={{ color: 'var(--color-navy)', marginBottom: 48 }}>
                Six Values.<br />Non-Negotiable.
              </h2>
            </Reveal>
            <div className="gr-grid-3" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
            }}>
              {VALUES.map(([title, body], i) => (
                <Reveal key={title} delay={i * 60}>
                  <div style={{
                    background: 'var(--color-off-white)', padding: 28,
                    borderLeft: '4px solid var(--color-green)', height: '100%',
                  }}>
                    <div style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
                      color: 'var(--color-green)', marginBottom: 16,
                    }}>0{i + 1}</div>
                    <h3 style={{
                      fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '0.02em',
                      textTransform: 'uppercase', color: 'var(--color-navy)',
                      lineHeight: 1, margin: '0 0 12px',
                    }}>{title}</h3>
                    <p className="t-body" style={{ margin: 0, fontSize: 14 }}>{body}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }

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