// Logistics & Distribution page — 6 numbered steps + the redesigned Port Lanes section.
(function () {
  const { Reveal, Eyebrow, PortLanes } = window.GR;

  const STEPS = [
    { num: '01', tag: 'International Sourcing', title: 'Global Supplier Network',
      body: 'We identify, vet, and maintain active supplier relationships with certified manufacturers across North America, South America, Europe, and Asia — sourcing both chemical commodities at globally competitive prices and specialty industrial chemicals that meet client technical specifications. Quality certification, supply reliability, and commercial terms drive every supplier we onboard.',
      coverage: '3 Continents · 4 Regions · Vetted Supplier Network' },
    { num: '02', tag: 'Port Logistics', title: 'Port Logistics Management',
      body: 'GR Unity Trading manages port operations directly — coordinating freight, cargo documentation, container management, and port handling at both origin and destination ports for bulk chemical commodities and packaged industrial chemicals alike. Our hands-on port experience translates to faster delivery and fewer logistical surprises.',
      coverage: '7 Active LATAM Ports · US Port Operations · Full Cargo Documentation' },
    { num: '03', tag: 'Trade Compliance', title: 'Import & Export Coordination',
      body: 'Full management of import and export processes — including customs documentation, regulatory compliance for chemical substances, tariff classification, and government agency coordination across multiple countries. Chemical commodities and industrial chemicals each carry distinct regulatory requirements; we manage both.',
      coverage: 'Multi-Country Compliance · Chemical Regulatory Management' },
    { num: '04', tag: 'LATAM Network', title: 'LATAM Distribution',
      body: 'Active distribution network across Latin America serving industrial manufacturers, chemical distributors, and large-scale commercial operators. We manage regional delivery logistics for both commodity volume shipments and specialty industrial chemical supply — coordinated against client demand cycles.',
      coverage: 'Colombia · Argentina · Brazil · Peru · Mexico · Panama' },
    { num: '05', tag: 'Supplier Coordination', title: 'Supplier Management',
      body: 'Long-term supplier partnerships built on performance, reliability, and mutual commercial value — across both commodity chemical producers and specialty industrial chemical manufacturers. We manage compliance documentation, quality control, pricing negotiations, and ongoing relationship management for the full supplier base.',
      coverage: 'Americas · Europe · Asia · Certified Partners Only' },
    { num: '06', tag: 'Supply Planning', title: 'Supply Chain Management',
      body: 'Proactive supply chain planning to ensure product availability ahead of client demand — whether managing commodity price cycles or maintaining consistent industrial chemical supply for manufacturing clients. We eliminate supply disruptions through forward planning and diversified sourcing.',
      coverage: 'Continuous Supply Planning · Demand Coordination' },
  ];

  function LogisticsPage() {
    return (
      <React.Fragment>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 56px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>How We Operate</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                End-to-End<br />Logistics Management.
              </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,
              }}>
                From supplier origin to final client delivery — we manage every link in the supply chain for both industrial chemicals and commodities. Sourcing, port operations, customs, regional distribution, and supplier coordination, all under one team.
              </p>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '16px var(--gutter) 96px' }}>
          <div className="gr-container" style={{ padding: 0 }}>
            {STEPS.map((s) => (
              <Reveal key={s.num} delay={50}>
                <div className="gr-grid-2-split" style={{
                  display: 'grid', gridTemplateColumns: '1fr 1.5fr',
                  gap: 48, alignItems: 'start',
                  padding: '40px 0',
                  borderBottom: '1px solid rgba(30,27,75,0.1)',
                }}>
                  <div>
                    <div style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 'clamp(72px, 8vw, 128px)',
                      lineHeight: 0.9, color: 'var(--color-navy)', letterSpacing: '0.02em',
                    }}>
                      {s.num}<span style={{ color: 'var(--color-green)' }}>.</span>
                    </div>
                    <div style={{
                      marginTop: 10, fontFamily: 'var(--font-mono)', fontSize: 11,
                      letterSpacing: '0.22em', color: 'var(--color-green)',
                      textTransform: 'uppercase',
                    }}>// {s.tag}</div>
                  </div>
                  <div>
                    <h3 style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 'clamp(28px, 3.6vw, 44px)',
                      letterSpacing: '0.02em', textTransform: 'uppercase',
                      color: 'var(--color-navy)', lineHeight: 1, margin: '0 0 16px',
                    }}>{s.title}</h3>
                    <p className="t-body" style={{ margin: '0 0 20px', fontSize: 15.5 }}>{s.body}</p>
                    <div style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
                      color: 'var(--color-navy)', textTransform: 'uppercase',
                      padding: '12px 16px', borderLeft: '4px solid var(--color-green)',
                      background: 'var(--color-off-white)',
                    }}>
                      <span style={{ color: 'var(--color-green)' }}>Coverage / </span>
                      {s.coverage}
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </section>

        <PortLanes />
      </React.Fragment>
    );
  }

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