// Competitive Advantages — 5 reasons.
(function () {
  const { Reveal, Eyebrow } = window.GR;

  const ADVS = [
    { num: '01', title: 'Family-Owned Private Capital',
      body: '100% privately funded — no institutional pressure and no short-term shareholder demands. Family ownership means we make long-term decisions, prioritize client relationships over quarterly targets, and move with the agility that larger corporate chemical distributors cannot match. You work directly with decision-makers.' },
    { num: '02', title: 'Port Logistics Management',
      body: 'End-to-end port handling experience across major US and Latin American cargo ports — for both bulk commodity shipments and packaged industrial chemical cargo. We manage shipping coordination, import/export documentation, and customs directly, eliminating the intermediaries that slow most chemical distribution operations.' },
    { num: '03', title: 'LATAM Market Knowledge',
      body: 'Six years of active operations across Latin American industrial markets give us commercial intelligence that no new entrant can replicate. We understand the regulatory environments, industrial buyers, and distribution channels across every major LATAM market — for both commodity procurement and industrial chemicals distribution.' },
    { num: '04', title: 'Certified Suppliers',
      body: 'Every supplier in our network — whether a commodity producer or specialty industrial chemical manufacturer — has been individually vetted for product quality, production capacity, and regulatory compliance. Our clients receive industrial-grade material from manufacturers with documented track records.' },
    { num: '05', title: 'Reliable Supply Chain',
      body: 'Consistent, uninterrupted product availability is our operational standard. Active supply chain management, diversified supplier bases spanning three continents, and proactive demand planning ensure our clients never face supply gaps — whether procuring commodities or specialty industrial inputs.' },
  ];

  function AdvantagesPage() {
    return (
      <React.Fragment>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 48px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Why GR Unity Trading</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                Five Reasons<br />Clients Choose Us.
              </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,
              }}>
                Operational advantages that translate to better pricing, more reliable supply, and faster commercial response — backed by six years of active trade in the Latin American industrial chemicals and commodities market.
              </p>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '24px var(--gutter) 120px' }}>
          <div className="gr-container" style={{ padding: 0 }}>
            {ADVS.map((a) => (
              <Reveal key={a.num} delay={80}>
                <article style={{
                  background: 'var(--color-off-white)',
                  padding: 'clamp(32px, 5vw, 56px)',
                  marginBottom: 24,
                  position: 'relative', overflow: 'hidden',
                  borderLeft: '4px solid var(--color-green)',
                }}>
                  <div aria-hidden="true" style={{
                    position: 'absolute', right: 24, top: -4,
                    fontFamily: 'var(--font-display)',
                    fontSize: 'clamp(140px, 18vw, 240px)',
                    color: 'rgba(30,27,75,0.05)',
                    lineHeight: 1, letterSpacing: '0.02em',
                    pointerEvents: 'none', userSelect: 'none',
                  }}>
                    {a.num}
                  </div>
                  <div style={{ position: 'relative', maxWidth: 760 }}>
                    <div style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
                      color: 'var(--color-green)', marginBottom: 18, textTransform: 'uppercase',
                    }}>
                      Reason {a.num} / 05
                    </div>
                    <h3 style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 'clamp(28px, 4vw, 52px)',
                      letterSpacing: '0.02em', textTransform: 'uppercase',
                      color: 'var(--color-navy)', lineHeight: 1, margin: '0 0 18px',
                    }}>
                      {a.title}
                    </h3>
                    <p className="t-body" style={{ margin: 0, fontSize: 16 }}>{a.body}</p>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>
        </section>
      </React.Fragment>
    );
  }

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