/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;

// ============ DATA ============

const ACCENTS = {
  slate: { '--accent': '#1d4ed8', '--accent-2': '#3b82f6', '--accent-soft': '#dbeafe', name: 'Slate Blue' },
  sky: { '--accent': '#0284c7', '--accent-2': '#38bdf8', '--accent-soft': '#e0f2fe', name: 'Sky' },
  teal: { '--accent': '#0d9488', '--accent-2': '#14b8a6', '--accent-soft': '#ccfbf1', name: 'Teal' },
  ink: { '--accent': '#0f172a', '--accent-2': '#334155', '--accent-soft': '#e2e8f0', name: 'Ink (mono)' },
  amber: { '--accent': '#b45309', '--accent-2': '#f59e0b', '--accent-soft': '#fef3c7', name: 'Runway Amber' }
};

const PILLARS = [
{
  n: '01',
  tag: 'Wholesale Commercials',
  title: 'Wholesale-grade rates, direct to you',
  body: "Our pricing is built on aggregate wholesale volume. Retailers access the same commercial structure that powers the world's largest eCommerce brands — without the retail markup of a middleman.",
  photo: 'assets/sydney.jpg'
},
{
  n: '02',
  tag: 'Own the Infrastructure',
  title: 'AMS-operated hubs. End to end.',
  body: "No third-party middlemen inflating your costs. We operate the sortation, the linehaul, and the clearance — so what you pay for is what we move.",
  photo: 'assets/dest-singapore.jpg'
},
{
  n: '03',
  tag: 'Tech-Led Agility',
  title: 'Enterprise tools, included',
  body: "eControl portal, My AMS API, real-time tracking, Tableau analytics. Built into the service — not charged as premium add-ons.",
  photo: 'assets/digi-van.png'
},
{
  n: '04',
  tag: 'Multi-Carrier Optimisation',
  title: '140+ partners. Routed by lane.',
  body: "We don't lock you to a single contract. Every parcel takes the fastest, most cost-effective path through the network we've built over 20 years.",
  photo: 'assets/dest-london.jpg'
}];


const CLIPS = [
{ src: 'https://ams-econtrol.pages.dev/Videos/New%20York.mp4', city: 'New York', airport: 'JFK', poster: 'assets/dest-ny.jpg' },
{ src: 'https://ams-econtrol.pages.dev/Videos/Sydney%20Habour.mp4', city: 'Sydney', airport: 'SYD', poster: 'assets/sydney.jpg' },
{ src: 'https://ams-econtrol.pages.dev/Videos/Auckland.mp4', city: 'Auckland', airport: 'AKL', poster: 'assets/dest-auckland.jpg' },
{ src: 'https://ams-econtrol.pages.dev/Videos/Paris.mp4', city: 'Paris', airport: 'CDG', poster: 'assets/dest-paris.jpg' },
{ src: 'https://ams-econtrol.pages.dev/Videos/London.mp4', city: 'London', airport: 'LHR', poster: 'assets/dest-london.jpg' }];


// LANES — outbound from Sydney to all destinations in the rate matrix.
// Routed via Singapore (Asia hub) or Amsterdam (EU hub) per AMS network design.
const LANES = [
// NZ
{ code: 'AKL', city: 'Auckland', region: 'NZ', transit: '2–4 days', lng: 174.79, lat: -36.85, hub: 'Direct', photo: 'assets/dest-auckland.jpg' },
{ code: 'WLG', city: 'Wellington', region: 'NZ', transit: '2–4 days', lng: 174.81, lat: -41.32, hub: 'Direct' },
{ code: 'CHC', city: 'Christchurch', region: 'NZ', transit: '2–4 days', lng: 172.63, lat: -43.53, hub: 'Direct' },
// UK / North America (US & CA lngs shifted +360 to appear east on AU-centered map)
{ code: 'LHR', city: 'London', region: 'UK', transit: '3–8 days', lng: -0.46, lat: 51.47, hub: 'AMS · EU', photo: 'assets/dest-london.jpg' },
{ code: 'JFK', city: 'New York', region: 'US', transit: '3–10 days', lng: 286.22, lat: 40.64, hub: 'Direct', photo: 'assets/dest-ny.jpg' },
{ code: 'LAX', city: 'Los Angeles', region: 'US', transit: '3–7 days', lng: 241.59, lat: 33.94, hub: 'Direct' },
{ code: 'YYZ', city: 'Toronto', region: 'CA', transit: '3–8 days', lng: 280.37, lat: 43.68, hub: 'Direct', photo: 'assets/dest-canada.jpg' },
// Asia (via Singapore)
{ code: 'SIN', city: 'Singapore', region: 'SG', transit: '2–6 days', lng: 103.82, lat: 1.36, hub: 'Asia hub', photo: 'assets/dest-singapore.jpg' },
{ code: 'PVG', city: 'China', region: 'CN', transit: '3–8 days', lng: 121.81, lat: 31.14, hub: 'SIN' },
{ code: 'KUL', city: 'Malaysia', region: 'MY', transit: '3–8 days', lng: 101.71, lat: 2.74, hub: 'SIN' },
{ code: 'NRT', city: 'Japan', region: 'JP', transit: '2–6 days', lng: 140.39, lat: 35.78, hub: 'SIN', photo: 'assets/dest-japan.jpg' },
{ code: 'BKK', city: 'Thailand', region: 'TH', transit: '3–12 days', lng: 100.75, lat: 13.69, hub: 'SIN' },
{ code: 'TPE', city: 'Taiwan', region: 'TW', transit: '3–8 days', lng: 121.23, lat: 25.08, hub: 'SIN' },
{ code: 'CGK', city: 'Indonesia', region: 'ID', transit: '3–12 days', lng: 106.66, lat: -6.13, hub: 'SIN' },
{ code: 'MNL', city: 'Philippines', region: 'PH', transit: '3–12 days', lng: 121.02, lat: 14.51, hub: 'SIN' },
{ code: 'ICN', city: 'Korea', region: 'KR', transit: '2–8 days', lng: 126.45, lat: 37.46, hub: 'SIN' },
{ code: 'HKG', city: 'Hong Kong', region: 'HK', transit: '2–6 days', lng: 114.17, lat: 22.32, hub: 'SIN', photo: 'assets/dest-hongkong.jpg' },
{ code: 'DEL', city: 'India', region: 'IN', transit: '3–12 days', lng: 77.10, lat: 28.56, hub: 'SIN' },
{ code: 'SGN', city: 'Vietnam', region: 'VN', transit: '3–12 days', lng: 106.66, lat: 10.82, hub: 'SIN' },
// Europe (via AMS)
{ code: 'AMS', city: 'Netherlands', region: 'NL', transit: '3–8 days', lng: 4.76, lat: 52.31, hub: 'EU hub' },
{ code: 'CDG', city: 'France', region: 'FR', transit: '3–8 days', lng: 2.55, lat: 49.01, hub: 'AMS', photo: 'assets/dest-paris.jpg' },
{ code: 'FRA', city: 'Germany', region: 'DE', transit: '3–8 days', lng: 8.57, lat: 50.04, hub: 'AMS' },
{ code: 'DUB', city: 'Ireland', region: 'IE', transit: '3–8 days', lng: -6.27, lat: 53.42, hub: 'AMS' },
{ code: 'ARN', city: 'Sweden', region: 'SE', transit: '3–8 days', lng: 17.92, lat: 59.65, hub: 'AMS' },
{ code: 'CPH', city: 'Denmark', region: 'DK', transit: '3–8 days', lng: 12.65, lat: 55.62, hub: 'AMS' },
{ code: 'VIE', city: 'Austria', region: 'AT', transit: '3–8 days', lng: 16.57, lat: 48.11, hub: 'AMS' },
{ code: 'WAW', city: 'Poland', region: 'PL', transit: '4–10 days', lng: 20.97, lat: 52.17, hub: 'AMS' },
{ code: 'SOF', city: 'Bulgaria', region: 'BG', transit: '4–10 days', lng: 23.41, lat: 42.69, hub: 'AMS' },
{ code: 'LUX', city: 'Luxembourg', region: 'LU', transit: '4–10 days', lng: 6.21, lat: 49.62, hub: 'AMS' },
{ code: 'OTP', city: 'Romania', region: 'RO', transit: '4–10 days', lng: 26.10, lat: 44.57, hub: 'AMS' },
{ code: 'MLA', city: 'Malta', region: 'MT', transit: '4–10 days', lng: 14.48, lat: 35.86, hub: 'AMS' },
{ code: 'PRG', city: 'Czechia', region: 'CZ', transit: '4–10 days', lng: 14.26, lat: 50.10, hub: 'AMS' },
{ code: 'MAD', city: 'Spain', region: 'ES', transit: '4–10 days', lng: -3.57, lat: 40.49, hub: 'AMS' },
{ code: 'BUD', city: 'Hungary', region: 'HU', transit: '4–10 days', lng: 19.26, lat: 47.44, hub: 'AMS' },
{ code: 'VNO', city: 'Lithuania', region: 'LT', transit: '4–10 days', lng: 25.29, lat: 54.64, hub: 'AMS' },
{ code: 'TLL', city: 'Estonia', region: 'EE', transit: '4–10 days', lng: 24.83, lat: 59.41, hub: 'AMS' },
{ code: 'RIX', city: 'Latvia', region: 'LV', transit: '4–10 days', lng: 23.97, lat: 56.92, hub: 'AMS' },
{ code: 'BTS', city: 'Slovakia', region: 'SK', transit: '4–10 days', lng: 17.21, lat: 48.17, hub: 'AMS' },
{ code: 'LCA', city: 'Cyprus', region: 'CY', transit: '4–10 days', lng: 33.62, lat: 34.87, hub: 'AMS' },
{ code: 'LJU', city: 'Slovenia', region: 'SI', transit: '4–10 days', lng: 14.46, lat: 46.22, hub: 'AMS' },
{ code: 'OPO', city: 'Portugal', region: 'PT', transit: '4–10 days', lng: -8.68, lat: 41.24, hub: 'AMS' },
{ code: 'ZAG', city: 'Croatia', region: 'HR', transit: '4–10 days', lng: 16.07, lat: 45.74, hub: 'AMS' },
{ code: 'ATH', city: 'Greece', region: 'GR', transit: '4–10 days', lng: 23.95, lat: 37.94, hub: 'AMS' },
{ code: 'BRU', city: 'Belgium', region: 'BE', transit: '4–10 days', lng: 4.49, lat: 50.90, hub: 'AMS' },
{ code: 'HEL', city: 'Finland', region: 'FI', transit: '4–10 days', lng: 24.96, lat: 60.32, hub: 'AMS' },
{ code: 'FCO', city: 'Italy', region: 'IT', transit: '3–8 days', lng: 12.25, lat: 41.80, hub: 'AMS' }];


// Inbound to Sydney — major origin gateways from US, UK, EU, NZ, China.
// US/Canada/EU lngs are shifted +360 so they appear east of AU on an AU-centered map
// (Pacific routing is the visual truth — CN/JP traffic goes west, US goes east).
const INBOUND_LANES = [
{ code: 'AKL', city: 'Auckland', region: 'NZ', transit: '2–4 days', lng: 174.79, lat: -36.85, photo: 'assets/dest-auckland.jpg' },
{ code: 'JFK', city: 'New York', region: 'US', transit: '4–8 days', lng: 286.22, lat: 40.64, photo: 'assets/dest-ny.jpg' },
{ code: 'LAX', city: 'Los Angeles', region: 'US', transit: '3–7 days', lng: 241.59, lat: 33.94, photo: 'assets/dest-ny.jpg' },
{ code: 'LHR', city: 'London', region: 'UK', transit: '4–8 days', lng: -0.46, lat: 51.47, photo: 'assets/dest-london.jpg' },
{ code: 'CDG', city: 'Paris', region: 'EU', transit: '4–9 days', lng: 2.55, lat: 49.01, photo: 'assets/dest-paris.jpg' },
{ code: 'AMS', city: 'Amsterdam', region: 'EU', transit: '4–9 days', lng: 4.76, lat: 52.31 },
{ code: 'FRA', city: 'Frankfurt', region: 'EU', transit: '4–9 days', lng: 8.57, lat: 50.04 },
{ code: 'PVG', city: 'Shanghai', region: 'CN', transit: '3–7 days', lng: 121.81, lat: 31.14 },
{ code: 'PEK', city: 'Beijing', region: 'CN', transit: '3–7 days', lng: 116.59, lat: 40.07 },
{ code: 'HKG', city: 'Hong Kong', region: 'CN', transit: '2–6 days', lng: 114.17, lat: 22.32, photo: 'assets/dest-hongkong.jpg' }];


// ANZ tradelane hubs — every-to-every transshipment between BNE/MEL/SYD/PER/CHC/WLG/AKL
const ANZ_HUBS = [
{ code: 'SYD', city: 'Sydney', region: 'AU', lng: 151.21, lat: -33.87, photo: 'assets/sydney.jpg' },
{ code: 'MEL', city: 'Melbourne', region: 'AU', lng: 144.84, lat: -37.67 },
{ code: 'BNE', city: 'Brisbane', region: 'AU', lng: 153.12, lat: -27.38 },
{ code: 'PER', city: 'Perth', region: 'AU', lng: 115.97, lat: -31.94 },
{ code: 'AKL', city: 'Auckland', region: 'NZ', lng: 174.79, lat: -36.85, photo: 'assets/dest-auckland.jpg' },
{ code: 'WLG', city: 'Wellington', region: 'NZ', lng: 174.81, lat: -41.32 },
{ code: 'CHC', city: 'Christchurch', region: 'NZ', lng: 172.63, lat: -43.53 }];


const ROUTES = [
{ label: 'HK → AU, NZ & UK', from: 'HKG', to: 'SYD, AKL, LHR' },
{ label: 'CHINA → AU, NZ & UK', from: 'PVG', to: 'SYD, AKL, LHR' },
{ label: 'US → AU, UK & CA', from: 'JFK', to: 'SYD, LHR, YYZ' },
{ label: 'UK → AU', from: 'LHR', to: 'SYD' },
{ label: 'AU → NZ', from: 'SYD', to: 'AKL' }];


// ============ UTILITIES ============

function fmtTrack(n) {
  // LP format passthrough; legacy AMS format gets spaced
  if (/^LP\d{14}[A-Z]{2}$/i.test(n)) return n.toUpperCase();
  return n.replace(/(\w{3})(\w{4})(\w{4})/, '$1 $2 $3');
}
function randTrack() {
  const digits = String(Math.floor(Math.random() * 1e14)).padStart(14, '0');
  return 'LP' + digits + 'SG';
}

// ============ NAV ============
// Outbound header to match amsegroup.com.au site shell.
// Top utility bar (trust signals + Talk To Us) sits above a main nav with
// Services mega-menu, plus prominent Track Shipment / eControl Login actions
// — eControl is the product page reached via "Our Software".

const SERVICES = [
{ label: 'eCommerce Shipping', href: 'https://www.amsegroup.com.au/ecommerce-shipping/' },
{ label: 'Retail Shipping', href: 'https://www.amsegroup.com.au/retail-shipping/' },
{ label: 'Freight Forwarding', href: 'https://www.amsegroup.com.au/freight-forwarding/' },
{ label: 'Air Freight', href: 'https://www.amsegroup.com.au/air-freight/' },
{ label: 'Sea Freight', href: 'https://www.amsegroup.com.au/sea-freight/' },
{ label: 'Customs Clearance', href: 'https://www.amsegroup.com.au/customs-clearance/' },
{ label: 'Mail Services', href: 'https://www.amsegroup.com.au/mail-services/' },
{ label: '3PL', href: 'https://www.amsegroup.com.au/3pl/' },
{ label: 'Fulfilment', href: 'https://www.amsegroup.com.au/fulfilment/' },
{ label: 'Warehousing', href: 'https://www.amsegroup.com.au/warehousing/' },
{ label: 'Cross Docking', href: 'https://www.amsegroup.com.au/cross-docking/' },
{ label: 'Road Freight', href: 'https://www.amsegroup.com.au/road-freight/' }];


function Nav() {
  const [svcOpen, setSvcOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <header className="nav">
      {/* Main bar */}
      <div className="nav-inner">
        <a href="https://www.amsegroup.com.au/" className="nav-brand" aria-label="AMS eGroup home">
          <img src="assets/logo.png" alt="AMS eGroup" />
        </a>

        <nav className="nav-links" aria-label="Primary">
          <a href="https://www.amsegroup.com.au/">Home</a>
          <a href="https://www.amsegroup.com.au/about/">Who We Are</a>
          <div
            className={`nav-svc ${svcOpen ? 'on' : ''}`}
            onMouseEnter={() => setSvcOpen(true)}
            onMouseLeave={() => setSvcOpen(false)}>
            
            <button
              className="nav-svc-trigger"
              aria-haspopup="true"
              aria-expanded={svcOpen}
              onClick={() => setSvcOpen((o) => !o)}>
              
              Services
              <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M2 4l4 4 4-4" /></svg>
            </button>
            {svcOpen &&
            <div className="nav-svc-menu" role="menu">
                {SERVICES.map((s) =>
              <a key={s.label} href={s.href} role="menuitem">{s.label}</a>
              )}
              </div>
            }
          </div>
          <a href="https://www.amsegroup.com.au/our-software/" className="on">Our Software</a>
          <a href="https://www.amsegroup.com.au/faq/">FAQ</a>
          <a href="https://myams.com.au/Tracking.aspx" target="_blank" rel="noopener">Track &amp; Trace</a>
          <a href="https://www.amsegroup.com.au/news-insights/">News &amp; Insights</a>
          <a href="https://www.amsegroup.com.au/contact/">Contact</a>
        </nav>

        <div className="nav-right">
          <a className="nav-track" href="https://myams.com.au/Tracking.aspx" target="_blank" rel="noopener">
            <span className="nav-track-dot" />Track Shipment
          </a>
          <a href="https://ams-econtrol.pages.dev/app" className="nav-login" target="_blank" rel="noopener">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /><polyline points="10 17 15 12 10 7" /><line x1="15" y1="12" x2="3" y2="12" /></svg>
            eControl Login
          </a>
          <a href="https://ams-econtrol.pages.dev/app" className="nav-cta">Get Started</a>

          <button
            className="nav-burger"
            aria-label="Open menu"
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((o) => !o)}>
            
            <span /><span /><span />
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      {mobileOpen &&
      <div className="nav-mobile" onClick={() => setMobileOpen(false)}>
          <div className="nav-mobile-panel" onClick={(e) => e.stopPropagation()}>
            <a href="https://www.amsegroup.com.au/">Home</a>
            <a href="https://www.amsegroup.com.au/about/">Who We Are</a>
            <details>
              <summary>Services</summary>
              <div className="nav-mobile-sub">
                {SERVICES.map((s) => <a key={s.label} href={s.href}>{s.label}</a>)}
              </div>
            </details>
            <a href="https://www.amsegroup.com.au/our-software/">Our Software</a>
            <a href="https://www.amsegroup.com.au/faq/">FAQ</a>
            <a href="https://myams.com.au/Tracking.aspx" target="_blank" rel="noopener">Track &amp; Trace</a>
            <a href="https://www.amsegroup.com.au/news-insights/">News &amp; Insights</a>
            <a href="https://www.amsegroup.com.au/contact/">Contact</a>
            <div className="nav-mobile-actions">
              <a href="https://myams.com.au/Tracking.aspx" target="_blank" rel="noopener" onClick={() => setMobileOpen(false)}>Track Shipment</a>
              <a href="https://ams-econtrol.pages.dev/app" target="_blank" rel="noopener">eControl Login</a>
              <a href="https://ams-econtrol.pages.dev/app" className="nav-cta">Get Started</a>
            </div>
          </div>
        </div>
      }
    </header>);

}

// ============ HERO ============

function Hero({ heroMedia, onTrack }) {
  const [q, setQ] = useState('');
  const [clipIdx, setClipIdx] = useState(0);

  const currentClip = CLIPS[clipIdx];

  // Auto-advance slideshow every 8s
  useEffect(() => {
    if (heroMedia !== 'video') return;
    const id = setInterval(() => {
      setClipIdx((i) => (i + 1) % CLIPS.length);
    }, 8000);
    return () => clearInterval(id);
  }, [heroMedia]);

  return (
    <section className="hero">
      <div className="hero-media">
        {heroMedia === 'video' ?
        <>
            {CLIPS.map((c, i) =>
          <video
            key={c.airport}
            src={c.src}
            poster={c.poster}
            className={`hero-slide ${i === clipIdx ? 'on' : ''}`}
            autoPlay
            muted
            loop
            playsInline
            preload={i === 0 ? 'auto' : 'metadata'} />

          )}
            <div className="hero-playlist">
              <div className="hero-playlist-now">
                <span className="hero-playlist-dot" />
                <span className="hero-playlist-code">{currentClip.airport}</span>
                <span className="hero-playlist-city">{currentClip.city}</span>
              </div>
              <div className="hero-playlist-dots">
                {CLIPS.map((_, i) =>
              <button
                key={i}
                className={i === clipIdx ? 'on' : ''}
                onClick={() => setClipIdx(i)}
                aria-label={`Show ${CLIPS[i].city}`} />

              )}
              </div>
            </div>
          </> :
        heroMedia === 'map' ?
        <div className="hero-map-bg">
            <HeroMap />
          </div> :
        heroMedia === 'expedited' ?
        <div className="hero-expedited-bg">
            <div className="hero-expedited-grid" />
            <img src="assets/ams-expedited.png" alt="AMS Expedited" className="hero-expedited-logo" />
            <div className="hero-expedited-tag">EXPEDITED · INT'L AIR FREIGHT</div>
          </div> :

        <img src="assets/sydney.jpg" alt="AMS aircraft over ocean" />
        }
        <div className="hero-grade" />
      </div>

      <div className="hero-inner">
        <div className="hero-copy">
          <h1>
            AMS Expedited. <em>The wholesale way to ship globally.</em>
          </h1>
          <p className="hero-lead">
            For over 20 years AMS has supported carriers and marketplaces across ANZ. We're now pivoting that network to retail — leveraging the tens of millions of parcels in our control to provide retailers with ecommerce solutions that deliver speed, transparency and consistency.
          </p>
          <form className="hero-track" onSubmit={(e) => {e.preventDefault();const v=q.trim();if(v){window.open('https://myams.com.au/Tracking.aspx?tracking='+encodeURIComponent(v),'_blank','noopener');}}}>
            <div className="hero-track-label">Track a parcel</div>
            <div className="hero-track-row">
              <input
                value={q}
                onChange={(e) => setQ(e.target.value)}
                placeholder="AMS175 8471 9823"
                autoComplete="off"
                spellCheck="false" />
              
              <button type="submit">Track <span>→</span></button>
            </div>
            <div className="hero-track-hint">
              Tracks via <a href="https://myams.com.au/Tracking.aspx" target="_blank" rel="noopener">myAMS</a> · or <a href="https://www.amsegroup.com.au/contact/">request a proposal</a>
            </div>
          </form>
        </div>

        <TrackingCard />
      </div>
    </section>);

}

// ============ HERO FLOATING TRACKING UI ============

function TrackingCard() {
  return (
    <aside className="trk-card ec-trk" aria-hidden="true">
      <div className="ec-trk-top">
        <div className="ec-trk-top-l">
          <div className="ec-trk-logo">
            <img src="assets/logo-white.png" alt="AMS Group" className="ec-trk-logo-img" />
            <span className="ec-trk-logo-div" />
            <span className="ec-trk-logo-product">eControl</span>
          </div>
          <div className="ec-trk-crumb">
            <b>Parcel detail</b>
          </div>
        </div>
        <div className="ec-trk-top-r">
          <span>AMS Group</span>
          <div className="ec-trk-avatar">AR</div>
        </div>
      </div>

      <div className="ec-trk-body">
        <div className="ec-trk-h">
          <div className="ec-trk-h-l">
            <div className="ec-trk-h-kicker">Tracking number</div>
            <div className="ec-trk-h-tid">LP00187184719823SG</div>
          </div>
          <span className="ec-badge ec-badge--intransit">In Transit</span>
        </div>

        <div className="ec-trk-meta-row">
          <div><span>Service</span><strong>Expedited Air</strong></div>
          <div><span>Weight</span><strong>0.420 kg</strong></div>
          <div><span>Carrier</span><strong>Royal Mail</strong></div>
          <div><span>Source</span><strong>AMS Direct</strong></div>
        </div>

        <div className="ec-trk-lane">
          <div className="ec-trk-lane-port">
            <div className="ec-trk-lane-port-code">SYD</div>
            <div className="ec-trk-lane-port-lbl">Origin</div>
          </div>
          <div className="ec-trk-lane-arc">
            <svg viewBox="0 0 200 26" preserveAspectRatio="none">
              <path d="M2 22 Q100 -4 198 22" fill="none" stroke="var(--ec-sky)" strokeWidth="1.4" strokeDasharray="3 3" />
              <circle r="3.2" fill="var(--ec-sky)">
                <animateMotion dur="4.5s" repeatCount="indefinite" path="M2 22 Q100 -4 198 22" />
              </circle>
            </svg>
            <div className="ec-trk-lane-arc-lbl">Uplift AMS-182 · ETA 04:20 BST</div>
          </div>
          <div className="ec-trk-lane-port">
            <div className="ec-trk-lane-port-code">LHR</div>
            <div className="ec-trk-lane-port-lbl">Destination</div>
          </div>
        </div>

        <div className="ec-trk-section-h">Tracking history</div>
        <div className="ec-trk-timeline">
          <div className="ec-trk-tl-item active">
            <span className="ec-trk-tl-dot" />
            <div className="ec-trk-tl-body">
              <div className="ec-trk-tl-row1">
                <span className="ec-trk-tl-st">In Transit · Uplift AMS-182</span>
                <span className="ec-trk-tl-time">Tue 04:18 UTC</span>
              </div>
              <div className="ec-trk-tl-loc">In flight · over SE Asia</div>
            </div>
          </div>
          <div className="ec-trk-tl-item done">
            <span className="ec-trk-tl-dot" />
            <div className="ec-trk-tl-body">
              <div className="ec-trk-tl-row1">
                <span className="ec-trk-tl-st">Departed AMS Sydney</span>
                <span className="ec-trk-tl-time">Mon 22:15 AEST</span>
              </div>
              <div className="ec-trk-tl-loc">SYD gateway · cleared for export</div>
            </div>
          </div>
          <div className="ec-trk-tl-item done">
            <span className="ec-trk-tl-dot" />
            <div className="ec-trk-tl-body">
              <div className="ec-trk-tl-row1">
                <span className="ec-trk-tl-st">Arrived at AMS</span>
                <span className="ec-trk-tl-time">Mon 14:02 AEST</span>
              </div>
              <div className="ec-trk-tl-loc">AMS Sydney gateway</div>
            </div>
          </div>
          <div className="ec-trk-tl-item done">
            <span className="ec-trk-tl-dot" />
            <div className="ec-trk-tl-body">
              <div className="ec-trk-tl-row1">
                <span className="ec-trk-tl-st">Manifested</span>
                <span className="ec-trk-tl-time">Sun 19:11 AEST</span>
              </div>
              <div className="ec-trk-tl-loc">Shopify · merchant handover</div>
            </div>
          </div>
        </div>
      </div>

      <div className="ec-trk-foot">
        <span><b>Last checked</b> · 2 sec ago</span>
        <span className="ec-trk-foot-live">Live</span>
      </div>
    </aside>);

}

// ============ HERO BACKGROUND MAP ============

function HeroMap() {
  const dots = useMemo(() => {
    const out = [];
    for (let i = 0; i < 400; i++) {
      out.push({
        x: Math.random() * 100,
        y: Math.random() * 100,
        r: Math.random() * 0.6 + 0.2
      });
    }
    return out;
  }, []);
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      {dots.map((d, i) =>
      <circle key={i} cx={d.x} cy={d.y} r={d.r} fill="rgba(255,255,255,.18)" />
      )}
    </svg>);

}

// ============ HERO SOLUTIONS CAROUSEL ============

const HERO_SOLUTIONS = [
{
  tag: 'United States · Flagship corridor',
  num: '01',
  title: 'Type 11 DDP, cleared by AMS.',
  body: 'Direct entry into the United States via Type 11 — not the postal channel. AMS clears, no 10% surcharge, landed cost certain at quote.',
  bullets: ['No 3rd-party broker', 'HS-optimised at origin', 'Same-day clearance · most lanes'],
  metric: { v: '0%', l: 'US import surcharge' },
  photo: 'assets/dest-ny.jpg',
  cta: 'See US lanes',
  href: '#coverage'
},
{
  tag: 'NZ Next Day',
  num: '02',
  title: 'Next-day to Auckland, every day.',
  body: 'SYD/MEL/BNE → AKL on dedicated capacity. Cut-off late afternoon, on the doorstep next day. The fastest commercial path across the Tasman.',
  bullets: ['Daily dedicated freighter', 'Scan-level events end-to-end', 'NZ Post or CourierPost final mile'],
  metric: { v: '24h', l: 'AU → AKL transit' },
  photo: 'assets/dest-auckland.jpg',
  cta: 'See NZ lanes',
  href: '#coverage'
},
{
  tag: 'DG New Zealand',
  num: '03',
  title: 'NZ DG, handled end-to-end.',
  body: 'Lithium batteries, aerosols, cosmetics with restrictions — packed, declared and cleared into NZ on the same lane. A capability few networks can offer.',
  bullets: ['IATA-certified pack & label', 'DG manifest at origin', 'Cleared by AMS NZ team'],
  metric: { v: 'IATA', l: 'Certified DG handling' },
  photo: 'assets/dest-auckland.jpg',
  cta: 'Talk to a DG specialist',
  href: '#contact'
},
{
  tag: 'United Kingdom · London gateway',
  num: '04',
  title: 'Direct to the UK doorstep.',
  body: 'AU → LHR on consolidated wholesale capacity, cleared into the UK and injected to last-mile network. Landed cost certain, VAT/IOSS handled at origin.',
  bullets: ['UK VAT at supported through DDP', 'Royal Mail / Evri / DPD final mile', 'Daily uplift, end to end milestones'],
  metric: { v: '3–8d', l: 'AU → UK door' },
  photo: 'assets/dest-london.jpg',
  cta: 'See UK lanes',
  href: '#coverage'
},
{
  tag: 'European Union · AMS hub',
  num: '05',
  title: 'One clearance into 27 markets.',
  body: 'Single inbound clearance at our Amsterdam hub, then injected across the EU on the fastest path. IOSS-ready, no per-country brokers, no surprises at the border.',
  bullets: ['IOSS supported ', 'AMS-operated EU hub', '27 EU markets, one contract'],
  metric: { v: '27', l: 'EU markets covered' },
  photo: 'assets/dest-paris.jpg',
  cta: 'See EU lanes',
  href: '#coverage'
}];


function HeroSolutions() {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI((x) => (x + 1) % HERO_SOLUTIONS.length), 6500);
    return () => clearInterval(t);
  }, [paused]);
  const s = HERO_SOLUTIONS[i];
  return (
    <section className="hsol" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="hsol-top">
        <h2>eCommerce Logistics <em>Defined by Control.</em></h2>
      </div>
      <div className="hsol-stage">
        <div className="hsol-photo" key={s.photo}>
          <img src={s.photo} alt={s.title} />
          <div className="hsol-photo-grad" />
          <div className="hsol-photo-meta">
            <div className="hsol-photo-num">{s.num} / 0{HERO_SOLUTIONS.length}</div>
            <div className="hsol-photo-tag">{s.tag}</div>
          </div>
        </div>
        <div className="hsol-body" key={s.title}>
          <h3>{s.title}</h3>
          <p>{s.body}</p>
          <ul className="hsol-bullets">
            {s.bullets.map((b) => <li key={b}>{b}</li>)}
          </ul>
          <div className="hsol-foot">
            <div className="hsol-metric">
              <strong>{s.metric.v}</strong>
              <span>{s.metric.l}</span>
            </div>
            <a className="hsol-cta" href={s.href}>{s.cta} →</a>
          </div>
        </div>
      </div>
      <div className="hsol-nav">
        {HERO_SOLUTIONS.map((x, idx) =>
        <button
          key={idx}
          className={`hsol-nav-btn ${idx === i ? 'on' : ''}`}
          onClick={() => setI(idx)}
          aria-label={x.tag}>
            <span className="hsol-nav-num">{x.num}</span>
            <span className="hsol-nav-tag">{x.tag.split('·')[0].trim()}</span>
            <span className="hsol-nav-prog" />
          </button>
        )}
      </div>
    </section>);

}

// ============ LOGO STRIP ============

function Logos() {
  return (
    <section className="logos">
      <div className="logos-head">Trusted by global merchants &amp; carriers</div>
      <div className="logos-row">
        <img src="assets/partner-amazon.webp" alt="Amazon" />
        <img src="assets/partner-shein.png" alt="Shein" />
        <img src="assets/partner-temu.png" alt="Temu" />
        <img src="assets/partner-iherb.png" alt="iHerb" />
        <img src="assets/partner-aramex.png" alt="Aramex" />
        <img src="assets/partner-asendia.webp" alt="Asendia" />
      </div>
    </section>);

}

// ============ HOW IT WORKS ============

function HowItWorks() {
  const [active, setActive] = useState(0);
  return (
    <section className="hiw" id="network">
      <div className="hiw-top">
        <h2>The wholesale network, <em>end to end.</em></h2>
        <p>From your warehouse to your customer's doorstep, every step runs on infrastructure AMS has built and operated for 20 years — the same infrastructure behind the world's largest eCommerce brands.</p>
      </div>

      <div className="hiw-vis">
        <HowItWorksDiagram />
      </div>
    </section>);

}

function HowItWorksDiagram() {
  return (
    <div className="hiw-diagram">
      {['Collection', 'AMS Processing', 'Origin Uplift', 'Destination Clearance', 'Postal/Commercial Injection', 'Delivery'].map((step, i, arr) =>
      <React.Fragment key={step}>
          <div className="hiw-step">
            <div className="hiw-step-n">{String(i + 1).padStart(2, '0')}</div>
            <div className="hiw-step-name">{step}</div>
          </div>
          {i < arr.length - 1 &&
        <div className="hiw-conn">
              <svg viewBox="0 0 100 20" preserveAspectRatio="none">
                <path d="M0 10 L95 10" stroke="var(--accent)" strokeWidth="1.2" strokeDasharray="2 2" />
                <path d="M88 5 L95 10 L88 15" fill="none" stroke="var(--accent)" strokeWidth="1.2" />
              </svg>
            </div>
        }
        </React.Fragment>
      )}
    </div>);

}

// ============ PILLARS ============

function Pillars() {
  return (
    <section className="pillars">
      <div className="pillars-top">
        <h2>Empowering retailers <em>going global.</em></h2>
        <p>For 20 years we've been the network behind the world's biggest eCommerce brands — moving freight through our own hubs. When you ship with AMS, you're accessing wholesale infrastructure directly. Not retail rates through a middleman.</p>
      </div>

      <div className="pillars-grid">
        {PILLARS.map((p, i) =>
        <article className="pillar" key={p.n}>
            <div className="pillar-photo">
              <img src={p.photo} alt={p.tag} />
              <div className="pillar-photo-n">{p.n}</div>
            </div>
            <div className="pillar-tag">{p.tag}</div>
            <h3>{p.title}</h3>
            <p>{p.body}</p>
          </article>
        )}
      </div>
    </section>);

}

// ============ FEATURE — SPEED (with destination tiles) ============

function FeatureSpeed() {
  return (
    <section className="feat">
      <div className="feat-top">
        <h2>Key <em>Tradelanes.</em></h2>
        <p>Our hubs sit on the lanes retailers actually need — ANZ, Asia, Europe, North America. Same infrastructure that runs Amazon, Temu and Shein parcels at scale, available to your business on the same commercial terms.</p>
      </div>

      <div className="dests-grid">
        {LANES.filter((l) => l.photo).map((l) =>
        <div className="dest" key={l.code}>
            <div className="dest-photo">
              <img src={l.photo} alt={l.city} />
              <div className="dest-photo-grade" />
              <div className="dest-code">{l.code}</div>
            </div>
            <div className="dest-meta">
              <div className="dest-city">{l.city}</div>
              <div className="dest-transit">{l.transit}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ============ FEATURE — VISIBILITY (platform) ============

function FeatureVisibility() {
  const [tab, setTab] = useState(0);
  const tabs = [
  { name: 'Unified Tracking', title: 'Complete visibility across the full journey', body: 'Track every shipment from uplift to final-mile delivery with consistent scan events across all markets and carriers. No portal-hopping.' },
  { name: 'Smart Routing', title: 'Intelligent lane selection optimised for speed', body: 'eControl uses consolidated volumes and route intelligence to move parcels through the fastest direct-injection pathways — automatically.' },
  { name: 'Ecommerce-Optimised', title: 'Designed around high-volume online retail', body: 'Built for brands shipping thousands of parcels, with tools to analyse performance, manage exceptions, and keep customers informed.' },
  { name: 'One API', title: 'Every carrier, one integration', body: 'Quote, book, label, track. 140+ carriers through a single REST API. Ship in a day, not a quarter.' }];

  return (
    <section className="feat feat-alt" id="platform">
      <div className="feat-top">
        <h2>The toolkit, <em>included.</em></h2>
        <p>eControl portal, My AMS API, real-time tracking, Tableau analytics — every shipment, every lane, every event in one place. Enterprise-grade tools built into the service, not charged as premium add-ons.</p>
      </div>

      <div className="feat-chips feat-chips-tabs">
        {tabs.map((t, i) =>
        <button key={i} className={tab === i ? 'on' : ''} onClick={() => setTab(i)}>{t.name}</button>
        )}
      </div>

      <div className="feat-split">
        <div className="feat-split-copy">
          <h3>{tabs[tab].title}</h3>
          <p>{tabs[tab].body}</p>
          <div className="feat-split-list">
            <div><span className="dot" />Scan-level events across 140+ carriers</div>
            <div><span className="dot" />Webhook + REST API + dashboard</div>
            <div><span className="dot" />White-label tracking page for your customers</div>
            <div><span className="dot" />Anomaly alerts pushed to Slack / email</div>
          </div>
        </div>
        <div className="feat-split-ui">
          <PlatformUI tab={tab} />
        </div>
      </div>
    </section>);

}

function PlatformUI({ tab }) {
  return (
    <div className="plat-ui">
      <div className="plat-ui-bar">
        <span className="plat-ui-dot" style={{ background: '#ff5f57' }} />
        <span className="plat-ui-dot" style={{ background: '#febc2e' }} />
        <span className="plat-ui-dot" style={{ background: '#28c840' }} />
        <span className="plat-ui-url">{['Track shipments', 'Smart routing', 'Reporting', 'API'][tab]}</span>
      </div>
      <div className="plat-ui-body">
        <div className="plat-ui-side">
          <div className="plat-ui-side-logo"><span />eControl</div>
          <div className="plat-ui-side-group">Operate</div>
          {['Overview', 'Parcels', 'Customer Service', 'Reporting'].map((x, i) =>
          <div key={x} className={`plat-ui-side-item ${i === 1 ? 'on' : ''}`}>{x}</div>
          )}
          <div className="plat-ui-side-group">Manage</div>
          {['Manifests', 'Integrations', 'Settings'].map((x) =>
          <div key={x} className="plat-ui-side-item">{x}</div>
          )}
        </div>
        <div className="plat-ui-main">
          {tab === 0 && <PlatUITracking />}
          {tab === 1 && <PlatUIRouting />}
          {tab === 2 && <PlatUIAnalytics />}
          {tab === 3 && <PlatUIApi />}
        </div>
      </div>
    </div>);

}

function PlatUITracking() {
  const rows = [
    { t: 'LP00187184719823SG', dest: 'GB · LHR', st: 'In Transit',     stc: 'intransit',  days: '2.3', src: 'AMS Direct',  age: '2m' },
    { t: 'LP00122041188912SG', dest: 'SG · SIN', st: 'Customs',        stc: 'customs',    days: '1.1', src: 'AMS Direct',  age: '14m' },
    { t: 'LP00199873301488HK', dest: 'AU · SYD', st: 'Out for Delivery',stc: 'out',        days: '3.8', src: 'AusPost',     age: '4m' },
    { t: 'LP00177220019002NZ', dest: 'NZ · AKL', st: 'Delivered',      stc: 'delivered',  days: '4.2', src: 'NZ Post',     age: '1h' },
    { t: 'LP00111458890371US', dest: 'US · JFK', st: 'Departed',       stc: 'departed',   days: '0.6', src: 'AMS Direct',  age: '8m' },
    { t: 'LP00166083384109CN', dest: 'AU · SYD', st: 'Arrived at AMS', stc: 'arrived',    days: '5.1', src: 'AMS Direct',  age: '23m' },
    { t: 'LP00133910022874JP', dest: 'JP · NRT', st: 'Manifested',     stc: 'manifested', days: '0.0', src: 'AMS Direct',  age: '31m' },
  ];
  return (
    <div className="ec-chrome">
      <div className="ec-mini-shell">
        <div className="ec-mini-side">
          <img src="assets/logo-white.png" alt="AMS Group" className="ec-mini-side-logo-img" />
          <div className="ec-mini-side-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 12l9-9 9 9"/><path d="M5 10v10h14V10"/></svg></div>
          <div className="ec-mini-side-item on"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div>
          <div className="ec-mini-side-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 17l6-6 4 4 8-8"/></svg></div>
          <div className="ec-mini-side-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="4" y="6" width="16" height="13" rx="2"/><path d="M8 3v5M16 3v5"/></svg></div>
          <div className="ec-mini-side-spacer" />
          <div className="ec-mini-side-avatar">AR</div>
        </div>
        <div className="ec-mini-main">
          <div className="ec-page-bar">
            <div>
              <div className="ec-breadcrumb">Operations · <b>Track shipments</b></div>
              <div className="ec-page-title">Track shipments</div>
            </div>
            <div className="ec-page-actions">
              <span className="ec-pill-btn">Export CSV</span>
              <span className="ec-pill-btn primary">+ New shipment</span>
            </div>
          </div>
          <div className="ec-toolbar">
            <div className="ec-search">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg>
              Search by tracking number, reference or recipient…
            </div>
            <div className="ec-pills">
              <span className="ec-pill on">All · 48,182</span>
              <span className="ec-pill">In Transit · 12,304</span>
              <span className="ec-pill">Customs · 187</span>
              <span className="ec-pill">Exceptions · 23</span>
            </div>
          </div>
          <div className="ec-table-wrap">
            <table className="ec-table">
              <thead>
                <tr>
                  <th>Tracking number</th>
                  <th>Destination</th>
                  <th>Status</th>
                  <th>Business days</th>
                  <th>Data source</th>
                  <th>Last checked</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r, i) => (
                  <tr key={i}>
                    <td className="mono">{r.t}</td>
                    <td>{r.dest}</td>
                    <td><span className={`ec-badge ec-badge--${r.stc}`}>{r.st}</span></td>
                    <td className="num">{r.days}</td>
                    <td>{r.src}</td>
                    <td className="num">{r.age} ago</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

function PlatUIRouting() {
  return (
    <>
      <div className="plat-ui-head">
        <div className="plat-ui-title">Smart routing</div>
        <div className="plat-ui-filters">
          <span className="plat-ui-filter on">SYD → LHR</span>
        </div>
      </div>
      <div className="plat-ui-lanes">
        {[
        { n: 'eControl · Direct', d: '4 days', p: '$12.40', on: true },
        { n: 'eControl · Postal', d: '5–6 days', p: '$9.80' },
        { n: 'Forwarder A', d: '7–9 days', p: '$14.20' },
        { n: 'Forwarder B', d: '8–10 days', p: '$11.60' }].
        map((x, i) =>
        <div key={i} className={`plat-ui-lane ${x.on ? 'on' : ''}`}>
            <span className="plat-ui-lane-n">{x.n}</span>
            <span className="plat-ui-lane-d">{x.d}</span>
            <span className="plat-ui-lane-p">{x.p}</span>
            {x.on && <span className="plat-ui-lane-badge">Recommended</span>}
          </div>
        )}
      </div>
    </>);

}

function PlatUIAnalytics() {
  const bars = [62, 48, 55, 72, 68, 81, 75, 88, 79, 92, 85, 96];
  return (
    <>
      <div className="plat-ui-head">
        <div className="plat-ui-title">Network analytics · Q2</div>
      </div>
      <div className="plat-ui-kpis">
        <div><span>Parcels</span><strong>14.2M</strong><em>+12%</em></div>
        <div><span>On-time</span><strong>96.4%</strong><em>+2.1pt</em></div>
        <div><span>Avg transit</span><strong>4.8 d</strong><em>-0.6 d</em></div>
        <div><span>Exceptions</span><strong>0.31%</strong><em>-0.08pt</em></div>
      </div>
      <div className="plat-ui-chart">
        {bars.map((b, i) =>
        <div key={i} className="plat-ui-bar" style={{ height: `${b}%` }} />
        )}
      </div>
    </>);

}

function PlatUIApi() {
  return (
    <>
      <div className="plat-ui-head">
        <div className="plat-ui-title">API · quote</div>
      </div>
      <pre className="plat-ui-code">
<span className="c">{`// POST /v1/quotes`}</span>{'\n'}
{'{'}{'\n'}
{'  "origin":      "SYD",'}{'\n'}
{'  "destination": "LHR",'}{'\n'}
{'  "weight_kg":   0.42,'}{'\n'}
{'  "service":     "expedited"'}{'\n'}
{'}'}{'\n\n'}
<span className="c">{`// 200 OK`}</span>{'\n'}
{'{'}{'\n'}
{'  "rate_aud":  12.40,'}{'\n'}
{'  "transit":   "4 days",'}{'\n'}
{'  "uplift":    "AMS-182",'}{'\n'}
{'  "carrier":   "Royal Mail"'}{'\n'}
{'}'}
      </pre>
    </>);

}

// ============ FEATURE — CONTROL (infrastructure) ============

function FeatureControl() {
  return (
    <section className="feat feat-dark" id="pricing">
      <div className="feat-top">
        <h2>Type 11 DDP <em>entry into the United States.</em></h2>
        <p>While postal channels now require third-party duty collection accounts and face a flat 10% Section 122 surcharge, AMS clears your parcels through commercial Type 11 entry with full HS code optimisation — start to finish, on infrastructure we control.</p>
      </div>

      <div className="ctrl-grid">
        <div className="ctrl-card ctrl-wide">
          <img src="assets/digi-van.png" alt="AMS commercial entry" />
          <div className="ctrl-card-body">
            <div className="ctrl-card-n">AMS Commercial Entry</div>
            <h4>Type 11 DDP clearance, end to end</h4>
            <p>Full HS code optimisation, AMS-controlled clearance chain, no third-party duty collection accounts required. The same machinery we run for the largest cross-border programmes — open to retailers shipping with us.</p>
          </div>
        </div>
        <div className="ctrl-card">
          <img src="assets/sydney.jpg" alt="Postal channel comparison" />
          <div className="ctrl-card-body">
            <div className="ctrl-card-n">Postal Channel</div>
            <h4>Commercial channel, flat 10% surcharge</h4>
            <p>Postal lanes now demand a third-party duty account, accept only 6-digit HS codes, and add a flat 10% Section 122 surcharge. Variable, uncontrolled transit follows.</p>
          </div>
        </div>
        <div className="ctrl-card">
          <img src="assets/dest-london.jpg" alt="Final mile partners" />
          <div className="ctrl-card-body">
            <div className="ctrl-card-n">Final Mile</div>
            <h4>Trusted handover to major carriers</h4>
            <p>From clearance to doorstep, parcels move through reputable last-mile partners — Australia Post, Royal Mail, USPS, Canada Post — under eControl tracking the whole way.</p>
          </div>
        </div>
      </div>
    </section>);

}

// ============ TRANSIT MAP ============

// Equirectangular lng/lat -> % in viewbox
function lngLatToXY(lng, lat) {
  const x = (lng + 180) / 360 * 100;
  const y = (90 - lat) / 180 * 100;
  return { x, y };
}

// Generate dotted world silhouette — cheap algorithmic approximation
const WORLD_DOTS = (() => {
  // Rough landmass rectangles [lng1,lat1,lng2,lat2] + density factor
  const regions = [
  [-168, 60, -52, 72, .5], // N Canada/Alaska
  [-140, 30, -55, 60, 1.2], // N America main
  [-120, 15, -80, 32, 1.0], // S US / Mexico
  [-82, -55, -35, 12, 1.1], // S America
  [-20, 35, 45, 72, 1.2], // Europe + W Russia
  [45, 40, 180, 72, 1.0], // Russia / Siberia
  [-18, -5, 52, 35, 1.1], // Africa
  [-18, -35, 40, -5, .9], // S Africa
  [35, 5, 78, 40, 1.0], // Middle East / India
  [73, 5, 142, 50, 1.3], // China / SE Asia
  [120, -10, 150, 6, .9], // Indonesia
  [112, -40, 154, -10, 1.0], // Australia
  [165, -48, 180, -34, .7] // NZ
  ];
  const out = [];
  regions.forEach(([l1, la1, l2, la2, d]) => {
    const step = 2.2;
    for (let lng = l1; lng <= l2; lng += step) {
      for (let lat = la1; lat <= la2; lat += step) {
        // cheap jitter + density gate
        if (Math.random() > 0.55 * d) continue;
        out.push(lngLatToXY(lng + (Math.random() - .5) * 1.4, lat + (Math.random() - .5) * 1.4));
      }
    }
  });
  return out;
})();

function TransitMap() {
  const [dir, setDir] = useState('outbound');
  const [activeId, setActiveId] = useState(null);
  const mapEl = useRef(null);
  const mapInst = useRef(null);
  const layersRef = useRef([]);

  const SYD = [-33.87, 151.21];

  // Init map once
  useEffect(() => {
    if (!mapEl.current || mapInst.current || typeof L === 'undefined') return;
    const map = L.map(mapEl.current, {
      center: [-5, 165],
      zoom: 2,
      zoomControl: false,
      scrollWheelZoom: false,
      attributionControl: false,
      worldCopyJump: false,
      dragging: true,
      doubleClickZoom: false
    });
    mapInst.current = map;

    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
      maxZoom: 8, minZoom: 1, subdomains: 'abcd'
    }).addTo(map);
    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}{r}.png', {
      maxZoom: 8, minZoom: 1, opacity: .45, subdomains: 'abcd'
    }).addTo(map);

    setTimeout(() => map.invalidateSize(), 250);
    return () => {map.remove();mapInst.current = null;};
  }, []);

  // Re-center on view change
  useEffect(() => {
    const map = mapInst.current;
    if (!map) return;
    map.setView([-5, 165], 2, { animate: true });
    setTimeout(() => map.invalidateSize(), 250);
  }, [dir]);

  // Re-draw markers on dir/active change
  useEffect(() => {
    const map = mapInst.current;
    if (!map) return;
    // clear previous
    layersRef.current.forEach((l) => map.removeLayer(l));
    layersRef.current = [];

    // Intra-ANZ tradelane arcs — always shown on both outbound and inbound views.
    // ANZ hub codes that map to LANES/INBOUND_LANES (so hover/active state stays in sync).
    const anzHubCodesInLanes = new Set(ANZ_HUBS.map(h => h.code));
    for (let i = 0; i < ANZ_HUBS.length; i++) {
      for (let j = i + 1; j < ANZ_HUBS.length; j++) {
        const a = ANZ_HUBS[i], b = ANZ_HUBS[j];
        const isActive = activeId && (activeId === a.code || activeId === b.code);
        const isDim = activeId && !isActive;
        const arcPts = buildArc([a.lat, a.lng], [b.lat, b.lng], 30);
        const line = L.polyline(arcPts, {
          color: isActive ? '#60a5fa' : '#3b82f6',
          weight: isActive ? 1.8 : 0.9,
          dashArray: isActive ? null : '3 4',
          opacity: isDim ? .1 : isActive ? .85 : .35
        }).addTo(map);
        layersRef.current.push(line);
      }
    }

    // Origin pulse at SYD
    const sydHtml = `<div class="mk-origin"><span class="r r1"></span><span class="r r2"></span><span class="d"></span></div>`;
    const origin = L.marker(SYD, {
      icon: L.divIcon({ className: '', html: sydHtml, iconSize: [22, 22], iconAnchor: [11, 11] })
    }).addTo(map);
    origin.bindTooltip('SYD · Origin', {
      permanent: true, direction: 'bottom', offset: [0, 14], className: 'mk-tip'
    });
    layersRef.current.push(origin);

    // Other ANZ hub markers (so user can hover/click MEL, BNE, PER, AKL, WLG, CHC)
    ANZ_HUBS.forEach((h) => {
      if (h.code === 'SYD') return; // already drawn as origin
      const isActive = activeId === h.code;
      const html = `<div class="mk-dest hl ${isActive ? 'on' : ''}"><span class="d"></span><span class="lbl">${h.code}</span></div>`;
      const m = L.marker([h.lat, h.lng], {
        icon: L.divIcon({ className: '', html, iconSize: [14, 14], iconAnchor: [7, 7] })
      }).addTo(map);
      m.on('mouseover', () => setActiveId(h.code));
      m.on('click', () => setActiveId((c) => c === h.code ? null : h.code));
      layersRef.current.push(m);
    });

    // Outbound/Inbound arcs + dest markers
    const activeLanes = dir === 'inbound' ? INBOUND_LANES : LANES;
    activeLanes.forEach((l) => {
      const dest = [l.lat, l.lng];
      const from = dir === 'inbound' ? dest : SYD;
      const to = dir === 'inbound' ? SYD : dest;
      const isActive = activeId === l.code;
      const isDim = activeId && !isActive;

      const arcPts = buildArc(from, to, 48);
      const line = L.polyline(arcPts, {
        color: isActive ? '#60a5fa' : '#3b82f6',
        weight: isActive ? 2.6 : 1.2,
        dashArray: isActive ? null : '4 6',
        opacity: isDim ? .15 : isActive ? 1 : .65
      }).addTo(map);
      layersRef.current.push(line);

      const showLabel = l.photo || isActive;
      const destHtml = `<div class="mk-dest ${isActive ? 'on' : ''} ${l.photo ? 'hl' : ''}"><span class="d"></span>${showLabel ? `<span class="lbl">${l.code}</span>` : ''}</div>`;
      const m = L.marker(dest, {
        icon: L.divIcon({ className: '', html: destHtml, iconSize: [14, 14], iconAnchor: [7, 7] })
      }).addTo(map);
      m.on('mouseover', () => setActiveId(l.code));
      m.on('click', () => setActiveId((c) => c === l.code ? null : l.code));
      layersRef.current.push(m);
    });
  }, [dir, activeId]);

  const active = activeId ? (
    LANES.find((l) => l.code === activeId) ||
    INBOUND_LANES.find((l) => l.code === activeId) ||
    ANZ_HUBS.find((h) => h.code === activeId)
  ) : null;

  const panelLanes = dir === 'inbound' ? INBOUND_LANES : LANES;

  return (
    <section className="tmap" id="coverage">
      <div className="tmap-top">
        <h2>16 global ecommerce hubs.</h2>
        <p>Every destination below is live in eControl — priced, booked, tracked, cleared. Origin ANZ, last-mile handled by the carrier we've already optimised for that route.</p>
      </div>

      <div className="tmap-controls">
        <button className={dir === 'outbound' ? 'on' : ''} onClick={() => {setDir('outbound');setActiveId(null);}}>→ Outbound from SYD</button>
        <button className={dir === 'inbound' ? 'on' : ''} onClick={() => {setDir('inbound');setActiveId(null);}}>← Inbound to SYD</button>
      </div>

      <div className="tmap-canvas" onMouseLeave={() => setActiveId(null)}>
        <div ref={mapEl} className="tmap-leaflet" />
        {active &&
        <div className="tmap-active-card">
            <div className="tmap-active-code">{active.code}</div>
            <div className="tmap-active-city">{active.city}</div>
            <div className="tmap-active-meta">
              <span>{active.transit || 'ANZ hub'}</span>
              <span>{active.region}</span>
            </div>
          </div>
        }
        <div className="tmap-legend">
          <span><i className="i1" /> {dir === 'outbound' ? 'Outbound from SYD' : 'Inbound to SYD'}</span>
          <span><i className="i2" /> Destination</span>
          <span><i className="i3" /> Intra-ANZ transship</span>
        </div>
      </div>

      <div className="tmap-lanes">
        {panelLanes.map((l) =>
        <div key={l.code}
        className={`tmap-lane ${activeId === l.code ? 'on' : ''}`}
        onMouseEnter={() => setActiveId(l.code)}
        onMouseLeave={() => setActiveId(null)}>
            <div className="tmap-lane-code">{l.code}</div>
            <div className="tmap-lane-name">{l.city}</div>
            <div className="tmap-lane-meta">
              <span>{l.transit}</span>
              <span>{l.region}</span>
            </div>
          </div>
        )}
      </div>
    </section>);

}

// Great-circle-ish arc between two [lat,lng] points, n intermediate pts
function buildArc(a, b, n) {
  const [la1, lo1] = a;const [la2, lo2] = b;
  const out = [];
  // Handle antimeridian: if |dlng| > 180, go the short way
  let dlng = lo2 - lo1;
  if (dlng > 180) dlng -= 360;
  if (dlng < -180) dlng += 360;
  const dlat = la2 - la1;
  for (let i = 0; i <= n; i++) {
    const t = i / n;
    const lat = la1 + dlat * t + Math.sin(t * Math.PI) * Math.min(25, Math.abs(dlng) / 6);
    const lng = lo1 + dlng * t;
    out.push([lat, lng]);
  }
  return out;
}

// ============ COMPARE ============

const COMPARE = [
{ row: 'Pricing power',     ams: 'Aggregated wholesale commercials, direct to retailers', fwd: 'Retail rates with a reseller margin on top' },
{ row: 'Who runs the network', ams: 'AMS-operated hubs across ANZ and globally',     fwd: 'Re-sold capacity rented from someone else' },
{ row: 'US clearance',      ams: 'Type 11 DDP, cleared by AMS · HS-optimised',    fwd: 'Postal channel · 10% surcharge · 3rd-party duty a/c' },
{ row: 'Carrier choice',    ams: '140+ carriers, picked per lane on cost & speed', fwd: "Locked to the carrier they resell — take what's given" },
{ row: 'Software & data',   ams: 'eControl, My AMS API and Tableau — included',     fwd: 'Per-feature billing on bolt-on portals' },
{ row: 'Accountability',    ams: 'One AMS team owns origin → clearance → delivery', fwd: 'Tickets bounce between forwarder, broker and carrier' }];


function Compare() {
  return (
    <section className="cmp">
      <div className="cmp-top">
        <h2>Wholesale direct vs. <em>retail through a middleman.</em></h2>
      </div>
      <div className="cmp-table">
        <div className="cmp-row cmp-row-head">
          <div className="cmp-lbl"></div>
          <div className="cmp-us"><span className="cmp-tag on">AMS eControl</span></div>
          <div className="cmp-them"><span className="cmp-tag">Reseller / aggregator</span></div>
        </div>
        {COMPARE.map((c, i) =>
        <div className="cmp-row" key={i}>
            <div className="cmp-lbl">{c.row}</div>
            <div className="cmp-us"><span className="cmp-mark">✓</span>{c.ams}</div>
            <div className="cmp-them"><span className="cmp-mark-x">—</span>{c.fwd}</div>
          </div>
        )}
      </div>
    </section>);

}

// ============ CTA BAND ============

function CTABand() {
  return (
    <section className="band" id="contact">
      <div className="band-inner">
        <h3>Wholesale logistics. <em>Your competitive edge.</em></h3>
        <p>Unique commercials built on 20 years of wholesale infrastructure. Connect with our team to start shipping globally from Australia and New Zealand.</p>
        <div className="band-ctas">
          <a href="https://www.amsegroup.com.au/contact/" className="band-primary">Talk to our team →</a>
          <a href="https://ams-econtrol.pages.dev/app" className="band-secondary" target="_blank" rel="noopener">eControl login</a>
        </div>
      </div>
    </section>);

}

// ============ FOOTER ============

function Footer() {
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <img src="assets/logo.png" alt="eControl" />
          <p>AMS eGroup is Australia's wholesale ecommerce logistics network — privately owned, IATA accredited, operator-built. 50+ countries, 20 years.</p>
        </div>

      </div>
      <div className="foot-bot">
        <div>© 2026 AMS eControl · IATA Accredited Cargo Agent · Sydney, Australia</div>
        <div><img src="assets/iata.png" alt="IATA" style={{ height: 28, opacity: .8 }} /></div>
      </div>
    </footer>);

}

// ============ TRACKING DETAIL OVERLAY ============

function TrackingDetail({ tid, onClose }) {
  const events = [
  { t: 'Tue 04:18 UTC',  st: 'In Transit · Uplift AMS-182',     loc: 'In flight · over SE Asia',    active: true },
  { t: 'Mon 22:15 AEST', st: 'Departed AMS Sydney',              loc: 'SYD gateway · cleared for export' },
  { t: 'Mon 14:02 AEST', st: 'Arrived at AMS',                   loc: 'AMS Sydney gateway' },
  { t: 'Mon 08:42 AEST', st: 'Picked up · Pickup',               loc: 'Matraville NSW 2036' },
  { t: 'Sun 19:11 AEST', st: 'Manifested',                       loc: 'Shopify · merchant handover' }];

  return (
    <div className="tdet" onClick={onClose}>
      <div className="tdet-card" onClick={(e) => e.stopPropagation()}>
        <div className="tdet-head">
          <div>
            <div className="tdet-kicker">Tracking · live</div>
            <div className="tdet-tid">{fmtTrack(tid || randTrack())}</div>
          </div>
          <button className="tdet-close" onClick={onClose}>✕</button>
        </div>

        <div className="tdet-hero">
          <div className="tdet-ports">
            <div className="tdet-port">
              <div className="tdet-port-code">SYD</div>
              <div className="tdet-port-name">Sydney</div>
              <div className="tdet-port-meta">Mon · 22:15 AEST</div>
            </div>
            <div className="tdet-arc">
              <svg viewBox="0 0 400 60" preserveAspectRatio="none">
                <path d="M0 50 Q200 -10 400 50" fill="none" stroke="var(--accent)" strokeWidth="2" strokeDasharray="4 4" />
                <circle r="6" fill="var(--accent)">
                  <animateMotion dur="5s" repeatCount="indefinite" path="M0 50 Q200 -10 400 50" />
                </circle>
              </svg>
              <div className="tdet-arc-lbl">In flight · AMS-182</div>
            </div>
            <div className="tdet-port">
              <div className="tdet-port-code">LHR</div>
              <div className="tdet-port-name">London</div>
              <div className="tdet-port-meta">ETA Wed · 14:20 BST</div>
            </div>
          </div>

          <div className="tdet-stats">
            <div><span>Status</span><strong className="ok">On time</strong></div>
            <div><span>Service</span><strong>Expedited</strong></div>
            <div><span>Weight</span><strong>0.420 kg</strong></div>
            <div><span>Carrier hand-off</span><strong>Royal Mail</strong></div>
          </div>
        </div>

        <div className="tdet-timeline">
          {events.map((e, i) =>
          <div key={i} className={`tdet-ev ${e.active ? 'active' : ''}`}>
              <div className="tdet-ev-dot" />
              <div className="tdet-ev-body">
                <div className="tdet-ev-st">{e.st}</div>
                <div className="tdet-ev-loc">{e.loc}</div>
              </div>
              <div className="tdet-ev-t">{e.t}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// ============ TWEAKS ============

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "slate",
  "heroMedia": "video",
  "density": "comfortable",
  "typeScale": "default"
} /*EDITMODE-END*/;

function applyAccent(key) {
  const a = ACCENTS[key] || ACCENTS.slate;
  Object.entries(a).forEach(([k, v]) => k.startsWith('--') && document.documentElement.style.setProperty(k, v));
}
function applyDensity(key) {
  document.body.dataset.density = key;
}
function applyTypeScale(key) {
  document.body.dataset.typeScale = key;
}

function Tweaks({ state, onChange }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    applyAccent(state.accent);
    applyDensity(state.density);
    applyTypeScale(state.typeScale);
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', handler);
    try {window.parent.postMessage({ type: '__edit_mode_available' }, '*');} catch (e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  const update = (patch) => {
    const next = { ...state, ...patch };
    onChange(next);
    if (patch.accent) applyAccent(patch.accent);
    if (patch.density) applyDensity(patch.density);
    if (patch.typeScale) applyTypeScale(patch.typeScale);
    try {window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');} catch (e) {}
  };

  if (!visible) return null;

  return (
    <div className="tweaks">
      <div className="tw-head">
        <span className="tw-dot" />
        <strong>Tweaks</strong>
        <button className="tw-x" onClick={() => {
          setVisible(false);
          try {window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');} catch (e) {}
        }}>✕</button>
      </div>

      <div className="tw-group">
        <div className="tw-label">Accent colour</div>
        <div className="tw-swatches">
          {Object.entries(ACCENTS).map(([k, a]) =>
          <button key={k}
          className={`tw-swatch ${state.accent === k ? 'on' : ''}`}
          onClick={() => update({ accent: k })}>
              <span className="s-dot" style={{ background: a['--accent'] }} />
              {a.name}
            </button>
          )}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Hero videos</div>
        <div className="tw-seg">
          {[
          { k: 'expedited', v: 'AMS Expedited' },
          { k: 'video', v: 'Videos' },
          { k: 'map', v: 'Map' },
          { k: 'photo', v: 'Photo' }].
          map((o) =>
          <button key={o.k}
          className={state.heroMedia === o.k ? 'on' : ''}
          onClick={() => update({ heroMedia: o.k })}>{o.v}</button>
          )}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Density</div>
        <div className="tw-seg">
          {['compact', 'comfortable', 'spacious'].map((k) =>
          <button key={k}
          className={state.density === k ? 'on' : ''}
          onClick={() => update({ density: k })}>{k}</button>
          )}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Type scale</div>
        <div className="tw-seg">
          {['tight', 'default', 'editorial'].map((k) =>
          <button key={k}
          className={state.typeScale === k ? 'on' : ''}
          onClick={() => update({ typeScale: k })}>{k}</button>
          )}
        </div>
      </div>
    </div>);

}

// ============ APP ============

function App() {
  const [state, setState] = useState(TWEAK_DEFAULTS);
  const [trackOpen, setTrackOpen] = useState(false);
  const [trackId, setTrackId] = useState('');

  const openTrack = (tid) => {
    setTrackId(tid || randTrack());
    setTrackOpen(true);
  };

  return (
    <>
      <Tweaks state={state} onChange={setState} />
      <Nav />
      <Hero heroMedia={state.heroMedia} onTrack={openTrack} />
      <HeroSolutions />
      <Logos />
      <HowItWorks />
      <TransitMap />
      <FeatureSpeed />
      <FeatureVisibility />
      <FeatureControl />
      <CTABand />
      <Footer />
      {trackOpen && <TrackingDetail tid={trackId} onClose={() => setTrackOpen(false)} />}
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);