/* ============================================================
   Robots page — AusMotion Robotics
   Lightweight catalogue. Browse the fleet by industry + form factor.
   Cards: name, image, 1-line tagline, 3 chips. No detail panel —
   each card links to the relevant industry page for context.
   ============================================================ */

const FLEET = [
  // QUADRUPED
  {
    id: 'spot', name: 'Spot', family: 'Boston Dynamics', formFactor: 'quadruped', image: 'assets/robot-spot.jpg',
    industries: ['mining', 'patrol'], status: 'available',
    tagline: 'The mining and inspection workhorse.',
    chips: ['IP54 · 32 kg', '14 kg payload', 'AS/NZS · 50 °C'],
    industryHref: 'Industry-Mining.html', accent: '#E8753D',
    badge: 'Most deployed',
  },
  {
    id: 'b2', name: 'B2 Industrial', family: 'Unitree', formFactor: 'quadruped', image: 'assets/robot-unitree-b2.jpg',
    industries: ['mining', 'patrol'], status: 'available',
    tagline: 'Heavy payload at fleet pricing.',
    chips: ['IP65 · 60 kg', '40 kg payload', '4–6 h runtime'],
    industryHref: 'Industry-Mining.html', accent: '#E8753D',
  },
  /* Commented out until image is supplied
  {
    id: 'anymal', name: 'ANYmal X', family: 'ANYbotics', formFactor: 'quadruped', image: 'assets/robot-anymal-x.jpg',
    industries: ['mining'], status: 'localized',
    tagline: 'ATEX-rated for hazardous zones.',
    chips: ['Ex II 2G', 'IP67 · 52 kg', '15 kg payload'],
    industryHref: 'Industry-Mining.html', accent: '#3F7BB8',
  },
  */
  // HUMANOID
  {
    id: 'g1', name: 'G1 Concierge', family: 'Unitree', formFactor: 'humanoid', image: 'assets/robot-unitree-g1.jpg',
    industries: ['hospitality'], status: 'available',
    tagline: 'Hospitality humanoid for venues and hotels.',
    chips: ['132 cm', 'AU-EN voice', 'Wayfinding'],
    industryHref: '#', accent: '#3F7BB8',
  },
  /* Commented out until image is supplied
  {
    id: 'h1', name: 'H1 Service', family: 'Unitree', formFactor: 'humanoid', image: 'assets/robot-unitree-h1.jpg',
    industries: ['hospitality'], status: 'pilot',
    tagline: 'Full-size humanoid for service & demonstration.',
    chips: ['180 cm', 'Pilot stage', 'Branded chassis'],
    industryHref: '#', accent: '#3F7BB8',
  },
  */
  // AMR — OEM partner placeholder, commented out until partnership is named
  /*
  {
    id: 'cobalt', name: 'CleanRunner C40', family: 'OEM partner', formFactor: 'amr',
    industries: ['cleaning'], status: 'available',
    tagline: 'Autonomous floor cleaner for commercial spaces.',
    chips: ['1,800 m²/h', '40 L tank', 'Site-mapped routes'],
    industryHref: '#', accent: '#5B7C99',
  },
  */
  // UAV
  /*
  {
    id: 'wingtra', name: 'WingScan-X', family: 'OEM partner', formFactor: 'uav',
    industries: ['coastal'], status: 'available',
    tagline: 'Long-endurance VTOL for coastal & broad-acre.',
    chips: ['4 h endurance', '180 km range', 'CASA · ReOC'],
    industryHref: '#', accent: '#3F7BB8',
  },
  */
  {
    id: 'matrice', name: 'M-350 Patrol', family: 'DJI', formFactor: 'uav', image: 'assets/robot-dji-m350.jpg',
    industries: ['patrol', 'coastal'], status: 'available',
    tagline: 'Multirotor for site perimeter & inspection.',
    chips: ['55 min', 'Autonomous dock', 'IP55'],
    industryHref: '#', accent: '#5B7C99',
  },
  // ASSISTIVE — OEM partner placeholders, commented out until partnerships are named
  /*
  {
    id: 'exo', name: 'AssistFrame E2', family: 'OEM partner', formFactor: 'assistive',
    industries: ['aged-care'], status: 'available',
    tagline: 'Lower-body exoskeleton for aged-care mobility.',
    chips: ['12 kg device', '6 h runtime', 'TGA Class IIa'],
    industryHref: '#', accent: '#7BAA8E',
  },
  {
    id: 'smartbed', name: 'CareRest Smart Bed', family: 'OEM partner', formFactor: 'assistive',
    industries: ['aged-care'], status: 'available',
    tagline: 'Pressure-sensing bed with turning assist.',
    chips: ['Auto-turning', 'Nurse-call', 'TGA listed'],
    industryHref: '#', accent: '#7BAA8E',
  },
  */
];

const INDUSTRY_FILTERS = [
  { id: 'all',         label: 'All industries' },
  { id: 'mining',      label: 'Mining & search' },
  { id: 'patrol',      label: 'Perimeter patrol' },
  { id: 'coastal',     label: 'Coastal surveillance' },
  { id: 'cleaning',    label: 'Commercial cleaning' },
  { id: 'hospitality', label: 'Hospitality' },
  { id: 'aged-care',   label: 'Aged care' },
];

const FORM_FILTERS = [
  { id: 'all',       label: 'All forms' },
  { id: 'quadruped', label: 'Quadruped' },
  { id: 'humanoid',  label: 'Humanoid' },
  { id: 'amr',       label: 'AMR' },
  { id: 'uav',       label: 'UAV' },
  { id: 'assistive', label: 'Assistive' },
];

const ROBOTS = {
  hero: {
    eyebrow: 'Robots',
    h1: 'The fleet we put to work in Australia.',
    lede: "Every platform on this page has been localized by our engineers — for AS/NZS standards, for 50 °C heat and red dust, for Australian English, and for the sites we'll deploy them on.",
  },
  faq: [
    { q: 'Are these the only platforms you can supply?', a: "These are the platforms we keep in active stock and have completed full localization on. We have a deeper relationship with several other OEMs — if you have a specific platform in mind that's not listed, ask us. We can usually supply it through a one-off localized procurement, or by adding it to the active fleet if there's recurring demand." },
    { q: 'What does "localized" actually mean?', a: "Six things: AS/NZS compliance review and remediation, thermal and dust validation, Australian English speech (where relevant), ACMA-compliant radio, on-prem cybersecurity hardening, and Australian-language documentation. The full list of what we change on each platform is on the localization page." },
    { q: 'Can I see one in person before deciding?', a: "Yes. Quadrupeds, humanoids, and AMRs run from our Perth and Brisbane workshops — we'll arrange a 1–2 hour session walking through the platform, payloads, and your use case. UAVs and exoskeletons we typically demonstrate on your site." },
    { q: 'How does pricing work?', a: "We don't list per-unit prices on the website. Real numbers move with payload selection, training scope, integration work, and site count — between rental and purchase, between two units and twenty. We send a fixed-price proposal within 5 business days of a scoping call." },
    { q: 'What if a platform fails on a remote site?', a: "We hold spares and replacement units in Perth, Brisbane, and Kalgoorlie. Most software issues resolve within shift via remote diagnostics; hardware swaps to a Tier-1 site are typically next business day, subject to access. SLAs are written into rental and support contracts." },
    { q: 'Do you sell to government and Defence?', a: "Yes. AusMotion is DISP-aligned, and a number of our platforms have been deployed under government programs. Defence and sensitive-government inquiries route via contact@ausmotion.com.au." },
  ],
  cta: {
    h: 'Pick a platform. Pilot it on your site.',
    sub: 'Most engagements start with a scoped pilot — four to six weeks, on a specific use case, on your real site. We bring the platform, training, and commissioning. You bring the problem.',
  },
};

/* ----- HERO ----- */
function RobotsHero({ data }) {
  return (
    <section data-screen-label="Robots — Hero" style={{ position: 'relative', background: '#0A0F1A', overflow: 'hidden' }}>
      <img src="assets/pattern-topo.svg" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.12, mixBlendMode: 'screen' }}/>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 80% at 85% 30%, rgba(232,117,61,0.20), transparent 60%)' }}/>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '120px 40px 80px', position: 'relative' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 16 }}>{data.hero.eyebrow}</div>
        <h1 className="rbt-hero__h1" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 72, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.02, color: '#fff', margin: 0, maxWidth: 1040 }}>{data.hero.h1}</h1>
        <p className="rbt-hero__lede" style={{ fontFamily: 'Inter', fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.82)', margin: '28px 0 0', maxWidth: 760 }}>{data.hero.lede}</p>
      </div>
    </section>
  );
}

/* ----- FILTER BAR + GRID ----- */
function FleetCatalogue({ industry, setIndustry, form, setForm, fleet }) {
  const total = FLEET.length;
  return (
    <section data-screen-label="Robots — Catalogue" id="fleet" style={{ background: '#FAFBFC', padding: '80px 40px 120px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>

        {/* Filter bar */}
        <div className="rbt-filterbar" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, padding: '28px 0', borderTop: '1px solid #E6EAF0', borderBottom: '1px solid #E6EAF0', marginBottom: 36 }}>
          <FilterRow label="Industry" filters={INDUSTRY_FILTERS} value={industry} onChange={setIndustry}/>
          <FilterRow label="Form factor" filters={FORM_FILTERS} value={form} onChange={setForm}/>
        </div>

        {/* Result count */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, letterSpacing: '0.06em', color: '#56606E' }}>
            Showing <span style={{ color: '#0A0F1A', fontWeight: 600 }}>{fleet.length}</span> of {total} platforms
            {(industry !== 'all' || form !== 'all') && (
              <button onClick={() => { setIndustry('all'); setForm('all'); }} style={{
                marginLeft: 16, background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.10em', textTransform: 'uppercase',
                color: '#E8753D', padding: 0, borderBottom: '1px solid currentColor',
              }}>Clear filters</button>
            )}
          </div>
        </div>

        {/* Grid */}
        <div className="rbt-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {fleet.map(p => <PlatformCard key={p.id} p={p}/>)}
        </div>

        {fleet.length === 0 && (
          <div style={{ padding: 80, textAlign: 'center', fontFamily: 'Inter', color: '#56606E', border: '1px dashed #D2D8E0', background: '#fff' }}>
            No platforms match this filter. <button onClick={() => { setIndustry('all'); setForm('all'); }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#E8753D', fontWeight: 600, padding: 0, borderBottom: '1px solid currentColor' }}>Clear filters</button>
          </div>
        )}
      </div>
    </section>
  );
}

function FilterRow({ label, filters, value, onChange }) {
  return (
    <div>
      <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 12 }}>{label}</div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {filters.map(f => {
          const active = value === f.id;
          return (
            <button key={f.id} onClick={() => onChange(f.id)} style={{
              padding: '7px 12px', fontFamily: 'Inter', fontSize: 13, fontWeight: 500, cursor: 'pointer',
              background: active ? '#0A0F1A' : 'transparent',
              color: active ? '#fff' : '#0A0F1A',
              border: active ? '1px solid #0A0F1A' : '1px solid #D2D8E0',
              transition: 'all 140ms',
            }}>{f.label}</button>
          );
        })}
      </div>
    </div>
  );
}

function PlatformCard({ p }) {
  const statusColor = p.status === 'available' ? '#1F7A4F' : p.status === 'localized' ? '#3F7BB8' : '#B8801F';
  const statusBg    = p.status === 'available' ? '#E8F4ED' : p.status === 'localized' ? '#E8F0F7' : '#F7EFE0';
  const statusLabel = p.status === 'available' ? 'In active fleet' : p.status === 'localized' ? 'Localization complete' : 'Pilot stage';
  return (
    <a href={p.industryHref} style={{
      display: 'flex', flexDirection: 'column', textDecoration: 'none', color: '#0A0F1A',
      background: '#fff', border: '1px solid #E6EAF0', transition: 'border-color 180ms, transform 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'; }}>
      {/* Photo */}
      <div style={{ position: 'relative', aspectRatio: '4/3', background: '#0A0F1A', overflow: 'hidden' }}>
        <img src={p.image || 'assets/photo-placeholder.svg'} alt={p.name}
             onError={(e) => { e.currentTarget.src = 'assets/photo-placeholder.svg'; e.currentTarget.style.opacity = 0.85; }}
             style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: p.image ? 1 : 0.85 }}/>
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${p.accent}22 0%, transparent 60%)` }}/>
        <div style={{ position: 'absolute', left: 14, bottom: 14, fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.92)', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)', padding: '4px 9px' }}>
          {p.family}
        </div>
        {p.badge && <div style={{ position: 'absolute', right: 14, top: 14, fontFamily: 'JetBrains Mono', fontSize: 9, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#0A0F1A', background: '#FFB892', padding: '4px 9px' }}>{p.badge}</div>}
      </div>

      {/* Body */}
      <div style={{ padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        {/* Status */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: statusColor, background: statusBg, padding: '3px 7px', alignSelf: 'flex-start', marginBottom: 12 }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: statusColor }}/>{statusLabel}
        </div>

        {/* Name + tagline */}
        <div style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>{p.name}</div>
        <div style={{ fontFamily: 'Inter', fontSize: 14, color: '#56606E', marginTop: 4, marginBottom: 16, lineHeight: 1.4 }}>{p.tagline}</div>

        {/* Chips */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 'auto' }}>
          {p.chips.map((c, i) => (
            <span key={i} style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.04em', color: '#0A0F1A', background: '#F3F5F8', padding: '5px 9px' }}>{c}</span>
          ))}
        </div>
      </div>
    </a>
  );
}

/* ----- LOCALIZATION STRIP (compact) ----- */
function LocalizationStrip() {
  const items = [
    { t: 'AS/NZS compliance', icon: 'Shield' },
    { t: 'Thermal validation · 55 °C', icon: 'Thermometer' },
    { t: 'Dust & water sealing', icon: 'Droplet' },
    { t: 'Australian English voice', icon: 'Languages' },
    { t: 'ACMA spectrum & radio', icon: 'Radio' },
    { t: 'Essential Eight cyber', icon: 'Lock' },
  ];
  return (
    <section data-screen-label="Robots — Localization strip" style={{ background: '#fff', padding: '80px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }} className="rbt-loc">
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>Every platform</div>
            <h2 className="rbt-h2" style={{ fontFamily: 'Inter', fontSize: 34, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.12, color: '#0A0F1A', margin: 0 }}>Goes through the same six checks before it ships to your site.</h2>
            <a href="Service-Localization.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 24, fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: '#355A78', textDecoration: 'none', borderBottom: '1px solid currentColor', paddingBottom: 2 }}>
              Read the full localization spec <span aria-hidden="true">→</span>
            </a>
          </div>
          <div className="rbt-loc-items" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid #E6EAF0' }}>
            {items.map((it, i) => {
              const Icon = (window.Icons && Icons[it.icon]) ? Icons[it.icon] : null;
              return (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14, padding: '20px 22px',
                  borderRight: i % 2 === 0 ? '1px solid #E6EAF0' : 'none',
                  borderBottom: i < 4 ? '1px solid #E6EAF0' : 'none',
                  background: '#fff',
                }}>
                  <div style={{ width: 36, height: 36, border: '1px solid #E6EAF0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#E8753D', flexShrink: 0 }}>
                    {Icon ? <Icon size={18}/> : <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#E8753D' }}>{String(i + 1).padStart(2, '0')}</span>}
                  </div>
                  <div style={{ fontFamily: 'Inter', fontSize: 15, fontWeight: 500, color: '#0A0F1A' }}>{it.t}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- CUSTOM PLATFORMS ----- */
function CustomPlatforms() {
  return (
    <section data-screen-label="Robots — Custom" style={{ background: '#FAFBFC', padding: '96px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="rbt-custom-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>Don't see what you need?</div>
            <h2 className="rbt-h2" style={{ fontFamily: 'Inter', fontSize: 34, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.12, color: '#0A0F1A', margin: 0 }}>Custom-configured platforms.</h2>
            <p style={{ fontFamily: 'Inter', fontSize: 16, lineHeight: 1.65, color: '#3A424D', marginTop: 18 }}>The fleet above covers most of what we get asked for. When the use case needs something specific — a payload that isn't shelf-stocked, an OEM relationship that isn't on our active list, integration with a system the OEM doesn't natively support — we can build it.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Sensor and payload integration (gas, acoustic, multispectral, RF)',
                'Custom autonomy stacks for proprietary site systems',
                'OT and industrial-protocol bridging (Modbus, OPC-UA, MQTT)',
                'OEM relationships beyond our standard catalogue',
              ].map((l, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, fontFamily: 'Inter', fontSize: 15, color: '#0A0F1A' }}>
                  <span style={{ color: '#E8753D', flexShrink: 0, marginTop: 3, fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 700 }}>0{i + 1}</span>
                  {l}
                </li>
              ))}
            </ul>
            <Button href="Contact.html">Talk to integration team</Button>
          </div>
          <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', background: '#0A0F1A' }}>
            <img src="assets/robots-custom.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }}/>
            <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(232,117,61,0.18) 0%, transparent 60%)' }}/>
            <div style={{ position: 'absolute', left: 24, bottom: 24, color: '#fff', maxWidth: 360 }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 8 }}>Engineered by AusMotion</div>
              <div style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, lineHeight: 1.25 }}>Bespoke integrations, scoped to your use case.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- FAQ ----- */
function RobotsFAQ({ data }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section data-screen-label="Robots — FAQ" style={{ background: '#fff', padding: '96px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>Common questions</div>
        <h2 className="rbt-h2" style={{ fontFamily: 'Inter', fontSize: 34, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.12, color: '#0A0F1A', margin: 0 }}>About the fleet.</h2>
        <div style={{ marginTop: 40, borderTop: '1px solid #E6EAF0' }}>
          {data.faq.map((f, i) => (
            <div key={i} style={{ borderBottom: '1px solid #E6EAF0' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
                padding: '22px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
                fontFamily: 'Inter', fontSize: 17, fontWeight: 600, color: '#0A0F1A', letterSpacing: '-0.005em',
              }}>
                <span style={{ paddingRight: 24 }}>{f.q}</span>
                <span style={{ flex: '0 0 auto', transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 180ms', fontSize: 22, color: '#E8753D', lineHeight: 1 }}>+</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 24, fontFamily: 'Inter', fontSize: 15.5, lineHeight: 1.65, color: '#3A424D', maxWidth: 760 }}>{f.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- CTA ----- */
function RobotsCTA({ data }) {
  return (
    <section data-screen-label="Robots — CTA" style={{ position: 'relative', background: '#0A0F1A', color: '#fff', overflow: 'hidden', padding: '120px 40px' }}>
      <img src="assets/pattern-topo.svg" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.10, mixBlendMode: 'screen' }}/>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232,117,61,0.18), transparent 60%)' }}/>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'Inter', fontSize: 56, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.05, margin: 0, textWrap: 'balance' }}>{data.cta.h}</h2>
        <p style={{ fontFamily: 'Inter', fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: '20px auto 36px', maxWidth: 700 }}>{data.cta.sub}</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button size="lg" href="Contact.html">Request a demo</Button>
          <Button size="lg" variant="secondary" href="Service-Rental.html" style={{ background: 'transparent', borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}>Explore rental</Button>
        </div>
      </div>
    </section>
  );
}

/* ----- BREADCRUMB ----- */
function Breadcrumb({ items }) {
  return (
    <div className="rbt-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={i === 0 ? 'Homepage.html' : '#'} 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 RobotsPage() {
  const [industry, setIndustry] = React.useState('all');
  const [form, setForm] = React.useState('all');

  const fleet = FLEET.filter(p => {
    const indOk = industry === 'all' || p.industries.includes(industry);
    const formOk = form === 'all' || p.formFactor === form;
    return indOk && formOk;
  });

  return (
    <>
      <Nav onRequestDemo={() => window.location.href = 'Contact.html'} onIndustry={() => {}}/>
      <Breadcrumb items={['Home', 'Robots']}/>
      <RobotsHero data={ROBOTS}/>
      <FleetCatalogue industry={industry} setIndustry={setIndustry} form={form} setForm={setForm} fleet={fleet}/>
      <LocalizationStrip/>
      <CustomPlatforms/>
      <RobotsFAQ data={ROBOTS}/>
      <RobotsCTA data={ROBOTS}/>
      <Footer/>
    </>
  );
}

window.RobotsPage = RobotsPage;