// WhyABGS — four pillars, each with a mini visual
function WhyABGS() {
  const pillars = [
    { icon: 'zap', k: 'Speed', t: 'Rates in 200ms',
      d: 'Live carrier APIs. What used to take emails and spreadsheets takes a single request.' },
    { icon: 'refresh', k: 'Automation', t: 'Documents that file themselves',
      d: 'HBL, invoices, customs declarations, ISF — generated and filed automatically for every booking.' },
    { icon: 'shield', k: 'Experience', t: '25 years on the water',
      d: 'NVOCC, C-TPAT, IATA certified. Direct contracts with every Tier 1 carrier across ocean, air, and ground.' },
    { icon: 'trending', k: 'Reliability', t: '99.3% on-time delivery',
      d: 'Predictive ETAs calibrated against 4M+ historical milestones. Exception alerts before your customer notices.' },
  ];
  return (
    <section style={{ background: '#f9fafb', borderTop: '1px solid #eaecf0', borderBottom: '1px solid #eaecf0' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '64px 64px 72px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          gap: 48, margin: '0 0 40px', flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--accent-dark, #1846B0)' }}>Why AB Group Shipping</div>
            <h2 style={{ margin: 0, fontSize: 30, fontWeight: 700, letterSpacing: '-0.02em',
              lineHeight: 1.15, color: '#101828' }}>
              Built for shippers who can't afford to wait.
            </h2>
          </div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: '#475467', maxWidth: 480 }}>
            Freight moves on four things: speed, automation, experience, and reliability.
            We built the platform — and the network — around all four.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {pillars.map((p, i) => (
            <div key={p.k} style={{ background: '#fff', border: '1px solid #eaecf0', borderRadius: 16,
              padding: 32, display: 'grid', gridTemplateColumns: '1fr 180px', gap: 24, alignItems: 'center' }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--accent-soft, #EFF6FF)',
                    color: 'var(--accent-dark, #1846B0)', display: 'grid', placeItems: 'center' }}>
                    <Icon name={p.icon} size={18}/>
                  </div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--accent-dark, #1846B0)', letterSpacing: '0.06em',
                    textTransform: 'uppercase' }}>{p.k}</div>
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, marginTop: 16, letterSpacing: '-0.02em',
                  color: '#101828' }}>{p.t}</div>
                <div style={{ fontSize: 14, color: '#475467', lineHeight: 1.6, marginTop: 10 }}>{p.d}</div>
              </div>
              <PillarVisual kind={p.k}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PillarVisual({ kind }) {
  if (kind === 'Speed') {
    return (
      <div style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums' }}>
        <div style={{ fontSize: 52, fontWeight: 700, letterSpacing: '-0.04em', color: '#101828', lineHeight: 1 }}>
          182<span style={{ fontSize: 20, color: '#667085', fontWeight: 500 }}>ms</span>
        </div>
        <div style={{ fontSize: 11, color: '#98a2b3', letterSpacing: '0.06em',
          textTransform: 'uppercase', fontWeight: 600, marginTop: 8 }}>Avg rate response</div>
        <svg width="100%" height="40" viewBox="0 0 180 40" style={{ marginTop: 8 }}>
          <path d="M0 30 L20 26 L40 28 L60 22 L80 18 L100 20 L120 14 L140 10 L160 8 L180 6"
            fill="none" stroke="#1E57D6" strokeWidth="2"/>
          <path d="M0 30 L20 26 L40 28 L60 22 L80 18 L100 20 L120 14 L140 10 L160 8 L180 6 L180 40 L0 40 Z"
            fill="url(#spark)" opacity="0.5"/>
          <defs>
            <linearGradient id="spark" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#1E57D6" stopOpacity="0.3"/>
              <stop offset="100%" stopColor="#1E57D6" stopOpacity="0"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
    );
  }
  if (kind === 'Automation') {
    return (
      <div>
        {['HBL generated','Invoice filed','Customs cleared','ISF submitted'].map((l,i)=>(
          <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0',
            fontSize: 12, color: '#475467' }}>
            <div style={{ width: 16, height: 16, borderRadius: 9999, background: '#ECFDF3',
              color: '#027A48', display: 'grid', placeItems: 'center' }}>
              <Icon name="check" size={10} strokeWidth={3}/>
            </div>
            {l}
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'Experience') {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
        {['NVOCC','C-TPAT','IATA','AEO','FMC','CHB'].map(c=>(
          <div key={c} style={{ padding: '8px 6px', background: '#f9fafb', border: '1px solid #eaecf0',
            borderRadius: 6, fontSize: 11, fontWeight: 700, color: '#344054', textAlign: 'center',
            letterSpacing: '0.04em' }}>{c}</div>
        ))}
      </div>
    );
  }
  // Reliability
  return (
    <div style={{ position: 'relative', width: 140, height: 140, margin: '0 auto' }}>
      <svg width="140" height="140" viewBox="0 0 140 140">
        <circle cx="70" cy="70" r="58" stroke="#eaecf0" strokeWidth="10" fill="none"/>
        <circle cx="70" cy="70" r="58" stroke="#1E57D6" strokeWidth="10" fill="none"
          strokeDasharray={2 * Math.PI * 58} strokeDashoffset={2 * Math.PI * 58 * 0.007}
          strokeLinecap="round" transform="rotate(-90 70 70)"/>
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 28, fontWeight: 700, color: '#101828', letterSpacing: '-0.02em',
            fontVariantNumeric: 'tabular-nums' }}>99.3%</div>
          <div style={{ fontSize: 10, color: '#98a2b3', letterSpacing: '0.06em',
            textTransform: 'uppercase', fontWeight: 600 }}>On-time</div>
        </div>
      </div>
    </div>
  );
}
window.WhyABGS = WhyABGS;