// Active Port Lanes — clean operational trade-lane table.
(function () {
  const { useState } = React;
  const { Reveal, Eyebrow } = window.GR;

  const INBOUND_LANES = [
    { code: 'RTM → MIA', origin: 'Rotterdam', originRegion: 'Netherlands · Europe', destination: 'Miami, FL', destinationRegion: 'USA HQ', cargo: 'Commodities · Bulk', cadence: 'Recurring' },
    { code: 'SHA → MIA', origin: 'Shanghai',  originRegion: 'China · Asia Pacific',   destination: 'Miami, FL', destinationRegion: 'USA HQ', cargo: 'Industrial Chemicals', cadence: 'Recurring' },
    { code: 'HOU → MIA', origin: 'Houston',   originRegion: 'Texas · USA',            destination: 'Miami, FL', destinationRegion: 'USA HQ', cargo: 'Commodities · Bulk', cadence: 'Continuous' },
  ];

  const OUTBOUND_LANES = [
    { code: 'MIA → VER', origin: 'Miami, FL', originRegion: 'USA HQ', destination: 'Veracruz',     destinationRegion: 'Mexico',    cargo: 'Mixed Portfolio', cadence: 'Recurring' },
    { code: 'MIA → PTY', origin: 'Miami, FL', originRegion: 'USA HQ', destination: 'Panama City',  destinationRegion: 'Panama',    cargo: 'Industrial Chemicals', cadence: 'Recurring' },
    { code: 'MIA → CTG', origin: 'Miami, FL', originRegion: 'USA HQ', destination: 'Cartagena',    destinationRegion: 'Colombia',  cargo: 'Mixed Portfolio', cadence: 'Continuous' },
    { code: 'MIA → CLL', origin: 'Miami, FL', originRegion: 'USA HQ', destination: 'Callao',       destinationRegion: 'Peru',      cargo: 'Commodities · Bulk', cadence: 'Recurring' },
    { code: 'MIA → SSZ', origin: 'Miami, FL', originRegion: 'USA HQ', destination: 'Santos',       destinationRegion: 'Brazil',    cargo: 'Mixed Portfolio', cadence: 'Recurring' },
    { code: 'MIA → BUE', origin: 'Miami, FL', originRegion: 'USA HQ', destination: 'Buenos Aires', destinationRegion: 'Argentina', cargo: 'Industrial Chemicals', cadence: 'Recurring' },
  ];

  const REGIONS_GLANCE = [
    { code: 'NA', label: 'North America',  detail: 'Florida HQ · US ports · Mexico' },
    { code: 'CA', label: 'Central America', detail: 'Panama · Caribbean corridor' },
    { code: 'SA', label: 'South America',  detail: 'Colombia · Peru · Brazil · Argentina' },
    { code: 'EU', label: 'Europe',          detail: 'Netherlands · Supplier sourcing' },
    { code: 'AS', label: 'Asia',            detail: 'China · Supplier sourcing' },
  ];

  function LaneRow({ lane, direction, hovered, setHovered }) {
    const isHovered = hovered === lane.code;
    const accent = direction === 'inbound' ? 'rgba(109,179,63,0.5)' : 'var(--color-green)';
    return (
      <div
        onMouseEnter={() => setHovered(lane.code)}
        onMouseLeave={() => setHovered(null)}
        style={{
          display: 'grid',
          gridTemplateColumns: '120px 1fr 1fr 1fr 120px',
          alignItems: 'center', gap: 16,
          padding: '18px 20px',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
          background: isHovered ? 'rgba(109,179,63,0.06)' : 'transparent',
          transition: 'background 0.18s var(--ease-out)',
        }}
      >
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.18em', color: 'var(--color-green)',
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, display: 'inline-block' }} />
          {lane.code}
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: '#fff' }}>
            {lane.origin}
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em',
            color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginTop: 3,
          }}>
            {lane.originRegion}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: '#fff' }}>
            {lane.destination}
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em',
            color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginTop: 3,
          }}>
            {lane.destinationRegion}
          </div>
        </div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.78)' }}>
          {lane.cargo}
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--color-green)', textAlign: 'right',
        }}>
          {lane.cadence}
        </div>
      </div>
    );
  }

  function MobileLaneCard({ lane, direction }) {
    const accent = direction === 'inbound' ? 'rgba(109,179,63,0.5)' : 'var(--color-green)';
    return (
      <div style={{
        border: '1px solid rgba(255,255,255,0.1)',
        background: 'var(--color-navy-dark)', padding: 18,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.18em', color: 'var(--color-green)', marginBottom: 14,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent }} />
          {lane.code}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.45)', textTransform: 'uppercase', marginBottom: 4 }}>Origin</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: '#fff' }}>{lane.origin}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginTop: 2 }}>{lane.originRegion}</div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.45)', textTransform: 'uppercase', marginBottom: 4 }}>Destination</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: '#fff' }}>{lane.destination}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginTop: 2 }}>{lane.destinationRegion}</div>
          </div>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.78)' }}>
            {lane.cargo}
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
            letterSpacing: '0.18em', color: 'var(--color-green)', textTransform: 'uppercase',
          }}>
            {lane.cadence}
          </div>
        </div>
      </div>
    );
  }

  function PortLanes() {
    const [hovered, setHovered] = useState(null);
    const [tab, setTab] = useState('all');

    const visible = {
      all: [...INBOUND_LANES, ...OUTBOUND_LANES],
      inbound: INBOUND_LANES,
      outbound: OUTBOUND_LANES,
    }[tab];

    return (
      <section
        className="bg-hex"
        style={{
          padding: '112px var(--gutter)',
          background: 'var(--color-navy)', color: '#fff',
        }}
      >
        <div className="gr-container-wide" style={{ padding: 0 }}>
          <Eyebrow>Active Port Lanes</Eyebrow>
          <div
            className="gr-grid-2-split"
            style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'end' }}
          >
            <Reveal>
              <h2 className="t-display-3" style={{ color: '#fff' }}>
                Trade Routes<br />Connecting LATAM.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6,
                color: 'rgba(255,255,255,0.78)', margin: 0,
              }}>
                Active trade corridors moving chemicals and commodities between our Florida hub, certified suppliers in Europe and Asia, and industrial buyers across Latin America. Each lane is operated end-to-end — origin port through customs through final delivery.
              </p>
            </Reveal>
          </div>

          {/* Regional coverage strip */}
          <div
            className="gr-grid-5"
            style={{
              marginTop: 48,
              display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
              gap: 0,
              borderTop: '1px solid rgba(109,179,63,0.35)',
              borderBottom: '1px solid rgba(109,179,63,0.35)',
            }}
          >
            {REGIONS_GLANCE.map((r, i) => (
              <Reveal key={r.code} delay={i * 60}
                style={{
                  padding: '20px 18px',
                  borderRight: i < REGIONS_GLANCE.length - 1 ? '1px solid rgba(109,179,63,0.18)' : 'none',
                }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--color-green)', textTransform: 'uppercase', marginBottom: 8 }}>
                  {r.code}
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, letterSpacing: '0.04em', color: '#fff', lineHeight: 1, marginBottom: 8 }}>
                  {r.label}
                </div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.4 }}>
                  {r.detail}
                </div>
              </Reveal>
            ))}
          </div>

          {/* Tabs */}
          <div style={{ display: 'flex', gap: 24, alignItems: 'center', margin: '40px 0 18px', flexWrap: 'wrap' }}>
            {[
              ['all', 'All Lanes', INBOUND_LANES.length + OUTBOUND_LANES.length],
              ['inbound', 'Supplier Inbound', INBOUND_LANES.length],
              ['outbound', 'LATAM Outbound', OUTBOUND_LANES.length],
            ].map(([k, label, count]) => (
              <button
                key={k} type="button" onClick={() => setTab(k)}
                style={{
                  background: 'transparent', border: 0, padding: '8px 0',
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                  letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer',
                  color: tab === k ? 'var(--color-green)' : 'rgba(255,255,255,0.55)',
                  borderBottom: tab === k ? '1px solid var(--color-green)' : '1px solid transparent',
                  transition: 'all 0.18s var(--ease-out)',
                }}
              >
                {label} <span style={{ color: tab === k ? 'var(--color-green)' : 'rgba(255,255,255,0.4)', marginLeft: 4 }}>({count})</span>
              </button>
            ))}
          </div>

          {/* Desktop table */}
          <div className="port-lanes__table" style={{
            border: '1px solid rgba(109,179,63,0.2)',
            background: 'var(--color-navy-dark)',
          }}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '120px 1fr 1fr 1fr 120px',
              gap: 16, padding: '14px 20px',
              background: 'rgba(0,0,0,0.25)',
              borderBottom: '1px solid rgba(109,179,63,0.25)',
              fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--color-green)',
            }}>
              <div>Lane</div>
              <div>Origin</div>
              <div>Destination</div>
              <div>Cargo</div>
              <div style={{ textAlign: 'right' }}>Cadence</div>
            </div>
            {visible.map((lane) => {
              const isInbound = INBOUND_LANES.includes(lane);
              return (
                <LaneRow key={lane.code} lane={lane}
                  direction={isInbound ? 'inbound' : 'outbound'}
                  hovered={hovered} setHovered={setHovered} />
              );
            })}
          </div>

          {/* Mobile cards */}
          <div className="port-lanes__cards" style={{
            display: 'none', flexDirection: 'column', gap: 12,
          }}>
            {visible.map((lane) => {
              const isInbound = INBOUND_LANES.includes(lane);
              return (
                <MobileLaneCard key={lane.code} lane={lane}
                  direction={isInbound ? 'inbound' : 'outbound'} />
              );
            })}
          </div>

          {/* Stat strip */}
          <div style={{
            marginTop: 32, padding: '18px 20px',
            border: '1px solid rgba(109,179,63,0.2)',
            background: 'var(--color-navy-dark)',
            display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 14,
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)',
          }}>
            <span><span style={{ color: 'var(--color-green)' }}>09</span> Active Lanes</span>
            <span><span style={{ color: 'var(--color-green)' }}>03</span> Continents</span>
            <span><span style={{ color: 'var(--color-green)' }}>12+</span> Product Lines in Transit</span>
            <span><span style={{ color: 'var(--color-green)' }}>FL · USA</span> Operations HQ</span>
          </div>
        </div>
      </section>
    );
  }

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