function Delivery() {
  const countries = [
    { code: 'NG', name: 'Nigeria' },
    { code: 'GH', name: 'Ghana' },
    { code: 'ZA', name: 'South Africa' },
    { code: 'MA', name: 'Morocco' },
    { code: 'AE', name: 'UAE' },
    { code: 'EU', name: 'Europe' },
    { code: 'US', name: 'USA' },
    { code: 'CA', name: 'Canada' },
  ];

  const modes = [
    { icon: AirIcon, label: 'AIR FREIGHT', time: '3–7 days' },
    { icon: SeaIcon, label: 'SEA FREIGHT', time: '20–45 days' },
    { icon: CourierIcon, label: 'EXPRESS COURIER', time: '24–72h' },
    { icon: CargoIcon, label: 'CONSOLIDATED CARGO', time: 'Cost-optimised' },
  ];

  const metrics = [
    { value: '50+', label: 'COUNTRIES SERVED' },
    { value: '24h', label: 'AVG. QUOTE TIME' },
    { value: '27', label: 'OEM FACTORIES' },
    { value: '10K+', label: 'SKUS IN CATALOG' },
  ];

  return (
    <section id="delivery" className="section-pad" style={{ background: 'var(--bg)', borderTop: '1px solid var(--border-subtle)' }}>
      <div className="container">
        {/* Two-column layout */}
        <div style={{ display: 'grid', gridTemplateColumns: '45fr 55fr', gap: 64, alignItems: 'start' }} className="delivery-grid">

          {/* Left column */}
          <div>
            <div className="eyebrow reveal">// WORLDWIDE DELIVERY</div>
            <h2 className="reveal reveal-d1" style={{ fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 500, letterSpacing: '-0.025em', marginBottom: 14, lineHeight: 1.15 }}>
              Engineered supply chain.<br />Four continents.
            </h2>
            <p className="reveal reveal-d2" style={{ color: 'var(--text-secondary)', marginBottom: 28, maxWidth: 440 }}>
              Fast international supply solutions for mining and industrial companies worldwide.
            </p>

            {/* Country chips */}
            <div className="reveal reveal-d2" style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
              {countries.map(c => (
                <div key={c.code} style={{
                  background: 'var(--bg-elevated)', border: '1px solid var(--border-visible)',
                  borderRadius: 999, padding: '5px 12px',
                  display: 'flex', alignItems: 'center', gap: 6, fontSize: 13,
                }}>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 500 }}>{c.code}</span>
                  <span style={{ color: 'var(--text-secondary)', fontWeight: 500 }}>{c.name}</span>
                </div>
              ))}
            </div>

            <div className="divider reveal reveal-d3" style={{ marginBottom: 24 }} />

            {/* Delivery modes 2x2 */}
            <div className="reveal reveal-d3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              {modes.map(({ icon: Icon, label, time }) => (
                <div key={label} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ flexShrink: 0, marginTop: 2, color: 'var(--accent)' }}>
                    <Icon />
                  </div>
                  <div>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 500, color: 'var(--text-primary)', letterSpacing: '0.06em' }}>{label}</div>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>{time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right column — map */}
          <div className="reveal reveal-d1" style={{ position: 'relative', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--border-subtle)' }}>
            <img src="img/main/map.webp" alt="World delivery map" loading="lazy" decoding="async"
              style={{ width: '100%', display: 'block' }} />
          </div>
        </div>


      </div>

      <style>{`
        @media (max-width: 900px) { .delivery-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }
        @media (max-width: 640px) { .metric-strip { grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>
  );
}

function AirIcon() {
  return <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17.8 19.2L16 11l3.5-3.5C21 6 21 4 21 4s-2 0-3.5 1.5L14 9 5.8 7.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 3.3c.3.4.8.5 1.3.3l.5-.3c.4-.2.6-.6.5-1.1z"/></svg>;
}
function SeaIcon() {
  return <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 20a2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1 2.4 2.4 0 0 1 2-1 2.4 2.4 0 0 1 2 1 2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1 2.4 2.4 0 0 1 2-1 2.4 2.4 0 0 1 2 1"/><path d="M4 14l1-5h14l1 5"/><path d="M9 9V4h6v5"/></svg>;
}
function CourierIcon() {
  return <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="3" width="15" height="13"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>;
}
function CargoIcon() {
  return <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>;
}

Object.assign(window, { Delivery });