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

  const PRINCIPLES = [
    ['Efficiency', 'Lean operations across sourcing, logistics, and distribution — minimizing cost and friction.'],
    ['Reliable Supply', 'Uninterrupted product availability through diversified sourcing and forward planning.'],
    ['Quality Assurance', 'Vetted suppliers, documented specifications, and consistent product quality.'],
    ['Strategic Partnerships', 'Long-term relationships with manufacturers, suppliers, and industrial clients.'],
    ['International Market Growth', 'Active expansion of our supplier and client network across the Americas, Europe, and Asia.'],
    ['Logistics Excellence', 'End-to-end logistics management — from origin port to final delivery — as an operational discipline.'],
  ];

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

  function MissionPage() {
    return (
      <React.Fragment>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 64px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Our Purpose</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                The Bridge Between<br />Producers <span style={{ color: 'var(--color-green)' }}>&amp;</span> 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: 720, marginTop: 24,
              }}>
                We exist to connect certified global manufacturers with the Latin American industrial market — through reliable sourcing, professional logistics, and long-term commercial relationships.
              </p>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '56px var(--gutter)' }}>
          <div className="gr-container gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, padding: 0,
          }}>
            <Eyebrow>Mission</Eyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              <Reveal>
                <StatementCard accentColor="var(--color-navy)">
                  To provide a comprehensive range of chemical raw material and commodity solutions through strong relationships with reliable suppliers and manufacturers across the Americas, Europe, and Asia — while ensuring efficient logistics, consistent supply, and dependable service to industrial clients throughout Latin America.
                </StatementCard>
              </Reveal>
              <Reveal delay={120}>
                <p className="t-body">
                  Our mission applies equally to the industrial chemicals we distribute and the commodities we trade. Whether we are moving bulk Methanol across international trade routes or delivering Sodium Hypochlorite to a water treatment facility in Colombia, the standard is the same: reliable supply, consistent quality, transparent commercial operations.
                </p>
              </Reveal>
            </div>
          </div>
        </section>

        <section style={{ padding: '64px var(--gutter) 96px', background: 'var(--color-off-white)' }}>
          <div className="gr-container gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, padding: 0,
          }}>
            <Eyebrow>Vision</Eyebrow>
            <Reveal>
              <StatementCard accentColor="var(--color-green)">
                To become a leading bridge between global manufacturers and the Latin American industrial market — creating long-term value through reliable sourcing, logistics coordination, and international trade partnerships across both industrial chemicals and chemical commodities.
              </StatementCard>
            </Reveal>
          </div>
        </section>

        <section className="bg-hex" style={{ padding: '112px var(--gutter)', background: 'var(--color-navy)', color: '#fff' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>The Bridge</Eyebrow>
            <Reveal>
              <h2 className="t-display-3" style={{ color: '#fff' }}>
                How We Connect<br />Producer to Industry.
              </h2>
            </Reveal>

            <div
              className="gr-grid-2-split"
              style={{
                marginTop: 56,
                display: 'grid', gridTemplateColumns: '1fr 1.3fr 1fr',
                gap: 24, alignItems: 'stretch',
              }}
            >
              <Reveal>
                <div style={{
                  background: 'var(--color-navy-dark)',
                  border: '1px solid rgba(255,255,255,0.15)',
                  padding: 28, minHeight: 220,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--color-green)' }}>
                    01 / Origin
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, letterSpacing: '0.04em', color: '#fff', lineHeight: 1 }}>Producer</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.72)', marginTop: 8 }}>
                      Certified global manufacturer
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--color-green)', marginTop: 10 }}>
                      Americas · Europe · Asia
                    </div>
                  </div>
                </div>
              </Reveal>

              <Reveal delay={200}>
                <div style={{
                  background: 'var(--color-green)', color: 'var(--color-navy)',
                  padding: 28, minHeight: 260,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--color-navy)' }}>
                    02 / Bridge
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '0.04em', lineHeight: 1 }}>
                      GR Unity<br />Trading LLC
                    </div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(30,27,75,0.78)', marginTop: 10 }}>
                      Industrial chemicals distribution<br />&amp; commodities trading
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', marginTop: 10 }}>
                      Florida, USA · 25.7617° N
                    </div>
                  </div>
                </div>
              </Reveal>

              <Reveal delay={400}>
                <div style={{
                  background: 'var(--color-navy-dark)',
                  border: '1px solid rgba(255,255,255,0.15)',
                  padding: 28, minHeight: 220,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--color-green)' }}>
                    03 / Destination
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, letterSpacing: '0.04em', color: '#fff', lineHeight: 1 }}>Industry</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.72)', marginTop: 8 }}>
                      LATAM end client
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--color-green)', marginTop: 10 }}>
                      Latin America
                    </div>
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        </section>

        <section style={{ padding: '112px var(--gutter)' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Core Principles</Eyebrow>
            <Reveal>
              <h2 className="t-display-3" style={{ color: 'var(--color-navy)', marginBottom: 48 }}>
                Six Principles. One Standard.
              </h2>
            </Reveal>
            <div className="gr-grid-3" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
            }}>
              {PRINCIPLES.map(([title, body], i) => (
                <Reveal key={title} delay={i * 60}>
                  <div style={{
                    background: 'var(--color-off-white)',
                    borderLeft: '4px solid var(--color-green)',
                    padding: 26, height: '100%',
                  }}>
                    <div style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
                      color: 'var(--color-green)', marginBottom: 14,
                    }}>0{i + 1}</div>
                    <h3 style={{
                      fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '0.02em',
                      textTransform: 'uppercase', color: 'var(--color-navy)',
                      lineHeight: 1, margin: '0 0 10px',
                    }}>{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 || {}, { MissionPage });
})();