// 404 page.
(function () {
  const { Eyebrow, Link } = window.GR;

  function NotFoundPage() {
    return (
      <section style={{ padding: 'calc(var(--nav-h) + 120px) var(--gutter) 160px', minHeight: '70vh' }}>
        <div className="gr-container" style={{ padding: 0 }}>
          <Eyebrow>404</Eyebrow>
          <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
            Page Not Found.
          </h1>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6,
            color: 'rgba(30,27,75,0.72)', maxWidth: 640, marginTop: 24,
          }}>
            The page you&rsquo;re looking for isn&rsquo;t here. Return to the homepage or browse our chemicals, commodities, and logistics operations.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <Link to="/" className="gr-btn gr-btn-primary">Back to Home</Link>
            <Link to="/contact" className="gr-btn gr-btn-ghost-dark">Contact Our Team</Link>
          </div>
        </div>
      </section>
    );
  }

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