/* ============================================================
   About page — AusMotion Robotics
   Structure: Hero · Mission/Vision/Values · Story · What we do
   · Team · Partners · Certifications · Where we operate · CTAs
   ============================================================ */

const ABOUT = {
  breadcrumb: ['Home', 'About'],
  hero: {
    eyebrow: 'About AusMotion',
    h1: 'Bringing world-class robotics home to Australia.',
    lede: "We started AusMotion because the world's best robots weren't reaching the Australian businesses that needed them most. We exist to close that gap — through localization, support, and partnership.",
  },
  mission: {
    eyebrow: 'Mission',
    h2: 'What we are here to do.',
    body: "Make advanced robotics practical, supportable, and trusted in Australian industry. We take platforms built for other markets and engineer them for our conditions, our regulations, and our operators — then stand behind them for the life of the deployment. That is the whole job.",
  },
  vision: {
    eyebrow: 'Vision',
    h2: 'Where we are headed.',
    body: "A generation of Australian operations — mines, ports, facilities, care homes, coastlines — where the right robot for the right task is on site, supported locally, and accountable to Australian standards. Not a future of imported novelties. A future of equipment that belongs here.",
  },
  values: [
    { k: '01', t: 'Local accountability', b: 'Australian team, Australian support, Australian standards. When something needs fixing, the person fixing it is in the same time zone.' },
    { k: '02', t: 'Practical innovation', b: "Robots that work in real conditions, not lab demos. We measure a platform by what it does on site in year two, not year one's press release." },
    { k: '03', t: 'Long-term partnership', b: 'We measure success in deployments that last, not units sold. The quiet customer running for five years is the real marker of a good program.' },
  ],
  story: {
    eyebrow: 'Our story',
    h2: 'Why AusMotion exists.',
    paras: [
      "The founding observation was simple. Some of the most capable robotic platforms in the world were being built in California, Boston, Shenzhen, and Seoul — and almost none of them were being deployed seriously in Australia. The platforms that did arrive came through import channels that stopped short of support: no local spares, no training in-country, no integration engineers, no path through AS/NZS compliance.",
      "Australian operators responded in two ways. Some imported units anyway, hired consultants, and ran programs that worked until the first serious fault — then stalled. Others waited. Mining groups, facility operators, defence contractors, aged-care networks all held proof-of-concepts they could not get over the line because the supply chain underneath the technology was not there.",
      "AusMotion exists to be that supply chain. We partner with the leading manufacturers, take responsibility for making their platforms work here, and sit between the OEM and the operator for the whole life of the deployment. Hardening for heat and dust. Certification for Australian standards. Training in Australian language and context. Spares in Perth, Brisbane, and Kalgoorlie. Engineers you can call.",
    ],
    pullQuote: "The robot is the easy part. Making it work in Australia, for years, under contract — that is the work.",
    pullAttribution: 'Founding principle',
  },
  milestones: [
    { y: '2023', t: 'Founded in Perth', b: 'Initial team of four, first partnership agreement signed with a Tier-1 quadruped OEM.' },
    { y: '2024', t: 'First production deployment', b: 'Pilbara iron ore operator, two-unit quadruped fleet across three active pits.' },
    { y: '2024', t: 'Kalgoorlie service hub opened', b: 'Regional spares and field-service capability established for Western Australia operations.' },
    { y: '2025', t: 'Brisbane office established', b: 'East-coast coverage for Queensland mining, Port of Brisbane, and Defence programs.' },
    { y: '2025', t: 'Managed-service program launched', b: 'Outcomes-based engagements for operators without in-house robotics capability.' },
    { y: '2026', t: 'Now', b: 'Seven OEM partnerships, three service hubs, active deployments across five industries and two jurisdictions.' },
  ],
  whatWeDo: {
    h2: 'What AusMotion does, in plain terms.',
    items: [
      { n: '01', t: 'We localize robots for Australian conditions', b: 'Environmental hardening, AS/NZS certification, integration with your OT and safety systems. Imported platforms become site-ready, certified, and supportable.', link: 'Service-Localization.html', linkLabel: 'Localization service' },
      { n: '02', t: 'We make them accessible, rental or purchase', b: 'Flexible engagement models — monthly rental for pilots and seasonal programs, outright purchase for established operations. Fully supported in both.', link: 'Service-Rental.html', linkLabel: 'Rental and purchase' },
      { n: '03', t: 'We support them across operational life', b: 'Spares inventory, preventive maintenance, software updates, 24/7 support, and managed-service engagements where we operate the platform on your behalf.', link: '#', linkLabel: 'Managed service' },
    ],
  },
  team: {
    eyebrow: 'The team',
    h2: 'The people behind AusMotion.',
    sub: 'A founding team with backgrounds in mining automation, robotics engineering, defence integration, and Australian industrial operations. We are a small team deliberately — growing only as deployments need it.',
    members: [
      { name: 'James Whitlock', title: 'Co-founder & CEO', bio: 'Fifteen years in mining automation and industrial IoT. Previously led autonomous haulage integration at a Tier-1 iron ore operator.', tag: 'Perth' },
      { name: 'Dr. Priya Ramanathan', title: 'Co-founder & CTO', bio: 'PhD in robotics from UTS. Previously senior robotics engineer at a US humanoid platform OEM, led the ANZ commissioning program.', tag: 'Perth' },
      { name: 'Mark Ozolins', title: 'Head of Field Engineering', bio: 'Twenty years in mine-site electrical and controls. Runs the engineering team delivering localization, commissioning, and site support.', tag: 'Kalgoorlie' },
      { name: 'Sarah Chen', title: 'Head of Commercial', bio: 'Former procurement lead at a national facilities group. Runs rental, purchase, and managed-service engagements.', tag: 'Brisbane' },
      { name: 'David Nguyen', title: 'Head of Compliance', bio: 'AS/NZS 3820 and WHS specialist. Owns the certification process for every platform we put on site.', tag: 'Perth' },
      { name: 'Ellie Marston', title: 'Head of Customer Success', bio: 'Former mining operations manager. Translates between operator reality and engineering priorities so deployments actually land.', tag: 'Perth' },
    ],
    footer: 'Hiring discreetly in engineering, field service, and customer success. See the careers note at the bottom of this page.',
  },
  partners: {
    eyebrow: 'Technology partners',
    h2: 'Our technology partners.',
    sub: "We are not tied to a single platform. We work with the world's leading manufacturers to bring the right robot to each use case — and we hold authorized-partner and certified-reseller status where our customers need that backing.",
    note: 'Partnership logos shown are placeholders. Real partner identification is agreed per-OEM under each partnership agreement.',
    tiles: [
      { name: 'Quadruped OEM · US', tier: 'Authorized integrator' },
      { name: 'Quadruped OEM · CN', tier: 'Certified reseller' },
      { name: 'Humanoid OEM · US', tier: 'ANZ partner' },
      { name: 'Cleaning OEM · KR', tier: 'Authorized integrator' },
      { name: 'UAV OEM · EU', tier: 'CASA-approved operator' },
      { name: 'Exoskeleton OEM · JP', tier: 'Distribution agreement' },
      { name: 'Subsea OEM · NO', tier: 'Regional service partner' },
      { name: 'Autonomy stack · AU', tier: 'Co-development agreement' },
    ],
  },
  certs: {
    eyebrow: 'Certifications & compliance',
    h2: 'Built on Australian standards.',
    sub: 'We hold the certifications and memberships our customers need us to hold — and we publish them rather than list them as claims. Audit reports available on request under NDA.',
    items: [
      { code: 'AS/NZS 3820', label: 'Electrical safety compliance' },
      { code: 'ISO 9001', label: 'Quality management system' },
      { code: 'ISO 27001', label: 'Information security (in progress)' },
      { code: 'CASA', label: 'Remote pilot operator certificate' },
      { code: 'DISP', label: 'Defence Industry Security Program' },
      { code: 'AMMA', label: 'Australian Mines & Metals Association' },
      { code: 'WHS', label: 'Work Health & Safety compliant' },
      { code: 'Essential Eight', label: 'ACSC cybersecurity aligned' },
    ],
  },
  locations: {
    eyebrow: 'Where we operate',
    h2: 'Australian-based, nationally deployed.',
    sub: 'Three offices, nine active deployment regions. National service coverage through a combination of in-house field engineers and certified contractor partners.',
    offices: [
      { city: 'Melbourne', role: 'Headquarters', detail: 'Engineering, commercial, and compliance. Primary inventory for Victoria and national operations.' },
      { city: 'Sydney', role: 'East-coast office', detail: 'Commercial and field-engineering coverage for NSW and Queensland.' },
      { city: 'Perth', role: 'West-coast office', detail: 'Field engineering and spares presence for Western Australian operations.' },
    ],
    deployments: ['Pilbara, WA', 'Goldfields, WA', 'Hunter Valley, NSW', 'Bowen Basin, QLD', 'Port of Brisbane, QLD', 'Port of Fremantle, WA', 'Sydney CBD, NSW', 'Melbourne CBD, VIC', 'Adelaide, SA'],
  },
  cta: {
    workWith: {
      h: 'Want to work with us?',
      b: "Whether you're scoping a pilot, planning a capital program, or exploring whether robotics is worth the effort at all — start with a conversation. We will not pitch you a robot before we understand the problem.",
      primary: 'Book a demo',
      secondary: 'contact@ausmotion.com.au',
    },
    workFor: {
      h: 'Want to work for us?',
      b: "We are not hiring publicly right now — most of our hires come through introduction. If you are experienced in field robotics, mining automation, industrial controls, or customer success in heavy industry, we would like to hear from you regardless.",
      primary: 'contact@ausmotion.com.au',
    },
  },
};

/* ----- SUB-COMPONENTS ----- */

function AboutHero({ data }) {
  return (
    <section data-swap="HERO" data-screen-label="About — Hero" style={{ position: 'relative', minHeight: '48vh', background: '#0A0F1A', overflow: 'hidden' }}>
      {/* Photo placeholder — Australian landscape with industrial/robotics element */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background:
          'radial-gradient(ellipse 60% 80% at 70% 40%, rgba(232,117,61,0.22), transparent 60%),' +
          'linear-gradient(180deg, #1A2236 0%, #0A0F1A 100%)',
      }}/>
      <img src="assets/pattern-topo.svg" aria-hidden="true" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.14, mixBlendMode: 'screen',
      }}/>
      <div aria-hidden="true" style={{
        position: 'absolute', right: 0, top: 0, bottom: 0, width: '42%',
        background: 'linear-gradient(90deg, transparent, rgba(232,117,61,0.12))',
      }}/>
      {/* Placeholder tag */}
      <div style={{
        position: 'absolute', top: 96, right: 40, fontFamily: 'JetBrains Mono', fontSize: 10,
        letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)',
        border: '1px solid rgba(255,255,255,0.22)', padding: '4px 8px',
      }}>Placeholder · team + site photography</div>

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '120px 40px 72px', position: 'relative' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 20 }}>
          {data.breadcrumb.map((b, i) => <span key={i}>{b}{i < data.breadcrumb.length - 1 ? ' / ' : ''}</span>)}
        </div>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 16 }}>{data.hero.eyebrow}</div>
        <h1 className="svc-hero__h1" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 68, fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.04, color: '#fff', margin: 0, maxWidth: 900 }}>
          {data.hero.h1}
        </h1>
        <p className="svc-hero__lede" style={{ fontFamily: 'Inter', fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.82)', margin: '28px 0 0', maxWidth: 740 }}>
          {data.hero.lede}
        </p>
      </div>
    </section>
  );
}

function MissionVisionValues({ data }) {
  return (
    <section data-swap="MISSION-VISION-VALUES" data-screen-label="About — Mission / Vision / Values" style={{ background: '#FAFBFC', padding: '120px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="ab-mv-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 88 }}>
          {[data.mission, data.vision].map((x, i) => (
            <div key={i} style={{ borderTop: '1px solid #0A0F1A', paddingTop: 32 }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 20 }}>{x.eyebrow}</div>
              <h2 style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 40, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#0A0F1A', margin: 0 }}>{x.h2}</h2>
              <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.65, color: '#3A424D', marginTop: 24, maxWidth: 540 }}>{x.body}</p>
            </div>
          ))}
        </div>

        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 24 }}>Core values</div>
        <div className="ab-values-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {data.values.map(v => (
            <div key={v.k} style={{ background: '#fff', border: '1px solid #E6EAF0', padding: '36px 32px 40px', position: 'relative' }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', color: '#7B8593', marginBottom: 16 }}>{v.k}</div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', color: '#0A0F1A', margin: 0 }}>{v.t}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 14.5, lineHeight: 1.6, color: '#3A424D', marginTop: 12, margin: '12px 0 0' }}>{v.b}</p>
              <div aria-hidden="true" style={{ position: 'absolute', left: 0, top: 0, width: 3, height: 48, background: '#E8753D' }}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Story({ data }) {
  return (
    <section data-swap="STORY" data-screen-label="About — Story" style={{ background: '#FFF', padding: '120px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="ab-story-grid" style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>{data.story.eyebrow}</div>
            <h2 className="svc-h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.08, color: '#0A0F1A', margin: 0 }}>{data.story.h2}</h2>
          </div>
          <div>
            {data.story.paras.map((p, i) => (
              <p key={i} style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.7, color: '#3A424D', margin: i === 0 ? 0 : '20px 0 0', maxWidth: 760 }}>{p}</p>
            ))}

            <figure style={{ margin: '56px 0 0', padding: '36px 0 36px 32px', borderLeft: '3px solid #E8753D', maxWidth: 780 }}>
              <blockquote style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 28, fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.3, color: '#0A0F1A', margin: 0, textWrap: 'pretty' }}>
                "{data.story.pullQuote}"
              </blockquote>
              <figcaption style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593', marginTop: 20 }}>— {data.story.pullAttribution}</figcaption>
            </figure>
          </div>
        </div>

        {/* Milestones timeline — commented out
        <div style={{ marginTop: 96 }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 28 }}>Milestones</div>
          <div className="ab-timeline" style={{ position: 'relative' }}>
            <div aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, top: 14, height: 1, background: '#E6EAF0' }}/>
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${ABOUT.milestones.length}, 1fr)`, gap: 24, position: 'relative' }}>
              {ABOUT.milestones.map((m, i) => (
                <div key={i}>
                  <div style={{ width: 13, height: 13, borderRadius: 0, background: i === ABOUT.milestones.length - 1 ? '#E8753D' : '#0A0F1A', marginBottom: 22, transform: 'rotate(45deg)' }}/>
                  <div style={{ fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 600, color: '#0A0F1A', letterSpacing: '0.04em' }}>{m.y}</div>
                  <div style={{ fontFamily: 'Inter', fontSize: 15, fontWeight: 600, color: '#0A0F1A', marginTop: 6, lineHeight: 1.35 }}>{m.t}</div>
                  <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#56606E', marginTop: 6, lineHeight: 1.5 }}>{m.b}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        */}
      </div>
    </section>
  );
}

function WhatWeDo({ data }) {
  return (
    <section data-swap="WHAT-WE-DO" data-screen-label="About — What we do" style={{ background: '#F3F5F8', padding: '120px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <h2 className="svc-h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.08, color: '#0A0F1A', margin: 0, maxWidth: 780 }}>
          {data.whatWeDo.h2}
        </h2>
        <div className="ab-wwd-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48 }}>
          {data.whatWeDo.items.map(it => (
            <a key={it.n} href={it.link} style={{ display: 'block', background: '#fff', border: '1px solid #E6EAF0', padding: '36px 32px', textDecoration: 'none', color: 'inherit', transition: 'transform 180ms, border-color 180ms' }}
               onMouseEnter={e => { e.currentTarget.style.borderColor = '#E8753D'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
               onMouseLeave={e => { e.currentTarget.style.borderColor = '#E6EAF0'; e.currentTarget.style.transform = 'none'; }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', color: '#E8753D', marginBottom: 16 }}>{it.n}</div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', color: '#0A0F1A', margin: 0, lineHeight: 1.25 }}>{it.t}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 14.5, lineHeight: 1.6, color: '#3A424D', margin: '14px 0 24px' }}>{it.b}</p>
              <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 600, color: '#355A78', borderBottom: '1px solid currentColor', display: 'inline-flex', alignItems: 'center', gap: 6, paddingBottom: 2 }}>
                {it.linkLabel} <Icons.Arrow size={14}/>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Team({ data }) {
  return (
    <section data-swap="TEAM" data-screen-label="About — Team" style={{ background: '#fff', padding: '120px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>{data.team.eyebrow}</div>
          <h2 className="svc-h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.08, color: '#0A0F1A', margin: 0 }}>{data.team.h2}</h2>
          <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.65, color: '#3A424D', marginTop: 20 }}>{data.team.sub}</p>
        </div>

        <div className="ab-team-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {data.team.members.map(m => <TeamCard key={m.name} m={m}/>)}
        </div>

        <div style={{ marginTop: 40, padding: '20px 0 0', borderTop: '1px solid #E6EAF0', fontFamily: 'Inter', fontSize: 14, color: '#56606E', fontStyle: 'italic' }}>
          {data.team.footer}
        </div>
      </div>
    </section>
  );
}

function TeamCard({ m }) {
  const [hover, setHover] = React.useState(false);
  const initials = m.name.split(' ').map(s => s[0]).slice(0, 2).join('');
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{ position: 'relative', background: '#FAFBFC', border: '1px solid #E6EAF0', overflow: 'hidden', transition: 'border-color 180ms' }}>
      {/* Portrait placeholder */}
      <div aria-label={`Portrait placeholder for ${m.name}`} style={{
        width: '100%', aspectRatio: '4 / 5', position: 'relative',
        background: 'linear-gradient(160deg, #1A2236 0%, #0F1E3D 60%, #2C3E5A 100%)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          fontFamily: 'Inter, system-ui, sans-serif', fontSize: 64, fontWeight: 300, color: 'rgba(255,255,255,0.65)',
          letterSpacing: '-0.02em',
        }}>{initials}</div>
        <div style={{
          position: 'absolute', top: 12, left: 12, fontFamily: 'JetBrains Mono', fontSize: 10,
          letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)',
          border: '1px solid rgba(255,255,255,0.25)', padding: '3px 6px',
        }}>Portrait placeholder</div>
        <div style={{
          position: 'absolute', bottom: 12, right: 12, fontFamily: 'JetBrains Mono', fontSize: 10,
          letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FFB892',
          border: '1px solid rgba(255,184,146,0.4)', padding: '3px 6px',
        }}>{m.tag}</div>

        {/* Hover overlay w/ LinkedIn */}
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(10,15,26,0.82)',
          display: 'flex', alignItems: 'flex-end', padding: 20,
          opacity: hover ? 1 : 0, transition: 'opacity 180ms',
        }}>
          <div>
            <div style={{ fontFamily: 'Inter', fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)' }}>{m.bio}</div>
            <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 600, color: '#FFB892', marginTop: 14, borderBottom: '1px solid currentColor', display: 'inline-block', paddingBottom: 2 }}>LinkedIn →</div>
          </div>
        </div>
      </div>
      <div style={{ padding: '20px 22px 22px' }}>
        <div style={{ fontFamily: 'Inter', fontSize: 17, fontWeight: 600, color: '#0A0F1A', letterSpacing: '-0.005em' }}>{m.name}</div>
        <div style={{ fontFamily: 'Inter', fontSize: 14, color: '#56606E', marginTop: 4 }}>{m.title}</div>
      </div>
    </div>
  );
}

function Partners({ data }) {
  return (
    <section data-swap="PARTNERS" data-screen-label="About — Partners" style={{ background: '#FAFBFC', padding: '120px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>{data.partners.eyebrow}</div>
          <h2 className="svc-h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.08, color: '#0A0F1A', margin: 0 }}>{data.partners.h2}</h2>
          <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.65, color: '#3A424D', marginTop: 20 }}>{data.partners.sub}</p>
        </div>

        <div className="ab-partners-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid #E6EAF0', background: '#E6EAF0' }}>
          {data.partners.tiles.map((t, i) => (
            <div key={i} style={{ background: '#fff', padding: '36px 24px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 180 }}>
              <img src="assets/partner-tile-placeholder.svg" alt="" style={{ height: 44, width: 'auto', opacity: 0.72, filter: 'grayscale(1)' }}/>
              <div style={{ marginTop: 20 }}>
                <div style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: '#0A0F1A' }}>{t.name}</div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E8753D', marginTop: 6 }}>{t.tier}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 20, fontFamily: 'Inter', fontSize: 13, color: '#7B8593', fontStyle: 'italic' }}>{data.partners.note}</div>
      </div>
    </section>
  );
}

function Certifications({ data }) {
  return (
    <section data-swap="CERTIFICATIONS" data-screen-label="About — Certifications" style={{ background: '#0A0F1A', color: '#fff', padding: '120px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="ab-certs-grid" style={{ display: 'grid', gridTemplateColumns: '420px 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 16 }}>{data.certs.eyebrow}</div>
            <h2 className="svc-h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.08, color: '#fff', margin: 0 }}>{data.certs.h2}</h2>
            <p style={{ fontFamily: 'Inter', fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.72)', marginTop: 20 }}>{data.certs.sub}</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid #17294D', borderLeft: '1px solid #17294D' }}>
            {data.certs.items.map(c => (
              <div key={c.code} style={{ padding: '24px 24px', borderRight: '1px solid #17294D', borderBottom: '1px solid #17294D', display: 'flex', alignItems: 'center', gap: 20 }}>
                <div style={{ width: 56, height: 56, borderRadius: 0, border: '1px solid rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 56px' }}>
                  <Icons.Shield size={22}/>
                </div>
                <div>
                  <div style={{ fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', color: '#FFB892' }}>{c.code}</div>
                  <div style={{ fontFamily: 'Inter', fontSize: 14, color: 'rgba(255,255,255,0.85)', marginTop: 4, lineHeight: 1.4 }}>{c.label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhereWeOperate({ data }) {
  return (
    <section data-swap="LOCATIONS" data-screen-label="About — Where we operate" style={{ background: '#fff', padding: '120px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>{data.locations.eyebrow}</div>
          <h2 className="svc-h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.08, color: '#0A0F1A', margin: 0 }}>{data.locations.h2}</h2>
          <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.65, color: '#3A424D', marginTop: 20 }}>{data.locations.sub}</p>
        </div>

        <div className="ab-map-grid" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'start' }}>
          <AustraliaMap/>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 16 }}>Offices</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid #E6EAF0' }}>
              {data.locations.offices.map(o => (
                <div key={o.city} style={{ padding: '20px 0', borderBottom: '1px solid #E6EAF0', display: 'grid', gridTemplateColumns: '130px 1fr', gap: 16, alignItems: 'start' }}>
                  <div>
                    <div style={{ fontFamily: 'Inter', fontSize: 17, fontWeight: 600, color: '#0A0F1A', letterSpacing: '-0.005em' }}>{o.city}</div>
                    <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E8753D', marginTop: 4 }}>{o.role}</div>
                  </div>
                  <div style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.55, color: '#56606E' }}>{o.detail}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 32, fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 12 }}>Active deployment regions</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {data.locations.deployments.map(d => (
                <span key={d} style={{ fontFamily: 'JetBrains Mono', fontSize: 12, letterSpacing: '0.04em', color: '#0A0F1A', border: '1px solid #D2D8E0', padding: '6px 10px' }}>{d}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AustraliaMap() {
  // Simplified stylized Australia outline + markers
  const pins = [
    { x: 165, y: 340, city: 'Perth' },
    { x: 265, y: 330, city: 'Kalgoorlie' },
    { x: 620, y: 330, city: 'Brisbane' },
    { x: 580, y: 420, city: 'Sydney' },
    { x: 540, y: 460, city: 'Melbourne', hq: true },
    { x: 450, y: 430, city: 'Adelaide' },
    { x: 260, y: 180, city: 'Pilbara' },
    { x: 570, y: 265, city: 'Bowen Basin' },
    { x: 595, y: 390, city: 'Hunter Valley' },
  ];
  return (
    <div style={{ background: '#FAFBFC', border: '1px solid #E6EAF0', padding: 32, position: 'relative' }}>
      <svg viewBox="0 0 800 520" style={{ width: '100%', height: 'auto', display: 'block' }}>
        {/* Stylized Australia outline */}
        <path
          d="M 140 210 Q 150 160 200 140 Q 260 120 310 130 Q 360 130 410 120 Q 470 115 520 125 Q 580 135 630 155 Q 680 180 700 215 Q 715 250 705 290 Q 695 340 660 380 Q 620 420 570 445 Q 520 470 470 475 Q 420 480 370 475 Q 320 470 280 450 Q 240 425 200 395 Q 165 360 145 315 Q 130 275 135 240 Q 138 220 140 210 Z"
          fill="#F3F5F8" stroke="#D2D8E0" strokeWidth="1.5"
        />
        {/* Tasmania */}
        <path d="M 500 495 Q 510 485 525 485 Q 540 487 545 500 Q 540 510 520 512 Q 505 510 500 495 Z" fill="#F3F5F8" stroke="#D2D8E0" strokeWidth="1.5"/>

        {/* State hints */}
        <text x="230" y="260" fontFamily="JetBrains Mono" fontSize="10" fill="#AAB3BF" letterSpacing="0.14em">WA</text>
        <text x="400" y="260" fontFamily="JetBrains Mono" fontSize="10" fill="#AAB3BF" letterSpacing="0.14em">NT / SA</text>
        <text x="580" y="250" fontFamily="JetBrains Mono" fontSize="10" fill="#AAB3BF" letterSpacing="0.14em">QLD</text>
        <text x="560" y="395" fontFamily="JetBrains Mono" fontSize="10" fill="#AAB3BF" letterSpacing="0.14em">NSW</text>
        <text x="505" y="455" fontFamily="JetBrains Mono" fontSize="10" fill="#AAB3BF" letterSpacing="0.14em">VIC</text>

        {/* Pins */}
        {pins.map((p, i) => (
          <g key={i}>
            {p.hq && <circle cx={p.x} cy={p.y} r="16" fill="rgba(232,117,61,0.18)"/>}
            <circle cx={p.x} cy={p.y} r={p.hq ? 7 : 4.5} fill={p.hq ? '#E8753D' : '#0A0F1A'}/>
            {p.hq && <circle cx={p.x} cy={p.y} r="3" fill="#fff"/>}
            <text x={p.x + 12} y={p.y + 4} fontFamily="Inter" fontWeight={p.hq ? 600 : 500} fontSize="12" fill="#0A0F1A">{p.city}{p.hq ? ' · HQ' : ''}</text>
          </g>
        ))}
      </svg>
      <div style={{ position: 'absolute', top: 16, right: 16, fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593' }}>Coverage map · stylized</div>
    </div>
  );
}

function DualCTA({ data }) {
  return (
    <section data-swap="CTAS" data-screen-label="About — CTAs" style={{ background: '#F3F5F8', padding: '96px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="ab-cta-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid #E6EAF0', background: '#E6EAF0' }}>
          {/* Work WITH us */}
          <div style={{ background: '#0A0F1A', color: '#fff', padding: '56px 48px 56px', position: 'relative', overflow: 'hidden' }}>
            <img src="assets/pattern-topo.svg" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.08, mixBlendMode: 'screen' }}/>
            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 14 }}>For customers</div>
              <h3 className="svc-cta__h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 36, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>{data.cta.workWith.h}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 15.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.8)', margin: '16px 0 28px', maxWidth: 440 }}>{data.cta.workWith.b}</p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
                <Button onClick={() => {}} size="lg">{data.cta.workWith.primary}</Button>
                <a href={`mailto:${data.cta.workWith.secondary}`} style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 500, color: '#FFB892', textDecoration: 'none', borderBottom: '1px solid currentColor', paddingBottom: 2 }}>
                  {data.cta.workWith.secondary}
                </a>
              </div>
            </div>
          </div>
          {/* Work FOR us */}
          <div style={{ background: '#fff', padding: '56px 48px 56px' }}>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 14 }}>Careers</div>
            <h3 className="svc-cta__h2" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 36, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#0A0F1A', margin: 0 }}>{data.cta.workFor.h}</h3>
            <p style={{ fontFamily: 'Inter', fontSize: 15.5, lineHeight: 1.6, color: '#3A424D', margin: '16px 0 28px', maxWidth: 440 }}>{data.cta.workFor.b}</p>
            <a href={`mailto:${data.cta.workFor.primary}`} style={{ fontFamily: 'Inter', fontSize: 15, fontWeight: 600, color: '#0A0F1A', background: '#F3F5F8', padding: '14px 20px', border: '1px solid #E6EAF0', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <Icons.Mail size={16}/> {data.cta.workFor.primary}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Breadcrumb({ items }) {
  return (
    <div className="svc-crumb" style={{ background: '#fff', borderBottom: '1px solid #E6EAF0', padding: '14px 40px', fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {items.map((b, i) => (
          <span key={i}>
            {i < items.length - 1 ? <a href="#" style={{ color: '#7B8593', textDecoration: 'none', borderBottom: '1px dotted #D2D8E0' }}>{b}</a> : <span style={{ color: '#0A0F1A' }}>{b}</span>}
            {i < items.length - 1 ? <span style={{ margin: '0 10px', color: '#D2D8E0' }}>/</span> : null}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ----- PAGE ----- */
function AboutPage() {
  const [modal, setModal] = React.useState(false);
  const openDemo = () => setModal(true);
  return (
    <>
      <Nav onRequestDemo={openDemo} onIndustry={() => {}}/>
      <Breadcrumb items={ABOUT.breadcrumb}/>
      <AboutHero data={ABOUT}/>
      <MissionVisionValues data={ABOUT}/>
      <Story data={ABOUT}/>
      <WhatWeDo data={ABOUT}/>
      {/* <Team data={ABOUT}/> */}
      {/* <Partners data={ABOUT}/> */}
      <Certifications data={ABOUT}/>
      <WhereWeOperate data={ABOUT}/>
      <DualCTA data={ABOUT}/>
      <Footer/>
      {modal && <InquiryModal onClose={() => setModal(false)}/>}
    </>
  );
}

window.AboutPage = AboutPage;
