// Services — full AB Group catalog organized as a tabbed enterprise directory.
// Three divisions: Transportation & Logistics Management, Fulfillment, Trade Management.
const { useState: useStateSvc } = React;

// Map display name → slug (matches services/services-data.js)
const SERVICE_SLUGS = {
  'AB Group Platform': 'ab-group-platform',
  'Customs Brokerage': 'customs-brokerage',
  'Ocean Freight': 'ocean-freight',
  'Air Freight': 'air-freight',
  'Less than Container': 'less-than-container',
  "Buyer's Consolidation": 'buyers-consolidation',
  'Trucking': 'trucking',
  'Order Management': 'order-management',
  'Warehousing': 'warehousing',
  'Automotive Logistics': 'automotive-logistics',
  'Break Bulk': 'break-bulk',
  'Frozen Logistics': 'frozen-logistics',
  'Purchasing Agent': 'purchasing-agent',
  'International Moves': 'international-moves',
  'Booking Management': 'booking-management',
  'Mexico Shipping': 'mexico-shipping',
  'Warehouse Relocation': 'warehouse-relocation',
  'Tradeshow Logistics': 'tradeshow-logistics',
  'D2C Fulfillment': 'd2c-fulfillment',
  'Wholesale Fulfillment': 'wholesale-fulfillment',
  'Parcel': 'parcel',
  'Replenishment': 'replenishment',
  'Prep': 'prep',
  'Returns': 'returns',
  'Trade Advisory': 'trade-advisory',
  'Duty Drawback': 'duty-drawback',
  'Cargo Insurance': 'cargo-insurance',
  'Product Classification': 'product-classification',
  'Duty Optimization': 'duty-optimization',
};

function Services() {
  const divisions = [
    {
      id: 'logistics',
      label: 'Logistics & Transportation',
      tagline: 'Move freight across every mode and border.',
      items: [
        { icon: 'sliders',    name: 'AB Group Platform',     desc: 'Unified control tower for your entire supply chain.' },
        { icon: 'clipboard',  name: 'Customs Brokerage',     desc: 'Licensed clearance and duty filing across 140 countries.' },
        { icon: 'ship',       name: 'Ocean Freight',         desc: 'FCL and LCL via direct carrier contracts on every lane.' },
        { icon: 'plane',      name: 'Air Freight',           desc: 'Expedited and standard air for time-critical cargo.' },
        { icon: 'container',  name: 'Less than Container',   desc: 'LCL consolidation for shipments of any volume.' },
        { icon: 'stack',      name: "Buyer's Consolidation", desc: 'Combine multiple suppliers into a single optimized shipment.' },
        { icon: 'truck',      name: 'Trucking',              desc: 'FTL, LTL and intermodal drayage across North America.' },
        { icon: 'docs',       name: 'Order Management',      desc: 'PO visibility, milestone tracking and supplier coordination.' },
        { icon: 'warehouse',  name: 'Warehousing',           desc: '14 hubs with duty-deferred and FTZ-certified storage.' },
        { icon: 'truck',      name: 'Automotive Logistics',  desc: 'Specialized handling for vehicles, parts and OEM components.' },
        { icon: 'packageOpen',name: 'Break Bulk',            desc: 'Heavy, oversized and non-containerized cargo solutions.' },
        { icon: 'snowflake',  name: 'Frozen Logistics',      desc: 'End-to-end cold chain with live temperature telemetry.' },
        { icon: 'users',      name: 'Purchasing Agent',      desc: 'Source and procure goods through our vetted supplier network.' },
        { icon: 'homeMove',   name: 'International Moves',   desc: 'Door-to-door relocation for corporate and household goods.' },
        { icon: 'calculator', name: 'Booking Management',    desc: 'Orchestrate ocean bookings, cutoffs and carrier allocations.' },
        { icon: 'pin',        name: 'Mexico Shipping',       desc: 'LTL and truckload coverage between Mexico and North America.' },
        { icon: 'homeMove',   name: 'Warehouse Relocation',  desc: 'Plan, move and recommission your fulfillment facilities.' },
        { icon: 'flag',       name: 'Tradeshow Logistics',   desc: 'Booth-to-booth shipping, on-site material handling and event-day execution.' },
      ],
    },
    {
      id: 'fulfillment',
      label: 'Fulfillment',
      tagline: 'Get orders to customers and partners, faster.',
      items: [
        { icon: 'zap',        name: 'D2C Fulfillment',       desc: 'Direct-to-consumer pick, pack and ship from regional hubs.' },
        { icon: 'box',        name: 'Wholesale Fulfillment', desc: 'Retailer-ready pallets with full EDI and routing guides.' },
        { icon: 'shipments',  name: 'Parcel',                desc: 'Discounted parcel rates across DHL, FedEx, UPS and USPS.' },
        { icon: 'refreshCw',  name: 'Replenishment',         desc: 'Automated inventory forecasting and stock positioning.' },
        { icon: 'packageOpen',name: 'Prep',                  desc: 'FBA, FBM and marketplace prep — labeling, bundling, kitting.' },
        { icon: 'returnIcon', name: 'Returns',               desc: 'Managed reverse logistics with grading and restock.' },
      ],
    },
    {
      id: 'trade',
      label: 'Trade Management',
      tagline: 'Reduce duty exposure and compliance risk.',
      items: [
        { icon: 'compass',    name: 'Trade Advisory',        desc: 'Strategy for market entry, sourcing and tariff mitigation.' },
        { icon: 'coins',      name: 'Duty Drawback',         desc: 'Recover up to 99% of duties on re-exported goods.' },
        { icon: 'shieldCheck',name: 'Cargo Insurance',       desc: 'All-risk coverage with same-day binding and claims.' },
        { icon: 'tag',        name: 'Product Classification',desc: 'HTS/HS codes reviewed by licensed customs specialists.' },
        { icon: 'scale',      name: 'Duty Optimization',     desc: 'FTA eligibility, first-sale and tariff engineering.' },
      ],
    },
  ];

  const [active, setActive] = useStateSvc('logistics');
  const current = divisions.find(d => d.id === active);

  return (
    <section id="services" style={{ background: '#fff', borderTop: '1px solid #eef0f3' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '88px 64px' }} className="services-inner">

        {/* Header */}
        <div className="services-header" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          gap: 40, marginBottom: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 720 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--accent-dark, #1846B0)' }}>Services</div>
            <h2 style={{ margin: '12px 0 12px', fontSize: 44, fontWeight: 700, letterSpacing: '-0.035em',
              lineHeight: 1.04, color: '#0B1220' }}>
              The full stack of global trade.
            </h2>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.5, color: '#475467',
              letterSpacing: '-0.005em', maxWidth: 620 }}>
              Three divisions. Twenty-nine services. One contract, one platform and one team
              orchestrating the movement of goods end-to-end.
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#475467', fontSize: 12.5 }}>
            <Icon name="shield" size={15} style={{ color: '#12b76a' }}/>
            <span style={{ letterSpacing: '0.02em' }}>NVOCC · CHB · IATA · C-TPAT</span>
          </div>
        </div>

        {/* Tabs */}
        <div role="tablist" className="services-tabs" style={{ display: 'flex', gap: 0, borderBottom: '1px solid #eaecf0',
          marginBottom: 28, flexWrap: 'wrap' }}>
          {divisions.map((d, i) => {
            const isActive = d.id === active;
            return (
              <button
                key={d.id}
                role="tab"
                aria-selected={isActive}
                onClick={() => setActive(d.id)}
                style={{
                  position: 'relative',
                  padding: '14px 22px 14px 0',
                  marginRight: 32,
                  background: 'transparent', border: 0, cursor: 'pointer',
                  fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
                  letterSpacing: '-0.005em',
                  color: isActive ? '#0B1220' : '#667085',
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                }}>
                <span style={{ fontVariantNumeric: 'tabular-nums',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  color: isActive ? 'var(--accent-dark, #1846B0)' : '#98a2b3',
                  letterSpacing: '0.1em' }}>
                  0{i + 1}
                </span>
                {d.label}
                <span style={{ fontSize: 11, fontWeight: 500, color: '#98a2b3',
                  fontVariantNumeric: 'tabular-nums' }}>
                  {d.items.length}
                </span>
                {isActive && (
                  <span aria-hidden style={{ position: 'absolute', left: 0, right: 32, bottom: -1,
                    height: 2, background: 'var(--accent-dark, #1846B0)' }}/>
                )}
              </button>
            );
          })}
        </div>

        {/* Tagline */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          marginBottom: 18, gap: 24, flexWrap: 'wrap' }}>
          <div style={{ fontSize: 13.5, color: '#667085', letterSpacing: '-0.005em' }}>
            {current.tagline}
          </div>
          <a href="services/index.html" style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--accent-dark, #1846B0)',
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            View all {current.label.toLowerCase()} services
            <Icon name="arrowRight" size={12}/>
          </a>
        </div>

        {/* Grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: '1px solid #eaecf0', borderRadius: 16, overflow: 'hidden',
          background: '#fff' }}>
          {current.items.map((s, i) => {
            const col = i % 4;
            const row = Math.floor(i / 4);
            const totalRows = Math.ceil(current.items.length / 4);
            return (
              <a
                key={s.name}
                href={`services/${SERVICE_SLUGS[s.name] || 'index'}.html`}
                className="svc-cell"
                style={{
                  position: 'relative',
                  display: 'flex', flexDirection: 'column',
                  padding: '20px 22px 18px',
                  textDecoration: 'none', color: 'inherit',
                  borderRight: col < 3 ? '1px solid #eef0f3' : 'none',
                  borderBottom: row < totalRows - 1 ? '1px solid #eef0f3' : 'none',
                  background: '#fff',
                  transition: 'background 160ms ease',
                  overflow: 'hidden',
                }}
              >
                {/* accent rail (animates on hover) */}
                <span aria-hidden className="svc-cell__rail" style={{
                  position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
                  background: 'var(--accent-dark, #1846B0)',
                  transform: 'scaleY(0)', transformOrigin: 'top',
                  transition: 'transform 280ms cubic-bezier(.22,.61,.36,1)' }}/>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  marginBottom: 14 }}>
                  <div className="svc-cell__icon" style={{ width: 30, height: 30, borderRadius: 7,
                    background: 'var(--accent-soft, #EFF6FF)',
                    color: 'var(--accent-dark, #1846B0)',
                    display: 'grid', placeItems: 'center',
                    transition: 'background 180ms ease, color 180ms ease' }}>
                    <Icon name={s.icon} size={15}/>
                  </div>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    color: '#cbd1d9', letterSpacing: '0.06em', fontWeight: 500 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                </div>
                <div style={{ fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.012em',
                  color: '#0B1220', marginBottom: 4, lineHeight: 1.25 }}>{s.name}</div>
                <div style={{ fontSize: 12.5, lineHeight: 1.45, color: '#667085',
                  flex: 1, letterSpacing: '-0.002em' }}>{s.desc}</div>
                <div className="svc-cell__cta" style={{ display: 'inline-flex', alignItems: 'center', gap: 4,
                  marginTop: 14, fontSize: 11.5, fontWeight: 600,
                  color: 'var(--accent-dark, #1846B0)', letterSpacing: '-0.003em',
                  textTransform: 'uppercase' }}>
                  <span style={{ letterSpacing: '0.04em' }}>Learn more</span>
                  <span className="svc-cell__arrow" style={{ display: 'inline-flex',
                    transition: 'transform 220ms cubic-bezier(.22,.61,.36,1)' }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12h14M13 5l7 7-7 7"/>
                    </svg>
                  </span>
                </div>
              </a>
            );
          })}
          {/* Pad empty cells on the last row so borders align */}
          {Array.from({ length: (4 - (current.items.length % 4)) % 4 }).map((_, i) => (
            <div key={`pad-${i}`} style={{ background: '#fafbfc',
              borderRight: i < (4 - (current.items.length % 4) % 4) - 1 ? '1px solid #eaecf0' : 'none' }}/>
          ))}
        </div>

        {/* Footer CTA strip */}
        <div className="services-cta" style={{ marginTop: 48, padding: '28px 32px',
          background: '#0B1220', color: '#fff', borderRadius: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, flexWrap: 'wrap' }}>
          <div className="services-cta__copy">
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: '#93C5FD' }}>Don't see your use case?</div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em',
              marginTop: 8, color: '#fff' }}>
              Custom logistics programs for enterprise shippers.
            </div>
          </div>
          <div className="services-cta__actions" style={{ display: 'flex', gap: 12 }}>
            <button onClick={() => window.__abgsCTA && window.__abgsCTA.openContact(
              'services-talk', { intent: 'sales', topic: 'Services overview' }
            )}
              style={{ padding: '12px 20px', background: '#fff', color: '#0B1220',
              border: 0, borderRadius: 10, fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              Talk to solutions <Icon name="arrowRight" size={14}/>
            </button>
            <button style={{ padding: '12px 20px', background: 'transparent', color: '#fff',
              border: '1px solid rgba(255,255,255,0.2)', borderRadius: 10,
              fontFamily: 'inherit', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>
              Download capability deck
            </button>
          </div>
        </div>

      </div>
    </section>
  );
}
window.Services = Services;